Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4794:a2b5021de297

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel: improve button style and downloaded file naming
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 25 Oct 2019 16:12:43 +0200
parents 9412bc2545e8
children 7de099c4824c
comparison
equal deleted inserted replaced
4793:d6d73ca5496a 4794:a2b5021de297
58 :class="[ 58 :class="[
59 'btn btn-sm btn-info d-block w-100 mt-2', 59 'btn btn-sm btn-info d-block w-100 mt-2',
60 { disabled: !waterlevels.length } 60 { disabled: !waterlevels.length }
61 ]" 61 ]"
62 :href="csvLink" 62 :href="csvLink"
63 :download="csvFileName" 63 :download="`${fileName}.csv`"
64 > 64 >
65 <translate>Export as CSV</translate> 65 <translate>Export as CSV</translate>
66 </a> 66 </a>
67 <a 67 <a
68 @click="downloadImage" 68 @click="downloadImage"
69 id="downloadimage" 69 id="downloadimage"
70 :class="[ 70 :class="[
71 'btn btn-sm btn-info d-block w-100 mt-2', 71 'btn btn-sm btn-info text-white d-block w-100 mt-2',
72 { disabled: !waterlevels.length } 72 { disabled: !waterlevels.length }
73 ]" 73 ]"
74 :download="imageFilename" 74 :download="`${fileName}.png`"
75 > 75 >
76 <translate>Export as Image</translate> 76 <translate>Export as Image</translate>
77 </a> 77 </a>
78 <!-- 78 <!--
79 <button 79 <button
192 csvLink() { 192 csvLink() {
193 return ( 193 return (
194 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV) 194 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV)
195 ); 195 );
196 }, 196 },
197 imageFilename() { 197 fileName() {
198 return ( 198 return this.downloadFilename(
199 this.downloadFilename( 199 this.$gettext("Waterlevel"),
200 this.$gettext("Waterlevel"), 200 this.selectedGauge.properties.objname
201 this.selectedGauge.properties.objname
202 ) + ".png"
203 );
204 },
205 csvFileName() {
206 if (!this.dateFromD || !this.dateToD) return "";
207 return (
208 this.downloadFilename(
209 this.$gettext("Waterlevel"),
210 this.selectedGauge.properties.objname
211 ) + ".csv"
212 ); 201 );
213 }, 202 },
214 hasPredictions() { 203 hasPredictions() {
215 return this.waterlevels.find(d => d.predicted); 204 return this.waterlevels.find(d => d.predicted);
216 } 205 }
239 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS" 228 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
240 ? "GAUGE_HYDROLOGICALCONDITIONS" 229 ? "GAUGE_HYDROLOGICALCONDITIONS"
241 : "DEFAULT" 230 : "DEFAULT"
242 ); 231 );
243 }, 232 },
244
245 downloadSVG() { 233 downloadSVG() {
246 let svg = document.getElementById(this.containerId).firstElementChild; 234 let svg = document.getElementById(this.containerId).firstElementChild;
247 let svgXML = new XMLSerializer().serializeToString(svg); 235 let svgXML = new XMLSerializer().serializeToString(svg);
248 let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" }); 236 let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" });
249 let filename = 237 let filename =
258 )} ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`; 246 )} ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`;
259 this.generatePDF({ 247 this.generatePDF({
260 templateData: this.templateData, 248 templateData: this.templateData,
261 diagramTitle: diagramTitle 249 diagramTitle: diagramTitle
262 }); 250 });
263 this.pdf.doc.save( 251 this.pdf.doc.save(this.fileName + ".pdf");
264 this.downloadFilename(
265 this.$gettext("Waterlevel"),
266 this.selectedGauge.properties.objname
267 ) + ".pdf"
268 );
269 }, 252 },
270 applyChange() { 253 applyChange() {
271 if (this.form.template.hasOwnProperty("properties")) { 254 if (this.form.template.hasOwnProperty("properties")) {
272 this.templateData = this.defaultTemplate; 255 this.templateData = this.defaultTemplate;
273 return; 256 return;