# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1557156980 -7200
# Node ID 1287b031424cc1b01741a3ced25f07db97db2612
# Parent  975efa874acf50850ac43f2c4fba83587a916cf8
statistics: sprinkled fairy dust on to bottleneck selection

diff -r 975efa874acf -r 1287b031424c client/src/components/Statistics.vue
--- a/client/src/components/Statistics.vue	Mon May 06 16:54:46 2019 +0200
+++ b/client/src/components/Statistics.vue	Mon May 06 17:36:20 2019 +0200
@@ -38,14 +38,17 @@
             <option :value="null">{{ empty }}</option>
             <option
               v-for="(entry, index) in entries"
-              :value="index"
+              :value="entry"
               :key="index"
               >{{ entry.properties.name }}</option
             >
           </select>
         </div>
         <div class="mt-3">
-          <button :disabled="selectedEntry == null" class="btn btn-info w-100">
+          <button
+            :disabled="selectedEntry == null"
+            class="btn btn-info btn-sm w-100"
+          >
             <translate>Available Fairway Depth</translate>
           </button>
         </div>
@@ -86,32 +89,39 @@
       this.$store.commit("application/showStatistics", false);
     },
     entrySelected() {
-      let feature = null;
       if (this.type === this.$options.BOTTLENECKS) {
-        feature = this.bottlenecksList[this.selectedEntry];
         this.openLayersMap()
           .getLayer("BOTTLENECKS")
           .setVisible(true);
+        this.$store.dispatch(
+          "bottlenecks/setSelectedBottleneck",
+          this.selectedEntry.properties.name
+        );
       }
       if (this.type === this.$options.STRETCHES) {
-        feature = this.stretches[this.selectedEntry];
         this.openLayersMap()
           .getLayer("STRETCHES")
           .setVisible(true);
       }
-      if (feature) {
+      if (this.selectedEntry) {
         this.$store.dispatch("map/moveToFeauture", {
-          feature: feature,
+          feature: this.selectedEntry,
           zoom: 17,
           preventZoomOut: true
         });
       }
+    },
+    setSelectedBottleneck() {
+      const bn = this.bottlenecksList.filter(
+        x => x.properties.name === this.selectedBottleneck
+      )[0];
+      this.selectedEntry = bn;
     }
   },
   computed: {
     ...mapState("application", ["showStatistics", "paneSetup"]),
     ...mapState("imports", ["stretches"]),
-    ...mapState("bottlenecks", ["bottlenecksList"]),
+    ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
     ...mapGetters("map", ["openLayersMap"]),
     entries() {
       if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
@@ -123,15 +133,22 @@
     },
     empty() {
       if (this.type === this.$options.BOTTLENECKS)
-        return this.$gettext("Please choose a bottleneck");
+        return this.$gettext("Select bottleneck");
       if (this.type === this.$options.STRETCHES)
-        return this.$gettext("Please choose a strectch");
-      return this.$gettext("Please choose a section");
+        return this.$gettext("Select strectch");
+      return this.$gettext("Select section");
     }
   },
   watch: {
+    selectedBottleneck() {
+      this.setSelectedBottleneck();
+    },
     type() {
-      this.selectedEntry = null;
+      if (this.selectedBottleneck) {
+        this.setSelectedBottleneck();
+      } else {
+        this.selectedEntry = null;
+      }
       this.openLayersMap()
         .getLayer("STRETCHES")
         .setVisible(true);
@@ -142,6 +159,7 @@
         this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => {
           this.$store.dispatch("imports/loadStretches").then(() => {
             this.loading = false;
+            if (this.selectedBottleneck) this.setSelectedBottleneck();
           });
         });
       }