# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1540536742 -7200
# Node ID 4372a489c9adab75c7ee482796e3156e5d6e6689
# Parent  7ec2133c6404999fd01a4ba0121245326b5b8104# Parent  cdee23f3ee4c751189b8871be8023b897b2760b1
merge with brach crossprofile

diff -r 7ec2133c6404 -r 4372a489c9ad client/src/application/Main.vue
--- a/client/src/application/Main.vue	Thu Oct 25 23:16:53 2018 +0200
+++ b/client/src/application/Main.vue	Fri Oct 26 08:52:22 2018 +0200
@@ -9,18 +9,12 @@
         <div v-if="isSplitscreen" class="profile d-flex flex-row">
             <FairwayProfile
                 :additionalSurveys="additionalSurveys"
-                :minAlt="minAlt"
-                :maxAlt="maxAlt"
-                :selectedWaterLevel="selectedWaterLevel"
-                :fairwayCoordinates="fairwayCoordinates"
-                :waterLevels="waterLevels"
                 :height="height"
                 :width="width"
                 :xScale="xAxis"
                 :yScaleLeft="yAxisLeft"
                 :yScaleRight="yAxisRight"
                 :margin="margins"
-                :totalLength="totalLength"
             ></FairwayProfile>
         </div>
     </div>
diff -r 7ec2133c6404 -r 4372a489c9ad client/src/fairway/Fairwayprofile.vue
--- a/client/src/fairway/Fairwayprofile.vue	Thu Oct 25 23:16:53 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Fri Oct 26 08:52:22 2018 +0200
@@ -3,7 +3,7 @@
         <div class="fairwayprofile"></div>
         <div class="additionalsurveys d-flex flex-column">
             <small class="label">Available Additional Surveys</small>
-            <select v-model="additionalSurvey" @change="selectAdditionalSurveyData">
+            <select v-model="additionalSurvey">
                 <option value="">None</option>
                 <option
                     v-for="survey in additionalSurveys"
@@ -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";
 
@@ -92,12 +92,6 @@
     "yScaleLeft",
     "yScaleRight",
     "margin",
-    "totalLength",
-    "waterLevels",
-    "fairwayCoordinates",
-    "selectedWaterLevel",
-    "minAlt",
-    "maxAlt",
     "additionalSurveys"
   ],
   computed: {
@@ -105,8 +99,23 @@
       "startPoint",
       "endPoint",
       "currentProfile",
-      "selectedMorph"
+      "selectedMorph",
+      "minAlt",
+      "maxAlt",
+      "totalLength",
+      "fairwayCoordinates",
+      "waterLevels",
+      "selectedWaterLevel"
     ]),
+    additionalSurvey: {
+      get() {
+        return this.$store.getters["fairwayprofile/additionalSurvey"];
+      },
+      set(value) {
+        this.$store.commit("fairwayprofile/setAdditionalSurvey", value);
+        this.selectAdditionalSurveyData();
+      }
+    },
     currentData() {
       const currentSurveyDate = this.selectedMorph.date_info;
       return this.currentProfile[currentSurveyDate];
@@ -123,7 +132,6 @@
   },
   data() {
     return {
-      additionalSurvey: "",
       wait: false
     };
   },
@@ -149,31 +157,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");
@@ -198,26 +208,30 @@
         height,
         width
       });
