--- a/client/src/components/App.vue	Tue Dec 11 22:59:10 2018 +0100
+++ b/client/src/components/App.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -87,16 +87,16 @@
     }
   },
   components: {
-    Profiles: () => import("./map/fairway/Profiles"),
-    Infobar: () => import("./map/fairway/Infobar"),
-    Pdftool: () => import("./map/Pdftool"),
-    Zoom: () => import("./map/Zoom"),
-    Identify: () => import("./map/Identify"),
-    Layers: () => import("./map/layers/Layers"),
+    Profiles: () => import("./fairway/Profiles"),
+    Infobar: () => import("./fairway/Infobar"),
+    Pdftool: () => import("./Pdftool"),
+    Zoom: () => import("./Zoom"),
+    Identify: () => import("./Identify"),
+    Layers: () => import("./layers/Layers"),
     Sidebar: () => import("./Sidebar"),
-    Search: () => import("./map/Search"),
-    Contextbox: () => import("./map/contextbox/Contextbox"),
-    Toolbar: () => import("./map/toolbar/Toolbar")
+    Search: () => import("./Search"),
+    Contextbox: () => import("./Contextbox"),
+    Toolbar: () => import("./toolbar/Toolbar")
   }
 };
 </script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Bottlenecks.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
+      <translate>Bottlenecks</translate>
+    </h6>
+    <div class="row p-2 text-left small">
+      <div class="col-5">
+        <a href="#" @click="sortBy('name')" class="sort-link">
+          <translate>Name</translate>
+        </a>
+        <font-awesome-icon
+          :icon="sortIcon"
+          class="ml-1"
+          v-if="sortColumn === 'name'"
+        ></font-awesome-icon>
+      </div>
+      <div class="col-2">
+        <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">
+          <translate>Latest</translate> <br />
+          <translate>Measurement</translate>
+        </a>
+        <font-awesome-icon
+          :icon="sortIcon"
+          class="ml-1"
+          v-if="sortColumn === 'latestMeasurement'"
+        ></font-awesome-icon>
+      </div>
+      <div class="col-3">
+        <a href="#" @click="sortBy('chainage')" class="sort-link">
+          <translate>Chainage</translate>
+        </a>
+        <font-awesome-icon
+          :icon="sortIcon"
+          class="ml-1"
+          v-if="sortColumn === 'chainage'"
+        ></font-awesome-icon>
+      </div>
+      <div class="col-2"></div>
+    </div>
+    <div
+      class="bottleneck-list small text-left"
+      :style="'max-height: ' + (showSplitscreen ? 18 : 35) + 'rem'"
+      v-if="filteredAndSortedBottlenecks().length"
+    >
+      <div
+        v-for="bottleneck in filteredAndSortedBottlenecks()"
+        :key="bottleneck.properties.name"
+        class="border-top row bottleneck-row mx-0"
+      >
+        <div class="col-5 py-2 text-left">
+          <a href="#" @click="selectBottleneck(bottleneck)">{{
+            bottleneck.properties.name
+          }}</a>
+        </div>
+        <div class="col-2 py-2">
+          {{ formatSurveyDate(bottleneck.properties.current) }}
+        </div>
+        <div class="col-3 py-2">
+          {{
+            displayCurrentChainage(
+              bottleneck.properties.from,
+              bottleneck.properties.to
+            )
+          }}
+        </div>
+        <div class="col-2 pr-0 text-right">
+          <button
+            type="button"
+            class="btn btn-sm btn-info rounded-0 h-100"
+            @click="loadSurveys(bottleneck.properties.name)"
+            v-if="bottleneck.properties.current"
+          >
+            <font-awesome-icon
+              icon="spinner"
+              fixed-width
+              spin
+              v-if="loading === bottleneck.properties.name"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-down"
+              fixed-width
+              v-if="
+                loading !== bottleneck.properties.name &&
+                  openBottleneck !== bottleneck.properties.name
+              "
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="angle-up"
+              fixed-width
+              v-if="
+                loading !== bottleneck.properties.name &&
+                  openBottleneck === bottleneck.properties.name
+              "
+            ></font-awesome-icon>
+          </button>
+        </div>
+        <div
+          :class="[
+            'col-12 p-0',
+            'surveys',
+            { open: openBottleneck === bottleneck.properties.name }
+          ]"
+        >
+          <a
+            href="#"
+            class="d-block px-3 py-2"
+            v-for="(survey, index) in openBottleneckSurveys"
+            :key="index"
+            @click="selectSurvey(survey, bottleneck)"
+            >{{ formatSurveyDate(survey.date_info) }}</a
+          >
+        </div>
+      </div>
+    </div>
+    <div v-else class="small text-center py-3 border-top">
+      <translate>No results.</translate>
+    </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 { HTTP } from "../lib/http";
+import { displayError } from "../lib/errors.js";
+import { formatSurveyDate } from "../lib/date.js";
+
+export default {
+  name: "bottlenecks",
+  data() {
+    return {
+      sortColumn: "name",
+      sortDirection: "ASC",
+      openBottleneck: null,
+      openBottleneckSurveys: null,
+      loading: null
+    };
+  },
+  computed: {
+    ...mapState("application", [
+      "searchQuery",
+      "showSearchbarLastState",
+      "showSplitscreen"
+    ]),
+    ...mapState("bottlenecks", ["bottlenecks"]),
+    sortIcon() {
+      return this.sortDirection === "ASC"
+        ? "sort-amount-down"
+        : "sort-amount-up";
+    }
+  },
+  methods: {
+    formatSurveyDate(date) {
+      return formatSurveyDate(date);
+    },
+    filteredAndSortedBottlenecks() {
+      return this.bottlenecks
+        .filter(bn => {
+          return bn.properties.name
+            .toLowerCase()
+            .includes(this.searchQuery.toLowerCase());
+        })
+        .sort((bnA, bnB) => {
+          switch (this.sortColumn) {
+            case "name":
+              if (
+                bnA.properties.name.toLowerCase() <
+                bnB.properties.name.toLowerCase()
+              )
+                return this.sortDirection === "ASC" ? -1 : 1;
+              if (
+                bnA.properties.name.toLowerCase() >
+                bnB.properties.name.toLowerCase()
+              )
+                return this.sortDirection === "ASC" ? 1 : -1;
+              return 0;
+
+            case "latestMeasurement": {
+              if (
+                (bnA.properties.current || "") < (bnB.properties.current || "")
+              )
+                return this.sortDirection === "ASC" ? -1 : 1;
+              if (
+                (bnA.properties.current || "") > (bnB.properties.current || "")
+              )
+                return this.sortDirection === "ASC" ? 1 : -1;
+              return 0;
+            }
+
+            case "chainage":
+              if (bnA.properties.from < bnB.properties.from)
+                return this.sortDirection === "ASC" ? -1 : 1;
+              if (bnA.properties.from > bnB.properties.from)
+                return this.sortDirection === "ASC" ? 1 : -1;
+              return 0;
+
+            default:
+              return 0;
+          }
+        });
+    },
+    selectSurvey(survey, bottleneck) {
+      this.$store
+        .dispatch(
+          "bottlenecks/setSelectedBottleneck",
+          bottleneck.properties.name
+        )
+        .then(() => {
+          this.$store.commit("bottlenecks/selectedSurvey", survey);
+        })
+        .then(() => {
+          this.$store.commit("map/moveMap", {
+            coordinates: bottleneck.geometry.coordinates,
+            zoom: 17,
+            preventZoomOut: true
+          });
+        });
+    },
+    selectBottleneck(bottleneck) {
+      this.$store
+        .dispatch(
+          "bottlenecks/setSelectedBottleneck",
+          bottleneck.properties.name
+        )
+        .then(() => {
+          this.$store.commit("bottlenecks/setFirstSurveySelected");
+        })
+        .then(() => {
+          this.$store.commit("map/moveMap", {
+            coordinates: bottleneck.geometry.coordinates,
+            zoom: 17,
+            preventZoomOut: true
+          });
+        });
+    },
+    sortBy(column) {
+      this.sortColumn = column;
+      this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
+    },
+    loadSurveys(name) {
+      this.openBottleneckSurveys = null;
+      if (name === this.openBottleneck) {
+        this.openBottleneck = null;
+      } else {
+        this.openBottleneck = name;
+        this.loading = name;
+
+        HTTP.get("/surveys/" + name, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            this.openBottleneckSurveys = response.data.surveys.sort((a, b) => {
+              return a.date_info < b.date_info ? 1 : -1;
+            });
+          })
+          .catch(error => {
+            const { status, data } = error.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          })
+          .finally(() => (this.loading = null));
+      }
+    },
+    displayCurrentChainage(from, to) {
+      return from / 10 + " - " + to / 10;
+    }
+  },
+  mounted() {
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bottleneck-list {
+  overflow-y: auto;
+}
+
+.bottleneck-list .bottleneck-row a {
+  text-decoration: none;
+}
+
+.bottleneck-list .bottleneck-row:hover {
+  background: #fbfbfb;
+}
+
+.surveys {
+  max-height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.surveys a:hover {
+  background: #f3f3f3;
+}
+
+.surveys.open {
+  max-height: 250px;
+  overflow: auto;
+}
+
+.sort-link {
+  color: #444;
+  font-weight: bold;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Contextbox.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,96 @@
+<template>
+  <div :class="style">
+    <div @click="close" class="ui-element close-contextbox text-muted">
+      <font-awesome-icon icon="times"></font-awesome-icon>
+    </div>
+    <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
+    <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
+    <Staging v-if="contextBoxContent === 'staging'"></Staging>
+  </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";
+
+export default {
+  name: "contextbox",
+  components: {
+    Bottlenecks: () => import("./Bottlenecks"),
+    Importsounding: () => import("./ImportSoundingresults.vue"),
+    Staging: () => import("./Staging.vue")
+  },
+  computed: {
+    ...mapState("application", [
+      "showSearchbarLastState",
+      "contextBoxContent",
+      "showContextBox"
+    ]),
+    style() {
+      return [
+        "ui-element shadow-xs contextbox",
+        {
+          contextboxcollapsed: !this.showContextBox,
+          contextboxextended: this.showContextBox,
+          "rounded-bottom": this.contextBoxContent !== "imports",
+          rounded: this.contextBoxContent === "imports"
+        }
+      ];
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit("application/showContextBox", false);
+      this.$store.commit(
+        "application/showSearchbar",
+        this.showSearchbarLastState
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.contextbox {
+  position: relative;
+  background-color: #ffffff;
+  opacity: $slight-transparent;
+  transition: max-width 0.3s, max-height 0.3s;
+  overflow: hidden;
+  background: #fff;
+}
+.contextbox > div:last-child {
+  width: 600px;
+}
+
+.contextboxcollapsed {
+  max-width: 0;
+  max-height: 0;
+}
+
+.contextboxextended {
+  max-width: 600px;
+  max-height: 640px;
+}
+
+.close-contextbox {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: 7px;
+  height: $icon-width;
+  width: $icon-height;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Identify.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,124 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showIdentify }
+    ]"
+  >
+    <div style="width: 20rem">
+      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+        <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon>
+        <translate>Identified</translate>
+        <font-awesome-icon
+          icon="times"
+          class="ml-auto text-muted"
+          @click="$store.commit('application/showIdentify', false)"
+        ></font-awesome-icon>
+      </h6>
+      <div class="d-flex flex-column features p-3 flex-grow-1 text-left">
+        <div v-if="currentMeasurement">
+          <b>
+            {{ currentMeasurement.quantity }} ({{
+              currentMeasurement.unitSymbol
+            }}):
+          </b>
+          <br />
+          <small>{{ currentMeasurement.value }}</small>
+        </div>
+        <div v-for="(feature, i) of identifiedFeatures" :key="feature.getId()">
+          <div v-if="feature.getId()" :class="{ 'mt-2': i }">
+            <strong>
+              {{
+                feature.getId().replace(/[.][^.]*$/, "")
+                /* cut away everything from the last . to the end */
+              }}:
+            </strong>
+            <small
+              v-for="(value, key) in prepareProperties(feature)"
+              :key="key"
+            >
+              <div v-if="value">{{ key }}:{{ value }}</div>
+            </small>
+          </div>
+        </div>
+        <div
+          v-if="!currentMeasurement && !identifiedFeatures.length"
+          class="text-muted small text-center my-auto"
+        >
+          <translate>No features identified.</translate>
+        </div>
+      </div>
+      <div class="versioninfo border-top p-3 text-left">
+        <span v-translate="{ license: 'AGPL-3.0-or-later' }">
+          This app uses <i>gemma</i>, which is Free Software under <br />
+          %{ license } without warranty, see docs for details.
+        </span>
+        <br />
+        <a href="https://hg.intevation.de/gemma/file/tip">
+          <translate>source-code</translate>
+        </a>
+        {{ versionStr }} <br />© via donau. &#x24D4; Intevation. <br />
+        <span v-translate="{ name: 'OpenSteetMap' }"
+          >Some data ©
+          <a href="https://www.openstreetmap.org/copyright">%{ name }</a>
+          contributors.
+        </span>
+        <p v-translate="{ geoLicense: 'CC-BY-4.0' }">
+          Uses
+          <a href="https://download.geonames.org/export/dump/readme.txt"
+            >GeoNames</a
+          >
+          under %{ geoLicense }.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.features {
+  max-height: 19rem;
+  overflow-y: auto;
+}
+
+.versioninfo {
+  font-size: 60%;
+  white-space: normal;
+}
+</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):
+ * 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";
+
+export default {
+  name: "identify",
+  computed: {
+    ...mapGetters("application", ["versionStr"]),
+    ...mapState("application", ["showIdentify"]),
+    ...mapState("map", ["identifiedFeatures", "currentMeasurement"])
+  },
+  methods: {
+    prepareProperties(feature) {
+      // return dict object with propertyname:plainvalue prepared for display
+      var properties = feature.getProperties();
+      delete properties[feature.getGeometryName()];
+      return properties;
+    }
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ImportSoundingresults.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,379 @@
+<template>
+  <div>
+    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+      <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
+      <translate>Import Soundingresults</translate>
+    </h6>
+    <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
+      <div class="d-flex flex-column">
+        <div class="d-flex flex-row">
+          <div class="mt-1 text-left w-50 ml-2 mr-4">
+            <small class="text-muted">
+              <translate>Bottleneck</translate>
+            </small>
+            <select v-model="bottleneck" class="custom-select">
+              <option
+                v-for="bottleneck in availableBottlenecks"
+                :key="bottleneck"
+                >{{ bottleneck }}</option
+              >
+            </select>
+            <span class="text-danger">
+              <small v-if="!bottleneck">
+                <translate>Please select a bottleneck</translate>
+              </small>
+            </span>
+          </div>
+          <div class="d-flex flex-column mt-1 text-left w-50 mr-2">
+            <small class="text-muted">
+              <translate>Projection</translate>&nbsp;(EPSG)
+            </small>
+            <input
+              class="form-control"
+              v-model="projection"
+              value="4326"
+              placeholder="e.g. 4326"
+              type="number"
+            />
+            <span class="text-left text-danger">
+              <small v-if="!projection">
+                <translate>Please enter a projection</translate>
+              </small>
+            </span>
+          </div>
+        </div>
+        <div class="d-flex flex-row">
+          <div class="mt-1 text-left w-50 ml-2 mr-4">
+            <small class="text-muted">
+              <translate>Depthreference</translate>
+            </small>
+            <select
+              v-model="depthReference"
+              class="custom-select"
+              id="depthreference"
+            >
+              <option
+                v-for="option in this.$options.depthReferenceOptions"
+                :key="option"
+                >{{ option }}</option
+              >
+            </select>
+            <span class="text-left text-danger">
+              <small v-if="!depthReference">
+                <translate>Please enter a reference</translate>
+              </small>
+            </span>
+          </div>
+          <div class="mt-1 text-left w-50 mr-2">
+            <small class="text-muted"> <translate>Date</translate> </small>
+            <input
+              id="importdate"
+              type="date"
+              class="form-control"
+              placeholder="Date of import"
+              aria-label="bottleneck"
+              aria-describedby="bottlenecklabel"
+              v-model="importDate"
+            />
+            <span class="text-left text-danger">
+              <small v-if="!importDate">
+                <translate>Please enter a date</translate>
+              </small>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="ml-2 mt-2 text-left">
+        <small v-for="(message, index) in messages" :key="index">
+          {{ message }}
+        </small>
+      </div>
+    </div>
+    <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+      <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
+        <div class="custom-file">
+          <input
+            accept=".zip"
+            type="file"
+            @change="fileSelected"
+            class="custom-file-input"
+            id="uploadFile"
+          />
+          <label class="custom-file-label" for="uploadFile">
+            {{ uploadLabel }}
+          </label>
+        </div>
+      </div>
+      <div class="buttons text-right">
+        <a
+          v-if="editState"
+          download="meta.json"
+          :href="dataLink"
+          class="btn btn-outline-info pull-left"
+        >
+          <translate>Download Meta.json</translate>
+        </a>
+        <button
+          v-if="editState"
+          @click="deleteTempData"
+          class="btn btn-danger"
+          type="button"
+        >
+          <translate>Cancel Upload</translate>
+        </button>
+        <button
+          :disabled="disableUploadButton"
+          @click="submit"
+          class="btn btn-info"
+          type="button"
+        >
+          {{ uploadState ? Upload : Confirm }}
+        </button>
+      </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { HTTP } from "../lib/http";
+import { displayError, displayInfo } from "../lib/errors.js";
+import { mapState } from "vuex";
+
+const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
+
+export default {
+  name: "imports",
+  data() {
+    return {
+      importState: IMPORTSTATE.UPLOAD,
+      depthReference: "",
+      bottleneck: "",
+      projection: "",
+      importDate: "",
+      uploadLabel: this.$gettext("choose .zip- file"),
+      uploadFile: null,
+      disableUpload: false,
+      token: null,
+      messages: []
+    };
+  },
+  methods: {
+    initialState() {
+      this.importState = IMPORTSTATE.UPLOAD;
+      this.depthReference = "";
+      this.bottleneck = "";
+      this.projection = "";
+      this.importDate = "";
+      this.uploadLabel = this.$gettext("choose .zip- file");
+      this.uploadFile = null;
+      this.disableUpload = false;
+      this.token = null;
+      this.messages = [];
+    },
+    fileSelected(e) {
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files) return;
+      this.uploadLabel = files[0].name;
+      this.uploadFile = files[0];
+    },
+    deleteTempData() {
+      HTTP.delete("/imports/soundingresult-upload/" + this.token, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token")
+        }
+      })
+        .then(() => {
+          this.initialState();
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    submit() {
+      if (!this.uploadFile || this.disableUpload) return;
+      if (this.importState === IMPORTSTATE.UPLOAD) {
+        this.upload();
+      } else {
+        this.confirm();
+      }
+    },
+    upload() {
+      let formData = new FormData();
+      formData.append("soundingresult", this.uploadFile);
+      HTTP.post("/imports/soundingresult-upload", formData, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-Type": "multipart/form-data"
+        }
+      })
+        .then(response => {
+          if (response.data.meta) {
+            const { bottleneck, date, epsg } = response.data.meta;
+            const depthReference = response.data.meta["depth-reference"];
+            this.bottleneck = bottleneck;
+            this.depthReference = depthReference;
+            this.importDate = new Date(date).toISOString().split("T")[0];
+            this.projection = epsg;
+          }
+          this.importState = IMPORTSTATE.EDIT;
+          this.token = response.data.token;
+          this.messages = response.data.messages;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          const messages = data.messages ? data.messages.join(", ") : "";
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${messages}`
+          });
+        });
+    },
+    confirm() {
+      let formData = new FormData();
+      formData.append("token", this.token);
+      if (this.bottleneck) formData.append("bottleneck", this.bottleneck);
+      if (this.importDate)
+        formData.append("date", this.importDate.split("T")[0]);
+      if (this.depthReference)
+        formData.append("depth-reference", this.depthReference);
+      if (this.projection) formData.append("", this.projection);
+
+      HTTP.post("/imports/soundingresult", formData, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-Type": "multipart/form-data"
+        }
+      })
+        .then(() => {
+          displayInfo({
+            title: this.$gettext("Import"),
+            message: this.$gettext("Starting import for ") + this.bottleneck
+          });
+          this.initialState();
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  },
+  mounted() {
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
+  },
+  watch: {
+    showContextBox() {
+      if (!this.showContextBox && this.token) this.deleteTempData();
+    }
+  },
+  computed: {
+    ...mapState("application", ["showContextBox"]),
+    ...mapState("bottlenecks", ["bottlenecks"]),
+    disableUploadButton() {
+      if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload;
+      if (
+        !this.bottleneck ||
+        !this.importDate ||
+        !this.depthReference ||
+        !this.projection
+      )
+        return true;
+      return this.disableUpload;
+    },
+    availableBottlenecks() {
+      return this.bottlenecks.map(x => x.properties.name);
+    },
+    editState() {
+      return this.importState === IMPORTSTATE.EDIT;
+    },
+    uploadState() {
+      return this.importState === IMPORTSTATE.UPLOAD;
+    },
+    Upload() {
+      return this.$gettext("Upload");
+    },
+    Confirm() {
+      return this.$gettext("Confirm");
+    },
+    dataLink() {
+      return (
+        "data:text/json;charset=utf-8," +
+        encodeURIComponent(
+          JSON.stringify({
+            depthReference: this.depthReference,
+            bottleneck: this.bottleneck,
+            date: this.importDate
+          })
+        )
+      );
+    }
+  },
+  depthReferenceOptions: [
+    "",
+    // "NAP",
+    // "KP",
+    // "FZP",
+    // "ADR",
+    // "TAW",
+    // "PUL",
+    // "NGM",
+    // "ETRS",
+    // "POT",
+    // "LDC",
+    // "HDC",
+    // "ZPG",
+    // "GLW",
+    // "HSW",
+    // "LNW",
+    // "HNW",
+    // "IGN",
+    // "WGS",
+    "RN" //,
+    // "HBO"
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+.projectionLabel {
+  margin-left: $small-offset;
+}
+
+.depthreferencelabel {
+  margin-left: $small-offset;
+}
+
+.offset-r {
+  margin-right: $small-offset;
+}
+
+.buttons button {
+  margin-left: $offset !important;
+}
+
+.label-text {
+  width: 5rem;
+  text-align: left;
+  line-height: 2.25rem;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Importqueue.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,362 @@
+<template>
+  <div class="d-flex flex-row">
+    <div :class="spacerStyle"></div>
+    <div class="mt-3 importqueuecard flex-grow-1">
+      <div class="card shadow-xs">
+        <h6
+          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon icon="tasks" class="mr-2"></font-awesome-icon>
+          <translate class="headline">Importqueue</translate>
+        </h6>
+        <div class="card-body importcardbody">
+          <div class="card-body importcardbody">
+            <div class="searchandfilter d-flex flex-row">
+              <div class="searchgroup input-group">
+                <div class="input-group-prepend">
+                  <span class="input-group-text" id="search">
+                    <font-awesome-icon icon="search"></font-awesome-icon>
+                  </span>
+                </div>
+                <input
+                  v-model="searchQuery"
+                  type="text"
+                  class="form-control"
+                  placeholder
+                  aria-label="Search"
+                  aria-describedby="search"
+                />
+              </div>
+              <div class="filters">
+                <button
+                  @click="setFilter('successful')"
+                  :class="successfulStyle"
+                >
+                  <translate>Successful</translate>
+                </button>
+                <button @click="setFilter('failed')" :class="failedStyle">
+                  <translate>Failed</translate>
+                </button>
+                <button @click="setFilter('pending')" :class="pendingStyle">
+                  <translate>Pending</translate>
+                </button>
+                <button @click="setFilter('rejected')" :class="rejectedStyle">
+                  <translate>Rejected</translate>
+                </button>
+                <button @click="setFilter('accepted')" :class="acceptedStyle">
+                  <translate>Accepted</translate>
+                </button>
+              </div>
+            </div>
+            <div class="text-left d-flex flex-row w-50 border-bottom">
+              <div class="header py-1 jobid mr-2">
+                <translate>Id</translate>
+              </div>
+              <div class="header py-1 enqueued mr-2">
+                <translate>Enqueued</translate>
+              </div>
+              <div class="header py-1 kind mr-2">
+                <translate>Kind</translate>
+              </div>
+              <div class="header py-1 user mr-2">
+                <translate>User</translate>
+              </div>
+              <div class="header py-1 signer mr-2">
+                <translate>Signer</translate>
+              </div>
+              <div class="header py-1 state mr-2">
+                <translate>State</translate>
+              </div>
+            </div>
+            <div class="text-left" v-for="job in filteredImports" :key="job.id">
+              <Importqueuedetail :job="job"></Importqueuedetail>
+            </div>
+            <div>
+              <button @click="refresh" class="btn btn-info refresh">
+                <translate>Refresh</translate>
+              </button>
+            </div>
+          </div>
+        </div>
+      </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@intevation.de>
+ */
+import { displayError } from "../lib/errors.js";
+import { mapState } from "vuex";
+import { HTTP } from "../lib/http.js";
+import Importqueuedetail from "./Importqueuedetail";
+
+export default {
+  name: "importqueue",
+  components: {
+    Importqueuedetail
+  },
+  data() {
+    return {
+      searchQuery: "",
+      successful: false,
+      failed: false,
+      pending: false,
+      rejected: false,
+      accepted: false
+    };
+  },
+  mounted() {
+    this.loadQueue();
+  },
+  methods: {
+    setFilter(name) {
+      this[name] = !this[name];
+      const allSet =
+        this.successful &&
+        this.failed &&
+        this.pending &&
+        this.accepted &&
+        this.rejected;
+      if (allSet) {
+        this.successful = false;
+        this.failed = false;
+        this.pending = false;
+        this.accepted = false;
+        this.rejected = false;
+      }
+    },
+    loadQueue() {
+      this.$store.dispatch("imports/getImports").catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
+    },
+    refresh() {
+      this.loadQueue();
+    },
+    showDetails(id) {
+      HTTP.get("/imports/" + id, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          const { entries } = response.data;
+          this.entries = entries;
+          this.$modal.show("details");
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    close() {
+      this.$modal.hide("details");
+    }
+  },
+  computed: {
+    ...mapState("imports", ["imports"]),
+    ...mapState("application", ["showSidebar"]),
+    sortIcon() {
+      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
+    },
+    filteredImports() {
+      const filtered = this.imports
+        .filter(element => {
+          if (!this.searchQuery) return true;
+          return [(element.kind, element.user, element.enqueued)].some(x => {
+            return x.toLowerCase().includes(this.searchQuery.toLowerCase());
+          });
+        })
+        .filter(y => {
+          if (
+            !this.successful &&
+            !this.failed &&
+            !this.pending &&
+            !this.accepted &&
+            !this.rejected
+          )
+            return true;
+          let filterCriteria = [];
+          if (this.successful) filterCriteria.push("successful");
+          if (this.failed) filterCriteria.push("failed");
+          if (this.pending) filterCriteria.push("pending");
+          if (this.accepted) filterCriteria.push("accepted");
+          if (this.rejected) filterCriteria.push("rejected");
+          const result = filterCriteria.map(selectedState => {
+            return y.state === selectedState;
+          });
+          return result.some(x => x);
+        });
+      return filtered;
+    },
+    spacerStyle() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    },
+    successfulStyle() {
+      return {
+        btn: true,
+        "btn-light": !this.successful,
+        "btn-dark": this.successful
+      };
+    },
+    pendingStyle() {
+      return {
+        btn: true,
+        "btn-light": !this.pending,
+        "btn-dark": this.pending
+      };
+    },
+    failedStyle() {
+      return {
+        btn: true,
+        "btn-light": !this.failed,
+        "btn-dark": this.failed
+      };
+    },
+    rejectedStyle() {
+      return {
+        btn: true,
+        "btn-light": !this.rejected,
+        "btn-dark": this.rejected
+      };
+    },
+    acceptedStyle() {
+      return {
+        btn: true,
+        "btn-light": !this.accepted,
+        "btn-dark": this.accepted
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.jobid {
+  width: 80px;
+}
+
+.enqueued {
+  width: 120px;
+}
+
+.user {
+  width: 80px;
+}
+
+.signer {
+  width: 80px;
+}
+
+.kind {
+  width: 80px;
+}
+
+.state {
+  width: 80px;
+}
+
+.header {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.details thead {
+  display: block;
+}
+.details tbody {
+  display: block;
+}
+
+.details tbody {
+  height: 260px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.closebutton {
+  top: $small-offset;
+}
+
+.refresh {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
+
+.spacer {
+  height: 100vh;
+}
+
+.spacer-collapsed {
+  min-width: $icon-width + $offset;
+  transition: $transition-fast;
+}
+
+.spacer-expanded {
+  min-width: $sidebar-width;
+}
+
+.importqueuecard {
+  width: 97%;
+  margin-left: $offset;
+  margin-right: $offset;
+  min-height: 20rem;
+}
+
+.card-body {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.searchandfilter {
+  position: relative;
+  margin-bottom: $xx-large-offset;
+}
+
+.filters {
+  position: absolute;
+  right: 0;
+}
+
+.filters button {
+  margin-right: $small-offset;
+}
+
+.table td,
+.table th {
+  border-top: 0 !important;
+  text-align: left;
+  padding: $small-offset !important;
+}
+
+.searchgroup {
+  position: absolute;
+  left: 0;
+  width: 45%;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Importqueuedetail.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,275 @@
+<template>
+  <div class="entry d-flex flex-column py-1 border-bottom w-50">
+    <div class="d-flex flex-row position-relative">
+      <div @click="showDetails(job.id)" class="jobid ml-2 mt-2 mr-2">
+        {{ job.id }}
+      </div>
+      <div @click="showDetails(job.id)" class="enqueued mt-2  mr-2">
+        {{ formatDate(job.enqueued) }}
+      </div>
+      <div @click="showDetails(job.id)" class="kind mt-2 mr-2">
+        {{ job.kind }}
+      </div>
+      <div @click="showDetails(job.id)" class="user mt-2 mr-2">
+        {{ job.user }}
+      </div>
+      <div @click="showDetails(job.id)" class="signer mt-2 mr-2">
+        {{ job.signer }}
+      </div>
+      <div @click="showDetails(job.id)" class="state mt-2 mr-2">
+        {{ job.state }}
+      </div>
+      <div
+        @click="showDetails(job.id)"
+        class="btn btn-sm h-100 rounded-0 btn-info detailsbutton"
+      >
+        <font-awesome-icon
+          v-if="show"
+          icon="angle-up"
+          fixed-width
+        ></font-awesome-icon>
+        <font-awesome-icon
+          v-else
+          icon="angle-down"
+          fixed-width
+        ></font-awesome-icon>
+      </div>
+    </div>
+    <div class="detailstable d-flex flex-row">
+      <div :class="collapse">
+        <table class="table table-responsive">
+          <thead>
+            <tr>
+              <th class="first pb-0">
+                <small class="condensed"><translate>Kind</translate></small>
+              </th>
+              <th class="second  pb-0">
+                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
+                  ><small class="condensed"><translate>Date</translate></small>
+                  <small class="condensed"
+                    ><font-awesome-icon
+                      :icon="sortIcon"
+                      class="ml-1"
+                    ></font-awesome-icon></small
+                ></a>
+              </th>
+              <th class="third pb-0">
+                <small class="condensed"><translate>Message</translate></small>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(entry, index) in sortedEntries"
+              :key="index"
+              class="detailsrow"
+            >
+              <td class="first">
+                <span class="condensed">{{ entry.kind }}</span>
+              </td>
+              <td class="second">
+                <span class="condensed">{{ formatDate(entry.time) }}</span>
+              </td>
+              <td class="third">
+                <span class="condensed">{{ entry.message }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import { HTTP } from "../lib/http.js";
+import { displayError } from "../lib/errors.js";
+import locale2 from "locale2";
+
+export default {
+  name: "importqueuedetail",
+  props: ["job"],
+  data() {
+    return {
+      show: false,
+      entries: [],
+      sortAsc: true
+    };
+  },
+  methods: {
+    formatDate(date) {
+      return date
+        ? new Date(date).toLocaleDateString(locale2, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          })
+        : "";
+    },
+    showDetails(id) {
+      if (this.show) {
+        this.show = false;
+        return;
+      }
+      if (this.entries.length === 0) {
+        HTTP.get("/imports/" + id, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            const { entries } = response.data;
+            this.entries = entries;
+            this.show = true;
+          })
+          .catch(error => {
+            const { status, data } = error.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      } else {
+        this.show = true;
+      }
+    }
+  },
+  computed: {
+    sortedEntries() {
+      let sorted = this.entries.slice();
+      sorted.sort((r1, r2) => {
+        let d1 = new Date(r1.time);
+        let d2 = new Date(r2.time);
+        if (d2 < d1) {
+          return !this.sortAsc ? -1 : 1;
+        }
+        if (d2 > d1) {
+          return !this.sortAsc ? 1 : -1;
+        }
+        return 0;
+      });
+      return sorted;
+    },
+    sortIcon() {
+      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
+    },
+    icon() {
+      return {
+        "angle-up": !this.show,
+        "angle-down": this.show
+      };
+    },
+    collapse() {
+      return {
+        details: true,
+        collapse: true,
+        show: this.show,
+        "w-100": true
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.condensed {
+  font-stretch: condensed;
+}
+
+.entry {
+  background-color: white;
+  cursor: pointer;
+}
+
+.entry:hover {
+  background-color: #f0f0f0;
+  transition: 1s;
+}
+
+.detailstable {
+  margin-left: $offset;
+  margin-right: $large-offset;
+}
+
+.detailsbutton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+.jobid {
+  width: 80px;
+}
+
+.enqueued {
+  width: 120px;
+}
+
+.user {
+  width: 80px;
+}
+
+.signer {
+  width: 80px;
+}
+
+.kind {
+  width: 80px;
+}
+
+.state {
+  width: 80px;
+}
+
+.details {
+  width: 50%;
+}
+
+.detailsrow {
+  line-height: 0.1em;
+}
+
+.first {
+  width: 65px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+
+.second {
+  width: 100px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+
+.third {
+  width: 600px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+
+thead,
+tbody {
+  display: block;
+}
+
+tbody {
+  height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Logs.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,198 @@
+<template>
+  <div class="main d-flex flex-column">
+    <div class="d-flex flex-row">
+      <div :class="spacer"></div>
+      <div class="card logs shadow-xs mt-3 mr-3">
+        <h6
+          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon class="mr-2 fa-fw" icon="book"></font-awesome-icon>
+          <translate class="headline">Logs</translate>
+        </h6>
+        <div class="logoutput text-left bg-white">
+          <pre id="code" v-highlightjs="logs">
+          <code class="bash hljs hljs-string"></code>
+          </pre>
+        </div>
+        <div class="logmenu">
+          <div class="d-flex align-self-center">
+            <ul class="nav nav-pills">
+              <li class="nav-item">
+                <a
+                  :class="accesslogStyle"
+                  @click="fetch('system/log/apache2/access.log', 'accesslog')"
+                  href="#"
+                >
+                  <translate>Accesslog</translate>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  :class="errorlogStyle"
+                  @click="fetch('system/log/apache2/error.log', 'errorlog')"
+                  href="#"
+                >
+                  <translate>Errorlog</translate>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="statuscontainer d-flex flex-row mb-3">
+            <div class="statusline align-self-center">
+              <h3><translate>Last refresh:</translate> {{ refreshed }}</h3>
+            </div>
+            <div class="refresh">
+              <button
+                @click="fetch(currentFile, currentLog)"
+                class="btn btn-dark"
+              >
+                <translate>Refresh</translate>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.statuscontainer {
+  width: 87%;
+  position: relative;
+}
+
+.logmenu {
+  position: relative;
+  margin-left: $offset;
+  margin-top: $offset;
+}
+
+.logs {
+  height: 85vh;
+}
+
+#code {
+  overflow: auto;
+}
+
+.refresh {
+  position: absolute;
+  right: $offset;
+  bottom: 0;
+}
+
+.logoutput {
+  margin-left: $offset;
+  margin-right: $offset;
+  margin-top: $offset;
+  height: 90%;
+  overflow: auto;
+  transition: $transition-fast;
+}
+
+.spacer {
+  height: 90vh;
+}
+
+.spacer-collapsed {
+  min-width: $icon-width + $offset;
+  transition: $transition-fast;
+}
+
+.spacer-expanded {
+  min-width: $sidebar-width + $offset;
+}
+
+.statusline {
+  position: absolute;
+  right: 0;
+  margin-right: 9rem;
+  bottom: -0.5rem;
+}
+
+.statuscontainer {
+  width: 100%;
+}
+</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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { mapState } from "vuex";
+import { HTTP } from "../lib/http.js";
+import "../../node_modules/highlight.js/styles/paraiso-dark.css";
+import Vue from "vue";
+import VueHighlightJS from "vue-highlightjs";
+Vue.use(VueHighlightJS);
+
+const ACCESSLOG = "accesslog";
+const ERRORLOG = "errorlog";
+
+export default {
+  name: "logs",
+  mounted() {
+    this.fetch("system/log/apache2/access.log", ACCESSLOG);
+  },
+  data() {
+    return {
+      logs: null,
+      currentLog: null,
+      currentFile: null,
+      refreshed: null
+    };
+  },
+  methods: {
+    fetch(file, type) {
+      HTTP.get(file, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          this.logs = response.data.content;
+          this.currentLog = type;
+          this.refreshed = new Date().toLocaleString();
+          this.currentFile = file;
+        })
+        .catch();
+    },
+    disallow(e) {
+      e.target.blur();
+    }
+  },
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    accesslogStyle() {
+      return {
+        active: this.currentLog == ACCESSLOG,
+        "nav-link": true
+      };
+    },
+    errorlogStyle() {
+      return {
+        active: this.currentLog == ERRORLOG,
+        "nav-link": true
+      };
+    },
+    spacer() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Main.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,33 @@
+<template>
+  <div class="main d-flex flex-column">
+    <Maplayer></Maplayer>
+    <FairwayProfile></FairwayProfile>
+  </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import Maplayer from "./Maplayer";
+import FairwayProfile from "./fairway/Fairwayprofile";
+
+export default {
+  name: "mainview",
+  components: {
+    Maplayer,
+    FairwayProfile
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Maplayer.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,383 @@
+<template>
+  <div id="map" :class="mapStyle"></div>
+</template>
+
+<style lang="scss" scoped>
+.nocursor {
+  cursor: none;
+}
+
+.mapsplit {
+  height: 50vh;
+}
+
+.mapfull {
+  height: 100vh;
+}
+
+// the following css part is for browser-printing based pdf generation
+@page {
+  size: A4 landscape !important;
+  margin: 4mm !important;
+  // according to https://www.w3.org/TR/css-page-3/#page-size-prop
+  // we shall now have 210 - 2*4 = 202 mm width and 297 - 2*4 = 289 mm height
+}
+
+@media print {
+  .mapfull {
+    width: 2000px;
+    height: 2828px;
+  }
+  .mapsplit {
+    width: 2000px;
+    height: 2828px;
+  }
+}
+</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):
+ * * Thomas Junk <thomas.junk@intevation.de>
+ * * Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ */
+import { HTTP } from "../lib/http";
+import { mapGetters, mapState } from "vuex";
+import "ol/ol.css";
+import { Map, View } from "ol";
+import { WFS, GeoJSON } from "ol/format.js";
+import { Stroke, Style, Fill } from "ol/style.js";
+
+/* for the sake of debugging */
+/* eslint-disable no-console */
+export default {
+  name: "maplayer",
+  data() {
+    return {
+      projection: "EPSG:3857"
+    };
+  },
+  computed: {
+    ...mapGetters("map", ["getLayerByName", "getVSourceByName"]),
+    ...mapState("map", [
+      "extent",
+      "layers",
+      "openLayersMap",
+      "lineTool",
+      "polygonTool",
+      "cutTool"
+    ]),
+    ...mapState("bottlenecks", ["selectedSurvey"]),
+    ...mapState("application", ["showSplitscreen"]),
+    mapStyle() {
+      return {
+        mapfull: !this.showSplitscreen,
+        mapsplit: this.showSplitscreen,
+        nocursor: this.hasActiveInteractions
+      };
+    },
+    hasActiveInteractions() {
+      return (
+        (this.lineTool && this.lineTool.getActive()) ||
+        (this.polygonTool && this.polygonTool.getActive()) ||
+        (this.cutTool && this.cutTool.getActive())
+      );
+    }
+  },
+  methods: {
+    buildVectorLoader(featureRequestOptions, endpoint, vectorSource) {
+      // build a function to be used for VectorSource.setLoader()
+      // make use of WFS().writeGetFeature to build the request
+      // and use our HTTP library to actually do it
+      // NOTE: a) the geometryName has to be given in featureRequestOptions,
+      //          because we want to load depending on the bbox
+      //  b) the VectorSource has to have the option strategy: bbox
+      featureRequestOptions["outputFormat"] = "application/json";
+      var loader = function(extent, resolution, projection) {
+        featureRequestOptions["bbox"] = extent;
+        featureRequestOptions["srsName"] = projection.getCode();
+        var featureRequest = new WFS().writeGetFeature(featureRequestOptions);
+        // DEBUG console.log(featureRequest);
+        HTTP.post(
+          endpoint,
+          new XMLSerializer().serializeToString(featureRequest),
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "text/xml; charset=UTF-8"
+            }
+          }
+        )
+          .then(response => {
+            var features = new GeoJSON().readFeatures(
+              JSON.stringify(response.data)
+            );
+            vectorSource.addFeatures(features);
+            // console.log(
+            //   "loaded",
+            //   features.length,
+            //   featureRequestOptions.featureTypes,
+            //   "features"
+            // );
+            // DEBUG console.log("loaded ", features, "for", vectorSource);
+            // eslint-disable-next-line
+          })
+          .catch(() => {
+            vectorSource.removeLoadedExtent(extent);
+          });
+      };
+      return loader;
+    },
+    updateBottleneckFilter(bottleneck_id, datestr) {
+      console.log("updating filter with", bottleneck_id, datestr);
+      const layer = this.getLayerByName("Bottleneck isolines");
+      const wmsSrc = layer.data.getSource();
+      const exists = bottleneck_id != "does_not_exist";
+
+      if (exists) {
+        wmsSrc.updateParams({
+          cql_filter:
+            "date_info='" +
+            datestr +
+            "' AND bottleneck_id='" +
+            bottleneck_id +
+            "'"
+        });
+      }
+      layer.isVisible = exists;
+      layer.data.setVisible(exists);
+    },
+    onBeforePrint(/* evt */) {
+      // console.log("onBeforePrint(", evt ,")");
+      //
+      // the following code shows how to get the current map canvas
+      // and change it, however this does not work well enough, as
+      // another mechanism seems to update the size again before the rendering
+      // for printing is done:
+      // console.log(this.openLayersMap.getViewport());
+      // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0];
+      // console.log(canvas);
+      // canvas.width=1000;
+      // canvas.height=1414;
+      //
+      // An experiment which also did not work:
+      // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4
+      //
+      // according to documentation
+      // http://openlayers.org/en/latest/apidoc/module-ol_PluggableMap-PluggableMap.html#updateSize
+      // "Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport."
+      // but did not help
+      // this.openLayersMap.updateSize();
+    },
+    onAfterPrint(/* evt */) {
+      // could be used to undo changes that have been done for printing
+      // though https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
+      // reported that this was not feasable (back then).
+      // console.log("onAfterPrint(", evt, ")");
+    }
+  },
+  watch: {
+    showSplitscreen() {
+      const map = this.openLayersMap;
+      this.$nextTick(() => {
+        map && map.updateSize();
+      });
+    },
+    selectedSurvey(newSelectedSurvey) {
+      if (newSelectedSurvey) {
+        this.updateBottleneckFilter(
+          newSelectedSurvey.bottleneck_id,
+          newSelectedSurvey.date_info
+        );
+      } else {
+        this.updateBottleneckFilter("does_not_exist", "1999-10-01");
+      }
+    }
+  },
+  mounted() {
+    let map = new Map({
+      layers: [...this.layers.map(x => x.data)],
+      target: "map",
+      controls: [],
+      view: new View({
+        center: [this.extent.lon, this.extent.lat],
+        zoom: this.extent.zoom,
+        projection: this.projection
+      })
+    });
+    map.on("moveend", event => {
+      const center = event.map.getView().getCenter();
+      this.$store.commit("map/extent", {
+        lat: center[1],
+        lon: center[0],
+        zoom: event.map.getView().getZoom()
+      });
+    });
+    this.$store.dispatch("map/openLayersMap", map);
+
+    // TODO make display of layers more dynamic, e.g. from a list
+
+    // loading the full WFS layer, by not setting the loader function
+    // and without bboxStrategy
+    var featureRequest = new WFS().writeGetFeature({
+      srsName: "EPSG:3857",
+      featureNS: "gemma",
+      featurePrefix: "gemma",
+      featureTypes: ["fairway_dimensions"],
+      outputFormat: "application/json"
+    });
+
+    // NOTE: loading the full fairway_dimensions makes sure
+    //       that all are available for the intersection with the profile
+    HTTP.post(
+      "/internal/wfs",
+      new XMLSerializer().serializeToString(featureRequest),
+      {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      }
+    ).then(response => {
+      this.getVSourceByName("Fairway Dimensions").addFeatures(
+        new GeoJSON().readFeatures(JSON.stringify(response.data))
+      );
+      // would scale to the extend of all resulting features
+      // this.openLayersMap.getView().fit(vectorSrc.getExtent());
+    });
+
+    // load following layers with bboxStrategy (using our request builder)
+    var layer = null;
+
+    layer = this.getLayerByName("Waterway Area");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_wtware"],
+          geometryName: "geom"
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
+
+    layer = this.getLayerByName("Waterway Axis");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_wtwaxs"],
+          geometryName: "geom"
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
+
+    layer = this.getLayerByName("Distance marks");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featurePrefix: "ws-wamos",
+          featureTypes: ["ienc_dismar"],
+          geometryName: "geom" //,
+          /* restrict loading approximately to extend of danube in Austria */
+          // filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326")
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
+    layer.data.setVisible(layer.isVisible);
+
+    layer = this.getLayerByName("Distance marks, Axis");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["distance_marks_geoserver"],
+          geometryName: "geom"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
+
+    layer = this.getLayerByName("Waterway Area, named");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["hydro_seaare"],
+          geometryName: "geom"
+        },
+        "/external/d4d",
+        layer.data.getSource()
+      )
+    );
+    layer.data.setVisible(layer.isVisible);
+
+    layer = this.getLayerByName("Bottlenecks");
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["bottlenecks"],
+          geometryName: "area"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
+    HTTP.get("/system/style/Bottlenecks/stroke", {
+      headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+    })
+      .then(response => {
+        this.btlnStrokeC = response.data.code;
+        HTTP.get("/system/style/Bottlenecks/fill", {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            this.btlnFillC = response.data.code;
+            var newstyle = new Style({
+              stroke: new Stroke({
+                color: this.btlnStrokeC,
+                width: 4
+              }),
+              fill: new Fill({
+                color: this.btlnFillC
+              })
+            });
+            layer.data.setStyle(newstyle);
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+
+    window.addEventListener("beforeprint", this.onBeforePrint);
+    window.addEventListener("afterprint", this.onAfterPrint);
+
+    // so none is shown
+    this.updateBottleneckFilter("does_not_exist", "1999-10-01");
+    this.$store.dispatch("map/enableIdentifyTool");
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Pdftool.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,110 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showPdfTool }
+    ]"
+  >
+    <div style="width: 20rem">
+      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+        <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon
+        ><translate>Generate PDF</translate>
+        <font-awesome-icon
+          icon="times"
+          class="ml-auto text-muted"
+          @click="$store.commit('application/showPdfTool', false)"
+        ></font-awesome-icon>
+      </h6>
+      <div class="p-3">
+        <b><translate>Chose format:</translate></b>
+        <select v-model="form.format" class="form-control d-block w-100">
+          <option><translate>landscape</translate></option>
+          <option><translate>portrait</translate></option>
+        </select>
+        <small class="d-block my-2">
+          <input
+            type="radio"
+            id="pdfexport-downloadtype-download"
+            value="download"
+            v-model="form.downloadType"
+            selected
+          />
+          <label for="pdfexport-downloadtype-download" class="ml-1 mr-2"
+            ><translate>Download</translate></label
+          >
+          <input
+            type="radio"
+            id="pdfexport-downloadtype-open"
+            value="open"
+            v-model="form.downloadType"
+          />
+          <label for="pdfexport-downloadtype-open" class="ml-1"
+            ><translate>Open in new window</translate></label
+          >
+        </small>
+        <button
+          @click="download"
+          type="button"
+          class="btn btn-sm btn-info d-block w-100"
+        >
+          <translate>Generate PDF</translate>
+        </button>
+      </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 { HTTP } from "../application/lib/http";
+
+export default {
+  name: "pdftool",
+  data() {
+    return {
+      form: {
+        format: "landscape",
+        downloadType: "download"
+      }
+    };
+  },
+  computed: {
+    ...mapState("application", ["showPdfTool"]),
+    ...mapState("bottlenecks", ["selectedSurvey"])
+  },
+  methods: {
+    download() {
+      // generate PDF and open it
+      // TODO: replace this src with an API reponse after actually generating PDFs
+      let src =
+        this.form.format === "landscape"
+          ? "/img/PrintTemplate-Var2-Landscape.pdf"
+          : "/img/PrintTemplate-Var2-Portrait.pdf";
+
+      let a = document.createElement("a");
+      a.href = src;
+
+      if (this.form.downloadType === "download")
+        a.download = src.substr(src.lastIndexOf("/") + 1);
+      else a.target = "_blank";
+
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Search.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,292 @@
+<template>
+  <div :class="searchbarContainerStyle">
+    <div class="input-group-prepend m-0 d-print-none">
+      <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
+        <font-awesome-icon icon="search"></font-awesome-icon>
+      </span>
+    </div>
+    <div
+      :class="[
+        'searchgroup',
+        {
+          'searchgroup-collapsed': !showSearchbar,
+          big:
+            showContextBox &&
+            ['bottlenecks', 'staging'].indexOf(contextBoxContent) !== -1
+        }
+      ]"
+    >
+      <input
+        @keyup.enter="takeFirstSearchresult"
+        id="search"
+        v-model="searchQuery"
+        type="text"
+        :class="searchInputStyle"
+      />
+    </div>
+    <div
+      v-if="showSearchbar && searchResults !== null && !showContextBox"
+      class="searchresults border-top ui-element bg-white rounded-bottom d-print-none position-absolute"
+    >
+      <div
+        v-for="entry of searchResults"
+        :key="entry.name"
+        class="border-top text-left"
+      >
+        <a
+          href="#"
+          @click.prevent="moveToSearchResult(entry)"
+          class="p-2 d-block text-nowrap"
+        >
+          <font-awesome-icon
+            icon="ship"
+            v-if="entry.type === 'bottleneck'"
+            class="mr-1"
+            fixed-width
+          />
+          <font-awesome-icon
+            icon="water"
+            v-if="entry.type === 'rhm'"
+            class="mr-1"
+            fixed-width
+          />
+          <font-awesome-icon
+            icon="city"
+            v-if="entry.type === 'city'"
+            class="mr-1"
+            fixed-width
+          />
+          {{ entry.name }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.searchcontainer {
+  opacity: 0.96;
+}
+
+.searchcontainer .searchbar {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.searchgroup {
+  margin-left: -3px;
+  transition: width 0.3s;
+  width: 300px;
+  overflow: hidden;
+}
+
+.searchgroup.big {
+  width: 571px;
+}
+
+.searchgroup-collapsed {
+  width: 0;
+}
+
+.searchbar {
+  height: 2rem !important;
+  box-shadow: none !important;
+}
+
+.searchbar.rounded-top-right {
+  border-radius: 0 !important;
+  border-top-right-radius: 0.25rem !important;
+}
+
+.searchlabel.rounded-top-left {
+  border-radius: 0 !important;
+  border-top-left-radius: 0.25rem !important;
+}
+
+.input-group-text {
+  height: 2rem;
+  width: 2rem;
+}
+
+.input-group-prepend svg path {
+  fill: #666;
+}
+
+.searchresults {
+  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  top: 2rem;
+  left: 0;
+  right: 0;
+  max-height: 24rem;
+  overflow: auto;
+}
+
+.searchresults > div:first-child {
+  border-top: 0 !important;
+}
+
+.searchresults a {
+  text-decoration: none;
+}
+
+.searchresults a:hover {
+  background: #f8f8f8;
+}
+</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 debounce from "lodash.debounce";
+import { mapState } from "vuex";
+
+import { displayError } from "../lib/errors.js";
+import { HTTP } from "../lib/http";
+
+const setFocus = () => document.querySelector("#search").focus();
+
+export default {
+  name: "search",
+  data() {
+    return {
+      searchQueryIsDirty: false,
+      searchResults: null,
+      isSearching: false
+    };
+  },
+  computed: {
+    ...mapState("application", [
+      "showSearchbar",
+      "showContextBox",
+      "contextBoxContent"
+    ]),
+    searchQuery: {
+      get() {
+        return this.$store.state.application.searchQuery;
+      },
+      set(value) {
+        this.$store.commit("application/searchQuery", value);
+      }
+    },
+    searchIndicator: function() {
+      if (this.isSearching) {
+        return "⟳";
+      } else if (this.searchQueryIsDirty) {
+        return "";
+      } else {
+        return "✓";
+      }
+    },
+    searchbarContainerStyle() {
+      return [
+        "input-group searchcontainer shadow-xs",
+        {
+          "d-flex": this.contextBoxContent !== "imports",
+          "d-none": this.contextBoxContent === "imports" && this.showContextBox
+        }
+      ];
+    },
+    searchInputStyle() {
+      return [
+        "form-control ui-element search searchbar d-print-none border-0",
+        { "rounded-top-right": this.showContextBox || this.searchResults }
+      ];
+    },
+    searchButtonStyle() {
+      return [
+        "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none",
+        {
+          rounded: !this.showSearchbar,
+          "rounded-left": this.showSearchbar,
+          "rounded-top-left":
+            this.showSearchbar && (this.showContextBox || this.searchResults)
+        }
+      ];
+    }
+  },
+  watch: {
+    searchQuery: function() {
+      this.searchQueryIsDirty = true;
+      this.triggerSearch();
+    }
+  },
+  methods: {
+    takeFirstSearchresult() {
+      if (!this.searchResults || this.searchResults.length != 1) return;
+      this.moveToSearchResult(this.searchResults[0]);
+    },
+    triggerSearch: debounce(function() {
+      this.doSearch();
+    }, 500),
+    doSearch() {
+      this.isCalculating = true;
+      this.searchResults = null;
+
+      if (this.searchQuery == "") {
+        return;
+      }
+
+      HTTP.post(
+        "/search",
+        { string: this.searchQuery },
+        {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        }
+      )
+        .then(response => {
+          // console.log("got:", response.data);
+          this.searchResults = response.data;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+
+      this.isCalculating = false;
+      this.searchQueryIsDirty = false;
+    },
+    moveToSearchResult(resultEntry) {
+      // DEBUG console.log("Moving to", resultEntry);
+      if (resultEntry.geom.type == "Point") {
+        let zoom = 11;
+        if (resultEntry.type === "bottleneck") zoom = 17;
+        if (resultEntry.type === "rhm") zoom = 15;
+        if (resultEntry.type === "city") zoom = 13;
+
+        this.$store.commit("map/moveMap", {
+          coordinates: resultEntry.geom.coordinates,
+          zoom,
+          preventZoomOut: true
+        });
+      }
+      // this.searchQuery = ""; // clear search query again
+      this.toggleSearchbar();
+    },
+    toggleSearchbar() {
+      if (!this.showContextBox) {
+        if (!this.showSearchbar) {
+          setTimeout(setFocus, 300);
+        }
+        this.$store.commit("application/showSearchbar", !this.showSearchbar);
+      }
+    }
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Staging.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,236 @@
+<template>
+  <div class="w-90 stagingcard">
+    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+      <font-awesome-icon
+        class="mr-2"
+        icon="clipboard-check"
+      ></font-awesome-icon>
+      <translate>Staging Area</translate>
+    </h6>
+    <table class="table">
+      <thead>
+        <tr>
+          <th><translate>Name</translate></th>
+          <th><translate>Type</translate></th>
+          <th><translate>Date</translate></th>
+          <th><translate>Imported</translate></th>
+          <th><translate>Username</translate></th>
+          <th>&nbsp;</th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody v-if="filteredData.length">
+        <tr :key="data.id" v-for="data in filteredData">
+          <td>
+            <a @click="zoomTo(data.id)" href="#">{{
+              data.summary.bottleneck
+            }}</a>
+          </td>
+          <td>{{ data.kind.toUpperCase() }}</td>
+          <td>{{ formatSurveyDate(data.summary.date) }}</td>
+          <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
+          <td>{{ data.user }}</td>
+          <td>
+            <button
+              :class="{
+                btn: true,
+                'btn-sm': true,
+                'btn-outline-success': needsApproval(data) || isRejected(data),
+                'btn-success': isApproved(data)
+              }"
+              @click="toggleApproval(data.id, $options.STATES.APPROVED)"
+            >
+              <font-awesome-icon icon="check"></font-awesome-icon>
+            </button>
+          </td>
+          <td>
+            <button
+              :class="{
+                btn: true,
+                'btn-sm': true,
+                'btn-outline-danger': needsApproval(data) || isApproved(data),
+                'btn-danger': isRejected(data)
+              }"
+              @click="toggleApproval(data.id, $options.STATES.REJECTED)"
+            >
+              <font-awesome-icon icon="times"></font-awesome-icon>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <td class="text-center" colspan="6">
+            <translate>No results.</translate>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="p-3" v-if="filteredData.length">
+      <button @click="confirmReview" class="confirm-button btn btn-info">
+        <translate>Confirm</translate>
+      </button>
+    </div>
+    <div class="p-3">
+      <button @click="loadData" class="refresh btn btn-dark">Refresh</button>
+    </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus@intevation.de>
+ */
+import { mapState } from "vuex";
+import { HTTP } from "../lib/http.js";
+import { STATES } from "../store/imports.js";
+import { displayError, displayInfo } from "../lib/errors.js";
+import { formatSurveyDate } from "../lib/date.js";
+
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.loadData();
+  },
+  computed: {
+    ...mapState("application", ["searchQuery"]),
+    ...mapState("imports", ["staging"]),
+    filteredData() {
+      return this.staging.filter(data => {
+        const result = [data.id + "", data.enqueued, data.kind, data.user].some(
+          x => x.toLowerCase().includes(this.searchQuery.toLowerCase())
+        );
+        return result;
+      });
+    }
+  },
+  STATES: STATES,
+  methods: {
+    formatSurveyDate(date) {
+      return formatSurveyDate(date);
+    },
+    loadData() {
+      this.$store.dispatch("imports/getStaging").catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: "Backend Error",
+          message: `${status}: ${data.message || data}`
+        });
+      });
+    },
+    confirmReview() {
+      const reviewResults = this.staging
+        .filter(x => x.status !== STATES.NEEDSAPPROVAL)
+        .map(r => {
+          return {
+            id: r.id,
+            state: r.status
+          };
+        });
+      if (!reviewResults.length) return;
+      HTTP.patch("/imports", reviewResults, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "application/json"
+        }
+      })
+        .then(response => {
+          const messages = response.data
+            .map(x => {
+              if (x.message) return x.message;
+              if (x.error) return x.error;
+            })
+            .join("\n\n");
+          displayInfo({
+            title: "Staging Area",
+            message: messages,
+            options: {
+              timeout: 0,
+              buttons: [{ text: "Ok", action: null, bold: true }]
+            }
+          });
+          this.loadData();
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    needsApproval(item) {
+      return item.status === STATES.NEEDSAPPROVAL;
+    },
+    isRejected(item) {
+      return item.status === STATES.REJECTED;
+    },
+    isApproved(item) {
+      return item.status === STATES.APPROVED;
+    },
+    zoomTo(id) {
+      if (!id) return;
+      const soundingResult = this.filteredData.filter(x => x.id == id)[0];
+      const { lat, lon, bottleneck, date } = soundingResult.summary;
+      const coordinates = [lat, lon];
+
+      this.$store.commit("map/moveMap", {
+        coordinates: coordinates,
+        zoom: 17,
+        preventZoomOut: true
+      });
+      this.$store
+        .dispatch("bottlenecks/setSelectedBottleneck", bottleneck)
+        .then(() => {
+          this.$store.commit("bottlenecks/setSelectedSurveyByDate", date);
+        });
+    },
+    toggleApproval(id, newStatus) {
+      this.$store.commit("imports/toggleApproval", {
+        id: id,
+        newStatus: newStatus
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.refresh {
+  position: absolute;
+  left: $offset;
+  bottom: $offset;
+}
+.table th,
+td {
+  font-size: 0.9rem;
+  border-top: 0px !important;
+  border-bottom-width: 1px;
+  text-align: left;
+  padding: 0.5rem !important;
+}
+
+.stagingcard {
+  position: relative;
+  min-height: 150px;
+}
+
+.confirm-button {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Systemconfiguration.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,191 @@
+<template>
+  <div class="d-flex flex-row">
+    <div :class="spacerStyle"></div>
+    <div class="card sysconfig mt-3 shadow-xs">
+      <h6
+        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+      >
+        <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon>
+        <translate class="headline">Systemconfiguration</translate>
+      </h6>
+      <div class="card-body config">
+        <section class="configsection">
+          <h4 class="card-title">
+            <translate>Bottleneck Areas stroke-color</translate>
+          </h4>
+          <compact-picker v-model="strokeColor" />
+        </section>
+        <section>
+          <h4 class="card-title">
+            <translate>Bottleneck Areas fill-color</translate>
+          </h4>
+          <chrome-picker v-model="fillColor" />
+        </section>
+        <div class="sendbutton">
+          <a @click.prevent="submit" class="btn btn-info text-white">
+            <translate>Send</translate>
+          </a>
+        </div>
+      </div>
+      <!-- card-body -->
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.config {
+  text-align: left;
+}
+
+.configsection {
+  margin-bottom: $large-offset;
+}
+
+.sendbutton {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
+
+.inputs {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.sysconfig {
+  margin-right: $offset;
+  width: 100%;
+  height: 100%;
+}
+
+.spacer {
+  height: 100vh;
+}
+
+.spacer-collapsed {
+  min-width: $icon-width + $offset;
+  transition: $transition-fast;
+}
+
+.spacer-expanded {
+  min-width: $sidebar-width + $offset;
+}
+</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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Bernhard Reiter <bernhard@intevation.de>
+ */
+import { Chrome } from "vue-color";
+import { Compact } from "vue-color";
+
+import { HTTP } from "../lib/http";
+import { displayError } from "../lib/errors.js";
+import { mapState } from "vuex";
+export default {
+  name: "systemconfiguration",
+  data() {
+    return {
+      sent: false,
+      strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
+      fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
+      currentConfig: null
+    };
+  },
+  components: {
+    "chrome-picker": Chrome,
+    "compact-picker": Compact
+  },
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    spacerStyle() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
+  },
+  methods: {
+    submit() {
+      HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "application/json"
+        }
+      })
+        .then()
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+
+      HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "application/json"
+        }
+      })
+        .then()
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  },
+  mounted() {
+    HTTP.get("/system/style/Bottlenecks/stroke", {
+      headers: {
+        "X-Gemma-Auth": localStorage.getItem("token"),
+        "Content-type": "application/json"
+      }
+    })
+      .then(response => {
+        this.strokeColor = response.data.colour;
+      })
+      .catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
+
+    HTTP.get("/system/style/Bottlenecks/fill", {
+      headers: {
+        "X-Gemma-Auth": localStorage.getItem("token"),
+        "Content-type": "application/json"
+      }
+    })
+      .then(response => {
+        this.fillColor = response.data.colour;
+      })
+      .catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Zoom.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="d-flex buttoncontainer shadow-xs mb-3 position-absolute"
+    :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"
+  >
+    <button
+      class="zoomButton border-0 bg-white rounded-left ui-element"
+      @click="zoomOut"
+    >
+      <font-awesome-icon icon="minus"></font-awesome-icon>
+    </button>
+    <button
+      class="zoomButton border-0 bg-white rounded-right ui-element border-right"
+      @click="zoomIn"
+    >
+      <font-awesome-icon icon="plus"></font-awesome-icon>
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.buttoncontainer {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$icon-width;
+}
+
+.zoomButton {
+  min-height: $icon-width;
+  min-width: $icon-width;
+  z-index: 1;
+  outline: none;
+  color: #666;
+}
+</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@intevation.de>
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  name: "zoom",
+  computed: {
+    ...mapState("map", ["openLayersMap"]),
+    ...mapState("application", ["showSplitscreen"]),
+    zoomLevel: {
+      get() {
+        return this.openLayersMap.getView().getZoom();
+      },
+      set(value) {
+        this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
+      }
+    }
+  },
+  methods: {
+    zoomIn() {
+      this.zoomLevel = this.zoomLevel + 1;
+    },
+    zoomOut() {
+      this.zoomLevel = this.zoomLevel - 1;
+    }
+  }
+};
+</script>

--- a/client/src/components/admin/Importqueue.vue	Tue Dec 11 22:59:10 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,362 +0,0 @@
-<template>
-  <div class="d-flex flex-row">
-    <div :class="spacerStyle"></div>
-    <div class="mt-3 importqueuecard flex-grow-1">
-      <div class="card shadow-xs">
-        <h6
-          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-        >
-          <font-awesome-icon icon="tasks" class="mr-2"></font-awesome-icon>
-          <translate class="headline">Importqueue</translate>
-        </h6>
-        <div class="card-body importcardbody">
-          <div class="card-body importcardbody">
-            <div class="searchandfilter d-flex flex-row">
-              <div class="searchgroup input-group">
-                <div class="input-group-prepend">
-                  <span class="input-group-text" id="search">
-                    <font-awesome-icon icon="search"></font-awesome-icon>
-                  </span>
-                </div>
-                <input
-                  v-model="searchQuery"
-                  type="text"
-                  class="form-control"
-                  placeholder
-                  aria-label="Search"
-                  aria-describedby="search"
-                />
-              </div>
-              <div class="filters">
-                <button
-                  @click="setFilter('successful')"
-                  :class="successfulStyle"
-                >
-                  <translate>Successful</translate>
-                </button>
-                <button @click="setFilter('failed')" :class="failedStyle">
-                  <translate>Failed</translate>
-                </button>
-                <button @click="setFilter('pending')" :class="pendingStyle">
-                  <translate>Pending</translate>
-                </button>
-                <button @click="setFilter('rejected')" :class="rejectedStyle">
-                  <translate>Rejected</translate>
-                </button>
-                <button @click="setFilter('accepted')" :class="acceptedStyle">
-                  <translate>Accepted</translate>
-                </button>
-              </div>
-            </div>
-            <div class="text-left d-flex flex-row w-50 border-bottom">
-              <div class="header py-1 jobid mr-2">
-                <translate>Id</translate>
-              </div>
-              <div class="header py-1 enqueued mr-2">
-                <translate>Enqueued</translate>
-              </div>
-              <div class="header py-1 kind mr-2">
-                <translate>Kind</translate>
-              </div>
-              <div class="header py-1 user mr-2">
-                <translate>User</translate>
-              </div>
-              <div class="header py-1 signer mr-2">
-                <translate>Signer</translate>
-              </div>
-              <div class="header py-1 state mr-2">
-                <translate>State</translate>
-              </div>
-            </div>
-            <div class="text-left" v-for="job in filteredImports" :key="job.id">
-              <Importqueuedetail :job="job"></Importqueuedetail>
-            </div>
-            <div>
-              <button @click="refresh" class="btn btn-info refresh">
-                <translate>Refresh</translate>
-              </button>
-            </div>
-          </div>
-        </div>
-      </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@intevation.de>
- */
-import { displayError } from "../../lib/errors.js";
-import { mapState } from "vuex";
-import { HTTP } from "../../lib/http.js";
-import Importqueuedetail from "./Importqueuedetail";
-
-export default {
-  name: "importqueue",
-  components: {
-    Importqueuedetail
-  },
-  data() {
-    return {
-      searchQuery: "",
-      successful: false,
-      failed: false,
-      pending: false,
-      rejected: false,
-      accepted: false
-    };
-  },
-  mounted() {
-    this.loadQueue();
-  },
-  methods: {
-    setFilter(name) {
-      this[name] = !this[name];
-      const allSet =
-        this.successful &&
-        this.failed &&
-        this.pending &&
-        this.accepted &&
-        this.rejected;
-      if (allSet) {
-        this.successful = false;
-        this.failed = false;
-        this.pending = false;
-        this.accepted = false;
-        this.rejected = false;
-      }
-    },
-    loadQueue() {
-      this.$store.dispatch("imports/getImports").catch(error => {
-        const { status, data } = error.response;
-        displayError({
-          title: this.$gettext("Backend Error"),
-          message: `${status}: ${data.message || data}`
-        });
-      });
-    },
-    refresh() {
-      this.loadQueue();
-    },
-    showDetails(id) {
-      HTTP.get("/imports/" + id, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(response => {
-          const { entries } = response.data;
-          this.entries = entries;
-          this.$modal.show("details");
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
-    close() {
-      this.$modal.hide("details");
-    }
-  },
-  computed: {
-    ...mapState("imports", ["imports"]),
-    ...mapState("application", ["showSidebar"]),
-    sortIcon() {
-      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
-    },
-    filteredImports() {
-      const filtered = this.imports
-        .filter(element => {
-          if (!this.searchQuery) return true;
-          return [(element.kind, element.user, element.enqueued)].some(x => {
-            return x.toLowerCase().includes(this.searchQuery.toLowerCase());
-          });
-        })
-        .filter(y => {
-          if (
-            !this.successful &&
-            !this.failed &&
-            !this.pending &&
-            !this.accepted &&
-            !this.rejected
-          )
-            return true;
-          let filterCriteria = [];
-          if (this.successful) filterCriteria.push("successful");
-          if (this.failed) filterCriteria.push("failed");
-          if (this.pending) filterCriteria.push("pending");
-          if (this.accepted) filterCriteria.push("accepted");
-          if (this.rejected) filterCriteria.push("rejected");
-          const result = filterCriteria.map(selectedState => {
-            return y.state === selectedState;
-          });
-          return result.some(x => x);
-        });
-      return filtered;
-    },
-    spacerStyle() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    },
-    successfulStyle() {
-      return {
-        btn: true,
-        "btn-light": !this.successful,
-        "btn-dark": this.successful
-      };
-    },
-    pendingStyle() {
-      return {
-        btn: true,
-        "btn-light": !this.pending,
-        "btn-dark": this.pending
-      };
-    },
-    failedStyle() {
-      return {
-        btn: true,
-        "btn-light": !this.failed,
-        "btn-dark": this.failed
-      };
-    },
-    rejectedStyle() {
-      return {
-        btn: true,
-        "btn-light": !this.rejected,
-        "btn-dark": this.rejected
-      };
-    },
-    acceptedStyle() {
-      return {
-        btn: true,
-        "btn-light": !this.accepted,
-        "btn-dark": this.accepted
-      };
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.jobid {
-  width: 80px;
-}
-
-.enqueued {
-  width: 120px;
-}
-
-.user {
-  width: 80px;
-}
-
-.signer {
-  width: 80px;
-}
-
-.kind {
-  width: 80px;
-}
-
-.state {
-  width: 80px;
-}
-
-.header {
-  font-weight: bold;
-  font-size: 0.9em;
-}
-
-.details thead {
-  display: block;
-}
-.details tbody {
-  display: block;
-}
-
-.details tbody {
-  height: 260px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.closebutton {
-  top: $small-offset;
-}
-
-.refresh {
-  position: absolute;
-  right: $offset;
-  bottom: $offset;
-}
-
-.spacer {
-  height: 100vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width;
-}
-
-.importqueuecard {
-  width: 97%;
-  margin-left: $offset;
-  margin-right: $offset;
-  min-height: 20rem;
-}
-
-.card-body {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.searchandfilter {
-  position: relative;
-  margin-bottom: $xx-large-offset;
-}
-
-.filters {
-  position: absolute;
-  right: 0;
-}
-
-.filters button {
-  margin-right: $small-offset;
-}
-
-.table td,
-.table th {
-  border-top: 0 !important;
-  text-align: left;
-  padding: $small-offset !important;
-}
-
-.searchgroup {
-  position: absolute;
-  left: 0;
-  width: 45%;
-}
-</style>

--- a/client/src/components/admin/Importqueuedetail.vue	Tue Dec 11 22:59:10 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,275 +0,0 @@
-<template>
-  <div class="entry d-flex flex-column py-1 border-bottom w-50">
-    <div class="d-flex flex-row position-relative">
-      <div @click="showDetails(job.id)" class="jobid ml-2 mt-2 mr-2">
-        {{ job.id }}
-      </div>
-      <div @click="showDetails(job.id)" class="enqueued mt-2  mr-2">
-        {{ formatDate(job.enqueued) }}
-      </div>
-      <div @click="showDetails(job.id)" class="kind mt-2 mr-2">
-        {{ job.kind }}
-      </div>
-      <div @click="showDetails(job.id)" class="user mt-2 mr-2">
-        {{ job.user }}
-      </div>
-      <div @click="showDetails(job.id)" class="signer mt-2 mr-2">
-        {{ job.signer }}
-      </div>
-      <div @click="showDetails(job.id)" class="state mt-2 mr-2">
-        {{ job.state }}
-      </div>
-      <div
-        @click="showDetails(job.id)"
-        class="btn btn-sm h-100 rounded-0 btn-info detailsbutton"
-      >
-        <font-awesome-icon
-          v-if="show"
-          icon="angle-up"
-          fixed-width
-        ></font-awesome-icon>
-        <font-awesome-icon
-          v-else
-          icon="angle-down"
-          fixed-width
-        ></font-awesome-icon>
-      </div>
-    </div>
-    <div class="detailstable d-flex flex-row">
-      <div :class="collapse">
-        <table class="table table-responsive">
-          <thead>
-            <tr>
-              <th class="first pb-0">
-                <small class="condensed"><translate>Kind</translate></small>
-              </th>
-              <th class="second  pb-0">
-                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
-                  ><small class="condensed"><translate>Date</translate></small>
-                  <small class="condensed"
-                    ><font-awesome-icon
-                      :icon="sortIcon"
-                      class="ml-1"
-                    ></font-awesome-icon></small
-                ></a>
-              </th>
-              <th class="third pb-0">
-                <small class="condensed"><translate>Message</translate></small>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(entry, index) in sortedEntries"
-              :key="index"
-              class="detailsrow"
-            >
-              <td class="first">
-                <span class="condensed">{{ entry.kind }}</span>
-              </td>
-              <td class="second">
-                <span class="condensed">{{ formatDate(entry.time) }}</span>
-              </td>
-              <td class="third">
-                <span class="condensed">{{ entry.message }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </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):
- * Thomas Junk <thomas.junk@intevation.de>
- */
-
-import { HTTP } from "../../lib/http.js";
-import { displayError } from "../../lib/errors.js";
-import locale2 from "locale2";
-
-export default {
-  name: "importqueuedetail",
-  props: ["job"],
-  data() {
-    return {
-      show: false,
-      entries: [],
-      sortAsc: true
-    };
-  },
-  methods: {
-    formatDate(date) {
-      return date
-        ? new Date(date).toLocaleDateString(locale2, {
-            day: "2-digit",
-            month: "2-digit",
-            year: "numeric"
-          })
-        : "";
-    },
-    showDetails(id) {
-      if (this.show) {
-        this.show = false;
-        return;
-      }
-      if (this.entries.length === 0) {
-        HTTP.get("/imports/" + id, {
-          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-        })
-          .then(response => {
-            const { entries } = response.data;
-            this.entries = entries;
-            this.show = true;
-          })
-          .catch(error => {
-            const { status, data } = error.response;
-            displayError({
-              title: this.$gettext("Backend Error"),
-              message: `${status}: ${data.message || data}`
-            });
-          });
-      } else {
-        this.show = true;
-      }
-    }
-  },
-  computed: {
-    sortedEntries() {
-      let sorted = this.entries.slice();
-      sorted.sort((r1, r2) => {
-        let d1 = new Date(r1.time);
-        let d2 = new Date(r2.time);
-        if (d2 < d1) {
-          return !this.sortAsc ? -1 : 1;
-        }
-        if (d2 > d1) {
-          return !this.sortAsc ? 1 : -1;
-        }
-        return 0;
-      });
-      return sorted;
-    },
-    sortIcon() {
-      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
-    },
-    icon() {
-      return {
-        "angle-up": !this.show,
-        "angle-down": this.show
-      };
-    },
-    collapse() {
-      return {
-        details: true,
-        collapse: true,
-        show: this.show,
-        "w-100": true
-      };
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.condensed {
-  font-stretch: condensed;
-}
-
-.entry {
-  background-color: white;
-  cursor: pointer;
-}
-
-.entry:hover {
-  background-color: #f0f0f0;
-  transition: 1s;
-}
-
-.detailstable {
-  margin-left: $offset;
-  margin-right: $large-offset;
-}
-
-.detailsbutton {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-}
-.jobid {
-  width: 80px;
-}
-
-.enqueued {
-  width: 120px;
-}
-
-.user {
-  width: 80px;
-}
-
-.signer {
-  width: 80px;
-}
-
-.kind {
-  width: 80px;
-}
-
-.state {
-  width: 80px;
-}
-
-.details {
-  width: 50%;
-}
-
-.detailsrow {
-  line-height: 0.1em;
-}
-
-.first {
-  width: 65px;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
-}
-
-.second {
-  width: 100px;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
-}
-
-.third {
-  width: 600px;
-  padding-left: 0px;
-  border-top: 0px;
-  padding-bottom: $small-offset;
-}
-
-thead,
-tbody {
-  display: block;
-}
-
-tbody {
-  height: 150px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-</style>