Mercurial > gemma
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(