Mercurial > gemma
changeset 1395:210e9f16f8a0
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 }); });