--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/morphtool/Morphtool.vue	Wed Oct 17 15:22:21 2018 +0200
@@ -0,0 +1,156 @@
+<template>
+    <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
+        <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow">
+            <div class="headline">
+                <h4>{{selectedBottleneck.get("objnam")}}</h4>
+                <hr>
+                <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
+                    <i class="fa fa-close morphtoolsminus"></i>
+                </div>
+            </div>
+            <ul class="list-group surveylist">
+                <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
+                    <a href="#" @click.prevent="">{{survey.date_info}}</a>
+                </li>
+            </ul>
+        </div>
+        <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
+            <div class="d-flex flex-row justify-content-between">
+                <i class="fa fa-close text-danger"></i>
+                <small>Bottleneck:&nbsp;</small>
+                <h6>{{selectedBottleneck.get("objnam")}} <small>( {{selectedMorph.date_info}} )</small></h6>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.headline {
+  margin-right: $offset;
+  margin-left: $offset;
+}
+.morphcontainer {
+  margin-bottom: $offset;
+  margin-left: auto;
+  margin-right: $large-offset + $icon-width;
+  border-radius: $border-radius;
+}
+.surveylist {
+  text-align: left;
+  margin-bottom: $offset !important;
+  margin-left: $offset;
+  margin-right: $offset;
+}
+
+.surveylist li {
+  margin-left: auto;
+  margin-right: auto;
+  border-style: none;
+  padding-bottom: 0rem;
+}
+
+.morphtool {
+  position: relative;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  height: $icon-width;
+  margin-right: $offset;
+  margin-top: auto;
+  margin-bottom: auto;
+  z-index: 2;
+}
+
+.morphcontainer i {
+  margin-right: $small-offset;
+}
+
+.morphtoolminus {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: white;
+  padding: $small-offset;
+  border-radius: $border-radius;
+  height: $icon-width;
+  width: $icon-height;
+  z-index: 2;
+}
+</style>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+import { displayError } from "../application/lib/errors.js";
+import { HTTP } from "../application/lib/http";
+
+export default {
+  name: "morphtool",
+  data() {
+    return {
+      surveyList: null
+    };
+  },
+  computed: {
+    ...mapGetters("application", ["drawMode"]),
+    ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
+    selectedBottleneck: function() {
+      if (this.identifiedFeatures && !this.drawMode) {
+        for (let feature of this.identifiedFeatures) {
+          let id = feature.getId();
+          // RegExp.prototype.test() works with number, str and undefined
+          if (/^bottlenecks\./.test(id)) {
+            this.$store.commit("mapstore/setSelectedMorph", null);
+            return feature;
+          }
+        }
+      }
+      return null;
+    }
+  },
+  watch: {
+    selectedBottleneck: function(bottleneckFeature) {
+      if (bottleneckFeature) {
+        let bottleneckName = bottleneckFeature.get("objnam");
+        if (bottleneckName) {
+          this.queryBottleneck(bottleneckName);
+        }
+      }
+    }
+  },
+  methods: {
+    queryBottleneck(name) {
+      // DEBUG console.log("starting to query bottleneck", name);
+      HTTP.get("/surveys/" + name, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      })
+        .then(response => {
+          this.surveyList = response.data;
+        })
+        .catch(error => {
+          this.surveyList = null;
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    selectSurvey(survey) {
+      this.$store.commit("mapstore/setSelectedMorph", survey);
+      this.surveyList = null;
+    },
+    clearSelection() {
+      this.$store.commit("mapstore/setIdentifiedFeatures", []);
+      this.$store.commit("mapstore/setSelectedMorph", null);
+      this.surveyList = null;
+      if (this.drawMode) {
+        this.$store.commit("application/toggleDrawModeLine");
+      }
+    }
+  }
+};
+</script>