Mercurial > gemma

changeset 1395:210e9f16f8a0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
delete cross profiles from localstorage
author Markus Kottlaender <markus@intevation.de>
date Wed, 28 Nov 2018 14:28:21 +0100
parents b350b0b5cb6c
children a2ff987555e7
files client/src/components/map/fairway/Profiles.vue client/src/store/fairway.js client/src/store/map.js
diffstat 3 files changed, 84 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/map/fairway/Profiles.vue	Wed Nov 28 11:48:45 2018 +0100
+++ b/client/src/components/map/fairway/Profiles.vue	Wed Nov 28 14:28:21 2018 +0100
@@ -47,8 +47,42 @@
               </select>
             </div>
           </div>
-          <hr class="w-100">
-          <small class="d-flex text-left my-2" v-if="startPoint && endPoint">
+          <hr class="w-100 mb-0">
+          <small class="text-muted d-block mt-2">Saved cross profiles:</small>
+          <div class="d-flex">
+            <select :class="['form-control form-control-sm flex-fill', { 'rounded-left-only': selectedCut }]" v-model="selectedCut">
+              <option></option>
+              <option v-for="(cut, index) in previousCuts" :value="cut" :key="index">
+                {{ cut.label }}
+              </option>
+            </select>
+            <button
+              class="btn btn-sm btn-danger input-button-right"
+              @click="confirmDeleteSelectedCut = true"
+              v-if="selectedCut && !confirmDeleteSelectedCut"
+            ><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" /></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">Enter coordinates manually:</small>
+          <div class="position-relative">
+            <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" />
+            <button
+              class="btn btn-sm btn-info position-absolute input-button-right" 
+              @click="applyManualCoordinates"
+              style="top: 0; right: 0;"
+              v-if="coordinatesInputIsValid"
+            ><font-awesome-icon icon="check" /></button>
+          </div>
+          <small class="d-flex text-left mt-2" v-if="startPoint && endPoint">
             <div class="text-nowrap mr-3">
               <b>Start:</b>
               <br>
@@ -68,8 +102,8 @@
               class="btn btn-info btn-sm ml-auto mt-auto"
             ><font-awesome-icon icon="copy" /></button>
           </small>
-          <div class="d-flex">
-            <div class="pr-3 w-50" v-if="startPoint && endPoint">
+          <div class="d-flex mt-3">
+            <div class="pr-3 w-50" v-if="startPoint && endPoint && !selectedCut">
               <button
                 class="btn btn-info btn-sm w-100"
                 @click="showLabelInput = !showLabelInput"
@@ -78,7 +112,7 @@
                 {{ showLabelInput ? "Cancel" : "Save" }}
               </button>
             </div>
-            <div :class="startPoint && endPoint ? 'w-50' : 'w-100'">
+            <div :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'">
               <button
                 class="btn btn-info btn-sm w-100"
                 @click="toggleCutTool"
@@ -100,23 +134,6 @@
               ><font-awesome-icon icon="check" /></button>
             </div>
           </div>
-          <small class="text-muted d-block mt-2">Saved cross profiles:</small>
-          <select class="form-control form-control-sm" v-model="coordinatesSelect">
-            <option></option>
-            <option v-for="(cut, index) in previousCuts" :value="cut.coordinates" :key="index">
-              {{ cut.label }}
-            </option>
-          </select>
-          <small class="text-muted d-block mt-2">Enter coordinates manually:</small>
-          <div class="position-relative">
-            <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" />
-            <button
-              class="btn btn-sm btn-info position-absolute input-button-right" 
-              @click="applyManualCoordinates"
-              style="top: 0; right: 0;"
-              v-if="coordinatesInputIsValid"
-            ><font-awesome-icon icon="check" /></button>
-          </div>
         </div>
       </div>
     </div>
@@ -125,7 +142,7 @@
 
 <style lang="sass" scoped>
   .loading
