diff client/src/components/gauge/Gauges.vue @ 2710:f393fabfdd35

client: waterlevel diagram: chart extent based on selected dates instead of data The extent of the chart's x-axis (date) was based on the data that is shown. Now it is based on the fromDate and toDate set in the Guage dialog box.
author Markus Kottlaender <markus@intevation.de>
date Mon, 18 Mar 2019 17:01:47 +0100
parents e622689d73bd
children 0ac077897ce5
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue	Mon Mar 18 16:54:33 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Mon Mar 18 17:01:47 2019 +0100
@@ -104,9 +104,7 @@
 export default {
   data() {
     return {
-      loading: false,
-      dateFrom: new Date(),
-      dateTo: new Date()
+      loading: false
     };
   },
   computed: {
@@ -120,6 +118,22 @@
       set(isrs) {
         this.$store.dispatch("gauges/selectedGaugeISRS", isrs);
       }
+    },
+    dateFrom: {
+      get() {
+        return this.$store.state.gauges.dateFrom;
+      },
+      set(date) {
+        this.$store.commit("gauges/dateFrom", date);
+      }
+    },
+    dateTo: {
+      get() {
+        return this.$store.state.gauges.dateTo;
+      },
+      set(date) {
+        this.$store.commit("gauges/dateTo", date);
+      }
     }
   },
   watch: {
@@ -174,10 +188,7 @@
       this.loading = true;
       this.$store.commit("application/showSplitscreen", true);
       this.$store
-        .dispatch("gauges/loadWaterlevels", {
-          from: this.dateFrom,
-          to: this.toDate
-        })
+        .dispatch("gauges/loadWaterlevels")
         .catch(error => {
           const { status, data } = error.response;
           displayError({
@@ -199,7 +210,6 @@
     }
   },
   mounted() {
-    this.dateFrom.setDate(this.dateFrom.getDate() - 30);
     this.$store.dispatch("gauges/loadGauges");
   }
 };