diff client/src/components/fairway/BottleneckDialogue.vue @ 4502:4c3851391b6d

client: fairwayprofile: implement custom depth for x-cuts
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 02 Oct 2019 12:42:25 +0200
parents bff6c5c1db4f
children 245e6215361e
line wrap: on
line diff
--- a/client/src/components/fairway/BottleneckDialogue.vue	Mon Sep 30 16:07:48 2019 +0200
+++ b/client/src/components/fairway/BottleneckDialogue.vue	Wed Oct 02 12:42:25 2019 +0200
@@ -155,6 +155,32 @@
           </div>
           <hr class="w-100 mb-0" />
           <small class="text-muted d-block mt-2">
+            <translate>Custom Depth</translate>:
+          </small>
+          <div class="d-flex">
+            <input
+              class="form-control form-control-sm w-100 mt-1"
+              v-model.number="depth"
+              type="number"
+              step="0.1"
+              min="0"
+            />
+            <button
+              @click="useCustomDepth = !useCustomDepth"
+              :class="[
+                'btn',
+                'btn-xs',
+                'ml-2',
+                {
+                  'btn-info': useCustomDepth,
+                  'btn-secondary': !useCustomDepth
+                }
+              ]"
+            >
+              {{ useCustomDepth ? "disable" : "enable" }}
+            </button>
+          </div>
+          <small class="text-muted d-block mt-2">
             <translate>Saved cross profiles</translate>:
           </small>
           <div class="d-flex">
@@ -342,6 +368,22 @@
     profilesLable() {
       return this.$gettext("Bottleneck Surveys");
     },
+    useCustomDepth: {
+      get() {
+        return this.$store.state.fairwayprofile.useCustomDepth;
+      },
+      set(value) {
+        this.$store.commit("fairwayprofile/setUseCustomDepth", value);
+      }
+    },
+    depth: {
+      get() {
+        return this.$store.state.fairwayprofile.depth;
+      },
+      set(value) {
+        this.$store.commit("fairwayprofile/setDepth", value);
+      }
+    },
     selectedBottleneck: {
       get() {
         return this.$store.state.bottlenecks.selectedBottleneck;
@@ -476,6 +518,10 @@
     },
     selectedCut(cut) {
       if (cut) {
+        if (cut.depth) {
+          this.depth = cut.depth;
+          this.useCustomDepth = true;
+        }
         this.applyCoordinates(cut.coordinates);
       }
     }
@@ -618,7 +664,8 @@
         label: this.cutLabel,
         bottleneckName: this.selectedBottleneck,
         coordinates: [...this.startPoint, ...this.endPoint],
-        timestamp: new Date().getTime()
+        timestamp: new Date().getTime(),
+        depth: this.depth
       };
       const existingEntry = previousCuts.find(cut => {
         return JSON.stringify(cut) === JSON.stringify(newEntry);