Mercurial > gemma
changeset 4382:7d9376f8a28c
Available_Fairway_Depth: decouple diagraminfo from selection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 12 Sep 2019 11:45:40 +0200 |
parents | 275220c82026 |
children | 59a7b7ec56c4 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 24 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Thu Sep 12 10:53:32 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu Sep 12 11:45:40 2019 +0200 @@ -100,6 +100,13 @@ }, data() { return { + selectedFairwayAvailabilityFeatureD: null, + fromDate: null, + toDate: null, + depthlimit1D: null, + depthlimit2D: null, + widthlimit1D: null, + widthlimit2D: null, containerId: "availablefairwaydepth-diagram-container", resizeListenerFunction: null, loading: false, @@ -136,7 +143,7 @@ // not guarantee that the DOM is not only updated but also re-painted on the // screen. setTimeout(this.drawDiagram, 150); - + this.initDiagramValues(); this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template; @@ -176,12 +183,12 @@ "widthlimit2" ]), legend() { - const d = [this.depthlimit1, this.depthlimit2].sort(); - const w = [this.widthlimit1, this.widthlimit2].sort(); + const d = [this.depthlimit1D, this.depthlimit2D].sort(); + const w = [this.widthlimit1D, this.widthlimit2D].sort(); const lowerBound = [d[0], w[0]].filter(x => x).join(", "); const upperBound = [d[1], w[1]].filter(x => x).join(", "); let result; - if (this.depthlimit1 !== this.depthlimit2) { + if (this.depthlimit1D !== this._depthlimit2D) { result = [ `> LDC`, `>= ${upperBound}`, @@ -211,12 +218,6 @@ }; return frequencies[this.frequency]; }, - fromDate() { - return this.from; - }, - toDate() { - return this.to; - }, availability() { return this.plainAvailability; }, @@ -228,11 +229,20 @@ )}) ${this.$gettext(this.frequency)}`; }, featureName() { - if (this.selectedFairwayAvailabilityFeature == null) return ""; - return this.selectedFairwayAvailabilityFeature.properties.name; + if (this.selectedFairwayAvailabilityFeatureD == null) return ""; + return this.selectedFairwayAvailabilityFeatureD.properties.name; } }, methods: { + initDiagramValues() { + this.selectedFairwayAvailabilityFeatureD = this.selectedFairwayAvailabilityFeature; + this.fromDate = this.from; + this.toDate = this.to; + this.depthlimit1D = this.depthlimit1; + this.depthlimit2D = this.depthlimit2; + this.widthlimit1D = this.widthlimit1; + this.widthlimit2D = this.widthlimit2; + }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate; @@ -322,7 +332,7 @@ } }, legendStyle(index) { - if (this.depthlimit1 === this.depthlimit2) { + if (this._depthlimit1 === this._depthlimit2) { let result = [ `background-color: ${this.$options.COLORS.LDC};`, `background-color: ${this.$options.COLORS.HIGHEST};` @@ -702,6 +712,7 @@ }, watch: { fwData() { + this.initDiagramValues(); this.drawDiagram(); }, showNumbers() {