diff client/src/store/gauges.js @ 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 eadf9ebc0d6b
line wrap: on
line diff
--- a/client/src/store/gauges.js	Mon Mar 18 16:54:33 2019 +0100
+++ b/client/src/store/gauges.js	Mon Mar 18 17:01:47 2019 +0100
@@ -14,11 +14,16 @@
 import { HTTP } from "@/lib/http";
 import { WFS } from "ol/format.js";
 
+let dateFrom = new Date();
+dateFrom.setDate(dateFrom.getDate() - 30);
+
 const init = () => {
   return {
     gauges: [],
     selectedGaugeISRS: null,
-    waterlevels: []
+    waterlevels: [],
+    dateFrom: dateFrom,
+    dateTo: new Date()
   };
 };
 
@@ -42,6 +47,12 @@
     },
     waterlevels: (state, data) => {
       state.waterlevels = data;
+    },
+    dateFrom: (state, dateFrom) => {
+      state.dateFrom = dateFrom;
+    },
+    dateTo: (state, dateTo) => {
+      state.dateTo = dateTo;
     }
   },
   actions: {
@@ -78,20 +89,17 @@
           });
       });
     },
-    loadWaterlevels({ getters, commit }, { from, to }) {
-      from = from || new Date();
-      to = to || new Date();
-
+    loadWaterlevels({ state, getters, commit }) {
       // include the last day
-      to.setDate(to.getDate() + 1);
+      let dateTo = new Date(state.dateTo.getTime() + 86400);
 
       return new Promise((resolve, reject) => {
         HTTP.get(
           `/data/waterlevels/${
             getters.selectedGauge.properties.isrs_code
-          }?from=${from
+          }?from=${state.dateFrom
             .toISOString()
-            .substr(0, 23)}&to=${to.toISOString().substr(0, 23)}`,
+            .substr(0, 23)}&to=${dateTo.toISOString().substr(0, 23)}`,
           {
             headers: { "X-Gemma-Auth": localStorage.getItem("token") }
           }