--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 15 14:54:53 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 15 15:31:33 2019 +0200
@@ -16,6 +16,7 @@
         </ul>
         <div class="my-auto mx-auto">
           <select
+            @change="applyChange"
             v-model="form.template"
             class="form-control d-block custom-select-sm w-100 mt-1"
           >
@@ -71,6 +72,8 @@
 import jsPDF from "jspdf";
 import canvg from "canvg";
 import { pdfgen } from "@/lib/mixins";
+import { HTTP } from "@/lib/http";
+import { displayError } from "@/lib/errors";
 
 const hoursInDays = x => x / 24;
 
@@ -101,7 +104,7 @@
       },
       templateData: null,
       templates: [],
-      defaultemplate: {
+      defaultTemplate: {
         name: "Default",
         properties: {
           paperSize: "a4"
@@ -136,9 +139,30 @@
   },
   mounted() {
     this.drawDiagram();
-    this.templates[0] = this.defaultemplate;
+    this.templates[0] = this.defaultTemplate;
     this.form.template = this.templates[0];
-    this.templateData = this.templates[0];
+    this.templateData = this.form.template;
+    HTTP.get("/templates/diagram", {
+      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}`
+        });
+      });
   },
   computed: {
     ...mapState("fairwayavailability", [
@@ -170,6 +194,30 @@
     }
   },
   methods: {
+    applyChange() {
+      if (this.form.template.hasOwnProperty("properties")) {
+        this.templateData = this.defaultTemplate;
+        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"
+          }
+        })
+          .then(response => {
+            this.templateData = response.data.template_data;
+          })
+          .catch(e => {
+            const { status, data } = e.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      }
+    },
     downloadPDF() {
       this.pdf.doc = new jsPDF(
         "l",
@@ -182,9 +230,16 @@
       this.pdf.height =
         this.templateData.properties.paperSize === "a3" ? 297 : 210;
       if (this.templateData) {
-        let defaultOffset = { x: 0, y: 0 },
-          defaultFontSize = 10,
-          defaultColor = "black";
+        // 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": {
@@ -211,6 +266,57 @@
                 e.offset || defaultOffset,
                 e.color || defaultColor
               );
+              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,
+                e.height
+              );
+              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;
             }
           }
         });
@@ -250,7 +356,7 @@
     addDiagramTitle(position, offset, size, color) {
       let x = offset.x,
         y = offset.y;
-      let title = this.title;
+      let title = `Available Fairway Depth: ${this.featureName}`;
       let width =
         (this.pdf.doc.getStringUnitWidth(title) * size) / (72 / 25.6) +
         size / 2;

--- a/client/src/lib/mixins.js	Wed May 15 14:54:53 2019 +0200
+++ b/client/src/lib/mixins.js	Wed May 15 15:31:33 2019 +0200
@@ -142,6 +142,13 @@
 
       this.addRoundedBox(x, y, width, height, color, rounding, brcolor);
     },
+    getTextHeight(numberOfLines) {
+      return (
+        numberOfLines *
+        ((this.pdf.doc.getFontSize() * 25.4) / 80) *
+        this.pdf.doc.getLineHeightFactor()
+      );
+    },
     addRoundedBox(x, y, w, h, color, rounding, brcolor) {
       // draws a rounded background box at (x,y) width x height
       // using jsPDF units