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
           });