Mercurial > gemma
changeset 4502:4c3851391b6d
client: fairwayprofile: implement custom depth for x-cuts
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Wed, 02 Oct 2019 12:42:25 +0200 |
| parents | 8a6c410f6f03 |
| children | b86367910f86 |
| files | client/src/components/fairway/BottleneckDialogue.vue client/src/components/fairway/Fairwayprofile.vue client/src/store/fairwayprofile.js |
| diffstat | 3 files changed, 71 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/BottleneckDialogue.vue Mon Sep 30 16:07:48 2019 +0200 +++ b/client/src/components/fairway/BottleneckDialogue.vue Wed Oct 02 12:42:25 2019 +0200 @@ -155,6 +155,32 @@ </div> <hr class="w-100 mb-0" /> <small class="text-muted d-block mt-2"> + <translate>Custom Depth</translate>: + </small> + <div class="d-flex"> + <input + class="form-control form-control-sm w-100 mt-1" + v-model.number="depth" + type="number" + step="0.1" + min="0" + /> + <button + @click="useCustomDepth = !useCustomDepth" + :class="[ + 'btn', + 'btn-xs', + 'ml-2', + { + 'btn-info': useCustomDepth, + 'btn-secondary': !useCustomDepth + } + ]" + > + {{ useCustomDepth ? "disable" : "enable" }} + </button> + </div> + <small class="text-muted d-block mt-2"> <translate>Saved cross profiles</translate>: </small> <div class="d-flex"> @@ -342,6 +368,22 @@ profilesLable() { return this.$gettext("Bottleneck Surveys"); }, + useCustomDepth: { + get() { + return this.$store.state.fairwayprofile.useCustomDepth; + }, + set(value) { + this.$store.commit("fairwayprofile/setUseCustomDepth", value); + } + }, + depth: { + get() { + return this.$store.state.fairwayprofile.depth; + }, + set(value) { + this.$store.commit("fairwayprofile/setDepth", value); + } + }, selectedBottleneck: { get() { return this.$store.state.bottlenecks.selectedBottleneck; @@ -476,6 +518,10 @@ }, selectedCut(cut) { if (cut) { + if (cut.depth) { + this.depth = cut.depth; + this.useCustomDepth = true; + } this.applyCoordinates(cut.coordinates); } } @@ -618,7 +664,8 @@ label: this.cutLabel, bottleneckName: this.selectedBottleneck, coordinates: [...this.startPoint, ...this.endPoint], - timestamp: new Date().getTime() + timestamp: new Date().getTime(), + depth: this.depth }; const existingEntry = previousCuts.find(cut => { return JSON.stringify(cut) === JSON.stringify(newEntry);
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Sep 30 16:07:48 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Wed Oct 02 12:42:25 2019 +0200 @@ -183,7 +183,9 @@ "endPoint", "fairwayData", "maxAlt", - "selectedWaterLevel" + "selectedWaterLevel", + "depth", + "useCustomDepth" ]), ...mapState("bottlenecks", ["selectedSurvey", "selectedBottleneck"]), ...mapState("application", ["paneSetup"]), @@ -236,6 +238,13 @@ } }, watch: { + depth() { + if (!this.useCustomDepth) return; + this.drawDiagram(); + }, + useCustomDepth() { + this.drawDiagram(); + }, currentData() { this.drawDiagram(); }, @@ -465,7 +474,10 @@ }); graph .append("path") - .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) + .datum([ + { x: startPoint, y: this.useCustomDepth ? this.depth : depth }, + { x: endPoint, y: this.useCustomDepth ? this.depth : depth } + ]) .attr("fill", `${this.getLayerStyle(data.los).fillColor}`) .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity) .attr("stroke", `${this.getLayerStyle(data.los).strokeColor}`)
--- a/client/src/store/fairwayprofile.js Mon Sep 30 16:07:48 2019 +0200 +++ b/client/src/store/fairwayprofile.js Wed Oct 02 12:42:25 2019 +0200 @@ -35,7 +35,9 @@ previousCuts: [], profileLoading: false, selectedCut: null, - differencesLoading: false + differencesLoading: false, + depth: 2.5, + useCustomDepth: true }; }; @@ -55,6 +57,12 @@ } }, mutations: { + setDepth: (state, value) => { + state.depth = value; + }, + setUseCustomDepth: (state, flag) => { + state.useCustomDepth = flag; + }, additionalSurvey: (state, additionalSurvey) => { state.additionalSurvey = additionalSurvey; },