# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1542798612 -3600
# Node ID d1903250390b493b3eee60e0ecdff583220a7e36
# Parent  104d41ea7c154d3ec27e124b7e59ebb6ddf3c48d
splitted mophtool into two components
one shows the survey results and the other the info bar when a bottleneck is selected (and no profile is shown)

diff -r 104d41ea7c15 -r d1903250390b client/src/App.vue
--- a/client/src/App.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/App.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -19,6 +19,7 @@
             <div class="flex-fill"></div>
             <div class="d-flex flex-row align-items-end">
                 <Morphtool v-if="routeName == 'mainview'"></Morphtool>
+                <Infobar v-if="routeName == 'mainview'"></Infobar>
             </div>
             <Zoom v-if="routeName == 'mainview'"></Zoom>
         </div>
@@ -81,6 +82,7 @@
   },
   components: {
     Morphtool: () => import("./morphtool/Morphtool"),
+    Infobar: () => import("./morphtool/Infobar"),
     Pdftool: () => import("./pdftool/Pdftool"),
     Zoom: () => import("./zoom/zoom"),
     Identify: () => import("./identify/Identify"),
diff -r 104d41ea7c15 -r d1903250390b client/src/identify/Identify.vue
--- a/client/src/identify/Identify.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/identify/Identify.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -60,8 +60,9 @@
  * Software engineering by Intevation GmbH
  *
  * Author(s):
- *   Thomas Junk <thomas.junk@intevation.de>
- *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState, mapGetters } from "vuex";
 
diff -r 104d41ea7c15 -r d1903250390b client/src/layers/Layers.vue
--- a/client/src/layers/Layers.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -33,6 +33,7 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import Layerselect from "./Layerselect";
 import { mapGetters, mapState } from "vuex";
diff -r 104d41ea7c15 -r d1903250390b client/src/morphtool/Infobar.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/morphtool/Infobar.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -0,0 +1,45 @@
+<template>
+    <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow infobar rounded bg-white ml-auto mb-3 mr-3">
+        <div class="d-flex flex-row justify-content-between">
+            <h6 class="my-auto px-2">
+                {{ selectedBottleneck }}
+                ({{ selectedSurvey.date_info }})
+            </h6>
+            <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
+            <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
+        </div>
+    </div>
+</template>
+
+<style lang="sass" scoped>
+.infobar
+  height: $icon-width
+  z-index: 2
+</style>
+
+<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";
+
+export default {
+  name: "infobar",
+  computed: {
+    ...mapState("application", ["showSplitscreen"]),
+    ...mapState("fairwayprofile", ["currentProfile"]),
+    ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"])
+  }
+};
+</script>
diff -r 104d41ea7c15 -r d1903250390b client/src/morphtool/Morphtool.vue
--- a/client/src/morphtool/Morphtool.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -1,51 +1,23 @@
 <template>
-    <div class="mb-3 mr-3 ml-auto rounded position-relative">
-        <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
-            <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
-            <hr>
-            <div
-                @click="$store.dispatch('fairwayprofile/clearSelection');"
-                class="ui-element d-flex morphtoolminus position-absolute"
-            >
-                <i class="fa fa-close p-2"></i>
-            </div>
-            <div>
+    <div :class="['box ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap', { expanded: selectedBottleneck && surveys && !selectedSurvey }]">
+        <div style="width: 15rem">
+            <h5 class="mb-0 py-2 border-bottom">
+              {{ selectedBottleneck }}
+            </h5>
+            <div class="p-3">
                 <div
-                    v-for="survey of surveys"
+                    v-for="(survey, i) of surveys"
                     :key="survey.data_info"
-                    class="my-1"
+                    :class="{ 'mt-1': i }"
                     @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
                 >
                     <a href="#" @click.prevent>{{ survey.date_info }}</a>
                 </div>
             </div>
         </div>
-        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
-            <div class="d-flex flex-row justify-content-between">
-                <h6 class="my-auto px-2">
-                    {{ selectedBottleneck }}
-                    ({{ selectedSurvey.date_info }})
-                </h6>
-                <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
-                <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
-            </div>
-        </div>
     </div>
 </template>
 
-<style scoped lang="sass">
-.morphtool
-  height: $icon-width
-  z-index: 2
-
-.morphtoolminus
-  top: 0
-  right: 0
-  height: $icon-width
-  width: $icon-height
-  z-index: 2
-</style>
-
 <script>
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
@@ -60,16 +32,13 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "morphtool",
   computed: {
-    ...mapGetters("map", ["getLayerByName"]),
-    ...mapState("map", ["openLayersMap", "cutTool"]),
-    ...mapState("application", ["showSplitscreen"]),
-    ...mapState("fairwayprofile", ["currentProfile"]),
     ...mapState("bottlenecks", [
       "selectedBottleneck",
       "surveys",