# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1538048203 -7200
# Node ID 327aa4a18a1c2c65a4d48c36bd64bfad78ed4ff6
# Parent  b6a1779ffb42df8599472f1c9285eb0c376488f4
Fairway profile WIP

diff -r b6a1779ffb42 -r 327aa4a18a1c client/src/application/Main.vue
--- a/client/src/application/Main.vue	Thu Sep 27 13:18:50 2018 +0200
+++ b/client/src/application/Main.vue	Thu Sep 27 13:36:43 2018 +0200
@@ -2,7 +2,7 @@
     <div class="main d-flex flex-column">
         <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
         <div v-if="isSplitscreen" class="profile d-flex flex-row">
-            <FairwayProfile :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
+            <FairwayProfile :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
         </div>
     </div>
 </template>
@@ -49,7 +49,8 @@
       "minAlt",
       "maxAlt",
       "totalLength",
-      "waterLevels"
+      "waterLevels",
+      "fairwayCoordinates"
     ]),
     xAxis() {
       return [this.xScale.x, this.xScale.y];
diff -r b6a1779ffb42 -r 327aa4a18a1c client/src/application/Topbar.vue
--- a/client/src/application/Topbar.vue	Thu Sep 27 13:18:50 2018 +0200
+++ b/client/src/application/Topbar.vue	Thu Sep 27 13:36:43 2018 +0200
@@ -10,7 +10,7 @@
                 </span>
             </div>
             <div class="searchgroup">
-                <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
+                <input @keyup.enter="takeFirstSearchresult" v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar">
                 <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group">
                     <li v-for="entry of searchResults" :key="entry.name" class="list-group-item">
                         <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a>
@@ -151,6 +151,10 @@
     }
   },
   methods: {
+    takeFirstSearchresult() {
+      if (!this.searchResults || this.searchResults.length != 1) return;
+      this.moveToSearchResult(this.searchResults[0]);
+    },
     triggerSearch: debounce(function() {
       this.doSearch();
     }, 500),
diff -r b6a1779ffb42 -r 327aa4a18a1c client/src/fairway/Fairwayprofile.vue
--- a/client/src/fairway/Fairwayprofile.vue	Thu Sep 27 13:18:50 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Thu Sep 27 13:36:43 2018 +0200
@@ -46,7 +46,8 @@
     "yScaleRight",
     "margin",
     "totalLength",
-    "waterLevels"
+    "waterLevels",
+    "fairwayCoordinates"
   ],
   computed: {
     waterColor() {
@@ -76,6 +77,9 @@
     },
     selectedWaterLevel() {
       this.drawDiagram();
+    },
+    fairwayCoordinates() {
+      this.drawDiagram();
     }
   },
   methods: {
@@ -117,6 +121,17 @@
         height,
         width
       });
+      this.drawFairway({
+        graph,
+        xScale,
+        yScaleLeft,
+        currentData,
+        height,
+        width
+      });
+    },
+    drawFairway() {
+      console.log(this.fairwayCoordinates);
     },
     drawLabels({ graph, height }) {
       graph
diff -r b6a1779ffb42 -r 327aa4a18a1c client/src/fairway/store.js
--- a/client/src/fairway/store.js	Thu Sep 27 13:18:50 2018 +0200
+++ b/client/src/fairway/store.js	Thu Sep 27 13:36:43 2018 +0200
@@ -12,10 +12,14 @@
       { year: "2016", level: 0, color: "#005DFF" },
       { year: "2017", level: -0.5, color: "#639CFF" }
     ],
+    fairwayCoordinates: [],
     startPoint: null,
     endPoint: null
   },
   getters: {
+    fairwayCoordinates: state => {
+      return state.fairwayCoordinates;
+    },
     waterLevels: state => {
       return state.waterLevels;
     },
@@ -60,6 +64,9 @@
     },
     setEndPoint: (state, end) => {
       state.endPoint = end;
+    },
+    setFairwayCoordinates: (state, coordinates) => {
+      state.fairwayCoordinates = coordinates;
     }
   },
 
diff -r b6a1779ffb42 -r 327aa4a18a1c client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Thu Sep 27 13:18:50 2018 +0200
+++ b/client/src/map/Maplayer.vue	Thu Sep 27 13:36:43 2018 +0200
@@ -36,6 +36,8 @@
 import lineIntersect from "@turf/line-intersect";
 import { displayError } from "../application/lib/errors.js";
 
+const DEMODATA = 2.5;
+
 export default {
   name: "maplayer",
   props: ["drawMode", "lat", "long", "zoom", "split"],
@@ -119,12 +121,9 @@
       this.$store
         .dispatch("fairwayprofile/loadProfile", geoJSON)
         .then(() => {
-          // FIXME: assuming that we have the fairway dimensions loaded
           var vectorSource = this.getLayerByName(
             "Fairway Dimensions"
           ).data.getSource();
-          console.log(vectorSource);
-          var diagStack = [];
           vectorSource.forEachFeatureIntersectingExtent(
             // need to use EPSG:3857 which is the proj of vectorSource
             profileLine
@@ -137,12 +136,10 @@
                 .getGeometry()
                 .clone()
                 .transform("EPSG:3857", "EPSG:4326");
-              console.log("intersecting:", intersectingPolygon);
               this.addToFairwayRectangle(
                 profileLine,
                 intersectingPolygon,
-                2.5, // FIXME use real fairway depth value for this feature
-                diagStack
+                DEMODATA
               );
             }
           );
@@ -155,23 +152,13 @@
           });
         });
     },
-    addToFairwayRectangle(profileLine, fairwayGeometry, depth, diagStack) {
+    addToFairwayRectangle(profileLine, fairwayGeometry, depth) {
       // both geometries have to be in EPSG:4326
       // uses turfjs distance() function
-      // pushes pairs of diagram points into diagStack
-      console.log(
-        "addToFairwayRectangle(",
-        profileLine,
-        fairwayGeometry,
-        depth,
-        diagStack,
-        ")"
-      );
+      let fairwayCoordinates = [];
       var line = turfLineString(profileLine.getCoordinates());
       var polygon = turfPolygon(fairwayGeometry.getCoordinates());
       var intersects = lineIntersect(line, polygon);
-      console.log(intersects.features);
-
       var l = intersects.features.length;
       if (l % 2 != 0) {
         console.log("Ignoring fairway because profile only intersects once.");
@@ -182,14 +169,17 @@
           let fEndPoint = intersects.features[i + 1].geometry.coordinates;
           let opts = { units: "kilometers" };
 
-          diagStack.push([
+          fairwayCoordinates.push([
             distance(pStartPoint, fStartPoint, opts) * 1000,
             distance(pStartPoint, fEndPoint, opts) * 1000,
             depth
           ]);
         }
       }
-      console.log("Resulting diagStack:", diagStack);
+      this.$store.commit(
+        "fairwayprofile/setFairwayCoordinates",
+        fairwayCoordinates
+      );
     },
     activateInteraction() {
       const interaction = this.createInteraction(this.drawMode);