Mercurial > gemma
diff client/src/bottlenecks/Bottlenecks.vue @ 1055:1ff8c072df18
WIP: Bottleneck list/table
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 25 Oct 2018 15:05:20 +0200 |
parents | |
children | c9badb264d16 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/bottlenecks/Bottlenecks.vue Thu Oct 25 15:05:20 2018 +0200 @@ -0,0 +1,125 @@ +<template> + <div :class="bottlenecksStyle"> + <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks"> + <i class="fa fa-close"></i> + </div> + + <div v-if="!this.bottlenecksCollapsed"> + <h4>Bottlenecks</h4> + <hr class="mb-0"> + <div style="max-height: 500px; overflow-y: scroll"> + <table class="table text-left mb-0" style="margin-top: -1px;"> + <tr v-for="(bottleneck, index) in bottlenecks"> + <td> + <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> + {{ bottleneck.name }} + </a> + </td> + </tr> + </table> + </div> + </div> + </div> +</template> + +<script> +/* + * This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus.kottlaender@intevation.de> + */ +import { mapState } from "vuex"; +import { fromLonLat } from "ol/proj"; + +export default { + name: "bottlenecks", + computed: { + ...mapState("application", ["bottlenecksCollapsed"]), + ...mapState("bottlenecks", ["bottlenecks"]), + ...mapState("mapstore", ["openLayersMap"]), + bottlenecksStyle() { + return { + "ui-element": true, + bottlenecks: true, + overlay: true, + bottleneckscollapsed: this.bottlenecksCollapsed, + bottlenecksextended: !this.bottlenecksCollapsed, + shadow: true + }; + } + }, + methods: { + // TODO: make this central, duplicates code from application/Topbar.vue + moveToBottleneck(bottleneck) { + if (bottleneck.geom.type == "Point") { + let view = this.openLayersMap.getView(); + const currentZoom = view.getZoom(); + const newZoom = Math.max(17, currentZoom); + view.animate( + { + zoom: newZoom, + center: fromLonLat( + bottleneck.geom.coordinates, + view.getProjection() + ) + }, + 700 + ); + } + this.$store.commit("application/toggleBottlenecks"); + } + }, + mounted() { + this.$store.dispatch("bottlenecks/loadBottlenecks"); + } +}; +</script> + +<style lang="scss"> +.bottlenecks { + position: absolute; + z-index: -2; + top: $offset; + left: 64px; + background-color: #ffffff; + padding-top: $offset; + opacity: $slight-transparent; + border-radius: $border-radius; +} + +.bottleneckscollapsed { + width: 0; + height: 0; + transition: $transition-fast; +} + +.bottlenecksextended { + min-height: $sidebar-height; + width: 500px +} + +.close-bottlenecks { + position: absolute; + z-index: 2; + right: 0; + top: 7px; + border-radius: $border-radius; + height: $icon-width; + width: $icon-height; + display: none; +} + +.bottlenecksextended .close-bottlenecks { + display: block; +} + +</style>