Mercurial > gemma

changeset 3233:9a02b770c2e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
show_statistics: refac to fairwayavailability
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 10 May 2019 10:34:09 +0200
parents 86231e847762
children 22dfaa22e96e
files client/src/components/App.vue client/src/components/Statistics.vue client/src/components/fairway/AvailableFairwayDepthDialogue.vue client/src/components/toolbar/AvailableFairwayDepth.vue client/src/components/toolbar/Statistics.vue client/src/components/toolbar/Toolbar.vue
diffstat 6 files changed, 383 insertions(+), 382 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/App.vue	Fri May 10 10:32:39 2019 +0200
+++ b/client/src/components/App.vue	Fri May 10 10:34:09 2019 +0200
@@ -14,7 +14,7 @@
             <Profiles v-if="isMapVisible" />
             <Gauges v-if="isMapVisible" />
             <Pdftool v-if="isMapVisible" />
-            <Statistics v-if="isMapVisible" />
+            <AvailableFairwayDepthDialogue v-if="isMapVisible" />
           </div>
           <div class="d-flex flex-column align-items-end">
             <Identify v-if="isMapVisible" />
@@ -102,7 +102,8 @@
     Contextbox: () => import("./Contextbox"),
     Toolbar: () => import("./toolbar/Toolbar"),
     Popup: () => import("./Popup"),
-    Statistics: () => import("./Statistics"),
+    AvailableFairwayDepthDialogue: () =>
+      import("./fairway/AvailableFairwayDepthDialogue.vue"),
     MapPopup: () => import("./map/MapPopup")
   }
 };
--- a/client/src/components/Statistics.vue	Fri May 10 10:32:39 2019 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,342 +0,0 @@
-<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>
--- /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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/toolbar/AvailableFairwayDepth.vue	Fri May 10 10:34:09 2019 +0200
@@ -0,0 +1,36 @@
+<template>
+  <div class="toolbar-button" v-tooltip.right="label">
+    <font-awesome-icon
+      @click="$store.commit('application/showFairwayDepth', !showFairwayDepth)"
+      icon="chart-line"
+      :class="{ 'text-info': showFairwayDepth }"
+    />
+  </div>
+</template>
+
+<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 { mapState } from "vuex";
+
+export default {
+  computed: {
+    ...mapState("application", ["showFairwayDepth"]),
+    label() {
+      return this.$gettext("Available fairway depth");
+    }
+  }
+};
+</script>
--- a/client/src/components/toolbar/Statistics.vue	Fri May 10 10:32:39 2019 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,36 +0,0 @@
-<template>
-  <div class="toolbar-button" v-tooltip.right="label">
-    <font-awesome-icon
-      @click="$store.commit('application/showFairwayDepth', !showFairwayDepth)"
-      icon="chart-line"
-      :class="{ 'text-info': showFairwayDepth }"
-    />
-  </div>
-</template>
-
-<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 { mapState } from "vuex";
-
-export default {
-  computed: {
-    ...mapState("application", ["showFairwayDepth"]),
-    label() {
-      return this.$gettext("Available fairway depth");
-    }
-  }
-};
-</script>
--- a/client/src/components/toolbar/Toolbar.vue	Fri May 10 10:32:39 2019 +0200
+++ b/client/src/components/toolbar/Toolbar.vue	Fri May 10 10:34:09 2019 +0200
@@ -13,7 +13,7 @@
       <Linetool />
       <Polygontool />
       <Pdftool />
-      <Statistics />
+      <AvailableFairwayDepth />
     </div>
     <div
       @click="$store.commit('application/expandToolbar', !expandToolbar)"
@@ -128,7 +128,7 @@
     Profiles: () => import("./Profiles"),
     Gauges: () => import("./Gauges"),
     Pdftool: () => import("./Pdftool"),
-    Statistics: () => import("./Statistics.vue")
+    AvailableFairwayDepth: () => import("./AvailableFairwayDepth")
   },
   computed: {
     ...mapState("map", ["openLayersMaps"]),