# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1557320907 -7200
# Node ID 9d38df37c1f8e97580b9ec065ca91301d809a5e7
# Parent  0d76a0476a5b392fbaf4aeab6f755dd5369d24f1
client: implemnt pdf-template for hydrologicalconditions diagram

diff -r 0d76a0476a5b -r 9d38df37c1f8 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed May 08 14:35:40 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Wed May 08 15:08:27 2019 +0200
@@ -25,6 +25,19 @@
           <span style="background-color: lightsteelblue"></span>
           Long-term Amplitude
         </div>
+        <select
+          @change="applyChange"
+          v-model="form.template"
+          class="form-control d-block custom-select-sm w-100"
+        >
+          <option
+            v-for="template in templates"
+            :value="template"
+            :key="template.name"
+          >
+            {{ template.name }}
+          </option>
+        </select>
         <div>
           <button
             @click="downloadPDF"
@@ -69,8 +82,12 @@
 import { startOfYear, endOfYear } from "date-fns";
 import jsPDF from "jspdf";
 import canvg from "canvg";
+import { pdfgen } from "@/lib/mixins";
+import { HTTP } from "@/lib/http";
+import { displayError } from "@/lib/errors";
 
 export default {
+  mixins: [pdfgen],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -83,7 +100,47 @@
       dimensions: null,
       extent: null,
       scale: null,
-      axes: null
+      axes: null,
+      templateData: null,
+      form: {
+        template: null,
+        form: null
+      },
+      templates: [],
+      defaultTemplate: {
+        name: "Default",
+        properties: {
+          paperSize: "a4",
+          resolution: 80
+        },
+        elements: [
+          {
+            type: "diagram",
+            position: "topleft",
+            offset: { x: 15, y: 50 },
+            width: 290,
+            height: 100
+          },
+          {
+            type: "diagramlegend",
+            position: "topleft",
+            offset: { x: 30, y: 150 },
+            colot: "black"
+          },
+          {
+            type: "diagramtitle",
+            position: "topleft",
+            offset: { x: 50, y: 26 },
+            fontsize: 22,
+            color: "steelblue"
+          }
+        ]
+      },
+      pdf: {
+        doc: null,
+        width: 420,
+        height: 297
+      }
     };
   },
   computed: {
@@ -122,11 +179,115 @@
       );
     },
     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,
+          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,
+                e.width,
+                e.height
+              );
+              break;
+            }
+            case "diagramtitle": {
+              this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color);
+              break;
+            }
+            case "diagramlegend": {
+              this.addDiagramLegend(
+                e.position,
+                e.offset || defaultOffset,
+                e.color || defaultColor
+              );
+              break;
+            }
+            case "image": {
+              this.addImage(
+                e.url,
+                e.format,
+                e.position,
+                e.offset || defaultOffset,
+                e.width,
+                e.height
+              );
+              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,
+                e.width,
+                e.height,
+                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;
+            }
+          }
+        });
+      }
+      this.pdf.doc.save(
+        this.selectedGauge.properties.objname +
+          " Hydrological-condition Diagram.pdf"
+      );
+    },
+    addDiagram(position, offset, width, height) {
+      let x = offset.x,
+        y = offset.y;
       var svg = document.getElementById(this.containerId).innerHTML;
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
-      var pdf = new jsPDF("l", "mm", "a3");
       var canvas = document.createElement("canvas");
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight / 2;
@@ -136,16 +297,50 @@
         ignoreDimensions: true
       });
       var imgData = canvas.toDataURL("image/png");
