Mercurial > gemma
diff client/src/components/gauge/Gauges.vue @ 2604:85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 12 Mar 2019 17:08:07 +0100 |
parents | 5fa1ad39e1bc |
children | ffef5f89b31c |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/components/gauge/Gauges.vue Tue Mar 12 17:08:07 2019 +0100 @@ -20,7 +20,7 @@ </div> <select @change="moveToGauge" - v-model="selectedGauge" + v-model="selectedGaugeName" class="form-control font-weight-bold" > <option :value="null"> @@ -34,7 +34,7 @@ {{ g.properties.objname }} </option> </select> - <div v-if="selectedGauge" class="mt-2"> + <div v-if="selectedGaugeName" class="mt-2"> <hr class="mb-1" /> <small class="text-muted"> <translate>Time period</translate>: @@ -90,7 +90,7 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { data() { @@ -101,13 +101,14 @@ }, computed: { ...mapState("application", ["showGauges"]), - ...mapState("gauges", ["gauges", "selectedGauge"]), - selectedGauge: { + ...mapState("gauges", ["gauges"]), + ...mapGetters("gauges", ["selectedGauge"]), + selectedGaugeName: { get() { - return this.$store.state.gauges.selectedGauge; + return this.$store.state.gauges.selectedGaugeName; }, set(name) { - this.$store.dispatch("gauges/selectedGauge", name); + this.$store.dispatch("gauges/selectedGaugeName", name); } } }, @@ -116,34 +117,27 @@ this.$store.commit("application/showGauges", false); }, moveToGauge() { - let gauge = this.gauges.find( - g => g.properties.objname === this.selectedGauge - ); - if (!gauge) return; + if (!this.selectedGauge) return; this.$store.commit("map/moveToExtent", { - feature: gauge, + feature: this.selectedGauge, zoom: 17, preventZoomOut: true }); }, showWaterlevelDiagram() { - let gauge = this.gauges.find( - g => g.properties.objname === this.selectedGauge - ); - // configure splitscreen let splitscreenConf = { id: "gauge-waterlevel", component: "waterlevel", - title: this.selectedGauge, + title: this.selectedGaugeName, icon: "ruler-vertical", closeCallback: () => { - this.$store.commit("gauges/selectedGauge", null); + this.$store.commit("gauges/selectedGaugeName", null); this.$store.commit("gauges/waterlevels", []); }, expandCallback: () => { this.$store.commit("map/moveMap", { - coordinates: gauge.geometry.coordinates, + coordinates: this.selectedGauge.geometry.coordinates, zoom: 17, preventZoomOut: true });