# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551968356 -3600
# Node ID 3c17d401fbd486a8ccf68e5179db5100417645dc
# Parent  ad2a1d02ad1cc31e0f96aa0463771748ee5f343a
client: cross profiles: moved waterlevel select to Profiles dialog

aaaand also switched to the popup component as confirmation mechanism for deleting saved profiles

diff -r ad2a1d02ad1c -r 3c17d401fbd4 client/src/assets/application.scss
--- a/client/src/assets/application.scss	Thu Mar 07 14:59:03 2019 +0100
+++ b/client/src/assets/application.scss	Thu Mar 07 15:19:16 2019 +0100
@@ -170,3 +170,8 @@
     font-size: 1.2rem;
   }
 }
+
+.form-control-sm.small {
+  padding: 0.25rem 0.1rem;
+  font-size: 80%;
+}
diff -r ad2a1d02ad1c -r 3c17d401fbd4 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Mar 07 14:59:03 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu Mar 07 15:19:16 2019 +0100
@@ -4,29 +4,6 @@
       <div
         class="d-flex flex-row justify-content-between align-items-center border-bottom position-relative"
       >
-        <div class="d-flex flex-row align-items-center position-absolute">
-          <small class="text-muted px-2 text-right" style="line-height: 1rem;">
-            <translate v-if="availableWaterlevels.length > 1"
-              >Available Waterlevels:</translate
-            >
-            <translate v-else>Waterlevel:</translate>
-          </small>
-          <select
-            class="form-control pl-1"
-            v-model="currentLevel"
-            v-if="availableWaterlevels.length > 1"
-            style="width: 100px; height: 30px; font-size: 80%;"
-          >
-            <option
-              v-for="level in availableWaterlevels"
-              :value="level"
-              :key="level"
-            >
-              {{ formatSurveyDate(level) }}
-            </option>
-          </select>
-          <small v-else>{{ formatSurveyDate(currentLevel) }}</small>
-        </div>
         <div class="flex-row mr-auto ml-auto">
           <h5
             class="headline mb-0 py-2"
@@ -127,7 +104,6 @@
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
-import { formatSurveyDate } from "@/lib/date.js";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -173,17 +149,6 @@
     relativeWaterLevelDelta() {
       return this.selectedWaterLevel.value - this.referenceWaterLevel;
     },
