Mercurial > gemma
diff client/src/components/fairway/Fairwayprofile.vue @ 3963:feb53713bc2f diagram-cleanup
client: moved duplicated code to mixins and unified code patterns in diagram components [WIP]
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 15:14:16 +0200 |
parents | cd8ba6599a99 |
children | afc7bca44df4 |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Fri Jul 12 11:58:20 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Fri Jul 12 15:14:16 2019 +0200 @@ -93,12 +93,11 @@ </div> </DiagramLegend> <div - ref="pdfContainer" - id="pdfContainer" - class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative" + class="d-flex flex-fill justify-content-center align-items-center position-relative" + :id="containerId" > <div class="direction-indicator"></div> - <div v-if="!fairwayData"> + <div v-if="!fairwayData.length"> <translate>No data available.</translate> </div> </div> @@ -148,37 +147,21 @@ */ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; -import debounce from "debounce"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; -import { HTTP } from "@/lib/http"; -import { displayError } from "@/lib/errors"; -import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; const GROUND_COLOR = "#4A2F06"; const WATER_COLOR = "#005DFF"; export default { mixins: [diagram, pdfgen, templateLoader], - name: "fairwayprofile", components: { DiagramLegend: () => import("@/components/DiagramLegend") }, data() { return { - resizeListenerFunction: null, + containerId: "fairwayprofile-diagram-container", width: null, - height: null, - form: { - template: null - }, - templates: [], - defaultTemplate: defaultDiagramTemplate, - pdf: { - doc: null, - width: 32, - height: 297 - }, - templateData: null + height: null }; }, computed: { @@ -293,32 +276,6 @@ return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash }; }, - 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 fairwayInfo = this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; @@ -383,21 +340,16 @@ }, getPrintLayout() { return { - main: { - top: 20, - right: 80, - bottom: 60, - left: 80 - } + main: { top: 20, right: 80, bottom: 60, left: 80 } }; }, drawDiagram() { - d3.select(".diagram-container svg").remove(); + d3.select("#" + this.containerId + " svg").remove(); this.scaleFairwayProfile(); if (!this.height || !this.width) return; // do not try to render when height and width are unknown const layout = this.getPrintLayout(this.height); this.renderTo({ - element: ".diagram-container", + element: "#" + this.containerId, dimensions: this.getDimensions({ svgWidth: this.width, svgHeight: this.height, @@ -674,60 +626,15 @@ } }, scaleFairwayProfile() { - if (!document.querySelector(".diagram-container")) return; - const clientHeight = document.querySelector(".diagram-container") + if (!document.querySelector("#" + this.containerId)) return; + const clientHeight = document.querySelector("#" + this.containerId) .clientHeight; - const clientWidth = document.querySelector(".diagram-container") + const clientWidth = document.querySelector("#" + this.containerId) .clientWidth; if (!clientHeight || !clientWidth) return; this.height = clientHeight; this.width = clientWidth; } - }, - created() { - this.resizeListenerFunction = debounce(this.drawDiagram, 100); - window.addEventListener("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}` - }); - }); - }, - updated() { - this.drawDiagram(); - }, - destroyed() { - window.removeEventListener("resize", this.resizeListenerFunction); } }; </script>