--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/splitscreen/Splitscreen.vue	Mon Mar 11 11:34:54 2019 +0100
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div
+      :class="[
+        'splitscreen bg-white d-flex flex-column ui-element',
+        { show: showSplitscreen }
+      ]"
+    >
+      <UIBoxHeader
+        :icon="activeSplitscreen.icon"
+        :title="activeSplitscreen.title"
+        :closeCallback="close"
+        :collapseCallback="collapse"
+        v-if="activeSplitscreen"
+      />
+      <div class="d-flex flex-fill">
+        <transition name="fade">
+          <div
+            class="loading d-flex justify-content-center align-items-center"
+            v-if="splitscreenLoading"
+          >
+            <font-awesome-icon icon="spinner" spin />
+          </div>
+        </transition>
+        <component :is="activeSplitscreen.component" v-if="activeSplitscreen" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.splitscreen
+  position: absolute
+  bottom: -50vh
+  left: 0
+  right: 0
+  height: 50vh
+  overflow: hidden
+  z-index: 1
+  box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075)
+  transition: bottom 0.3s
+  &.show
+    bottom: 0
+
+  .loading
+    background: rgba(255, 255, 255, 0.96)
+    position: absolute
+    z-index: 99
+    top: 34px
+    right: 0
+    bottom: 0
+    left: 0
+</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, mapGetters } from "vuex";
+
+export default {
+  components: {
+    Fairwayprofile: () => import("@/components/fairway/Fairwayprofile")
+  },
+  computed: {
+    ...mapState("application", ["showSplitscreen", "splitscreenLoading"]),
+    ...mapGetters("application", ["activeSplitscreen"])
+  },
+  methods: {
+    collapse() {
+      if (this.activeSplitscreen.collapseCallback)
+        this.activeSplitscreen.collapseCallback();
+      this.$store.commit("application/showSplitscreen", false);
+    },
+    close() {
+      if (this.activeSplitscreen.closeCallback)
+        this.activeSplitscreen.closeCallback();
+      this.$store.commit("application/showSplitscreen", false);
+      setTimeout(() => {
+        this.$store.commit(
+          "application/removeSplitscreen",
+          this.activeSplitscreen.id
+        );
+        this.$store.commit("application/activeSplitscreen", null);
+      }, 350);
+    }
+  }
+};
+</script>