# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1568281786 -7200
# Node ID 59a7b7ec56c487f23846b054ae711a03805ffd8f
# Parent  7d9376f8a28c1d2194ea2f7e230c80b9b3f315de
Available_Fairway_DepthLNWL: decouple diagraminfo from selection

diff -r 7d9376f8a28c -r 59a7b7ec56c4 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu Sep 12 11:45:40 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu Sep 12 11:49:46 2019 +0200
@@ -99,6 +99,13 @@
   },
   data() {
     return {
+      selectedFairwayAvailabilityFeatureD: null,
+      fromDate: null,
+      toDate: null,
+      depthlimit1D: null,
+      depthlimit2D: null,
+      widthlimit1D: null,
+      widthlimit2D: null,
       containerId: "availablefairwaydepthlnwl-diagram-container",
       resizeListenerFunction: null,
       loading: false,
@@ -135,7 +142,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;
@@ -175,12 +182,12 @@
       "widthlimit2"
     ]),
     legendLNWL() {
-      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`,
           `< ${lowerBound}`,
@@ -202,12 +209,6 @@
         this.toDate
       )}-${this.$gettext(this.frequency)}-.csv`;
     },
-    fromDate() {
-      return this.from;
-    },
-    toDate() {
-      return this.to;
-    },
     availability() {
       return this.plainAvailability;
     },
@@ -219,11 +220,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;
+    },
     legendStyle(index) {
       let style;
       if (this.depthlimit1 !== this.depthlimit2) {
@@ -645,6 +655,7 @@
   },
   watch: {
     fwLNWLData() {
+      this.initDiagramValues();
       this.drawDiagram();
     },
     showNumbers() {