--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/bottlenecks/Bottlenecks.vue	Thu Oct 25 15:05:20 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, index) in bottlenecks">
+                        <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>