Mercurial > gemma
diff client/src/components/gauge/HydrologicalConditions.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 | 7b3935a8d9ee |
children | afc7bca44df4 |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 11:58:20 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 15:14:16 2019 +0200 @@ -1,13 +1,8 @@ <template> <div class="d-flex flex-column flex-fill"> - <UIBoxHeader - icon="ruler-vertical" - :title="title" - :closeCallback="close" - class="rounded-0" - /> + <UIBoxHeader icon="ruler-vertical" :title="title" :closeCallback="close" /> <div class="d-flex flex-fill"> - <DiagramLegend id="diagramlegendId"> + <DiagramLegend> <div class="legend"> <span style="background-color: red; width: 20px; height: 20px;" @@ -102,12 +97,8 @@ import { mapState, mapGetters } from "vuex"; import * as d3 from "d3"; -import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; -import { HTTP } from "@/lib/http"; -import { displayError } from "@/lib/errors"; -import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; export default { mixins: [diagram, pdfgen, templateLoader], @@ -116,20 +107,7 @@ }, data() { return { - containerId: "hydrologicalconditions-diagram-container", - resizeListenerFunction: null, - templateData: null, - form: { - template: null, - form: null - }, - templates: [], - defaultTemplate: defaultDiagramTemplate, - pdf: { - doc: null, - width: 420, - height: 297 - } + containerId: "hydrologicalconditions-diagram-container" }; }, computed: { @@ -213,32 +191,6 @@ " Hydrological-condition Diagram.pdf" ); }, - 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}` - }); - }); - } - }, // Diagram legend addDiagramLegend(position, offset, color) { let x = offset.x, @@ -969,48 +921,6 @@ .attr("height", textBBox.height + tooltipPadding * 2); }); } - }, - 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}` - }); - }); - }, - destroyed() { - window.removeEventListener("resize", this.resizeListenerFunction); } }; </script>