# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559205442 -7200
# Node ID 1422ca0e6a51c201d0231a0f9b106acf016ffa10
# Parent  034657d6604fa96dd1b3e5ce6ca6c57a45cf0c7d# Parent  337e9f85f84caa2c99410e559eca7bff814d0b1f
merged default into waterlevel-in-crossprofile branch

diff -r 337e9f85f84c -r 1422ca0e6a51 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Wed May 29 18:41:35 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu May 30 10:37:22 2019 +0200
@@ -17,9 +17,15 @@
         </div>
         <div class="legend">
           <span
-            style="background-color: #4a2f06; width: 20px; height: 20px;"
+            style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;"
           ></span>
-          Ground
+          Sediment
+        </div>
+        <div class="legend">
+          <span
+            style="width: 14px; height: 14px; background-color: rgba(74, 47, 6, 0.6); border: solid 3px #943007; background-clip: padding-box; box-sizing: content-box;"
+          ></span>
+          Sediment (Compare)
         </div>
         <div>
           <select
@@ -96,9 +102,9 @@
       height: null,
       margin: {
         top: 20,
-        right: 40,
-        bottom: 30,
-        left: 40
+        right: 80,
+        bottom: 60,
+        left: 80
       },
       form: {
         template: null
@@ -141,6 +147,7 @@
     };
   },
   computed: {
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapGetters("fairwayprofile", ["totalLength"]),
     ...mapState("fairwayprofile", [
       "additionalSurvey",
@@ -149,32 +156,21 @@
       "endPoint",
       "fairwayData",
       "maxAlt",
-      "referenceWaterLevel",
-      "selectedWaterLevel",
-      "waterLevels"
+      "selectedWaterLevel"
     ]),
+    ...mapState("bottlenecks", ["selectedSurvey", "selectedBottleneck"]),
     ...mapState("application", ["paneSetup"]),
     title() {
       let dates = [this.selectedSurvey.date_info];
+      let waterlevelLabel =
+        this.selectedWaterLevel === "ref"
+          ? this.selectedSurvey.depth_reference
+          : "Current";
       if (this.additionalSurvey) dates.push(this.additionalSurvey.date_info);
       dates.map(d => this.$options.filters.dateTime(d, true));
       return `${this.$gettext("Fairwayprofile")}: ${
         this.selectedBottleneck
-      } (${dates.join(", ")})`;
-    },
-    selectedSurvey: {
-      get() {
-        return this.$store.state.bottlenecks.selectedSurvey;
-      }
-    },
-    selectedBottleneck: {
-      get() {
-        return this.$store.state.bottlenecks.selectedBottleneck;
-      }
-    },
-    ...mapState("bottlenecks", ["selectedSurvey"]),
-    relativeWaterLevelDelta() {
-      return this.selectedWaterLevel.value - this.referenceWaterLevel;
+      } (${dates.join(", ")}) WL: ${waterlevelLabel} (${this.waterlevel} cm)`;
     },
     currentData() {
       if (
@@ -192,15 +188,20 @@
         return [];
       return this.currentProfile[this.additionalSurvey.date_info].points;
     },
-    xScale() {
-      return [0, this.totalLength];
+    bottleneck() {
+      return this.openLayersMap()
+        .getLayer("BOTTLENECKS")
+        .getSource()
+        .getFeatures()
+        .find(f => f.get("objnam") === this.selectedBottleneck);
     },
-    yScaleRight() {
-      //ToDO calcReleativeDepth(this.maxAlt) to get the
-      // maximum depth according to the actual waterlevel
-      // additionally: take the one which is higher reference or current waterlevel
-      const DELTA = this.maxAlt * 1.1 - this.maxAlt;
-      return [this.maxAlt * 1 + DELTA, -DELTA];
+    waterlevel() {
+      return this.selectedWaterLevel === "ref"
+        ? this.refWaterlevel
+        : this.bottleneck.get("gm_waterlevel");
+    },
+    refWaterlevel() {
+      return this.selectedSurvey.waterlevel_value;
     }
   },
   watch: {
@@ -371,7 +372,7 @@
           }
         });
       }
-      this.pdf.doc.save("Fairwayprofile diagram");
+      this.pdf.doc.save(this.title.replace(/\s/g, "_").replace(/[():,]/g, ""));
     },
     addDiagram(position, offset, width, height) {
       let x = offset.x,
@@ -429,36 +430,17 @@
       this.pdf.doc.circle(x, y + 10, 2, "FD");
       this.pdf.doc.text(x + 3, y + 11, "Ground");
     },
-    calcRelativeDepth(depth) {
-      /* takes a depth value and substracts the delta of the relative waterlevel
-       * say the reference level is above the current level, the ground is nearer,
-       * thus, the depth is lower.
-       *
-       * E.g.:
-       *
-       * Reference waterlevel 5m, current 4m => delta = -1m
-       * If the distance to the ground was 3m from the 5m mark
-       * it is now only 2m from the current waterlevel.
-       *
-       *  Vice versa:
-       *
-       *  If the reference level is 5m and the current 6m => delta = +1m
-       *  The ground is one meter farer away from the current waterlevel
-       *
-       */
-      return depth - this.relativeWaterLevelDelta;
-    },
     drawDiagram() {
       d3.select(".diagram-container svg").remove();
       this.scaleFairwayProfile();
       let svg = d3.select(".diagram-container").append("svg");
       svg.attr("width", "100%");
       svg.attr("height", "100%");
-      const width = this.width - this.margin.right - 1.5 * this.margin.left;
-      const height = this.height - this.margin.top - 2 * this.margin.bottom;
+      const width = this.width - this.margin.right - this.margin.left;
+      const height = this.height - this.margin.top - this.margin.bottom;
       const currentData = this.currentData;
       const additionalData = this.additionalData;
-      const { xScale, yScaleRight, graph } = this.generateCoordinates(
+      const { xScale, yScaleRight, graph } = this.generateScalesAndGraph(
         svg,
         height,
         width
@@ -498,7 +480,6 @@
       }
       for (let data of this.fairwayData) {
         const [startPoint, endPoint, depth] = data.coordinates[0];
-        const style = data.style();
         let fairwayArea = d3
           .area()
           .x(function(d) {
@@ -513,7 +494,7 @@
           .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
           .attr("fill", "#002AFF")
           .attr("fill-opacity", 0.65)
-          .attr("stroke", style[0].getStroke().getColor())
+          .attr("stroke", "transparent")
           .attr("d", fairwayArea);
       }
     },
@@ -521,14 +502,21 @@
       graph
         .append("text")
         .attr("transform", ["rotate(-90)"])
-        .attr("y", this.width - 70)
+        .attr("y", this.width - 100)
         .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
-        .attr("dy", "1em")
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .text("Depth [m]");
       graph
         .append("text")
+        .attr("transform", ["rotate(-90)"])
+        .attr("y", -50)
+        .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
+        .attr("fill", "black")
+        .style("text-anchor", "middle")
+        .text("Waterlevel [cm]");
+      graph
+        .append("text")
         .attr("y", -50)
         .attr("x", -(height / 4))
         .attr("dy", "1em")
@@ -540,21 +528,35 @@
         ])
         .text("Width [m]");
     },
-    generateCoordinates(svg, height, width) {
+    generateScalesAndGraph(svg, height, width) {
       let xScale = d3
         .scaleLinear()
-        .domain(this.xScale)
+        .domain([0, this.totalLength])
         .rangeRound([0, width]);
 
-      xScale.ticks(5);
-
       let yScaleRight = d3
         .scaleLinear()
-        .domain(this.yScaleRight)
+        .domain([
+          this.maxAlt * 1.1 +
+            Math.abs(this.waterlevel - this.refWaterlevel) / 100,
+          -(this.maxAlt * 0.1)
+        ])
         .rangeRound([height, 0]);
 
-      let xAxis = d3.axisBottom(xScale);
-      let yAxis2 = d3.axisRight(yScaleRight);
+      let yScaleLeft = d3
+        .scaleLinear()
+        .domain([
+          this.waterlevel -
+            (this.maxAlt * 100 +
+              Math.abs(this.waterlevel - this.refWaterlevel)),
+          this.waterlevel + this.maxAlt * 0.1 * 100
+        ])
+        .rangeRound([height, 0]);
+
+      let xAxis = d3.axisBottom(xScale).ticks(5);
+      let yAxisRight = d3.axisRight(yScaleRight);
+      let yAxisLeft = d3.axisLeft(yScaleLeft);
+
       let graph = svg
         .append("g")
         .attr(
@@ -564,7 +566,7 @@
       graph
         .append("g")
         .attr("transform", "translate(0," + height + ")")
-        .call(xAxis.ticks(5))
+        .call(xAxis)
         .selectAll(".tick text")
         .attr("fill", "black")
         .select(function() {
@@ -575,7 +577,7 @@
       graph
         .append("g")
         .attr("transform", "translate(" + width + ",0)")
-        .call(yAxis2)
+        .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")
         .select(function() {
@@ -583,6 +585,18 @@
         })
         .selectAll(".tick line")
         .attr("stroke", "black");
+      graph
+        .append("g")
+        .attr("transform", "translate(0 0)")
+        .call(yAxisLeft)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
+
       graph.selectAll(".domain").attr("stroke", "black");
       return { xScale, yScaleRight, graph };
     },
@@ -601,7 +615,7 @@
         .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }])
         .attr("fill-opacity", 0.65)
         .attr("fill", WATER_COLOR)
-        .attr("stroke", WATER_COLOR)
+        .attr("stroke", "transparent")
         .attr("d", waterArea);
     },
     drawProfile({
@@ -620,25 +634,27 @@
           .x(d => {
             return xScale(d.x);
           })
-          .y(d => {
-            return yScaleRight(d.y);
-          });
+          .y(d =>
+            yScaleRight(
+              d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100
+            )
+          );
         let profileArea = d3
           .area()
           .x(function(d) {
             return xScale(d.x);
           })
           .y0(height)
-          .y1(function(d) {
-            return yScaleRight(d.y);
-          });
+          .y1(d =>
+            yScaleRight(
+              d.y + Math.abs(this.waterlevel - this.refWaterlevel) / 100
+            )
+          );
         graph
           .append("path")
           .datum(part)
           .attr("fill", color)
-          .attr("stroke", color)
-          .attr("stroke-width", 3)
-          .attr("stroke-opacity", opacity)
+          .attr("stroke", "transparent")
           .attr("fill-opacity", opacity)
           .attr("d", profileArea);
         graph
diff -r 337e9f85f84c -r 1422ca0e6a51 client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Wed May 29 18:41:35 2019 +0200
+++ b/client/src/components/fairway/Profiles.vue	Thu May 30 10:37:22 2019 +0200
@@ -37,7 +37,7 @@
         </select>
         <div v-if="selectedBottleneck">
           <div class="d-flex mt-2">
-            <div class="flex-fill">
+            <div class="flex-fill" style="max-width: 75px;">
               <small class="text-muted">
                 <translate>Waterlevel</translate>:
               </small>
@@ -45,15 +45,11 @@
                 v-model="selectedWaterLevel"
                 class="form-control form-control-sm small"
               >
-                <option value="" v-if="Object.keys(waterLevels).length === 0">
-                  <translate>Current</translate>
+                <option value="ref">
+                  <translate>Depth Reference</translate>
                 </option>
-                <option
-                  v-for="wl in Object.keys(waterLevels)"
-                  :key="wl"
-                  :value="wl"
-                >
-                  {{ wl | surveyDate }}
+                <option value="current">
+                  <translate>Current Waterlevel</translate>
                 </option>
               </select>
             </div>
@@ -327,7 +323,7 @@
     },
     selectedWaterLevel: {
       get() {
-        return this.$store.state.fairwayprofile.selectedWaterLevel.date || "";
+        return this.$store.state.fairwayprofile.selectedWaterLevel;
       },
       set(value) {
         this.$store.commit("fairwayprofile/setSelectedWaterLevel", value);
diff -r 337e9f85f84c -r 1422ca0e6a51 client/src/store/fairwayprofile.js
--- a/client/src/store/fairwayprofile.js	Wed May 29 18:41:35 2019 +0200
+++ b/client/src/store/fairwayprofile.js	Thu May 30 10:37:22 2019 +0200
@@ -28,9 +28,7 @@
     minAlt: 0,
     maxAlt: 0,
     currentProfile: {},
-    referenceWaterLevel: null,
-    waterLevels: {},
-    selectedWaterLevel: "",
+    selectedWaterLevel: "ref",
     fairwayData: [],
     startPoint: null,
     endPoint: null,
@@ -61,7 +59,7 @@
       state.additionalSurvey = additionalSurvey;
     },
     setSelectedWaterLevel: (state, level) => {
-      state.selectedWaterLevel = state.waterLevels[level];
+      state.selectedWaterLevel = level;
     },
     setDifferencesLoading: (state, value) => {
       state.differencesLoading = value;
@@ -69,8 +67,6 @@
     profileLoaded: (state, answer) => {
       const { response, surveyDate } = answer;
       const { data } = response;
-      const { waterlevel } = response.data.properties;
-      const { value, when } = waterlevel;
       const coordinates = data.geometry.coordinates;
       if (!coordinates) return;
       const startPoint = state.startPoint;
@@ -79,12 +75,6 @@
       const result = prepareProfile({ geoJSON, startPoint, endPoint });
       // Use Vue.set() to make new object properties rective
       // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
-      const entry = {
-        date: when,
-        value: value
-      };
-      state.waterLevels = { [when]: entry };
-      state.selectedWaterLevel = entry;
       Vue.set(state.currentProfile, surveyDate, {
         points: result.points,
         length: result.lengthPolyLine
@@ -116,9 +106,7 @@
       state.fairwayData = [];
       state.startPoint = null;
       state.endPoint = null;
-      state.referenceWaterLevel = null;
-      state.waterLevels = {};
-      state.selectedWaterLevel = "";
+      state.selectedWaterLevel = "ref";
     },
     previousCuts: (state, previousCuts) => {
       state.previousCuts = previousCuts;
diff -r 337e9f85f84c -r 1422ca0e6a51 pkg/controllers/cross.go
--- a/pkg/controllers/cross.go	Wed May 29 18:41:35 2019 +0200
+++ b/pkg/controllers/cross.go	Thu May 30 10:37:22 2019 +0200
@@ -21,7 +21,6 @@
 	"net/http"
 	"time"
 
-	"gemma.intevation.de/gemma/pkg/common"
 	"gemma.intevation.de/gemma/pkg/models"
 	"gemma.intevation.de/gemma/pkg/octree"
 )
@@ -167,13 +166,6 @@
 				Type:        "MultiLineString",
 				Coordinates: joined,
 			},
-			Properties: map[string]interface{}{
-				"waterlevel": map[string]interface{}{
-					// TODO: Fetch values from database.
-					"value": float64(50),
-					"when":  start.Format(common.TimeFormat),
-				},
-			},
 		},
 	}