Mercurial > gemma

changeset 4478:51dc4811a0e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Gauges: Instead of dynamically scroll use crosshairs button
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 25 Sep 2019 16:52:40 +0200
parents 3724298001f8
children 2d2c9f98360a
files client/src/components/gauge/Gauges.vue client/src/store/gauges.js
diffstat 2 files changed, 39 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- 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);
     },
--- 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);