# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1572343454 -3600
# Node ID db450fcc8ed717027d2792ad99db0257bf6920b6
# Parent  7cd40008124b079a5722b56b82a83ea09cc550a2
client: add title for the exported image

diff -r 7cd40008124b -r db450fcc8ed7 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Oct 29 11:04:14 2019 +0100
@@ -42,7 +42,7 @@
             ><translate>Download CSV</translate></a
           >
           <a
-            @click="downloadImage('AFDpng')"
+            @click="downloadImage('AFDpng', title)"
             id="AFDpng"
             class="btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
diff -r 7cd40008124b -r db450fcc8ed7 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Oct 29 11:04:14 2019 +0100
@@ -42,7 +42,7 @@
             ><translate>Download CSV</translate></a
           >
           <a
-            @click="downloadImage('AFDvsLNWLpng')"
+            @click="downloadImage('AFDvsLNWLpng', title)"
             id="AFDvsLNWLpng"
             class=" btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
diff -r 7cd40008124b -r db450fcc8ed7 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Tue Oct 29 11:04:14 2019 +0100
@@ -91,7 +91,7 @@
             <translate>Export to PDF</translate>
           </button>
           <a
-            @click="downloadImage('fairwaypng')"
+            @click="downloadImage('fairwaypng', title)"
             id="fairwaypng"
             class="btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
diff -r 7cd40008124b -r db450fcc8ed7 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Oct 29 11:04:14 2019 +0100
@@ -80,7 +80,7 @@
           <translate>Export as CSV</translate>
         </a>
         <a
-          @click="downloadImage('hydrologicalpng')"
+          @click="downloadImage('hydrologicalpng', title)"
           id="hydrologicalpng"
           :class="[
             'btn btn-sm btn-info text-white d-block w-100 mt-2',
diff -r 7cd40008124b -r db450fcc8ed7 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Oct 29 11:04:14 2019 +0100
@@ -65,7 +65,7 @@
             <translate>Export as CSV</translate>
           </a>
           <a
-            @click="downloadImage('waterlevelpng')"
+            @click="downloadImage('waterlevelpng', title)"
             id="waterlevelpng"
             :class="[
               'btn btn-sm btn-info text-white d-block w-100 mt-2',
diff -r 7cd40008124b -r db450fcc8ed7 client/src/lib/mixins.js
--- a/client/src/lib/mixins.js	Mon Oct 28 16:38:23 2019 +0100
+++ b/client/src/lib/mixins.js	Tue Oct 29 11:04:14 2019 +0100
@@ -168,7 +168,7 @@
     ...mapState("user", ["user"])
   },
   methods: {
-    downloadImage(elementName) {
+    downloadImage(elementName, title) {
       const offScreen = document.querySelector("#offScreen");
       const DPI = 96;
       const svgWidth = this.millimeter2pixels(428, DPI);
@@ -191,10 +191,22 @@
       diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
       diagramContainer
         .querySelector("svg")
-        .setAttribute("height", clientHeight);
+        .setAttribute("height", clientHeight + 70);
       const svg = diagramContainer.querySelector("svg").outerHTML;
       const canvas = document.createElement("canvas");
-      canvg(canvas, svg);
+      canvg(canvas, svg, { offsetY: 70 });
+      const ctx = canvas.getContext("2d");
+      // Draw white rectangular and place the title on it
+      ctx.beginPath();
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, clientWidth, 70);
+      ctx.stroke();
+      ctx.fillStyle = "steelblue";
+      ctx.font = "500 30px sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(title, clientWidth / 2, 35);
+      ctx.closePath();
+
       const imgData = canvas.toDataURL("image/png");
       document.getElementById(elementName).setAttribute("href", imgData);
       offScreen.removeChild(offScreen.firstChild);