changeset 3544:067ad32fba69

client: diagram-template: improve values of template elements * add default values to template elements to use if some are missing in the template definition
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 31 May 2019 11:08:27 +0200
parents 7219f4b097fe
children 8cb5a99784b5
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js
diffstat 6 files changed, 57 insertions(+), 50 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 31 11:08:27 2019 +0200
@@ -324,27 +324,27 @@
                 e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
-                e.text
+                e.text || ""
               );
               break;
             }
             case "image": {
               this.addImage(
                 e.url,
-                e.format,
+                e.format || "",
                 e.position,
                 e.offset || defaultOffset,
-                e.width,
-                e.height
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                e.offset,
-                e.width,
-                e.height,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.color || defaultBgColor,
                 e.brcolor || defaultBorderColor
@@ -362,7 +362,7 @@
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.background || defaultBgColor,
-                e.text,
+                e.text || "",
                 e.brcolor || defaultBorderColor
               );
               break;
@@ -379,6 +379,7 @@
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
+      // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
       }
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri May 31 11:08:27 2019 +0200
@@ -334,27 +334,27 @@
                 e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
-                e.text
+                e.text || ""
               );
               break;
             }
             case "image": {
               this.addImage(
                 e.url,
-                e.format,
+                e.format || "",
                 e.position,
                 e.offset || defaultOffset,
-                e.width,
-                e.height
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                e.offset,
-                e.width,
-                e.height,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.color || defaultBgColor,
                 e.brcolor || defaultBorderColor
@@ -372,7 +372,7 @@
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.background || defaultBgColor,
-                e.text,
+                e.text || "",
                 e.brcolor || defaultBorderColor
               );
               break;
@@ -389,6 +389,7 @@
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
+      // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
       }
@@ -418,7 +419,6 @@
       this.pdf.doc.setFontSize(10);
       let width =
         (this.pdf.doc.getStringUnitWidth(">= LDC") * 10) / (72 / 25.6) + 15;
-
       // if position is on the right, x needs to be calculate with pdf width and
       // the size of the element
       if (["topright", "bottomright"].indexOf(position) !== -1) {
--- a/client/src/components/fairway/Fairwayprofile.vue	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Fri May 31 11:08:27 2019 +0200
@@ -312,9 +312,9 @@
                 ")";
               this.addDiagramTitle(
                 e.position,
-                e.offset,
-                e.fontsize,
-                e.color,
+                e.offset || defaultOffset,
+                e.fontsize || defaultFontSize,
+                e.color || defaultTextColor,
                 fairwayInfo
               );
               break;
@@ -322,11 +322,11 @@
             case "image": {
               this.addImage(
                 e.url,
-                e.format,
+                e.format || "",
                 e.position,
                 e.offset || defaultOffset,
-                e.width,
-                e.height
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
@@ -337,16 +337,16 @@
                 e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
-                e.text
+                e.text || ""
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                e.offset,
-                e.width,
-                e.height,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.color || defaultBgColor,
                 e.brcolor || defaultBorderColor
@@ -364,7 +364,7 @@
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.background || defaultBgColor,
-                e.text,
+                e.text || "",
                 e.brcolor || defaultBorderColor
               );
               break;
@@ -381,7 +381,7 @@
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
-      // landscape format is used for both a3,a4 papersize
+      // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
       }
--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri May 31 11:08:27 2019 +0200
@@ -298,11 +298,11 @@
             case "image": {
               this.addImage(
                 e.url,
-                e.format,
+                e.format || "",
                 e.position,
                 e.offset || defaultOffset,
-                e.width,
-                e.height
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
@@ -313,20 +313,21 @@
                 e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
-                e.text
+                e.text || ""
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                e.offset,
-                e.width,
-                e.height,
+                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": {
@@ -340,7 +341,7 @@
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.background || defaultBgColor,
-                e.text,
+                e.text || "",
                 e.brcolor || defaultBorderColor
               );
               break;
@@ -389,7 +390,7 @@
         ignoreDimensions: true
       });
       var imgData = canvas.toDataURL("image/png");
-      // landscape format is used for both a3,a4 papersize
+      // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
       }
--- a/client/src/components/gauge/Waterlevel.vue	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri May 31 11:08:27 2019 +0200
@@ -231,6 +231,7 @@
         "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 =
@@ -280,9 +281,9 @@
                 this.dateTo.toLocaleDateString();
               this.addDiagramTitle(
                 e.position,
-                e.offset,
-                e.fontsize,
-                e.color,
+                e.offset || defaultOffset,
+                e.fontsize || defaultFontSize,
+                e.color || defaultColor,
                 gaugeInfo
               );
               break;
@@ -294,27 +295,27 @@
                 e.width || defaultWidth,
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
-                e.text
+                e.text || ""
               );
               break;
             }
             case "image": {
               this.addImage(
                 e.url,
-                e.format,
+                e.format || "",
                 e.position,
                 e.offset || defaultOffset,
-                e.width,
-                e.height
+                e.width || 90,
+                e.height || 60
               );
               break;
             }
             case "box": {
               this.addBox(
                 e.position,
-                e.offset,
-                e.width,
-                e.height,
+                e.offset || defaultOffset,
+                e.width || 90,
+                e.height || 60,
                 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
                 e.color || defaultBgColor,
                 e.brcolor || defaultBorderColor
@@ -332,7 +333,7 @@
                 e.fontsize || defaultFontSize,
                 e.color || defaultTextColor,
                 e.background || defaultBgColor,
-                e.text,
+                e.text || "",
                 e.brcolor || defaultBorderColor
               );
               break;
@@ -402,7 +403,7 @@
         ignoreDimensions: true
       });
       var imgData = canvas.toDataURL("image/png");
-      // landscape format is used for both a3,a4 papersize
+      // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
       }
--- a/client/src/lib/mixins.js	Fri May 31 09:35:52 2019 +0200
+++ b/client/src/lib/mixins.js	Fri May 31 11:08:27 2019 +0200
@@ -130,6 +130,10 @@
           image.src = "/img/gemma-logo-for-pdf.png";
         }
       }
+      if (format === "") {
+        let tmp = image.src.split(".");
+        format = tmp[tmp.length - 1].toUpperCase();
+      }
       this.pdf.doc.addImage(image, format, x, y, width, height);
     },
     // add text at specific coordinates with a background box