--- a/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 11:58:20 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 15:14:16 2019 +0200
@@ -93,12 +93,11 @@
         </div>
       </DiagramLegend>
       <div
-        ref="pdfContainer"
-        id="pdfContainer"
-        class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative"
+        class="d-flex flex-fill justify-content-center align-items-center position-relative"
+        :id="containerId"
       >
         <div class="direction-indicator"></div>
-        <div v-if="!fairwayData">
+        <div v-if="!fairwayData.length">
           <translate>No data available.</translate>
         </div>
       </div>
@@ -148,37 +147,21 @@
  */
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
-import debounce from "debounce";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
-import { HTTP } from "@/lib/http";
-import { displayError } from "@/lib/errors";
-import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
 
 const GROUND_COLOR = "#4A2F06";
 const WATER_COLOR = "#005DFF";
 
 export default {
   mixins: [diagram, pdfgen, templateLoader],
-  name: "fairwayprofile",
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
   data() {
     return {
-      resizeListenerFunction: null,
+      containerId: "fairwayprofile-diagram-container",
       width: null,
-      height: null,
-      form: {
-        template: null
-      },
-      templates: [],
-      defaultTemplate: defaultDiagramTemplate,
-      pdf: {
-        doc: null,
-        width: 32,
-        height: 297
-      },
-      templateData: null
+      height: null
     };
   },
   computed: {
@@ -293,32 +276,6 @@
 
       return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash };
     },
-    applyChange() {
-      if (this.form.template.hasOwnProperty("properties")) {
-        this.templateData = this.defaultTemplate;
-        return;
-      }
-      if (this.form.template) {
-        this.loadTemplates("/templates/diagram/" + this.form.template.name)
-          .then(response => {
-            this.prepareImages(response.data.template_data.elements).then(
-              values => {
-                values.forEach(v => {
-                  response.data.template_data.elements[v.index].url = v.url;
-                });
-                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() {
       let fairwayInfo =
         this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")";
@@ -383,21 +340,16 @@
     },
     getPrintLayout() {
       return {
-        main: {
-          top: 20,
-          right: 80,
-          bottom: 60,
-          left: 80
-        }
+        main: { top: 20, right: 80, bottom: 60, left: 80 }
       };
     },
     drawDiagram() {
-      d3.select(".diagram-container svg").remove();
+      d3.select("#" + this.containerId + " svg").remove();
       this.scaleFairwayProfile();
       if (!this.height || !this.width) return; // do not try to render when height and width are unknown
       const layout = this.getPrintLayout(this.height);
       this.renderTo({
-        element: ".diagram-container",
+        element: "#" + this.containerId,
         dimensions: this.getDimensions({
           svgWidth: this.width,
           svgHeight: this.height,
@@ -674,60 +626,15 @@
       }
     },
     scaleFairwayProfile() {
-      if (!document.querySelector(".diagram-container")) return;
-      const clientHeight = document.querySelector(".diagram-container")
+      if (!document.querySelector("#" + this.containerId)) return;
+      const clientHeight = document.querySelector("#" + this.containerId)
         .clientHeight;
-      const clientWidth = document.querySelector(".diagram-container")
+      const clientWidth = document.querySelector("#" + this.containerId)
         .clientWidth;
       if (!clientHeight || !clientWidth) return;
       this.height = clientHeight;
       this.width = clientWidth;
     }
-  },
-  created() {
-    this.resizeListenerFunction = debounce(this.drawDiagram, 100);
-    window.addEventListener("resize", this.resizeListenerFunction);
-  },
-  mounted() {
-    // Nasty but necessary if we don't want to use the updated hook to re-draw
-    // the diagram because this would re-draw it also for irrelevant reasons.
-    // In this case we need to wait for the child component (DiagramLegend) to
-    // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
-    // should be possible with $nextTick() but it doesn't work because it does
-    // not guarantee that the DOM is not only updated but also re-painted on the
-    // screen.
-    setTimeout(this.drawDiagram, 150);
-
-    this.templates[0] = this.defaultTemplate;
-    this.form.template = 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}`
-        });
-      });
-  },
-  updated() {
-    this.drawDiagram();
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.resizeListenerFunction);
   }
 };
 </script>