@@ -136,7 +137,7 @@ * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * - * Copyright (C) 2018 by via donau + * Copyright (C) 2018, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * @@ -148,9 +149,8 @@ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; import debounce from "debounce"; -import jsPDF from "jspdf"; -import canvg from "canvg"; -import { pdfgen } from "@/lib/mixins"; +import svg2pdf from "svg2pdf.js"; +import { pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -158,7 +158,7 @@ const WATER_COLOR = "#005DFF"; export default { - mixins: [pdfgen], + mixins: [pdfgen, templateLoader], name: "fairwayprofile", components: { DiagramLegend: () => import("@/components/DiagramLegend") @@ -332,14 +332,16 @@ 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" - } - }) + this.loadTemplates("/templates/diagram/" + this.form.template.name) .then(response => { - this.templateData = response.data.template_data; + 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; @@ -351,113 +353,14 @@ } }, downloadPDF() { - if (this.templateData) { - this.pdf.doc = new jsPDF( - "l", - "mm", - this.templateData.properties.paperSize - ); - // pdf width and height in millimeter (landscape) - this.pdf.width = - this.templateData.properties.paperSize === "a3" ? 420 : 297; - this.pdf.height = - this.templateData.properties.paperSize === "a3" ? 297 : 210; - // default values if some are missing in template - let defaultFontSize = 11, - 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": { - this.addDiagram( - e.position, - e.offset || defaultOffset, - e.width, - e.height - ); - break; - } - case "diagramlegend": { - this.addDiagramLegend( - e.position, - e.offset || defaultOffset, - e.color || defaultTextColor - ); - break; - } - case "diagramtitle": { - let fairwayInfo = - this.selectedBottleneck + - " (" + - this.selectedSurvey.date_info + - ")"; - this.addDiagramTitle( - e.position, - e.offset || defaultOffset, - e.fontsize || defaultFontSize, - e.color || defaultTextColor, - fairwayInfo - ); - break; - } - case "image": { - this.addImage( - e.url, - e.format || "", - e.position, - e.offset || defaultOffset, - e.width || 90, - e.height || 60 - ); - break; - } - case "text": { - this.addText( - e.position, - e.offset || defaultOffset, - e.width || defaultWidth, - e.fontsize || defaultFontSize, - e.color || defaultTextColor, - e.text || "" - ); - break; - } - case "box": { - this.addBox( - e.position, - e.offset || defaultOffset, - e.width || 90, - e.height || 60, - 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; - } - } - }); - } + let fairwayInfo = + this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; + + this.generatePDF({ + templateData: this.templateData, + diagramTitle: fairwayInfo + }); + this.pdf.doc.save( this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf" ); @@ -465,8 +368,7 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; - let svg = document.querySelector("#pdfContainer>svg").outerHTML; - + let svg = this.$refs.pdfContainer.getElementsByTagName("svg")[0]; // use default width,height if they are missing in the template definition if (!width) { width = this.templateData.properties.paperSize === "a3" ? 380 : 290; @@ -480,16 +382,12 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } - var canvas = document.createElement("canvas"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight / 2; - canvg(canvas, svg, { - ignoreMouse: true, - ignoreAnimation: true, - ignoreDimensions: true + svg2pdf(svg, this.pdf.doc, { + xOffset: x, + yOffset: y, + // TODO depend on the size and aspect ration on paper + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 }); - var imgData = canvas.toDataURL("image/png"); - this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); }, // Diagram legend addDiagramLegend(position, offset, color) { @@ -513,18 +411,18 @@ this.pdf.doc.circle(x, y, 2, "FD"); this.pdf.doc.text(x + 3, y + 1, "Water"); - this.pdf.doc.setLineDash([0.3]); + this.pdf.doc.setLineDashPattern([0.8], 0); this.pdf.doc.setDrawColor("#0000ff"); this.pdf.doc.setFillColor("#fcfacc"); this.pdf.doc.circle(x, y + 5, 2, "FD"); this.pdf.doc.text(x + 3, y + 6, "Fairway (LOS 1)"); - this.pdf.doc.setLineDash([1]); + this.pdf.doc.setLineDashPattern([1.8], 0); this.pdf.doc.setFillColor("#fdfce5"); this.pdf.doc.circle(x, y + 10, 2, "FD"); this.pdf.doc.text(x + 3, y + 11, "Fairway (LOS 2)"); - this.pdf.doc.setLineDash(); + this.pdf.doc.setLineDashPattern([], 0); this.pdf.doc.setFillColor("#ffffff"); this.pdf.doc.circle(x, y + 15, 2, "FD"); this.pdf.doc.text(x + 3, y + 16, "Fairway (LOS 3)"); diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/fairway/Profiles.vue --- a/client/src/components/fairway/Profiles.vue Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Wed Jul 10 14:27:40 2019 +0200 @@ -28,7 +28,7 @@ >

- @@ -107,6 +66,7 @@ * Thomas Junk */ import { mapState } from "vuex"; +import virtualList from "vue-virtual-scroll-list"; export default { data() { @@ -114,28 +74,33 @@ showDiff: 0 // open first item by default }; }, + components: { + "virtual-list": virtualList, + Item: () => import("./AGMLogItem") + }, computed: { - ...mapState("imports", ["showLogs", "details"]) + ...mapState("imports", ["showLogs", "details"]), + scrollistConfig() { + const smallLayout = { + size: 10, + remain: 20 + }; + const largeLayout = { + size: 12, + remain: 22 + }; + if (this.showAdditional) return smallLayout; + return largeLayout; + } }, methods: { toggleDiff(number) { + console.log(number); if (this.showDiff !== number) { this.showDiff = number; } else { this.showDiff = false; } - }, - isNew(result) { - return result && result.versions && result.versions.length === 1; - }, - isOld(result) { - return !this.isNew(result); - }, - isDifferent(result, entry) { - return ( - this.isOld(result) && - result.versions[0][entry] != result.versions[1][entry] - ); } } }; diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/importoverview/ImportOverview.vue --- a/client/src/components/importoverview/ImportOverview.vue Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/importoverview/ImportOverview.vue Wed Jul 10 14:27:40 2019 +0200 @@ -414,6 +414,8 @@ this.$store.commit("imports/setReviewed", []); this.$store.dispatch("map/refreshLayers"); this.$store.dispatch("imports/loadStagingNotifications"); + this.$store.dispatch("imports/loadStretches"); + this.$store.dispatch("imports/loadSections"); const messages = response.data .map(x => { if (x.message) return x.message; diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/importoverview/LogItem.vue --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/LogItem.vue Wed Jul 10 14:27:40 2019 +0200 @@ -0,0 +1,56 @@ + + + + + diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/map/Map.vue --- a/client/src/components/map/Map.vue Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/map/Map.vue Wed Jul 10 14:27:40 2019 +0200 @@ -284,6 +284,8 @@ }) }); this.layers.get("BOTTLENECKS").setStyle(newStyle); + + this.$store.dispatch("map/refreshLayers"); }) .catch(error => { console.log(error); diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/map/MapPopup.vue --- a/client/src/components/map/MapPopup.vue Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/map/MapPopup.vue Wed Jul 10 14:27:40 2019 +0200 @@ -135,7 +135,6 @@ */ import { mapState } from "vuex"; import Overlay from "ol/Overlay.js"; -import { getCenter } from "ol/extent"; import { TYPES } from "@/store/fairwayavailability"; export default { @@ -182,16 +181,13 @@ "bottlenecks/setSelectedBottleneck", bottleneck.get("objnam") ); - this.$store.dispatch("map/moveMap", { - coordinates: getCenter( - bottleneck - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: 17, - preventZoomOut: true + this.$store.dispatch("map/moveToBoundingBox", { + boundingBox: bottleneck + .getGeometry() + .clone() + .transform("EPSG:3857", "EPSG:4326") + .getExtent(), + zoom: 16 }); this.close(); }, @@ -210,16 +206,13 @@ "bottlenecks/setSelectedBottleneck", bottleneck.get("objnam") ); - this.$store.dispatch("map/moveMap", { - coordinates: getCenter( - bottleneck - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: 17, - preventZoomOut: true + this.$store.dispatch("map/moveToBoundingBox", { + boundingBox: bottleneck + .getGeometry() + .clone() + .transform("EPSG:3857", "EPSG:4326") + .getExtent(), + zoom: 16 }); this.openFairwayAvailability(); }, diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/map/styles.js --- a/client/src/components/map/styles.js Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/map/styles.js Wed Jul 10 14:27:40 2019 +0200 @@ -257,11 +257,11 @@ (map.getLayer("GAUGES").getVisible() && feature.getId().indexOf("gauges") > -1) ) { - let frame = ``; - let waterlevel = ``; - let accuracy = ``; - let comparison = ``; - let svg = `data:image/svg+xml,`; + let frame = ``; + let waterlevel = ``; + let accuracy = ``; + let comparison = ``; + let svg = `data:image/svg+xml,`; s.push( new Style({ geometry: geom, @@ -278,8 +278,8 @@ feature.getId().indexOf("bottlenecks") > -1 ) { let colorUniformTriangle = classifications.surveyCurrency(feature); - let frame = ``; - let svg = `data:image/svg+xml,`; + let frame = ``; + let svg = `data:image/svg+xml,`; s.push( new Style({ geometry: geom, diff -r 20be498adaf7 -r 59dba489ec7b client/src/components/systemconfiguration/ColorSettings.vue --- a/client/src/components/systemconfiguration/ColorSettings.vue Mon Jun 24 10:28:01 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Wed Jul 10 14:27:40 2019 +0200 @@ -29,6 +29,9 @@ Send + + Reset to defaults +

Sounding Result Comparison @@ -52,8 +111,54 @@ v-for="(value, i) in morphologyClassbreaksCompare" :key="i" > + + + + + + + + + + + +

Sounding Result Comparison @@ -52,8 +111,54 @@ v-for="(value, i) in morphologyClassbreaksCompare" :key="i" > +
+ +
+ + +
+
+