# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1572261875 -3600
# Node ID 7de099c4824c5ca60463b71cffb74d8a8b339363
# Parent  75e6ec39a0b7e1256e1a084d3bb7b793d8d33d46
client: image-export: improve hyperlink ids for download

	* use own id-names for <a> element for each diagram to avoid having same
	  id name in dom in case of two diagrams on screen

diff -r 75e6ec39a0b7 -r 7de099c4824c client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Oct 28 11:25:25 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Oct 28 12:24:35 2019 +0100
@@ -42,8 +42,8 @@
             ><translate>Download CSV</translate></a
           >
           <a
-            @click="downloadImage"
-            id="downloadimage"
+            @click="downloadImage('AFDpng')"
+            id="AFDpng"
             class="btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
           >
diff -r 75e6ec39a0b7 -r 7de099c4824c client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Oct 28 11:25:25 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Oct 28 12:24:35 2019 +0100
@@ -42,8 +42,8 @@
             ><translate>Download CSV</translate></a
           >
           <a
-            @click="downloadImage"
-            id="downloadimage"
+            @click="downloadImage('AFDvsLNWLpng')"
+            id="AFDvsLNWLpng"
             class=" btn btn-sm btn-info text-white d-block w-100 mt-2"
             :download="`${fileName}.png`"
           >
diff -r 75e6ec39a0b7 -r 7de099c4824c client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon Oct 28 11:25:25 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon Oct 28 12:24:35 2019 +0100
@@ -80,8 +80,8 @@
           <translate>Export as CSV</translate>
         </a>
         <a
-          @click="downloadImage"
-          id="downloadimage"
+          @click="downloadImage('hydrologicalpng')"
+          id="hydrologicalpng"
           :class="[
             'btn btn-sm btn-info text-white d-block w-100 mt-2',
             { disabled: !longtermWaterlevels.length }
diff -r 75e6ec39a0b7 -r 7de099c4824c client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Oct 28 11:25:25 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Oct 28 12:24:35 2019 +0100
@@ -65,8 +65,8 @@
             <translate>Export as CSV</translate>
           </a>
           <a
-            @click="downloadImage"
-            id="downloadimage"
+            @click="downloadImage('waterlevelpng')"
+            id="waterlevelpng"
             :class="[
               'btn btn-sm btn-info text-white d-block w-100 mt-2',
               { disabled: !waterlevels.length }
diff -r 75e6ec39a0b7 -r 7de099c4824c client/src/lib/mixins.js
--- a/client/src/lib/mixins.js	Mon Oct 28 11:25:25 2019 +0100
+++ b/client/src/lib/mixins.js	Mon Oct 28 12:24:35 2019 +0100
@@ -168,7 +168,7 @@
     ...mapState("user", ["user"])
   },
   methods: {
-    downloadImage() {
+    downloadImage(elementName) {
       const diagramContainer = document.getElementById(this.containerId);
       const { clientHeight, clientWidth } = diagramContainer;
       diagramContainer.firstElementChild.setAttribute("width", clientWidth);
@@ -177,7 +177,7 @@
       const canvas = document.createElement("canvas");
       canvg(canvas, svg);
       const imgData = canvas.toDataURL("image/png");
-      document.getElementById("downloadimage").setAttribute("href", imgData);
+      document.getElementById(elementName).setAttribute("href", imgData);
     },
     addDiagram(position, offset, width, height) {
       let x = offset.x,