# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1556806703 -7200
# Node ID 2ea307abf80b91697b2e6fa20d969ca51ffb3f76
# Parent  42324626f9e24c03b01dbf40d3182c26ec7c32db
client: improve template papersize and adjust the default template elements

diff -r 42324626f9e2 -r 2ea307abf80b client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 02 14:44:16 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 02 16:18:23 2019 +0200
@@ -100,30 +100,30 @@
         {
           name: "Default",
           properties: {
-            format: "landscape",
-            paperSize: "a3",
+            paperSize: "a4",
             resolution: "80"
           },
           elements: [
             {
               type: "diagramlegend",
               position: "topleft",
-              offset: { x: 60, y: 190 },
+              offset: { x: 30, y: 150 },
               color: "black"
             },
             {
               type: "diagramtitle",
               position: "topleft",
-              offset: { x: 108, y: 30 },
+              offset: { x: 50, y: 26 },
               fontsize: 22,
               color: "steelblue"
             },
             {
               type: "text",
               position: "topleft",
-              offset: { x: 7, y: 5 },
-              fontsize: 14,
+              offset: { x: 3, y: 3 },
+              fontsize: 8,
               width: 90,
+              color: "gray",
               text: this.$gettext("Generated by") + " " + "{user}, {date}"
             }
           ]
@@ -163,7 +163,7 @@
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
-      this.pdf.doc = new jsPDF("l", "mm", "a3");
+      this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize);
       var canvas = document.createElement("canvas");
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight / 2;
@@ -173,7 +173,20 @@
         ignoreDimensions: true
       });
       var imgData = canvas.toDataURL("image/png");
-      this.pdf.doc.addImage(imgData, "PNG", 40, 60, 380, 130);
+      // landscape format is used for both a3,a4 papersize
+      let xDiagram = this.form.paperSize === "a3" ? 40 : 15,
+        yDiagram = this.form.paperSize === "a3" ? 60 : 50,
+        widthDiagram = this.form.paperSize === "a3" ? 380 : 290,
+        heightDiagram = this.form.paperSize === "a3" ? 130 : 100;
+      this.pdf.doc.addImage(
+        imgData,
+        "PNG",
+        xDiagram,
+        yDiagram,
+        widthDiagram,
+        heightDiagram
+      );
+      // check the template element
       if (this.templateData) {
         let defaultFontSize = 11,
           defaultColor = "black",
@@ -248,6 +261,7 @@
         })
           .then(response => {
             this.templateData = response.data.template_data;
+            this.form.paperSize = this.templateData.properties.paperSize;
           })
           .catch(e => {
             const { status, data } = e.response;