changeset 3049:7e6ecb6d0796

client: add headline info for the waterlevel generated diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 15 Apr 2019 16:37:20 +0200
parents b8b95292d45f
children c739b81b8f41
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 30 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- 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