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;