# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1556794792 -7200
# Node ID 91556825d95c0a44c90c26db3adef367bd3b7df6
# Parent  5daaabc2e7fcefc71d113b83d2711159a1176642
client: implement geting templates from backend for waterlevel diagram

diff -r 5daaabc2e7fc -r 91556825d95c client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 02 11:35:23 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 02 12:59:52 2019 +0200
@@ -16,6 +16,7 @@
       </div>
       <div>
         <select
+          @change="applyChange"
           v-model="form.template"
           class="form-control d-block custom-select-sm w-100"
         >
@@ -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";
 // we should load only d3 modules we need but for now we'll go with the lazy way
 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
@@ -220,6 +223,26 @@
         this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
       );
     },
+    applyChange() {
+      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;
+          })
+          .catch(e => {
+            const { status, data } = e.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      }
+    },
     // Gauge info as a title for pdf
     addDiagramTitle(position, offset, size, color) {
       let gaugeInfo =
@@ -1037,6 +1060,26 @@
     this.drawDiagram();
     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.applyChange();
+        }
+      })
+      .catch(e => {
+        const { status, data } = e.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
   },
   updated() {
     this.drawDiagram();