Mercurial > gemma

changeset 4805:7de099c4824c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 28 Oct 2019 12:24:35 +0100
parents 75e6ec39a0b7
children a905438a7935
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js
diffstat 5 files changed, 10 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- 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`"
           >
--- 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`"
           >
--- 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 }
--- 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 }
--- 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,