# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1540536346 -7200
# Node ID 907321455f399dd3eebf6d8c982d2e7e1012ae02
# Parent  51d412a79e4f15dcafbeb9023ca0a70b8aec7181# Parent  7ec2133c6404999fd01a4ba0121245326b5b8104
merge with default

diff -r 51d412a79e4f -r 907321455f39 client/src/App.vue
--- a/client/src/App.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/App.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -7,6 +7,7 @@
             <div class="midcontainer d-flex flex-row">
                 <div class="leftcontainer">
                     <Sidebar></Sidebar>
+                    <Bottlenecks></Bottlenecks>
                 </div>
                 <div class="middle">
 
@@ -99,8 +100,10 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import Sidebar from "./application/Sidebar";
+import Bottlenecks from "./bottlenecks/Bottlenecks";
 import Topbar from "./application/Topbar";
 import { mapGetters } from "vuex";
 import Userbar from "./application/Userbar";
@@ -119,6 +122,7 @@
   },
   components: {
     Sidebar,
+    Bottlenecks,
     Topbar,
     Userbar,
     Linetool,
diff -r 51d412a79e4f -r 907321455f39 client/src/application/Main.vue
--- a/client/src/application/Main.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/application/Main.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -1,7 +1,6 @@
 <template>
     <div class="main d-flex flex-column">
         <Maplayer
-            :drawMode="drawMode"
             :split="isSplitscreen"
             :lat="6155376"
             :long="1819178"
@@ -68,7 +67,7 @@
     };
   },
   computed: {
-    ...mapGetters("application", ["isSplitscreen", "drawMode"]),
+    ...mapGetters("application", ["isSplitscreen"]),
     ...mapState("fairwayprofile", [
       "currentProfile",
       "minAlt",
diff -r 51d412a79e4f -r 907321455f39 client/src/application/Sidebar.vue
--- a/client/src/application/Sidebar.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/application/Sidebar.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -4,6 +4,9 @@
             <div class="menupoints" v-if="!this.sidebarCollapsed">
                 <router-link to="/" class="text-body d-flex flex-row nav-link">
                     <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
+                <a href="#" class="text-body d-flex flex-row nav-link" @click="toggleBottlenecks">
+                    Bottlenecks
+                </a>
                 <div v-if="isSysAdmin">
                     <hr />
                     <div class="nav-link d-flex menupadding text-muted">Administration</div>
@@ -36,6 +39,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapGetters } from "vuex";
 
@@ -62,6 +66,12 @@
         "d-print-none": true
       };
     }
+  },
+  methods: {
+    toggleBottlenecks() {
+      this.$store.commit("application/toggleBottlenecks");
+      this.$store.commit("application/toggleSidebar");
+    }
   }
 };
 </script>
