Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 4677:fa55e48bbca1
client: improve filename generation for downloads
* unify filename for the generated csv files
* move function to mixins.js
* mark strings in filename for translations
* replace whitespace with "-"
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 15 Oct 2019 17:16:36 +0200 |
parents | c47c8085cc7e |
children | ce55f15e25e0 |
comparison
equal
deleted
inserted
replaced
4676:5b9ba358a4e7 | 4677:fa55e48bbca1 |
---|---|
124 import { saveAs } from "file-saver"; | 124 import { saveAs } from "file-saver"; |
125 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins"; | 125 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins"; |
126 import { HTTP } from "@/lib/http"; | 126 import { HTTP } from "@/lib/http"; |
127 import { displayError } from "@/lib/errors"; | 127 import { displayError } from "@/lib/errors"; |
128 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; | 128 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; |
129 import sanitize from "sanitize-filename"; | |
130 import { localeDateString } from "@/lib/datelocalization"; | 129 import { localeDateString } from "@/lib/datelocalization"; |
131 // we should load only d3 modules we need but for now we'll go with the lazy way | 130 // we should load only d3 modules we need but for now we'll go with the lazy way |
132 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ | 131 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ |
133 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked | 132 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked |
134 const d3 = Object.assign(d3Base, { lineChunked }); | 133 const d3 = Object.assign(d3Base, { lineChunked }); |
183 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV) | 182 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV) |
184 ); | 183 ); |
185 }, | 184 }, |
186 csvFileName() { | 185 csvFileName() { |
187 if (!this.dateFromD || !this.dateToD) return ""; | 186 if (!this.dateFromD || !this.dateToD) return ""; |
188 return `${this.$gettext("waterlevels")}-${ | 187 return ( |
189 this.selectedGauge.properties.objname | 188 this.downloadFilename( |
190 }-${this.dateFromD.toISOString().split("T")[0]}-${ | 189 this.$gettext("Waterlevel"), |
191 this.dateToD.toISOString().split("T")[0] | 190 this.selectedGauge.properties.objname |
192 }.csv`; | 191 ) + ".csv" |
192 ); | |
193 }, | 193 }, |
194 hasPredictions() { | 194 hasPredictions() { |
195 return this.waterlevels.find(d => d.predicted); | 195 return this.waterlevels.find(d => d.predicted); |
196 } | 196 } |
197 }, | 197 }, |
235 }): Waterlevel ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`; | 235 }): Waterlevel ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`; |
236 this.generatePDF({ | 236 this.generatePDF({ |
237 templateData: this.templateData, | 237 templateData: this.templateData, |
238 diagramTitle: diagramTitle | 238 diagramTitle: diagramTitle |
239 }); | 239 }); |
240 const filename = `Waterlevel-${sanitize( | 240 this.pdf.doc.save( |
241 this.selectedGauge.properties.objname | 241 this.downloadFilename( |
242 )}-${this.dateForPDF()}.pdf`; | 242 this.$gettext("Waterlevel"), |
243 this.pdf.doc.save(filename); | 243 this.selectedGauge.properties.objname |
244 ) + ".pdf" | |
245 ); | |
244 }, | 246 }, |
245 applyChange() { | 247 applyChange() { |
246 if (this.form.template.hasOwnProperty("properties")) { | 248 if (this.form.template.hasOwnProperty("properties")) { |
247 this.templateData = this.defaultTemplate; | 249 this.templateData = this.defaultTemplate; |
248 return; | 250 return; |