-      pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
-      this.addDiagramTitle(pdf, 108, 30, 22, "steelblue");
-      this.addDiagramLegend(pdf, 60, 190, "black");
-      pdf.save(
-        this.selectedGauge.properties.objname +
-          " Hydrological-condition Diagram.pdf"
-      );
+      // landscape format is used for both a3,a4 papersize
+      if (!width) {
+        width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
+      }
+      if (!height) {
+        height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
+      }
+      if (["topright", "bottomright"].indexOf(position) !== -1) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - height;
+      }
+      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
+    },
+    applyChange() {
+      if (this.form.template.hasOwnProperty("properties")) {
+        this.templateData = this.defaultTemplate;
+        return;
+      }
+      if (this.form.template) {
+        HTTP.get("/templates/print/" + this.form.template.name, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            this.templateData = response.data.template_data;
+            this.form.paperSize = this.templateData.properties.paperSize;
+          })
+          .catch(e => {
+            const { status, data } = e.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      }
     },
     // Gauge info as title
-    addDiagramTitle(pdf, x, y, size, color) {
+    addDiagramTitle(position, offset, size, color) {
+      let x = offset.x,
+        y = offset.y;
       let gaugeInfo =
         this.selectedGauge.properties.objname +
         " (" +
@@ -155,31 +350,63 @@
           .split(",")[3] +
         "): Hydrological Conditions " +
         this.longtermInterval.join(" - ");
-      pdf.setTextColor(color);
-      pdf.setFontSize(22);
-      pdf.setFontStyle("bold");
-      pdf.text(gaugeInfo, 108, 30);
+      let width =
+        (this.pdf.doc.getStringUnitWidth(gaugeInfo) * size) / (72 / 25.6) +
+        size / 2;
+      // 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) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - this.getTextHeight(1);
+      }
+      this.pdf.doc.setTextColor(color);
+      this.pdf.doc.setFontSize(size);
+      this.pdf.doc.setFontStyle("bold");
+      this.pdf.doc.text(gaugeInfo, x, y, { baseline: "hanging" });
+    },
+    getTextHeight(numberOfLines) {
+      return (
+        numberOfLines *
+        ((this.pdf.doc.getFontSize() * 25.4) / 80) *
+        this.pdf.doc.getLineHeightFactor()
+      );
     },
     // Diagram legend
-    addDiagramLegend(pdf, x, y, color) {
-      pdf.setFontSize(10);
-      pdf.setTextColor(color);
-      pdf.setDrawColor("white");
-      pdf.setFillColor("red");
-      pdf.circle(x, y, 2, "FD");
-      pdf.text(x + 3, y + 1, "" + this.yearCompare);
-      pdf.setFillColor("orange");
-      pdf.circle(x, y + 5, 2, "FD");
-      pdf.text(x + 3, y + 6, "Q25%");
-      pdf.setFillColor("black");
-      pdf.circle(x, y + 10, 2, "FD");
-      pdf.text(x + 3, y + 11, "Median ");
-      pdf.setFillColor("purple");
-      pdf.circle(x, y + 15, 2, "FD");
-      pdf.text(x + 3, y + 16, "Q75%");
-      pdf.setFillColor("lightsteelblue");
-      pdf.circle(x, y + 20, 2, "FD");
-      pdf.text(x + 3, y + 21, "Long-term Amplitude");
+    addDiagramLegend(position, offset, color) {
+      let x = offset.x,
+        y = offset.y;
+      let width =
+        (this.pdf.doc.getStringUnitWidth("Long-term Amplitude") * 10) /
+          (72 / 25.6) +
+        5;
+      // 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) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - this.getTextHeight(4);
+      }
+      this.pdf.doc.setFontSize(10);
+      this.pdf.doc.setTextColor(color);
+      this.pdf.doc.setDrawColor("white");
+      this.pdf.doc.setFillColor("red");
+      this.pdf.doc.circle(x, y, 2, "FD");
+      this.pdf.doc.text(x + 3, y + 1, "" + this.yearCompare);
+      this.pdf.doc.setFillColor("orange");
+      this.pdf.doc.circle(x, y + 5, 2, "FD");
+      this.pdf.doc.text(x + 3, y + 6, "Q25%");
+      this.pdf.doc.setFillColor("black");
+      this.pdf.doc.circle(x, y + 10, 2, "FD");
+      this.pdf.doc.text(x + 3, y + 11, "Median ");
+      this.pdf.doc.setFillColor("purple");
+      this.pdf.doc.circle(x, y + 15, 2, "FD");
+      this.pdf.doc.text(x + 3, y + 16, "Q75%");
+      this.pdf.doc.setFillColor("lightsteelblue");
+      this.pdf.doc.circle(x, y + 20, 2, "FD");
+      this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude");
     },
     drawDiagram() {
       // remove old diagram
@@ -847,6 +1074,30 @@
   },
   mounted() {
     this.drawDiagram();
+    this.templates[0] = this.defaultTemplate;
+    this.form.template = this.templates[0];
+    this.templateData = this.form.template;
+    HTTP.get("/templates/print", {
+      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();