Mercurial > gemma
changeset 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 | ad2a1d02ad1c |
children | 468c8dc796cf |
files | client/src/assets/application.scss client/src/components/fairway/Fairwayprofile.vue client/src/components/fairway/Profiles.vue client/src/store/fairway.js |
diffstat | 4 files changed, 72 insertions(+), 76 deletions(-) [+] |
line wrap: on
line diff
--- 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%; +}
--- 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,
--- 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(
--- 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