gemma: client/src/components/fairway/Fairwayprofile.vue comparison

comparison 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

comparison

equal deleted inserted replaced

-:0ed8af02d5a9
+:feb53713bc2f
 <translate>Export to PDF</translate>
 </button>
 </div>
 </DiagramLegend>
 <div
-ref="pdfContainer"
+class="d-flex flex-fill justify-content-center align-items-center position-relative"
-id="pdfContainer"
+:id="containerId"
-class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative"
 >
 <div class="direction-indicator"></div>
-<div v-if="!fairwayData">
+<div v-if="!fairwayData.length">
 <translate>No data available.</translate>
 </div>
 </div>
 </div>
 </div>
 * Markus Kottländer <markus.kottlaender@intevation.de>
 * Fadi Abbud <fadi.abbud@intevation.de>
 */
 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,
+height: null
-form: {
-template: null
-},
-templates: [],
-defaultTemplate: defaultDiagramTemplate,
-pdf: {
-doc: null,
-width: 32,
-height: 297
-},
-templateData: null
 };
 },
 computed: {
 ...mapGetters("map", ["openLayersMap"]),
 ...mapGetters("fairwayprofile", ["totalLength"]),
 let strokeOpacity = strokeColor.pop();
 let strokeDash = style.getStroke().getLineDash();
 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 + ")";
 this.generatePDF({
 this.pdf.doc.circle(x, y + 25, 2, "FD");
 this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)");
 },
 getPrintLayout() {
 return {
-main: {
+main: { top: 20, right: 80, bottom: 60, left: 80 }
-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,
 ...layout
 })
 .attr("fill-opacity", 0)
 .attr("d", profileLine);
 }
 },
 scaleFairwayProfile() {
-if (!document.querySelector(".diagram-container")) return;
+if (!document.querySelector("#" + this.containerId)) return;
-const clientHeight = document.querySelector(".diagram-container")
+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>

Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3963:feb53713bc2f diagram-cleanup