# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1540472519 -7200
# Node ID 9bd4f82fcd8d134f8d2daed25283c8f6bb0ca691
# Parent  82ae9cb569825aebd00bba4f7801f69ac0893eb2
display additional profile

diff -r 82ae9cb56982 -r 9bd4f82fcd8d client/src/fairway/Fairwayprofile.vue
--- a/client/src/fairway/Fairwayprofile.vue	Thu Oct 25 13:11:09 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Thu Oct 25 15:01:59 2018 +0200
@@ -79,7 +79,7 @@
  */
 import * as d3 from "d3";
 import { mapState } from "vuex";
-import { displayInfo } from "../application/lib/errors.js";
+import { displayError } from "../application/lib/errors.js";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -149,31 +149,33 @@
   },
   methods: {
     selectAdditionalSurveyData() {
-      if (!this.additionalSurvey || this.wait) return;
-      //   this.$store
-      //     .dispatch("fairwayprofile/loadProfile", this.additionalSurvey)
-      //     .then(() => {
-      //       this.wait = false;
-      //       this.drawDiagram();
-      //     })
-      //     .catch(error => {
-      //       this.wait = false;
-      //       let status = "ERROR";
-      //       let data = error;
-      //       const response = error.response;
-      //       if (response) {
-      //         status = response.status;
-      //         data = response.data;
-      //       }
-      //       displayError({
-      //         title: "Backend Error",
-      //         message: `${status}: ${data.message || data}`
-      //       });
-      //     });
-      displayInfo({
-        title: "Not Implemented",
-        message: `Currently under development`
-      });
+      if (
+        !this.additionalSurvey ||
+        this.wait ||
+        this.currentProfile[this.additionalSurvey]
+      ) {
+        this.drawDiagram();
+        return;
+      }
+      this.$store
+        .dispatch("fairwayprofile/loadProfile", this.additionalSurvey)
+        .then(() => {
+          this.wait = false;
+        })
+        .catch(error => {
+          this.wait = false;
+          let status = "ERROR";
+          let data = error;
+          const response = error.response;
+          if (response) {
+            status = response.status;
+            data = response.data;
+          }
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
     },
     drawDiagram() {
       const chartDiv = document.querySelector(".fairwayprofile");
@@ -206,18 +208,20 @@
         height,
         width,
         color: GROUND_COLOR,
-        strokeColor: "black"
+        strokeColor: "black",
+        opacity: 1
       });
       if (additionalData) {
         this.drawProfile({
           graph,
           xScale,
           yScaleRight,
-          additionalData,
+          currentData: additionalData,
           height,
           width,
-          color: "green",
-          strokeColor: "green"
+          color: GROUND_COLOR,
+          strokeColor: "#943007",
+          opacity: 0.6
         });
       }
       this.drawLabels({
@@ -341,7 +345,8 @@
       currentData,
       height,
       color,
-      strokeColor
+      strokeColor,
+      opacity
     }) {
       for (let part of currentData) {
         let profileLine = d3
@@ -367,6 +372,8 @@
           .attr("fill", color)
           .attr("stroke", color)
           .attr("stroke-width", 3)
+          .attr("stroke-opacity", opacity)
+          .attr("fill-opacity", opacity)
           .attr("d", profileArea);
         graph
           .append("path")
@@ -376,6 +383,8 @@
           .attr("stroke-linejoin", "round")
           .attr("stroke-linecap", "round")
           .attr("stroke-width", 3)
+          .attr("stroke-opacity", opacity)
+          .attr("fill-opacity", opacity)
           .attr("d", profileLine);
       }
     }