Mercurial > gemma
changeset 3803:9b9140c65a96 yworks-svg2pdf
hydrological_conditions: use mixin for template loading and image processing
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 04 Jul 2019 11:15:05 +0200 |
parents | e8a950cf6c02 |
children | 7f2c5576ec0a |
files | client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 1 files changed, 10 insertions(+), 43 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu Jul 04 10:57:43 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Jul 04 11:15:05 2019 +0200 @@ -109,12 +109,12 @@ import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; import canvg from "canvg"; -import { pdfgen } from "@/lib/mixins"; +import { pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; export default { - mixins: [pdfgen], + mixins: [pdfgen, templateLoader], components: { DiagramLegend: () => import("@/components/DiagramLegend") }, @@ -308,49 +308,16 @@ return; } if (this.form.template) { - HTTP.get("/templates/diagram/" + this.form.template.name, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }) + this.loadTemplates("/templates/diagram/" + this.form.template.name) .then(response => { - /** - * In order to render the images from the template, we need to convert - * each image to dataURIs. Since this happens asynchronous, - * we need to wrap each image into its own promise and only after all are - * finished, we continue with the flow. - */ - const imageElementLoaders = response.data.template_data.elements.reduce( - (o, n, i) => { - if (n.type === "image") { - o.push( - new Promise(resolve => { - const image = new Image(); - image.onload = function() { - var canvas = document.createElement("canvas"); - canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size - canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size - canvas.getContext("2d").drawImage(this, 0, 0); - resolve({ - index: i, - url: canvas.toDataURL("image/png") - }); - }; - image.src = n.url; - }) - ); - } - return o; - }, - [] + this.prepareImages(response.data.template_data.elements).then( + values => { + values.forEach(v => { + response.data.template_data.elements[v.index].url = v.url; + }); + this.templateData = response.data.template_data; + } ); - Promise.all(imageElementLoaders).then(values => { - values.forEach(v => { - response.data.template_data.elements[v.index].url = v.url; - }); - this.templateData = response.data.template_data; - }); }) .catch(e => { const { status, data } = e.response;