# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1538035359 -7200
# Node ID 073394629ec6fe1f8c0530bd783a8a4e06982c83
# Parent  ce23a4192788332127c8d6954b79bcd6206f2550
client: add measurement and improve identify

 * Only display features that have an Id in the identify box, because
   during the drawmode, after the first click, there is an additional
   feature that has no Id. Probably this is the point.
 * Add setting an Id to the feature that is drawn, which makes it show
   up in the identify box.
 * Add code to add the length of the drawn line to the store and a rounded
   value to the feature property. This creates a simple measurement tool,
   if the feature box is shown.

diff -r ce23a4192788 -r 073394629ec6 client/src/layers/Identify.vue
--- a/client/src/layers/Identify.vue	Thu Sep 27 09:55:25 2018 +0200
+++ b/client/src/layers/Identify.vue	Thu Sep 27 10:02:39 2018 +0200
@@ -13,10 +13,12 @@
                 <hr>
                 <div class="d-flex flex-column">
                   <div v-for="feature of identifiedFeatures" :key="feature.getId()">
-                    {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
-                    <small v-for="(value, key) in prepareProperties(feature)" :key="key">
-                      <div v-if="value">{{key}}:{{value}}</div>
-                    </small>
+                    <div v-if="feature.getId()">
+                      {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
+                      <small v-for="(value, key) in prepareProperties(feature)" :key="key">
+                        <div v-if="value">{{key}}:{{value}}</div>
+                      </small>
+                    </div>
                   </div>
                 </div>
             </div>
diff -r ce23a4192788 -r 073394629ec6 client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Thu Sep 27 09:55:25 2018 +0200
+++ b/client/src/map/Maplayer.vue	Thu Sep 27 10:02:39 2018 +0200
@@ -25,6 +25,7 @@
 import Draw from "ol/interaction/Draw.js";
 import { Vector as VectorLayer } from "ol/layer.js";
 import { Vector as VectorSource } from "ol/source.js";
+import { getLength } from "ol/sphere.js";
 
 import distance from "@turf/distance";
 import {
@@ -82,8 +83,10 @@
         type: this.drawMode,
         maxPoints: 2
       });
-      draw.on("drawstart", () => {
+      draw.on("drawstart", event => {
         this.vectorSource.clear();
+        this.$store.commit("mapstore/setCurrentMeasurement", null);
+        event.feature.setId("drawn.1"); // unique id for new feature
       });
       draw.on("drawend", this.drawEnd);
       return draw;
@@ -97,8 +100,13 @@
       });
     },
     drawEnd(event) {
+      const length = getLength(event.feature.getGeometry());
+      this.$store.commit("mapstore/setCurrentMeasurement", length);
+      // also place the a rounded length in a property, so identify can show it
+      event.feature.set("length", Math.round(length * 10) / 10);
+
+      // prepare to send the first line seqment to the server as GeoJSON
       const inputLineString = event.feature.getGeometry().clone();
-      // prepare to send the first line seqment to the server as GeoJSON
       inputLineString.transform("EPSG:3857", "EPSG:4326");
       const [start, end] = inputLineString.getCoordinates();
       this.$store.commit("fairwayprofile/setStartPoint", start);
diff -r ce23a4192788 -r 073394629ec6 client/src/map/store.js
--- a/client/src/map/store.js	Thu Sep 27 09:55:25 2018 +0200
+++ b/client/src/map/store.js	Thu Sep 27 10:02:39 2018 +0200
@@ -167,7 +167,8 @@
         isVisible: true
       }
     ],
-    identifiedFeatures: []
+    identifiedFeatures: [],
+    currentMeasurement: null
   },
   getters: {
     layers: state => {
@@ -187,6 +188,9 @@
     },
     setOpenLayersMap: (state, map) => {
       state.openLayersMap = map;
+    },
+    setCurrentMeasurement: (state, measurement) => {
+      state.currentMeasurement = measurement;
     }
   }
 };