Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepth.vue @ 3273:050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 15 May 2019 15:31:33 +0200 |
parents | 1a97a079ef1b |
children | 215173f62900 |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Wed May 15 14:54:53 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Wed May 15 15:31:33 2019 +0200 @@ -16,6 +16,7 @@ </ul> <div class="my-auto mx-auto"> <select + @change="applyChange" v-model="form.template" class="form-control d-block custom-select-sm w-100 mt-1" > @@ -71,6 +72,8 @@ import jsPDF from "jspdf"; import canvg from "canvg"; import { pdfgen } from "@/lib/mixins"; +import { HTTP } from "@/lib/http"; +import { displayError } from "@/lib/errors"; const hoursInDays = x => x / 24; @@ -101,7 +104,7 @@ }, templateData: null, templates: [], - defaultemplate: { + defaultTemplate: { name: "Default", properties: { paperSize: "a4" @@ -136,9 +139,30 @@ }, mounted() { this.drawDiagram(); - this.templates[0] = this.defaultemplate; + this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; - this.templateData = this.templates[0]; + this.templateData = this.form.template; + HTTP.get("/templates/diagram", { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + if (response.data.length) { + this.templates = response.data; + this.form.template = this.templates[0]; + this.templates[this.templates.length] = this.defaultTemplate; + this.applyChange(); + } + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); }, computed: { ...mapState("fairwayavailability", [ @@ -170,6 +194,30 @@ } }, methods: { + applyChange() { + if (this.form.template.hasOwnProperty("properties")) { + this.templateData = this.defaultTemplate; + 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" + } + }) + .then(response => { + this.templateData = response.data.template_data; + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + }, downloadPDF() { this.pdf.doc = new jsPDF( "l", @@ -182,9 +230,16 @@ this.pdf.height = this.templateData.properties.paperSize === "a3" ? 297 : 210; if (this.templateData) { - let defaultOffset = { x: 0, y: 0 }, - defaultFontSize = 10, - defaultColor = "black"; + // default values if some are missing in template + let defaultFontSize = 11, + defaultColor = "black", + defaultWidth = 70, + defaultTextColor = "black", + defaultBorderColor = "white", + defaultBgColor = "white", + defaultRounding = 2, + defaultPadding = 2, + defaultOffset = { x: 0, y: 0 }; this.templateData.elements.forEach(e => { switch (e.type) { case "diagram": { @@ -211,6 +266,57 @@ e.offset || defaultOffset, e.color || defaultColor ); + break; + } + case "text": { + this.addText( + e.position, + e.offset || defaultOffset, + e.width || defaultWidth, + e.fontsize || defaultFontSize, + e.color || defaultTextColor, + e.text + ); + break; + } + case "image": { + this.addImage( + e.url, + e.format, + e.position, + e.offset || defaultOffset, + e.width, + e.height + ); + break; + } + case "box": { + this.addBox( + e.position, + e.offset, + e.width, + e.height, + e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, + e.color || defaultBgColor, + e.brcolor || defaultBorderColor + ); + break; + } + case "textbox": { + this.addTextBox( + e.position, + e.offset || defaultOffset, + e.width, + e.height, + e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, + e.padding || defaultPadding, + e.fontsize || defaultFontSize, + e.color || defaultTextColor, + e.background || defaultBgColor, + e.text, + e.brcolor || defaultBorderColor + ); + break; } } }); @@ -250,7 +356,7 @@ addDiagramTitle(position, offset, size, color) { let x = offset.x, y = offset.y; - let title = this.title; + let title = `Available Fairway Depth: ${this.featureName}`; let width = (this.pdf.doc.getStringUnitWidth(title) * size) / (72 / 25.6) + size / 2;