diff client/src/components/identify/Identify.vue @ 5667:57af2b37a37e clickable-links

Make reference gauge clickable
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 05 Dec 2023 17:29:07 +0100
parents 77b6d1002e73
children
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Tue Dec 05 15:34:31 2023 +0100
+++ b/client/src/components/identify/Identify.vue	Tue Dec 05 17:29:07 2023 +0100
@@ -162,13 +162,13 @@
               v-if="prop.val"
               class="d-flex justify-content-between px-2"
             >
-              <template v-if="prop.key != 'gauge_objname'">
+              <template v-if="prop.key != 'gauge objname'">
                 <b>{{ prop.key }}</b>
                 <span>{{ prop.val }}</span>
               </template>
               <template v-else>
                 <b><translate>Reference Gauge</translate></b>
-                <a>{{ prop.val }}</a>
+                <a @click="selectGauge(prop.val)" href="#">{{ prop.val }}</a>
               </template>
             </small>
           </div>
@@ -324,9 +324,18 @@
     ...mapState("application", ["showIdentify", "userManualUrl", "config"]),
     ...mapGetters("map", ["filteredIdentifiedFeatures"]),
     ...mapState("map", ["currentMeasurement"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("gauges", ["gauges"]),
     ...mapGetters("user", ["isWaterwayAdmin", "isSysAdmin"]),
     ...mapState("importschedule", ["availableReports"]),
+    gaugesLookUp: {
+      get() {
+        return this.gauges.reduce((o, gauge) => {
+          o[gauge.properties.objname] = gauge;
+          return o;
+        }, {});
+      }
+    },
     DQLDownloadAllowed() {
       if (this.loadingDQL) return false;
       return this.isWaterwayAdmin || this.isSysAdmin;
@@ -439,6 +448,22 @@
     }
   },
   methods: {
+    selectGauge(gauge_name) {
+      const gauge = this.gaugesLookUp[gauge_name];
+      const zoom = 16;
+      this.openLayersMap()
+        .getLayer("GAUGES")
+        .setVisible(true);
+      this.$store.dispatch(
+        "gauges/setSelectedGaugeISRS",
+        gauge.properties.isrs_code
+      );
+      this.$store.dispatch("map/moveMap", {
+        coordinates: gauge.geometry.coordinates,
+        zoom,
+        preventZoomOut: true
+      });
+    },
     downloadDataQualityReport(reportName) {
       this.loadingDQL = true;
       HTTP.get(`/data/report/${reportName}`, {