Mercurial > gemma

changeset 3796:243316850889 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve pdf generation * Move general template interpretation code from Waterlevel.vue to lib/mixins.js. This is the first step to remove code redundancy as this code is similiar in four other places.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 04 Jul 2019 09:16:10 +0200
parents b330e014c655
children 20c1ac8ab8a2
files client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js
diffstat 2 files changed, 124 insertions(+), 112 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Thu Jul 04 08:33:12 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Jul 04 09:16:10 2019 +0200
@@ -109,7 +109,6 @@
 import { lineChunked } from "d3-line-chunked";
 import { endOfDay } from "date-fns";
 import debounce from "debounce";
-import jsPDF from "jspdf-yworks";
 import svg2pdf from "svg2pdf.js";
 import { saveAs } from "file-saver";
 import { pdfgen } from "@/lib/mixins";
@@ -250,116 +249,24 @@
       saveAs(blog, filename);
     },
     downloadPDF() {
-      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;
-      // check the template elements
-      if (this.templateData) {
-        let defaultFontSize = 11,
-          defaultColor = "black",
-          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);
-              break;
-            }
-            case "diagramlegend": {
-              this.addDiagramLegend(
-                e.position,
-                e.offset || defaultOffset,
-                e.color || defaultColor
-              );
-              break;
-            }
-            case "diagramtitle": {
-              let gaugeInfo =
-                this.selectedGauge.properties.objname +
-                " (" +
-                this.selectedGauge.id
-                  .split(".")[1]
-                  .replace(/[()]/g, "")
-                  .split(",")[3] +
-                "):" +
-                " Waterlevel " +
-                this.dateFrom.toLocaleDateString() +
-                " - " +
-                this.dateTo.toLocaleDateString();
-              this.addDiagramTitle(
-                e.position,
-                e.offset || defaultOffset,
-                e.fontsize || defaultFontSize,
-                e.color || defaultColor,
-                gaugeInfo
-              );
-              break;
-            }
-            case "text": {
-              this.addText(
-                e.position,
-                e.offset || defaultOffset,
-                e.width || defaultWidth,
-                e.fontsize || defaultFontSize,
-                e.color || defaultTextColor,
-                e.text || ""
-              );
-              break;
-            }
-            case "image": {
-              this.addImage(
-                e.url,
-                e.format || "",
-                e.position,
-                e.offset || defaultOffset,
-                e.width || 90,
-                e.height || 60
-              );
-              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 gaugeInfo =
+        this.selectedGauge.properties.objname +
+        " (" +
+        this.selectedGauge.id
+          .split(".")[1]
+          .replace(/[()]/g, "")
+          .split(",")[3] +
+        "):" +
+        " Waterlevel " +
+        this.dateFrom.toLocaleDateString() +
+        " - " +
+        this.dateTo.toLocaleDateString();
+
+      this.generatePDF({
+        templateData: this.templateData,
+        diagramTitle: gaugeInfo
+      });
+
       this.pdf.doc.save(
         this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
       );
--- a/client/src/lib/mixins.js	Thu Jul 04 08:33:12 2019 +0200
+++ b/client/src/lib/mixins.js	Thu Jul 04 09:16:10 2019 +0200
@@ -13,8 +13,10 @@
  * * Fadi Abbud <fadi.abbud@intevation.de>
  * * Bernhard Reiter <bernhard.reiter@intevation.de>
  */
+import jsPDF from "jspdf-yworks";
 import locale2 from "locale2";
 import { mapState } from "vuex";
+
 export const sortTable = {
   data() {
     return {
@@ -68,7 +70,110 @@
     ...mapState("user", ["user"])
   },
   methods: {
-    // add text at specific coordinates and determine how many wrolds in a single line
+    generatePDF(params) {
+      // creates a new jsPDF object into this.pdf.doc
+      let templateData = params["templateData"];
+      let diagramTitle = params["diagramTitle"];
+
+      this.pdf.doc = new jsPDF(
+        "l",
+        "mm",
+        this.templateData.properties.paperSize
+      );
+      // pdf width and height in millimeter (landscape)
+      this.pdf.width = templateData.properties.paperSize === "a3" ? 420 : 297;
+      this.pdf.height = templateData.properties.paperSize === "a4" ? 297 : 210;
+      // check the template elements
+      if (templateData) {
+        let defaultFontSize = 11,
+          defaultColor = "black",
+          defaultWidth = 70,
+          defaultTextColor = "black",
+          defaultBorderColor = "white",
+          defaultBgColor = "white",
+          defaultRounding = 2,
+          defaultPadding = 2,
+          defaultOffset = { x: 0, y: 0 };
+        templateData.elements.forEach(e => {
+          switch (e.type) {
+            case "diagram": {
+              this.addDiagram(e.position, e.offset || defaultOffset);
+              break;
+            }
+            case "diagramlegend": {
+              this.addDiagramLegend(
+                e.position,
+                e.offset || defaultOffset,
+                e.color || defaultColor
+              );
+              break;
+            }
+            case "diagramtitle": {
+              this.addDiagramTitle(
+                e.position,
+                e.offset || defaultOffset,
+                e.fontsize || defaultFontSize,
+                e.color || defaultColor,
+                diagramTitle
+              );
+              break;
+            }
+            case "text": {
+              this.addText(
+                e.position,
+                e.offset || defaultOffset,
+                e.width || defaultWidth,
+                e.fontsize || defaultFontSize,
+                e.color || defaultTextColor,
+                e.text || ""
+              );
+              break;
+            }
+            case "image": {
+              this.addImage(
+                e.url,
+                e.format || "",
+                e.position,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60
+              );
+              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;
+            }
+          }
+        });
+      }
+    },
+
+    // add text at specific coordinates and do line breaks
     addText(position, offset, width, fontSize, color, text) {
       text = this.replacePlaceholders(text);
       // split the incoming string to an array, each element is a string of