Mercurial > gemma
view 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 source
<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>