-    background: rgba(255, 255, 255, 0.96)
+    background: rgba(255, 255, 255, 0.9)
     position: absolute
     z-index: 99
     top: 0
@@ -138,6 +155,13 @@
     border-bottom-right-radius: $border-radius
     border-top-left-radius: 0 !important
     border-bottom-left-radius: 0 !important
+
+  .rounded-left-only
+    border-top-right-radius: 0 !important
+    border-bottom-right-radius: 0 !important
+    border-top-left-radius: $border-radius
+    border-bottom-left-radius: $border-radius
+    
 </style>
 
 <script>
@@ -164,9 +188,9 @@
   data() {
     return {
       coordinatesInput: "",
-      coordinatesSelect: null,
       cutLabel: "",
-      showLabelInput: false
+      showLabelInput: false,
+      confirmDeleteSelectedCut: false
     };
   },
   computed: {
@@ -205,6 +229,19 @@
         this.$store.commit("fairwayprofile/additionalSurvey", survey);
       }
     },
+    selectedCut: {
+      get() {
+        return this.$store.state.fairwayprofile.selectedCut;
+      },
+      set(cut) {
+        this.$store.commit("fairwayprofile/selectedCut", cut);
+        if (!cut) {
+          this.$store.commit("fairwayprofile/clearCurrentProfile");
+          this.$store.commit("application/showSplitscreen", false);
+          this.getVSourceByName("Cut Tool").clear();
+        }
+      }
+    },
     additionalSurveys() {
       return this.surveys.filter(survey => survey !== this.selectedSurvey);
     },
@@ -239,10 +276,10 @@
     additionalSurvey(survey) {
       this.loadProfile(survey);
     },
-    coordinatesSelect(newValue) {
-      if (newValue) {
-        this.applyCoordinates(newValue);
-        this.coordinatesSelect = null;
+    selectedCut(cut) {
+      if (cut) {
+        this.confirmDeleteSelectedCut = false;
+        this.applyCoordinates(cut.coordinates);
       }
     }
   },
@@ -275,7 +312,7 @@
       const coordinates = this.coordinatesInput
         .split(",")
         .map(coord => parseFloat(coord.trim()));
-      this.coordinatesSelect = null;
+      this.selectedCut = null;
       this.coordinatesInput = "";
       this.applyCoordinates([
         coordinates[1],
@@ -326,13 +363,22 @@
       this.$store.dispatch("fairwayprofile/previousCuts");
 
       this.showLabelInput = false;
-      this.cutLabel = "";
       displayInfo({
-        title: "Coordinates saved!",
+        title: "Profile saved!",
         message:
           'You can now select these coordinates from the "Saved cross profiles" menu to restore this cross profile.'
       });
     },
+    deleteSelectedCut() {
+      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: "Profile deleted!" });
+    },
     moveToBottleneck() {
       const bottleneck = this.bottlenecks.find(
         bn => bn.properties.name === this.selectedBottleneck
--- a/client/src/store/fairway.js	Wed Nov 28 11:48:45 2018 +0100
+++ b/client/src/store/fairway.js	Wed Nov 28 14:28:21 2018 +0100
@@ -37,7 +37,8 @@
     startPoint: null,
     endPoint: null,
     previousCuts: [],
-    profileLoading: false
+    profileLoading: false,
+    selectedCut: null
   };
 };
 
@@ -109,6 +110,9 @@
     },
     profileLoading: (state, loading) => {
       state.profileLoading = loading;
+    },
+    selectedCut: (state, cut) => {
+      state.selectedCut = cut;
     }
   },
   actions: {
--- a/client/src/store/map.js	Wed Nov 28 11:48:45 2018 +0100
+++ b/client/src/store/map.js	Wed Nov 28 14:28:21 2018 +0100
@@ -459,6 +459,7 @@
         cutVectorSrc.clear();
       });
       cutTool.on("drawend", event => {
+        commit("fairwayprofile/selectedCut", null, { root: true });
         dispatch("fairwayprofile/cut", event.feature, { root: true });
       });