# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1557154486 -7200
# Node ID 975efa874acf50850ac43f2c4fba83587a916cf8
# Parent  c8ded555c2a8a9a1da9698360002e377df18c762
statistic: choice between bottlenecks and stretches implemented

diff -r c8ded555c2a8 -r 975efa874acf client/src/components/Statistics.vue
--- a/client/src/components/Statistics.vue	Mon May 06 16:36:03 2019 +0200
+++ b/client/src/components/Statistics.vue	Mon May 06 16:54:46 2019 +0200
@@ -9,12 +9,46 @@
       <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
       <div class="box-body">
         <UISpinnerOverlay v-if="loading" />
+        <div class="mb-3 d-flex flex-row justify-content-between">
+          <div>
+            <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
+            <small class="ml-1 text-muted">
+              <translate>Bottlenecks</translate>
+            </small>
+          </div>
+          <div>
+            <input :value="$options.STRETCHES" type="radio" v-model="type" />
+            <small class="ml-1 text-muted">
+              <translate>Stretches</translate>
+            </small>
+          </div>
+          <div>
+            <input :value="$options.SECTIONS" type="radio" v-model="type" />
+            <small class="ml-1 text-muted">
+              <translate>Sections</translate>
+            </small>
+          </div>
+        </div>
         <div class="d-flex flex-column">
-          <select class="form-control font-weight-bold" v-model="type">
-            <option :value="null">{{ $options.TYPES.EMPTY }}</option>
-            <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option>
+          <select
+            @change="entrySelected"
+            class="form-control font-weight-bold"
+            v-model="selectedEntry"
+          >
+            <option :value="null">{{ empty }}</option>
+            <option
+              v-for="(entry, index) in entries"
+              :value="index"
+              :key="index"
+              >{{ entry.properties.name }}</option
+            >
           </select>
         </div>
+        <div class="mt-3">
+          <button :disabled="selectedEntry == null" class="btn btn-info w-100">
+            <translate>Available Fairway Depth</translate>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -37,30 +71,86 @@
  */
 
 import app from "@/main";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   data() {
     return {
-      type: null,
+      type: this.$options.BOTTLENECKS,
+      selectedEntry: null,
       loading: false
     };
   },
   methods: {
     close() {
       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);
+      }
+      if (this.type === this.$options.STRETCHES) {
+        feature = this.stretches[this.selectedEntry];
+        this.openLayersMap()
+          .getLayer("STRETCHES")
+          .setVisible(true);
+      }
+      if (feature) {
+        this.$store.dispatch("map/moveToFeauture", {
+          feature: feature,
+          zoom: 17,
+          preventZoomOut: true
+        });
+      }
     }
   },
   computed: {
     ...mapState("application", ["showStatistics", "paneSetup"]),
+    ...mapState("imports", ["stretches"]),
+    ...mapState("bottlenecks", ["bottlenecksList"]),
+    ...mapGetters("map", ["openLayersMap"]),
+    entries() {
+      if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
+      if (this.type === this.$options.STRETCHES) return this.stretches;
+      return [];
+    },
     label() {
       return this.$gettext("Statistics");
+    },
+    empty() {
+      if (this.type === this.$options.BOTTLENECKS)
+        return this.$gettext("Please choose a bottleneck");
+      if (this.type === this.$options.STRETCHES)
+        return this.$gettext("Please choose a strectch");
+      return this.$gettext("Please choose a section");
     }
   },
-  TYPES: {
-    AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
-    EMPTY: app.$gettext("Please choose statistic")
-  }
+  watch: {
+    type() {
+      this.selectedEntry = null;
+      this.openLayersMap()
+        .getLayer("STRETCHES")
+        .setVisible(true);
+    },
+    showStatistics() {
+      if (this.showStatistics) {
+        this.loading = true;
+        this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => {
+          this.$store.dispatch("imports/loadStretches").then(() => {
+            this.loading = false;
+          });
+        });
+      }
+    }
+  },
+  BOTTLENECKS: "bottlenecks",
+  SECTIONS: "sections",
+  STRETCHES: "stretches",
+  AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth")
 };
 </script>
 
diff -r c8ded555c2a8 -r 975efa874acf client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Mon May 06 16:36:03 2019 +0200
+++ b/client/src/components/fairway/Profiles.vue	Mon May 06 16:54:46 2019 +0200
@@ -330,7 +330,7 @@
       return orderedGroups;
     },
     profilesLable() {
-      return this.$gettext("Profiles");
+      return this.$gettext("Bottleneck");
     },
     selectedBottleneck: {
       get() {