changeset 2643:27933e66e848

client: gauges: use isrs_code as unique id for gauges
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 13:11:22 +0100
parents ffef5f89b31c
children 50cfb12a54a4
files client/src/components/gauge/Gauges.vue client/src/store/gauges.js client/src/store/map.js
diffstat 3 files changed, 32 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue	Thu Mar 14 12:40:52 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Thu Mar 14 13:11:22 2019 +0100
@@ -20,7 +20,7 @@
         </div>
         <select
           @change="moveToGauge"
-          v-model="selectedGaugeName"
+          v-model="selectedGaugeISRS"
           class="form-control font-weight-bold"
         >
           <option :value="null">
@@ -28,13 +28,13 @@
           </option>
           <option
             v-for="g in gauges"
-            :key="g.properties.objname"
-            :value="g.properties.objname"
+            :key="g.properties.isrs_code"
+            :value="g.properties.isrs_code"
           >
-            {{ g.properties.objname }}
+            {{ gaugeLabel(g) }}
           </option>
         </select>
-        <div v-if="selectedGaugeName" class="mt-2">
+        <div v-if="selectedGaugeISRS" class="mt-2">
           <hr class="mb-1" />
           <small class="text-muted">
             <translate>Time period</translate>:
@@ -103,12 +103,12 @@
     ...mapState("application", ["showGauges"]),
     ...mapState("gauges", ["gauges"]),
     ...mapGetters("gauges", ["selectedGauge"]),
-    selectedGaugeName: {
+    selectedGaugeISRS: {
       get() {
-        return this.$store.state.gauges.selectedGaugeName;
+        return this.$store.state.gauges.selectedGaugeISRS;
       },
-      set(name) {
-        this.$store.dispatch("gauges/selectedGaugeName", name);
+      set(isrs) {
+        this.$store.dispatch("gauges/selectedGaugeISRS", isrs);
       }
     }
   },
@@ -129,10 +129,13 @@
       let splitscreenConf = {
         id: "gauge-waterlevel",
         component: "waterlevel",
-        title: this.$gettext("Waterlevel") + ": " + this.selectedGaugeName,
+        title:
+          this.$gettext("Waterlevel") +
+          ": " +
+          this.gaugeLabel(this.selectedGauge),
         icon: "ruler-vertical",
         closeCallback: () => {
-          this.$store.commit("gauges/selectedGaugeName", null);
+          this.$store.commit("gauges/selectedGaugeISRS", null);
           this.$store.commit("gauges/waterlevels", []);
         },
         expandCallback: () => {
@@ -154,6 +157,13 @@
           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() {
--- a/client/src/store/gauges.js	Thu Mar 14 12:40:52 2019 +0100
+++ b/client/src/store/gauges.js	Thu Mar 14 13:11:22 2019 +0100
@@ -17,7 +17,7 @@
 const init = () => {
   return {
     gauges: [],
-    selectedGaugeName: null,
+    selectedGaugeISRS: null,
     waterlevels: [],
     loading: false
   };
@@ -30,7 +30,7 @@
   getters: {
     selectedGauge: state => {
       return state.gauges.find(
-        g => g.properties.objname === state.selectedGaugeName
+        g => g.properties.isrs_code === state.selectedGaugeISRS
       );
     }
   },
@@ -38,8 +38,8 @@
     gauges: (state, gauges) => {
       state.gauges = gauges;
     },
-    selectedGaugeName: (state, name) => {
-      state.selectedGaugeName = name;
+    selectedGaugeISRS: (state, isrs) => {
+      state.selectedGaugeISRS = isrs;
     },
     waterlevels: (state, data) => {
       state.waterlevels = data;
@@ -49,8 +49,8 @@
     }
   },
   actions: {
-    selectedGaugeName: ({ commit }, name) => {
-      commit("selectedGaugeName", name);
+    selectedGaugeISRS: ({ commit }, isrs) => {
+      commit("selectedGaugeISRS", isrs);
       commit("application/showGauges", true, { root: true });
       commit("application/showSplitscreen", false, { root: true });
     },
@@ -84,7 +84,7 @@
     },
     loadWaterlevels({ state, commit }, timePeriod) {
       return new Promise(resolve => {
-        if (state.selectedGaugeName && timePeriod) {
+        if (state.selectedGaugeISRS && timePeriod) {
           // generate some demo values
           setTimeout(() => {
             let data = [];
--- a/client/src/store/map.js	Thu Mar 14 12:40:52 2019 +0100
+++ b/client/src/store/map.js	Thu Mar 14 13:11:22 2019 +0100
@@ -794,12 +794,12 @@
                 // get selected gauge
                 if (/^gauges/.test(id)) {
                   if (
-                    rootState.gauges.selectedGaugeName !==
-                    feature.get("objname")
+                    rootState.gauges.selectedGaugeISRS !==
+                    feature.get("isrs_code")
                   ) {
                     dispatch(
-                      "gauges/selectedGaugeName",
-                      feature.get("objname"),
+                      "gauges/selectedGaugeISRS",
+                      feature.get("isrs_code"),
                       {
                         root: true
                       }