Mercurial > gemma
changeset 4802:2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Mon, 28 Oct 2019 10:20:24 +0100 |
| parents | b23414a3b333 |
| children | b3f65cff13e8 |
| files | client/src/components/gauge/HydrologicalConditions.vue |
| diffstat | 1 files changed, 24 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon Oct 28 10:02:51 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon Oct 28 10:20:24 2019 +0100 @@ -75,10 +75,21 @@ { disabled: !longtermWaterlevels.length } ]" :href="csvLink" - :download="csvFileName" + :download="`${fileName}.csv`" > <translate>Export as CSV</translate> </a> + <a + @click="downloadImage" + id="downloadimage" + :class="[ + 'btn btn-sm btn-info text-white d-block w-100 mt-2', + { disabled: !longtermWaterlevels.length } + ]" + :download="`${fileName}.png`" + > + <translate>Export as Image</translate> + </a> </DiagramLegend> <div class="d-flex flex-fill justify-content-center align-items-center" @@ -163,13 +174,11 @@ csvLink() { return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData); }, - csvFileName() { + fileName() { if (!this.selectedGaugeD || !this.longtermIntervalD) return; - return ( - this.downloadFilename( - this.$gettext("HydrologicalCondition"), - this.selectedGaugeD.properties.objname - ) + ".csv" + return this.downloadFilename( + this.$gettext("HydrologicalCondition"), + this.selectedGaugeD.properties.objname ); }, csvData() { @@ -236,12 +245,7 @@ templateData: this.templateData, diagramTitle: diagramTitle }); - this.pdf.doc.save( - this.downloadFilename( - this.$gettext("HydrologicalConditions"), - this.selectedGaugeD.properties.objname - ) + ".pdf" - ); + this.pdf.doc.save(this.fileName + ".pdf"); }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { @@ -374,6 +378,13 @@ .attr("width", "100%") .attr("height", "100%"); + svg + .append("g") + .append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", "#ffffff"); + // create container for main diagram const diagram = svg .append("g")