# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1555339040 -7200
# Node ID 7e6ecb6d07961cabd7efbf9801d5d39ffff905e3
# Parent  b8b95292d45f4ccde4c01d92bcbfb59cd71dd001
client: add headline info for the waterlevel generated diagram

diff -r b8b95292d45f -r 7e6ecb6d0796 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Apr 15 15:16:23 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Apr 15 16:37:20 2019 +0200
@@ -176,11 +176,33 @@
   },
   computed: {
     ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]),
-    ...mapGetters("gauges", ["selectedGauge"])
+    ...mapGetters("gauges", ["selectedGauge"]),
+    dateFrom: {
+      get() {
+        return this.$store.state.gauges.dateFrom;
+      }
+    },
+    dateTo: {
+      get() {
+        return this.$store.state.gauges.dateTo;
+      }
+    }
   },
   methods: {
     downloadPDF() {
       var svg = this.$refs.diagramContainer.innerHTML;
+      var gaugeInfo =
+        this.selectedGauge.properties.objname +
+        " (" +
+        this.selectedGauge.id
+          .split(".")[1]
+          .replace(/[()]/g, "")
+          .split(",")[3] +
+        "):" +
+        " Waterlevel " +
+        this.dateFrom.toLocaleDateString() +
+        " - " +
+        this.dateTo.toLocaleDateString();
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
@@ -195,7 +217,13 @@
       });
       var imgData = canvas.toDataURL("image/png");
       pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
-      pdf.save("waterlevel-Diagram.pdf");
+      pdf.setTextColor("steelblue");
+      pdf.setFontSize(22);
+      pdf.setFontStyle("bold");
+      pdf.text(gaugeInfo, 108, 30);
+      pdf.save(
+        this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
+      );
     },
     drawDiagram() {
       // remove old diagram and exit if necessary data is missing