Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3992:2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 17 Jul 2019 15:12:23 +0200 |
parents | 2aaa1948b525 |
children | 44060b9027da |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Wed Jul 17 14:18:43 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Wed Jul 17 15:12:23 2019 +0200 @@ -1,6 +1,7 @@ <template> <div class="d-flex flex-column flex-fill"> <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> + <UISpinnerOverlay v-if="loading" /> <div class="d-flex flex-fill"> <DiagramLegend> <div v-for="(entry, index) in legendLNWL" :key="index" class="legend"> @@ -43,17 +44,16 @@ </div> </DiagramLegend> <div - class="d-flex flex-fill justify-content-center align-items-center" + ref="diagramContainer" :id="containerId" - > - <div v-if="!fwLNWLData.length"> - <translate>No data available.</translate> - </div> - </div> + class="diagram-container flex-fill" + ></div> </div> </div> </template> +<style></style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -71,23 +71,82 @@ * * Fadi Abbud <fadi.abbud@intevation.de> */ import * as d3 from "d3"; +import app from "@/main"; +import debounce from "debounce"; import { mapState } from "vuex"; +import filters from "@/lib/filters.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; -import filters from "@/lib/filters.js"; +import { HTTP } from "@/lib/http"; +import { displayError } from "@/lib/errors"; +import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; export default { mixins: [diagram, pdfgen, templateLoader], + components: { + DiagramLegend: () => import("@/components/DiagramLegend") + }, data() { return { containerId: "availablefairwaydepthlnwl-diagram-container", + resizeListenerFunction: null, + loading: false, scalePaddingLeft: 60, scalePaddingRight: 0, paddingTop: 25, - colors: { - afd: ["#3636ff", "#f49b7f", "#e15472"], - lnwl: "#97ddf3" + pdf: { + doc: null, + width: null, + height: null + }, + form: { + template: null + }, + templateData: null, + templates: [], + defaultTemplate: defaultDiagramTemplate + }; + }, + created() { + this.resizeListenerFunction = debounce(this.drawDiagram, 100); + window.addEventListener("resize", this.resizeListenerFunction); + }, + destroyed() { + window.removeEventListener("resize", this.resizeListenerFunction); + }, + mounted() { + // Nasty but necessary if we don't want to use the updated hook to re-draw + // the diagram because this would re-draw it also for irrelevant reasons. + // In this case we need to wait for the child component (DiagramLegend) to + // render. According to the docs (https://vuejs.org/v2/api/#mounted) this + // should be possible with $nextTick() but it doesn't work because it does + // not guarantee that the DOM is not only updated but also re-painted on the + // screen. + setTimeout(this.drawDiagram, 150); + + this.templates[0] = this.defaultTemplate; + this.form.template = 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", [ @@ -148,13 +207,47 @@ methods: { legendStyle(index) { const style = { - 0: `background-color: ${this.colors.lnwl};`, - 1: `background-color: ${this.colors.afd[2]};`, - 2: `background-color: ${this.colors.afd[1]};`, - 3: `background-color: ${this.colors.afd[0]};` + 0: `background-color: ${this.$options.LWNLCOLORS.LDC};`, + 1: `background-color: ${this.$options.AFDCOLORS[2]};`, + 2: `background-color: ${this.$options.AFDCOLORS[1]};`, + 3: `background-color: ${this.$options.AFDCOLORS[0]};` }; return style[index]; }, + applyChange() { + if (this.form.template.hasOwnProperty("properties")) { + this.templateData = this.defaultTemplate; + return; + } + if (this.form.template) { + this.loadTemplates("/templates/diagram/" + this.form.template.name) + .then(response => { + 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; + } + ); + }) + .catch(e => { + const { status, data } = e.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + }, + downloadPDF() { + let title = `Available Fairway Depth vs LNWL: ${this.featureName}`; + this.generatePDF({ + templateData: this.templateData, + diagramTitle: title + }); + this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`); + }, addDiagramLegend(position, offset, color) { let x = offset.x, y = offset.y; @@ -170,46 +263,52 @@ y = this.pdf.height - offset.y - this.getTextHeight(6); } this.pdf.doc.setTextColor(color); - this.pdf.doc.setDrawColor(this.colors.lnwl); - this.pdf.doc.setFillColor(this.colors.lnwl); + this.pdf.doc.setDrawColor(this.$options.LWNLCOLORS.LDC); + this.pdf.doc.setFillColor(this.$options.LWNLCOLORS.LDC); this.pdf.doc.roundedRect(x, y, 10, 4, 1.5, 1.5, "FD"); this.pdf.doc.text(this.legendLNWL[0], x + 12, y + 3); - this.pdf.doc.setDrawColor(this.colors.afd[2]); - this.pdf.doc.setFillColor(this.colors.afd[2]); + this.pdf.doc.setDrawColor(this.$options.AFDCOLORS[2]); + this.pdf.doc.setFillColor(this.$options.AFDCOLORS[2]); this.pdf.doc.roundedRect(x, y + 5, 10, 4, 1.5, 1.5, "FD"); this.pdf.doc.text(this.legendLNWL[1], x + 12, y + 8); - this.pdf.doc.setDrawColor(this.colors.afd[1]); - this.pdf.doc.setFillColor(this.colors.afd[1]); + this.pdf.doc.setDrawColor(this.$options.AFDCOLORS[1]); + this.pdf.doc.setFillColor(this.$options.AFDCOLORS[1]); this.pdf.doc.roundedRect(x, y + 10, 10, 4, 1.5, 1.5, "FD"); this.pdf.doc.text(this.legendLNWL[2], x + 12, y + 13); - this.pdf.doc.setDrawColor(this.colors.afd[0]); - this.pdf.doc.setFillColor(this.colors.afd[0]); + this.pdf.doc.setDrawColor(this.$options.AFDCOLORS[0]); + this.pdf.doc.setFillColor(this.$options.AFDCOLORS[0]); this.pdf.doc.roundedRect(x, y + 15, 10, 4, 1.5, 1.5, "FD"); this.pdf.doc.text(this.legendLNWL[3], x + 12, y + 18); }, close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - getPrintLayout() { + getPrintLayout(svgHeight) { return { - main: { top: 0, right: 20, bottom: 50, left: 20 } + main: { top: 0, right: 20, bottom: 50, left: 20 }, + nav: { + top: svgHeight - 65, + right: 20, + bottom: 30, + left: 80 + } }; }, drawDiagram() { const elem = document.querySelector("#" + this.containerId); const svgWidth = elem != null ? elem.clientWidth : 0; const svgHeight = elem != null ? elem.clientHeight : 0; - const layout = this.getPrintLayout(); + const layout = this.getPrintLayout(svgHeight); const dimensions = this.getDimensions({ svgHeight, svgWidth, ...layout }); - d3.select("#" + this.containerId + " svg").remove(); - this.renderTo({ element: "#" + this.containerId, dimensions }); + d3.select(".diagram-container svg").remove(); + this.renderTo({ element: ".diagram-container", dimensions }); }, drawTooltip(diagram) { diagram @@ -343,7 +442,7 @@ .attr("transform", `translate(0 ${this.paddingTop})`) .attr("width", afdWidth) .attr("fill", (d, i) => { - return this.colors.afd[i]; + return this.$options.AFDCOLORS[i]; }); }, drawLNWL(data, i, diagram, spaceBetween, widthPerItem, ldcWidth, yScale) { @@ -387,13 +486,13 @@ .attr("transform", `translate(0 ${this.paddingTop})`) .attr("width", ldcWidth) .attr("fill", () => { - return this.colors.lnwl; + return this.$options.LWNLCOLORS.LDC; }); }, drawScaleLabel({ diagram, dimensions }) { diagram .append("text") - .text(this.$gettext("Percent")) + .text(this.$options.LEGEND) .attr("text-anchor", "middle") .attr("x", 0) .attr("y", 0) @@ -472,6 +571,12 @@ fwLNWLData() { this.drawDiagram(); } + }, + LEGEND: app.$gettext("Percent"), + AFDCOLORS: ["#3636ff", "#f49b7f", "#e15472"], + LWNLCOLORS: { + LDC: "#97ddf3", + HDC: "#43FFE1" } }; </script>