diff client/src/components/fairway/Profiles.vue @ 2540:3c17d401fbd4

client: cross profiles: moved waterlevel select to Profiles dialog aaaand also switched to the popup component as confirmation mechanism for deleting saved profiles
author Markus Kottlaender <markus@intevation.de>
date Thu, 07 Mar 2019 15:19:16 +0100
parents bb5286acfee2
children 468c8dc796cf
line wrap: on
line diff
--- 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(