diff -r 51d412a79e4f -r 907321455f39 client/src/application/stores/application.js
--- a/client/src/application/stores/application.js	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/application/stores/application.js	Fri Oct 26 08:45:46 2018 +0200
@@ -1,16 +1,17 @@
-/*
- * This is Free Software under GNU Affero General Public License v >= 3.0
+/* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
- * 
+ *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
- * 
+ *
  * Copyright (C) 2018 by via donau 
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
- * 
+ *
  * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
+ *   Thomas Junk <thomas.junk@intevation.de>
+ *   Markus Kottländer <markus.kottlaender@intevation.de>
+ *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
 
 import { version } from "../../../package.json";
@@ -24,10 +25,6 @@
   };
 };
 
-const DRAWMODES = {
-  LINE: "LineString"
-};
-
 const Application = {
   namespaced: true,
   state: {
@@ -36,11 +33,13 @@
     sidebar: {
       iscollapsed: defaultCollapseState
     },
+    bottlenecksCollapsed: true,
     splitsceen: initializeSplitScreen(),
     usermenu: {
       iscollapsed: defaultCollapseState
     },
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"],
+    // there are three states of drawMode: null, "LineString", "Polygon"
     drawMode: null,
     version
   },
@@ -66,9 +65,6 @@
     splitMode: state => {
       return state.splitsceen.mode;
     },
-    drawMode: state => {
-      return state.drawMode;
-    },
     versionStr: state => {
       // version number from package.json
       let versionStr = "v" + state.version;
@@ -89,6 +85,9 @@
     toggleSidebar: state => {
       state.sidebar.iscollapsed = !state.sidebar.iscollapsed;
     },
+    toggleBottlenecks: state => {
+      state.bottlenecksCollapsed = !state.bottlenecksCollapsed;
+    },
     toggleUserMenu: state => {
       state.usermenu.iscollapsed = !state.usermenu.iscollapsed;
     },
@@ -117,11 +116,14 @@
       state.splitsceen = initializeSplitScreen();
     },
     toggleDrawModeLine: state => {
-      if (state.drawMode && state.drawMode === DRAWMODES.LINE) {
+      if (state.drawMode) {
         state.drawMode = null;
-        return;
+      } else {
+        state.drawMode = "LineString";
       }
-      state.drawMode = DRAWMODES.LINE;
+    },
+    activateDrawModePolygon: state => {
+      state.drawMode = "Polygon";
     }
   },
   actions: {}
diff -r 51d412a79e4f -r 907321455f39 client/src/bottlenecks/Bottlenecks.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/bottlenecks/Bottlenecks.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -0,0 +1,125 @@
+<template>
+    <div :class="bottlenecksStyle">
+        <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks">
+            <i class="fa fa-close"></i>
+        </div>
+
+        <div v-if="!this.bottlenecksCollapsed">
+            <h4>Bottlenecks</h4>
+            <hr class="mb-0">
+            <div style="max-height: 500px; overflow-y: scroll">
+                <table class="table text-left mb-0" style="margin-top: -1px;">
+                    <tr v-for="(bottleneck) in bottlenecks"
+                        :key="bottleneck.name">
+                        <td>
+                            <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)">
+                                {{ bottleneck.name }}
+                            </a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+import { fromLonLat } from "ol/proj";
+
+export default {
+  name: "bottlenecks",
+  computed: {
+    ...mapState("application", ["bottlenecksCollapsed"]),
+    ...mapState("bottlenecks", ["bottlenecks"]),
+    ...mapState("mapstore", ["openLayersMap"]),
+    bottlenecksStyle() {
+      return {
+        "ui-element": true,
+        bottlenecks: true,
+        overlay: true,
+        bottleneckscollapsed: this.bottlenecksCollapsed,
+        bottlenecksextended: !this.bottlenecksCollapsed,
+        shadow: true
+      };
+    }
+  },
+  methods: {
+    // TODO: make this central, duplicates code from application/Topbar.vue
+    moveToBottleneck(bottleneck) {
+      if (bottleneck.geom.type == "Point") {
+        let view = this.openLayersMap.getView();
+        const currentZoom = view.getZoom();
+        const newZoom = Math.max(17, currentZoom);
+        view.animate(
+          {
+            zoom: newZoom,
+            center: fromLonLat(
+              bottleneck.geom.coordinates,
+              view.getProjection()
+            )
+          },
+          700
+        );
+      }
+      this.$store.commit("application/toggleBottlenecks");
+    }
+  },
+  mounted() {
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
+  }
+};
+</script>
+
+<style lang="scss">
+.bottlenecks {
+  position: absolute;
+  z-index: -2;
+  top: $offset;
+  left: 64px;
+  background-color: #ffffff;
+  padding-top: $offset;
+  opacity: $slight-transparent;
+  border-radius: $border-radius;
+}
+
+.bottleneckscollapsed {
+  width: 0;
+  height: 0;
+  transition: $transition-fast;
+}
+
+.bottlenecksextended {
+  min-height: $sidebar-height;
+  width: 500px;
+}
+
+.close-bottlenecks {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 7px;
+  border-radius: $border-radius;
+  height: $icon-width;
+  width: $icon-height;
+  display: none;
+}
+
+.bottlenecksextended .close-bottlenecks {
+  display: block;
+}
+</style>
diff -r 51d412a79e4f -r 907321455f39 client/src/bottlenecks/store.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/bottlenecks/store.js	Fri Oct 26 08:45:46 2018 +0200
@@ -0,0 +1,45 @@
+/*
+ * This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ * 
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ * 
+ * Copyright (C) 2018 by via donau 
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ * 
+ * Author(s):
+ * Markus Kottländer <markuks.kottlaender@intevation.de>
+ */
+import { HTTP } from "../application/lib/http";
+
+const Bottlenecks = {
+  namespaced: true,
+  state: {
+    bottlenecks: []
+  },
+  mutations: {
+    setBottlenecks: (state, bottlenecks) => {
+      state.bottlenecks = bottlenecks;
+    }
+  },
+  actions: {
+    loadBottlenecks({ commit }) {
+      return new Promise((resolve, reject) => {
+        HTTP.get("/bottlenecks", {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            commit("setBottlenecks", response.data);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    }
+  }
+};
+
+export default Bottlenecks;
diff -r 51d412a79e4f -r 907321455f39 client/src/identify/Identify.vue
--- a/client/src/identify/Identify.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/identify/Identify.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -78,19 +78,19 @@
 </style>
 
 <script>
-/*
- * This is Free Software under GNU Affero General Public License v >= 3.0
+/* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
- * 
+ *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
- * 
+ *
  * Copyright (C) 2018 by via donau 
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
- * 
+ *
  * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
+ *   Thomas Junk <thomas.junk@intevation.de>
+ *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
 import { mapState } from "vuex";
 import { mapGetters } from "vuex";
diff -r 51d412a79e4f -r 907321455f39 client/src/linetool/Linetool.vue
--- a/client/src/linetool/Linetool.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/linetool/Linetool.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -26,40 +26,44 @@
 </style>
 
 <script>
-/*
- * This is Free Software under GNU Affero General Public License v >= 3.0
+/* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
- * 
+ *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
- * 
+ *
  * Copyright (C) 2018 by via donau 
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
- * 
+ *
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "linetool",
   methods: {
     drawLine() {
-      this.$store.commit("application/toggleDrawModeLine");
+      if (!this.selectedMorph && this.drawMode === "LineString") {
+        this.$store.commit("application/activateDrawModePolygon");
+      } else {
+        this.$store.commit("application/toggleDrawModeLine");
+      }
     }
   },
   computed: {
-    ...mapGetters("application", ["drawMode"]),
+    ...mapState("application", ["drawMode"]),
     ...mapState("identifystore", ["identifiedFeatures"]),
     ...mapState("fairwayprofile", ["selectedMorph"]),
     icon() {
       return {
         fa: true,
         "fa-pencil": !this.selectedMorph,
-        "fa-pencil inverted": !this.selectedMorph && this.drawMode,
+        "fa-pencil inverted":
+          !this.selectedMorph && this.drawMode === "LineString",
         "fa-area-chart": this.selectedMorph,
-        "fa-area-chart inverted": this.selectedMorph && this.drawMode
+        "fa-edit inverted": this.drawMode === "Polygon"
       };
     }
   }
diff -r 51d412a79e4f -r 907321455f39 client/src/login/Login.vue
--- a/client/src/login/Login.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/login/Login.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -46,7 +46,6 @@
 
             <!-- bottom logo section -->
             <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div>
-            <div id="versioninfo"><small>Version: {{version}}</small></div>
         </div>
     </div>
 </template>)
@@ -59,12 +58,6 @@
   @extend %fully-centered;
 }
 
-#versioninfo {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
 .loginform {
   max-width: 375px;
   margin-left: auto;
@@ -103,7 +96,6 @@
 import { mapGetters } from "vuex";
 import { HTTP } from "../application/lib/http.js";
 import { displayError } from "../application/lib/errors.js";
-import { version } from "../../package.json";
 
 const UNAUTHORIZED = 401;
 
@@ -118,8 +110,7 @@
       passwordJustResetted: false,
       readablePassword: false,
       showPasswordReset: false,
-      usernameToReset: "",
-      version: version
+      usernameToReset: ""
     };
   },
   computed: {
diff -r 51d412a79e4f -r 907321455f39 client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -27,16 +27,17 @@
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
- * 
+ *
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
- * 
+ *
  * Copyright (C) 2018 by via donau 
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
- * 
+ *
  * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
+ * * Thomas Junk <thomas.junk@intevation.de>
+ * * Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
 import { HTTP } from "../application/lib/http";
 import { mapGetters, mapState } from "vuex";
@@ -48,7 +49,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 { getLength, getArea } from "ol/sphere.js";
 import { Icon, Stroke, Style, Fill } from "ol/style.js";
 
 import { displayError } from "../application/lib/errors.js";
@@ -60,7 +61,7 @@
 /* eslint-disable no-console */
 export default {
   name: "maplayer",
-  props: ["drawMode", "lat", "long", "zoom", "split"],
+  props: ["lat", "long", "zoom", "split"],
   data() {
     return {
       projection: "EPSG:3857",
@@ -71,6 +72,7 @@
   },
   computed: {
     ...mapGetters("mapstore", ["layers", "getLayerByName"]),
+    ...mapState("application", ["drawMode"]),
     ...mapState("mapstore", ["openLayersMap"]),
     ...mapState("fairwayprofile", ["selectedMorph"]),
     mapStyle() {
@@ -103,30 +105,31 @@
         })
       ];
 
-      geometry.forEachSegment(function(start, end) {
-        var dx = end[0] - start[0];
-        var dy = end[1] - start[1];
-        var rotation = Math.atan2(dy, dx);
-        // arrows
-        styles.push(
-          new Style({
-            geometry: new Point(end),
-            image: new Icon({
-              // we need to make sure the image is loaded by Vue Loader
-              src: require("../application/assets/linestring_arrow.png"),
-              // fiddling with the anchor's y value does not help to
-              // position the image more centered on the line ending, as the
-              // default line style seems to be slightly uncentered in the
-              // anti-aliasing, but the image is not placed with subpixel
-              // precision
-              anchor: [0.75, 0.5],
-              rotateWithView: true,
-              rotation: -rotation
+      if (geometry.getType() === "LineString") {
+        geometry.forEachSegment(function(start, end) {
+          var dx = end[0] - start[0];
+          var dy = end[1] - start[1];
+          var rotation = Math.atan2(dy, dx);
+          // arrows
+          styles.push(
+            new Style({
+              geometry: new Point(end),
+              image: new Icon({
+                // we need to make sure the image is loaded by Vue Loader
+                src: require("../application/assets/linestring_arrow.png"),
+                // fiddling with the anchor's y value does not help to
+                // position the image more centered on the line ending, as the
+                // default line style seems to be slightly uncentered in the
+                // anti-aliasing, but the image is not placed with subpixel
+                // precision
+                anchor: [0.75, 0.5],
+                rotateWithView: true,
+                rotation: -rotation
+              })
             })
-          })
-        );
-      });
-
+          );
+        });
+      }
       return styles;
     },
     createVectorLayer() {
@@ -139,12 +142,12 @@
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
-    createInteraction() {
+    createInteraction(drawMode) {
       this.vectorSource.clear();
       var draw = new Draw({
         source: this.vectorSource,
-        type: this.drawMode,
-        maxPoints: 2
+        type: drawMode,
+        maxPoints: drawMode === "LineString" ? 2 : 50
       });
       draw.on("drawstart", event => {
         this.vectorSource.clear();
@@ -155,10 +158,19 @@
       return draw;
     },
     drawEnd(event) {
-      const length = getLength(event.feature.getGeometry());
-      this.$store.commit("identifystore/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);
+      if (this.drawMode === "Polygon") {
+        const areaSize = getArea(event.feature.getGeometry());
+        // also place the a rounded areaSize in a property,
+        // so identify will show it
+        event.feature.set("area (km²)", Math.round(areaSize) / 1000);
+      }
+      if (this.drawMode === "LineString") {
+        const length = getLength(event.feature.getGeometry());
+        this.$store.commit("identifystore/setCurrentMeasurement", length);
+        // also place the a rounded length in a property,
+        // so identify will show it
+        event.feature.set("length (m)", Math.round(length * 10) / 10);
+      }
 
       // if a survey has been selected, request a profile
       // TODO an improvement could be to check if the line intersects
@@ -228,7 +240,9 @@
     },
     activateIdentifyMode() {
       this.openLayersMap.on("singleclick", event => {
-        // console.log("single click on map:", event);
+        this.identify(event.coordinate, event.pixel);
+      });
+      this.openLayersMap.on("dblclick", event => {
         this.identify(event.coordinate, event.pixel);
       });
     },
@@ -361,10 +375,11 @@
     }
   },
   watch: {
-    drawMode() {
+    drawMode(newValue) {
       if (this.interaction) {
         this.removeCurrentInteraction();
-      } else {
+      }
+      if (newValue) {
         this.activateInteraction();
       }
     },
diff -r 51d412a79e4f -r 907321455f39 client/src/morphtool/Morphtool.vue
--- a/client/src/morphtool/Morphtool.vue	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/morphtool/Morphtool.vue	Fri Oct 26 08:45:46 2018 +0200
@@ -106,7 +106,7 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapGetters, mapState } from "vuex";
+import { mapState } from "vuex";
 
 import { displayError } from "../application/lib/errors.js";
 import { HTTP } from "../application/lib/http";
@@ -120,7 +120,7 @@
     };
   },
   computed: {
-    ...mapGetters("application", ["drawMode"]),
+    ...mapState("application", ["drawMode"]),
     ...mapState("identifystore", ["identifiedFeatures"]),
     ...mapState("fairwayprofile", ["selectedMorph"]),
     selectedBottleneck: function() {
diff -r 51d412a79e4f -r 907321455f39 client/src/store.js
--- a/client/src/store.js	Thu Oct 25 17:19:50 2018 +0200
+++ b/client/src/store.js	Fri Oct 26 08:45:46 2018 +0200
@@ -11,6 +11,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 
 import Vue from "vue";
@@ -21,6 +22,7 @@
 import mapstore from "./map/store";
 import FairwayProfile from "./fairway/store";
 import IdentifyStore from "./identify/store";
+import Bottlenecks from "./bottlenecks/store";
 
 Vue.use(Vuex);
 
@@ -29,6 +31,7 @@
     application: Application,
     fairwayprofile: FairwayProfile,
     identifystore: IdentifyStore,
+    bottlenecks: Bottlenecks,
     mapstore: mapstore,
     user: user,
     usermanagement: usermanagement