-    currentLevel: {
-      get() {
-        return this.selectedWaterLevel.date;
-      },
-      set(value) {
-        this.$store.commit("fairwayprofile/setSelectedWaterLevel", value);
-      }
-    },
-    availableWaterlevels() {
-      return Object.keys(this.waterLevels);
-    },
     currentData() {
       if (
         !this.selectedSurvey ||
@@ -238,9 +203,6 @@
     }
   },
   methods: {
-    formatSurveyDate(value) {
-      return formatSurveyDate(value);
-    },
     calcRelativeDepth(depth) {
       /* takes a depth value and substracts the delta of the relative waterlevel
        * say the reference level is above the current level, the ground is nearer,
diff -r ad2a1d02ad1c -r 3c17d401fbd4 client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Thu Mar 07 14:59:03 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Thu Mar 07 15:19:16 2019 +0100
@@ -15,7 +15,7 @@
           <font-awesome-icon icon="spinner" spin />
         </div>
         <select
-          @click="moveToBottleneck"
+          @change="moveToBottleneck"
           v-model="selectedBottleneck"
           class="form-control font-weight-bold"
         >
@@ -33,11 +33,29 @@
           <div class="d-flex mt-2">
             <div class="flex-fill">
               <small class="text-muted">
-                <translate>Sounding Result</translate>:
+                <translate>Waterlevel</translate>:
               </small>
               <select
+                v-model="selectedWaterLevel"
+                class="form-control form-control-sm small"
+              >
+                <option value="" v-if="Object.keys(waterLevels).length === 0">
+                  <translate>Current</translate>
+                </option>
+                <option
+                  v-for="wl in Object.keys(waterLevels)"
+                  :key="wl"
+                  :value="wl"
+                >
+                  {{ formatSurveyDate(wl) }}
+                </option>
+              </select>
+            </div>
+            <div class="flex-fill ml-2">
+              <small class="text-muted"> <translate>Survey</translate>: </small>
+              <select
                 v-model="selectedSurvey"
-                class="form-control form-control-sm"
+                class="form-control form-control-sm small"
               >
                 <option
                   v-for="survey in surveys"
@@ -48,7 +66,7 @@
               </select>
             </div>
             <div
-              class="flex-fill ml-3"
+              class="flex-fill ml-2"
               v-if="selectedSurvey && surveys.length > 1"
             >
               <small class="text-muted mt-1">
@@ -56,7 +74,7 @@
               </small>
               <select
                 v-model="additionalSurvey"
-                class="form-control form-control-sm"
+                class="form-control form-control-sm small"
               >
                 <option :value="null">None</option>
                 <option
@@ -89,26 +107,12 @@
               >
             </select>
             <button
-              class="btn btn-sm btn-danger input-button-right"
-              @click="confirmDeleteSelectedCut = true"
-              v-if="selectedCut && !confirmDeleteSelectedCut"
+              class="btn btn-sm btn-dark input-button-right"
+              @click="deleteSelectedCut(selectedCut)"
+              v-if="selectedCut"
             >
               <font-awesome-icon icon="trash" />
             </button>
-            <button
-              class="btn btn-sm btn-info rounded-0"
-              @click="confirmDeleteSelectedCut = false"
-              v-if="selectedCut && confirmDeleteSelectedCut"
-            >
-              <font-awesome-icon icon="times" class="pointer" />
-            </button>
-            <button
-              class="btn btn-sm btn-danger input-button-right"
-              @click="deleteSelectedCut"
-              v-if="selectedCut && confirmDeleteSelectedCut"
-            >
-              <font-awesome-icon icon="check" />
-            </button>
           </div>
           <small class="text-muted d-block mt-2">
             <translate>Enter coordinates manually</translate>:
@@ -249,8 +253,7 @@
     return {
       coordinatesInput: "",
       cutLabel: "",
-      showLabelInput: false,
-      confirmDeleteSelectedCut: false
+      showLabelInput: false
     };
   },
   computed: {
@@ -266,7 +269,8 @@
       "previousCuts",
       "startPoint",
       "endPoint",
-      "profileLoading"
+      "profileLoading",
+      "waterLevels"
     ]),
     selectedBottleneck: {
       get() {
@@ -280,6 +284,14 @@
           });
       }
     },
+    selectedWaterLevel: {
+      get() {
+        return this.$store.state.fairwayprofile.selectedWaterLevel.date || "";
+      },
+      set(value) {
+        this.$store.commit("fairwayprofile/setSelectedWaterLevel", value);
+      }
+    },
     selectedSurvey: {
       get() {
         return this.$store.state.bottlenecks.selectedSurvey;
@@ -346,7 +358,6 @@
     },
     selectedCut(cut) {
       if (cut) {
-        this.confirmDeleteSelectedCut = false;
         this.applyCoordinates(cut.coordinates);
       }
     }
@@ -376,7 +387,6 @@
     },
     onCopyCoordinates() {
       displayInfo({
-        title: this.$gettext("Success"),
         message: this.$gettext("Coordinates copied to clipboard!")
       });
     },
@@ -443,15 +453,34 @@
         )
       });
     },
-    deleteSelectedCut() {
-      let previousCuts = JSON.parse(localStorage.getItem("previousCuts")) || [];
-      previousCuts = previousCuts.filter(cut => {
-        return JSON.stringify(cut) !== JSON.stringify(this.selectedCut);
+    deleteSelectedCut(cut) {
+      this.$store.commit("application/popup", {
+        icon: "trash",
+        title: this.$gettext("Delete cross profile"),
+        content:
+          this.$gettext("Do you really want to delete the cross profile:") +
+          `<br>
+        <b>${cut.label}</b>`,
+        confirm: {
+          label: this.$gettext("Delete"),
+          icon: "trash",
+          callback: () => {
+            let previousCuts =
+              JSON.parse(localStorage.getItem("previousCuts")) || [];
+            previousCuts = previousCuts.filter(cut => {
+              return JSON.stringify(cut) !== JSON.stringify(this.selectedCut);
+            });
+            localStorage.setItem("previousCuts", JSON.stringify(previousCuts));
+            this.$store.commit("fairwayprofile/selectedCut", null);
+            this.$store.dispatch("fairwayprofile/previousCuts");
+            displayInfo({ title: this.$gettext("Profile deleted!") });
+          }
+        },
+        cancel: {
+          label: this.$gettext("Cancel"),
+          icon: "times"
+        }
       });
-      localStorage.setItem("previousCuts", JSON.stringify(previousCuts));
-      this.$store.commit("fairwayprofile/selectedCut", null);
-      this.$store.dispatch("fairwayprofile/previousCuts");
-      displayInfo({ title: this.$gettext("Profile deleted!") });
     },
     moveToBottleneck() {
       const bottleneck = this.bottlenecksList.find(
diff -r ad2a1d02ad1c -r 3c17d401fbd4 client/src/store/fairway.js
--- a/client/src/store/fairway.js	Thu Mar 07 14:59:03 2019 +0100
+++ b/client/src/store/fairway.js	Thu Mar 07 15:19:16 2019 +0100
@@ -78,10 +78,10 @@
       // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
       const entry = {
         date: when,
-        vaule: value
+        value: value
       };
-      Vue.set(state.waterLevels, when, entry);
-      if (state.selectedWaterLevel === "") state.selectedWaterLevel = entry;
+      state.waterLevels = { [when]: entry };
+      state.selectedWaterLevel = entry;
       Vue.set(state.currentProfile, surveyDate, {
         points: result.points,
         length: result.lengthPolyLine