# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1569423160 -7200
# Node ID 51dc4811a0e67b41b3d5b4b9e7ecce9e9469f48b
# Parent  3724298001f82982cf24e92847a45fa933cbacd9
Gauges: Instead of dynamically scroll use crosshairs button

diff -r 3724298001f8 -r 51dc4811a0e6 client/src/components/gauge/Gauges.vue
--- a/client/src/components/gauge/Gauges.vue	Wed Sep 25 16:11:23 2019 +0200
+++ b/client/src/components/gauge/Gauges.vue	Wed Sep 25 16:52:40 2019 +0200
@@ -13,27 +13,32 @@
       />
       <div class="box-body">
         <UISpinnerOverlay v-if="loading" />
-        <select
-          v-model="selectedGaugeISRS"
-          class="form-control font-weight-bold"
-        >
-          <option :value="null">
-            <translate>Select Gauge</translate>
-          </option>
-          <optgroup
-            v-for="(gaugesForCountry, cc) in orderedGauges"
-            :key="cc"
-            :label="cc"
+        <div class="d-flex">
+          <select
+            v-model="selectedGaugeISRS"
+            class="form-control font-weight-bold"
           >
-            <option
-              v-for="g in gaugesForCountry"
-              :key="g.properties.isrs_code"
-              :value="g.properties.isrs_code"
+            <option :value="null">
+              <translate>Select Gauge</translate>
+            </option>
+            <optgroup
+              v-for="(gaugesForCountry, cc) in orderedGauges"
+              :key="cc"
+              :label="cc"
             >
-              {{ gaugeLabel(g) }}
-            </option>
-          </optgroup>
-        </select>
+              <option
+                v-for="g in gaugesForCountry"
+                :key="g.properties.isrs_code"
+                :value="g.properties.isrs_code"
+              >
+                {{ gaugeLabel(g) }}
+              </option>
+            </optgroup>
+          </select>
+          <button @click="takeMeThere" class="btn btn-sm btn-info">
+            <font-awesome-icon icon="crosshairs" />
+          </button>
+        </div>
         <div v-if="selectedGaugeISRS" class="mt-2">
           <hr class="mb-1" />
           <div class="row no-gutters mb-2">
@@ -145,7 +150,7 @@
         return this.$store.state.gauges.selectedGaugeISRS;
       },
       set(isrs) {
-        this.$store.dispatch("gauges/selectedGaugeISRS", isrs);
+        this.$store.dispatch("gauges/setSelectedGaugeISRS", isrs);
       }
     },
     dateFrom: {
@@ -175,19 +180,20 @@
   },
   watch: {
     selectedGaugeISRS(gauge) {
-      if (gauge) {
-        let coordinates = this.selectedGauge.geometry.coordinates;
-        this.$store.dispatch("map/moveMap", {
-          coordinates,
-          zoom: 15,
-          preventZoomOut: true
-        });
-      } else {
+      if (!gauge) {
         this.$store.commit("application/paneSetup", "DEFAULT");
       }
     }
   },
   methods: {
+    takeMeThere() {
+      let coordinates = this.selectedGauge.geometry.coordinates;
+      this.$store.dispatch("map/moveMap", {
+        coordinates,
+        zoom: 15,
+        preventZoomOut: true
+      });
+    },
     close() {
       this.$store.commit("application/showGauges", false);
     },
diff -r 3724298001f8 -r 51dc4811a0e6 client/src/store/gauges.js
--- a/client/src/store/gauges.js	Wed Sep 25 16:11:23 2019 +0200
+++ b/client/src/store/gauges.js	Wed Sep 25 16:52:40 2019 +0200
@@ -131,6 +131,11 @@
           });
       });
     },
+    setSelectedGaugeISRS: ({ commit, state }, isrs) => {
+      if (state.selectedGaugeISRS !== isrs) {
+        commit("selectedGaugeISRS", isrs);
+      }
+    },
     selectedGaugeISRS: ({ commit, dispatch, state }, isrs) => {
       if (state.selectedGaugeISRS !== isrs) {
         commit("selectedGaugeISRS", isrs);