changeset 2712:0ac077897ce5

client: Gauges dialog: ordered gauge list by country code
author Markus Kottlaender <markus@intevation.de>
date Mon, 18 Mar 2019 17:37:24 +0100
parents 3956de9b6b32
children b79f5c5404c2
files client/src/components/gauge/Gauges.vue
diffstat 1 files changed, 36 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue	Mon Mar 18 17:20:02 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Mon Mar 18 17:37:24 2019 +0100
@@ -26,13 +26,19 @@
           <option :value="null">
             <translate>Select Gauge</translate>
           </option>
-          <option
-            v-for="g in gauges"
-            :key="g.properties.isrs_code"
-            :value="g.properties.isrs_code"
+          <optgroup
+            v-for="(gaugesForCountry, cc) in orderedGauges"
+            :key="cc"
+            :label="cc"
           >
-            {{ gaugeLabel(g) }}
-          </option>
+            <option
+              v-for="g in gaugesForCountry"
+              :key="g.properties.isrs_code"
+              :value="g.properties.isrs_code"
+            >
+              {{ gaugeLabel(g) }}
+            </option>
+          </optgroup>
         </select>
         <div v-if="selectedGaugeISRS" class="mt-2">
           <hr class="mb-1" />
@@ -111,6 +117,18 @@
     ...mapState("application", ["showGauges", "activeSplitscreenId"]),
     ...mapState("gauges", ["gauges"]),
     ...mapGetters("gauges", ["selectedGauge"]),
+    orderedGauges() {
+      let orderedGauges = {};
+      this.gauges.forEach(g => {
+        let isrsInfo = this.isrsInfo(g);
+        if (orderedGauges.hasOwnProperty(isrsInfo.countryCode)) {
+          orderedGauges[isrsInfo.countryCode].push(g);
+        } else {
+          orderedGauges[isrsInfo.countryCode] = [g];
+        }
+      });
+      return orderedGauges;
+    },
     selectedGaugeISRS: {
       get() {
         return this.$store.state.gauges.selectedGaugeISRS;
@@ -202,11 +220,21 @@
         });
     },
     gaugeLabel(gauge) {
-      let details = gauge.id
+      return `${gauge.properties.objname} (${this.isrsInfo(gauge).orc})`;
+    },
+    isrsInfo(gauge) {
+      let isrsInfo = gauge.id
         .split(".")[1]
         .replace(/[()]/g, "")
         .split(",");
-      return `${gauge.properties.objname} (${details[3]})`;
+
+      return {
+        countryCode: isrsInfo[0],
+        loCode: isrsInfo[1],
+        fairwaySection: isrsInfo[2],
+        orc: isrsInfo[3],
+        hectometre: isrsInfo[4]
+      };
     }
   },
   mounted() {