changeset 2830:0632d543a427

client: spuc7/8: show time periods in diagram titles
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 15:08:25 +0100
parents 4a1211727d5f
children 3430369d2310
files client/src/components/gauge/Gauges.vue client/src/store/gauges.js
diffstat 2 files changed, 28 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue	Wed Mar 27 14:30:09 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Wed Mar 27 15:08:25 2019 +0100
@@ -118,7 +118,7 @@
   },
   computed: {
     ...mapState("application", ["showGauges", "activeSplitscreenId"]),
-    ...mapState("gauges", ["gauges"]),
+    ...mapState("gauges", ["gauges", "longtermInterval"]),
     ...mapGetters("gauges", ["selectedGauge"]),
     gaugesLabel() {
       return this.$gettext("Gauges");
@@ -200,10 +200,9 @@
       let splitscreenConf = {
         id: "gauge-waterlevel",
         component: "waterlevel",
-        title:
-          this.$gettext("Waterlevel") +
-          ": " +
-          this.gaugeLabel(this.selectedGauge),
+        title: `${this.gaugeLabel(this.selectedGauge)}: ${this.$gettext(
+          "Waterlevel"
+        )} ${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()}`,
         icon: "ruler-vertical",
         closeCallback: () => {
           this.$store.commit("gauges/selectedGaugeISRS", null);
@@ -249,10 +248,9 @@
       let splitscreenConf = {
         id: "gauge-hydrological-conditions",
         component: "hydrological-conditions",
-        title:
-          this.$gettext("Hydrological Conditions") +
-          ": " +
-          this.gaugeLabel(this.selectedGauge),
+        title: `${this.gaugeLabel(this.selectedGauge)}: ${this.$gettext(
+          "Hydrological Conditions"
+        )}`,
         icon: "ruler-vertical",
         closeCallback: () => {
           this.$store.commit("gauges/selectedGaugeISRS", null);
@@ -277,6 +275,12 @@
         this.$store.dispatch("gauges/loadLongtermWaterlevels"),
         this.$store.dispatch("gauges/loadYearWaterlevels")
       ])
+        .then(() => {
+          splitscreenConf.title = `${
+            splitscreenConf.title
+          } ${this.longtermInterval.join(" - ")}`;
+          this.$store.commit("application/addSplitscreen", splitscreenConf);
+        })
         .catch(error => {
           const { status, data } = error.response;
           displayError({
--- a/client/src/store/gauges.js	Wed Mar 27 14:30:09 2019 +0100
+++ b/client/src/store/gauges.js	Wed Mar 27 15:08:25 2019 +0100
@@ -26,6 +26,7 @@
     selectedGaugeISRS: null,
     waterlevels: [],
     longtermWaterlevels: [],
+    longtermInterval: [],
     yearWaterlevels: [],
     nashSutcliffe: null,
     dateFrom: dateFrom,
@@ -58,6 +59,9 @@
     longtermWaterlevels: (state, data) => {
       state.longtermWaterlevels = data;
     },
+    longtermInterval: (state, interval) => {
+      state.longtermInterval = interval;
+    },
     yearWaterlevels: (state, data) => {
       state.yearWaterlevels = data;
     },
@@ -155,8 +159,17 @@
         })
           .then(response => {
             const now = new Date();
-            let data = response.data
-              .split("\n")
+            let data = response.data.split("\n");
+            // get result interval from first line
+            commit(
+              "longtermInterval",
+              data[0]
+                .split(",")[0]
+                .split(" ")[1]
+                .split("-")
+                .map(y => Number(y))
+            );
+            data = data
               // remove empty rows and rows starting with #
               .filter(wl => wl && wl[0] !== "#")
               .map(wl => {