Mercurial > gemma
changeset 4805:7de099c4824c
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,