diff client/src/components/gauge/Gauges.vue @ 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
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({