-      this.drawProfile({
-        graph,
-        xScale,
-        yScaleRight,
-        currentData,
-        height,
-        width,
-        color: GROUND_COLOR,
-        strokeColor: "black"
-      });
+      if (currentData) {
+        this.drawProfile({
+          graph,
+          xScale,
+          yScaleRight,
+          currentData,
+          height,
+          width,
+          color: GROUND_COLOR,
+          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 +355,8 @@
       currentData,
       height,
       color,
-      strokeColor
+      strokeColor,
+      opacity
     }) {
       for (let part of currentData) {
         let profileLine = d3
@@ -367,6 +382,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 +393,8 @@
           .attr("stroke-linejoin", "round")
           .attr("stroke-linecap", "round")
           .attr("stroke-width", 3)
+          .attr("stroke-opacity", opacity)
+          .attr("fill-opacity", opacity)
           .attr("d", profileLine);
       }
     }
diff -r 7ec2133c6404 -r 4372a489c9ad client/src/fairway/store.js
--- a/client/src/fairway/store.js	Thu Oct 25 23:16:53 2018 +0200
+++ b/client/src/fairway/store.js	Fri Oct 26 08:52:22 2018 +0200
@@ -24,6 +24,7 @@
 const FairwayProfile = {
   namespaced: true,
   state: {
+    additionalSurvey: "",
     availableSurveys: null,
     totalLength: 0,
     minAlt: 0,
@@ -39,9 +40,15 @@
   getters: {
     length: state => {
       return state.totalLength;
+    },
+    additionalSurvey: state => {
+      return state.additionalSurvey;
     }
   },
   mutations: {
+    setAdditionalSurvey: (state, additionalSurvey) => {
+      state.additionalSurvey = additionalSurvey;
+    },
     setSelectedMorph: (state, selectedMorph) => {
       state.selectedMorph = selectedMorph;
     },
@@ -63,9 +70,15 @@
       // Use Vue.set() to make new object properties rective
       // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
       Vue.set(state.currentProfile, surveyDate, result.points);
-      state.minAlt = result.minAlt;
-      state.maxAlt = result.maxAlt;
-      state.totalLength = result.lengthPolyLine;
+      if (!state.minAlt || state.minAlt > result.minAlt) {
+        state.minAlt = result.minAlt;
+      }
+      if (!state.maxAlt || state.maxAlt < result.maxAlt) {
+        state.maxAlt = result.maxAlt;
+      }
+      if (!state.totalLength || state.totalLength < result.lengthPolyLine) {
+        state.totalLength = result.lengthPolyLine;
+      }
     },
     setStartPoint: (state, start) => {
       state.startPoint = start;
@@ -77,7 +90,14 @@
       state.fairwayCoordinates = coordinates;
     },
     clearCurrentProfile: state => {
+      state.additionalSurvey = "";
       state.currentProfile = {};
+      state.minAlt = null;
+      state.maxAlt = null;
+      state.totalLength = null;
+      state.fairwayCoordinates = [];
+      state.startPoint = null;
+      state.endPoint = null;
     }
   },
   actions: {
diff -r 7ec2133c6404 -r 4372a489c9ad client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Thu Oct 25 23:16:53 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Oct 26 08:52:22 2018 +0200
@@ -176,6 +176,7 @@
       // TODO an improvement could be to check if the line intersects
       // with the bottleneck area's polygon before trying the server request
       if (this.selectedMorph) {
+        this.$store.commit("fairwayprofile/clearCurrentProfile");
         console.log("requesting profile for", this.selectedMorph);
         const inputLineString = event.feature.getGeometry().clone();
         inputLineString.transform("EPSG:3857", "EPSG:4326");
diff -r 7ec2133c6404 -r 4372a489c9ad client/src/morphtool/Morphtool.vue
--- a/client/src/morphtool/Morphtool.vue	Thu Oct 25 23:16:53 2018 +0200
+++ b/client/src/morphtool/Morphtool.vue	Fri Oct 26 08:52:22 2018 +0200
@@ -180,6 +180,8 @@
     clearSelection() {
       this.$store.commit("identifystore/setIdentifiedFeatures", []);
       this.$store.commit("fairwayprofile/setSelectedMorph", null);
+      this.$store.commit("fairwayprofile/clearCurrentProfile");
+      this.$store.commit("application/closeSplitScreen");
       this.surveyList = null;
       if (this.drawMode) {
         this.$store.commit("application/toggleDrawModeLine");