Mercurial > gemma
view client/src/components/gauge/Gauges.vue @ 2644:50cfb12a54a4
client: gauges: fixed bug with panning to gauge...
...when diagram is expanded after collapsing it and then chosing another gauge
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 13:16:43 +0100 |
parents | 27933e66e848 |
children | cc3eee8b5d71 |
line wrap: on
line source
<template> <div :class="[ 'box ui-element rounded bg-white text-nowrap', { expanded: showGauges } ]" > <div style="width: 18rem"> <UIBoxHeader icon="ruler-vertical" title="Gauges" :closeCallback="close" /> <div class="box-body"> <div class="loading d-flex justify-content-center align-items-center" v-if="loading" > <font-awesome-icon icon="spinner" spin /> </div> <select @change="moveToGauge" v-model="selectedGaugeISRS" class="form-control font-weight-bold" > <option :value="null"> <translate>Select Gauge</translate> </option> <option v-for="g in gauges" :key="g.properties.isrs_code" :value="g.properties.isrs_code" > {{ gaugeLabel(g) }} </option> </select> <div v-if="selectedGaugeISRS" class="mt-2"> <hr class="mb-1" /> <small class="text-muted"> <translate>Time period</translate>: </small> <select v-model="waterlevelsTimePeriod" class="form-control form-control-sm mb-2" > <option value="day">last day</option> <option value="week">last week</option> <option value="month">last month</option> <option value="year">last year</option> </select> <button @click="showWaterlevelDiagram()" class="btn btn-sm btn-info d-block w-100" > <translate>Show Waterlevels</translate> </button> <hr /> <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled> <translate>Show Hydrological Conditions</translate> </button> </div> </div> </div> </div> </template> <style lang="scss" scoped> .loading { background: rgba(255, 255, 255, 0.9); position: absolute; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; } </style> <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, mapGetters } from "vuex"; export default { data() { return { loading: false, waterlevelsTimePeriod: "day" }; }, computed: { ...mapState("application", ["showGauges"]), ...mapState("gauges", ["gauges"]), ...mapGetters("gauges", ["selectedGauge"]), selectedGaugeISRS: { get() { return this.$store.state.gauges.selectedGaugeISRS; }, set(isrs) { this.$store.dispatch("gauges/selectedGaugeISRS", isrs); } } }, methods: { close() { this.$store.commit("application/showGauges", false); }, moveToGauge() { if (!this.selectedGauge) return; this.$store.commit("map/moveToExtent", { feature: this.selectedGauge, zoom: 17, preventZoomOut: true }); }, showWaterlevelDiagram() { // for panning the map to the gauge on opening the diagram: needs to be // set outside of the expandCallback to not always refer to the currently // selectedGauge let coordinates = this.selectedGauge.geometry.coordinates; // configure splitscreen let splitscreenConf = { id: "gauge-waterlevel", component: "waterlevel", title: this.$gettext("Waterlevel") + ": " + this.gaugeLabel(this.selectedGauge), icon: "ruler-vertical", closeCallback: () => { this.$store.commit("gauges/selectedGaugeISRS", null); this.$store.commit("gauges/waterlevels", []); }, expandCallback: () => { this.$store.commit("map/moveMap", { coordinates, zoom: 17, preventZoomOut: true }); } }; this.$store.commit("application/addSplitscreen", splitscreenConf); this.$store.commit("application/activeSplitscreenId", splitscreenConf.id); this.$store.commit("application/splitscreenLoading", true); this.loading = true; this.$store.commit("application/showSplitscreen", true); this.$store .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod) .then(() => { this.$store.commit("application/splitscreenLoading", false); this.loading = false; }); }, gaugeLabel(gauge) { let details = gauge.id .split(".")[1] .replace(/[()]/g, "") .split(","); return `${gauge.properties.objname} (${details[3]})`; } }, mounted() { this.$store.dispatch("gauges/loadGauges"); } }; </script>