# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1568288899 -7200
# Node ID b146d3c648f8c579c9e387a291c2b73045ae8477
# Parent  59a7b7ec56c487f23846b054ae711a03805ffd8f
gauges: decouple date and title from store

diff -r 59a7b7ec56c4 -r b146d3c648f8 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu Sep 12 11:49:46 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Sep 12 13:48:19 2019 +0200
@@ -134,6 +134,9 @@
   },
   data() {
     return {
+      dateFromD: null,
+      dateToD: null,
+      selectedGaugeD: null,
       containerId: "waterlevel-diagram-container",
       resizeListenerFunction: null,
       form: {
@@ -155,25 +158,17 @@
     ...mapState("application", ["paneSetup"]),
     ...mapState("gauges", [
       "dateFrom",
+      "dateTo",
       "waterlevels",
       "waterlevelsCSV",
       "nashSutcliffe"
     ]),
     ...mapGetters("gauges", ["selectedGauge"]),
     title() {
-      return `${this.selectedGauge.properties.objname}: ${this.$gettext(
+      if (!this.selectedGaugeD) return;
+      return `${this.selectedGaugeD.properties.objname}: ${this.$gettext(
         "Waterlevel"
-      )} (${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()})`;
-    },
-    dateFrom: {
-      get() {
-        return this.$store.state.gauges.dateFrom;
-      }
-    },
-    dateTo: {
-      get() {
-        return this.$store.state.gauges.dateTo;
-      }
+      )} (${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()})`;
     },
     csvLink() {
       return (
@@ -183,8 +178,8 @@
     csvFileName() {
       return `${this.$gettext("waterlevels")}-${
         this.selectedGauge.properties.objname
-      }-${this.dateFrom.toISOString().split("T")[0]}-${
-        this.dateTo.toISOString().split("T")[0]
+      }-${this.dateFromD.toISOString().split("T")[0]}-${
+        this.dateToD.toISOString().split("T")[0]
       }.csv`;
     },
     hasPredictions() {
@@ -199,10 +194,16 @@
       this.$nextTick(() => this.drawDiagram());
     },
     waterlevels() {
+      this.initialDiagramValues();
       this.drawDiagram();
     }
   },
   methods: {
+    initialDiagramValues() {
+      this.dateFromD = this.dateFrom;
+      this.dateToD = this.dateTo;
+      this.selectedGaugeD = this.selectedGauge;
+    },
     close() {
       this.$store.commit(
         "application/paneSetup",
@@ -223,9 +224,9 @@
       let diagramTitle =
         this.gaugeInfo(this.selectedGauge) +
         ": Waterlevel " +
-        this.dateFrom.toLocaleDateString() +
+        this.dateFromD.toLocaleDateString() +
         " - " +
-        this.dateTo.toLocaleDateString();
+        this.dateToD.toLocaleDateString();
       this.generatePDF({
         templateData: this.templateData,
         diagramTitle: diagramTitle
@@ -1180,7 +1181,7 @@
     // not guarantee that the DOM is not only updated but also re-painted on the
     // screen.
     setTimeout(this.drawDiagram, 150);
-
+    this.initialDiagramValues();
     this.templates[0] = this.defaultTemplate;
     this.form.template = this.templates[0];
     this.templateData = this.form.template;