# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1701793747 -3600
# Node ID 57af2b37a37e3f78623f8016c50c04d09908e880
# Parent  37c2354a60245bf62f7483ae87c047c279e9b494
Make reference gauge clickable

diff -r 37c2354a6024 -r 57af2b37a37e client/src/components/identify/Identify.vue
--- 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}`, {
diff -r 37c2354a6024 -r 57af2b37a37e client/src/components/importoverview/LogItem.vue
--- a/client/src/components/importoverview/LogItem.vue	Tue Dec 05 15:34:31 2023 +0100
+++ b/client/src/components/importoverview/LogItem.vue	Tue Dec 05 17:29:07 2023 +0100
@@ -66,6 +66,7 @@
   props: ["height", "line", "index"],
   computed: {
     ...mapGetters("bottlenecks", ["bottlenecksForDisplay"]),
+    ...mapGetters("map", ["openLayersMap"]),
     bottlenecksLookup: {
       get() {
         return this.bottlenecksForDisplay.reduce((o, bn) => {
@@ -84,6 +85,9 @@
   methods: {
     showBottleneck(bottleneck_id) {
       const bottleneck = this.bottlenecksLookup[bottleneck_id];
+      this.openLayersMap()
+        .getLayer("BOTTLENECKS")
+        .setVisible(true);
       this.$store
         .dispatch(
           "bottlenecks/setSelectedBottleneck",