--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Fri May 10 10:34:09 2019 +0200
@@ -0,0 +1,342 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showFairwayDepth }
+    ]"
+  >
+    <div style="width: 18rem">
+      <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 align-items-center"
+        >
+          <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
+            @change="entrySelected"
+            class="form-control form-control-sm font-weight-bold"
+            v-model="selectedEntry"
+          >
+            <option :value="null">{{ empty }}</option>
+            <option
+              v-for="(entry, index) in entries"
+              :value="entry"
+              :key="index"
+              >{{ entry.properties.name }}</option
+            >
+          </select>
+        </div>
+        <div class="d-flex flex-column mt-3">
+          <div class="d-flex flex-row w-100">
+            <div class="d-flex flex-column mb-3 w-50 mr-1">
+              <small class="my-auto text-muted"
+                ><translate>Type</translate></small
+              >
+              <select
+                v-model="selectedFrequency"
+                class="form-control form-control-sm"
+              >
+                <option
+                  v-for="(option, index) in $options.FREQUENCIES"
+                  :value="option"
+                  :key="index"
+                  ><translate>{{ option }}</translate></option
+                >
+              </select>
+            </div>
+            <div class="d-flex flex-column mb-3 w-50 ml-1">
+              <small class="my-auto text-muted"
+                ><translate>LOS</translate></small
+              >
+              <select v-model="los" class="form-control form-control-sm">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+              </select>
+            </div>
+          </div>
+          <div class="d-flex flex-row w-100">
+            <div class="d-flex flex-column w-50 mr-1">
+              <small for="from" class="my-auto text-muted"
+                ><translate>Date from</translate></small
+              ><input
+                id="from"
+                v-model="fromDate"
+                class="form-control form-control-sm"
+                type="date"
+              />
+            </div>
+            <div class="d-flex flex-column w-50 ml-1">
+              <small for="to" class="my-auto text-muted"
+                ><translate>Date to</translate></small
+              ><input
+                id="to"
+                v-model="toDate"
+                class="form-control form-control-sm"
+                type="date"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="mt-3">
+          <button
+            @click="openFairwaydepth"
+            :disabled="isComplete"
+            class="btn btn-info btn-sm w-100"
+          >
+            <translate>Available Fairway Depth</translate>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+input,
+select {
+  font-size: 0.8em;
+}
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import app from "@/main";
+import { displayError } from "@/lib/errors";
+import { mapState, mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    openFairwaydepth() {
+      this.loading = true;
+      this.$store
+        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          from: this.from,
+          to: this.to,
+          frequency: this.frequency,
+          LOS: this.los
+        })
+        .then(() => {
+          this.loading = false;
+          this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    close() {
+      this.$store.commit("application/showFairwayDepth", false);
+    },
+    entrySelected() {
+      if (this.type === this.$options.BOTTLENECKS) {
+        this.openLayersMap()
+          .getLayer("BOTTLENECKS")
+          .setVisible(true);
+        if (this.showProfiles) {
+          this.$store.dispatch(
+            "bottlenecks/setSelectedBottleneck",
+            this.selectedFairwayAvailabilityFeature.properties.name
+          );
+        }
+      }
+      if (this.type === this.$options.STRETCHES) {
+        this.openLayersMap()
+          .getLayer("STRETCHES")
+          .setVisible(true);
+      }
+      if (this.selectedFairwayAvailabilityFeature) {
+        this.$store.dispatch("map/moveToFeauture", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          zoom: 17,
+          preventZoomOut: true
+        });
+      }
+    },
+    setSelectedBottleneck() {
+      const bn = this.bottlenecksList.filter(
+        x => x.properties.name === this.selectedBottleneck
+      )[0];
+      this.$store.commit(
+        "fairwayavailability/setSelectedFairwayAvailability",
+        bn
+      );
+    }
+  },
+  computed: {
+    ...mapState("application", [
+      "showFairwayDepth",
+      "paneSetup",
+      "showProfiles"
+    ]),
+    ...mapState("fairwayavailability", [
+      "selectedFairwayAvailabilityFeature",
+      "from",
+      "to",
+      "frequency",
+      "LOS"
+    ]),
+    ...mapState("imports", ["stretches"]),
+    ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
+    ...mapGetters("map", ["openLayersMap"]),
+    isComplete() {
+      return (
+        this.from == null ||
+        this.to == null ||
+        this.frequency == null ||
+        this.los == null ||
+        this.selectedFairwayAvailabilityFeature == null
+      );
+    },
+    type: {
+      get() {
+        return this.$store.state.fairwayavailability.type;
+      },
+      set(type) {
+        this.$store.commit("fairwayavailability/type", type);
+      }
+    },
+    los: {
+      get() {
+        return this.LOS;
+      },
+      set(value) {
+        this.$store.commit("fairwayavailability/setLOS", value);
+      }
+    },
+    fromDate: {
+      get() {
+        return this.from;
+      },
+      set(value) {
+        this.$store.commit("fairwayavailability/setFrom", value);
+      }
+    },
+    toDate: {
+      get() {
+        return this.to;
+      },
+      set(value) {
+        this.$store.commit("fairwayavailability/setTo", value);
+      }
+    },
+    selectedFrequency: {
+      get() {
+        return this.frequency;
+      },
+      set(value) {
+        this.$store.commit("fairwayavailability/setFrequency", value);
+      }
+    },
+    selectedEntry: {
+      get() {
+        return this.selectedFairwayAvailabilityFeature;
+      },
+      set(feature) {
+        this.$store.commit(
+          "fairwayavailability/setSelectedFairwayAvailability",
+          feature
+        );
+      }
+    },
+    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("Select bottleneck");
+      if (this.type === this.$options.STRETCHES)
+        return this.$gettext("Select strectch");
+      return this.$gettext("Select section");
+    }
+  },
+  watch: {
+    selectedBottleneck() {
+      this.type = this.$options.BOTTLENECKS;
+      this.setSelectedBottleneck();
+    },
+    type() {
+      if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
+        this.setSelectedBottleneck();
+      } else {
+        this.$store.commit(
+          "fairwayavailability/setSelectedFairwayAvailability",
+          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;
+            if (this.selectedBottleneck) this.setSelectedBottleneck();
+          });
+        });
+      }
+    }
+  },
+  BOTTLENECKS: "bottlenecks",
+  SECTIONS: "sections",
+  STRETCHES: "stretches",
+  AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
+  FREQUENCIES: {
+    MONTHLY: "monthly",
+    QUARTERLY: "quarterly",
+    YEARLY: "yearly"
+  }
+};
+</script>