--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ImportStretches.vue	Tue Dec 18 09:33:34 2018 +0100
@@ -0,0 +1,86 @@
+<template>
+  <div class="d-flex flex-row">
+    <Spacer></Spacer>
+    <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3">
+      <h6
+        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+      >
+        <font-awesome-icon
+          icon="cloud-upload-alt"
+          class="mr-2"
+        ></font-awesome-icon>
+        <translate class="headline">Import streches</translate>
+      </h6>
+      <div class="card-body stretches-card">
+        <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+          <div class="d-flex flex-row input-group mb-4">
+            <div class="flex-column w-100">
+              <div class="flex-row text-left">
+                <small class="text-muted"> <translate>URL</translate> </small>
+              </div>
+              <div><input class="form-control" type="url" /></div>
+            </div>
+          </div>
+          <div class="buttons text-right">
+            <button
+              :disabled="disableUploadButton"
+              @click="submit"
+              class="btn btn-info mt-4"
+              type="button"
+            >
+              <font-awesome-icon
+                class="fa-fw mr-2"
+                fixed-width
+                icon="play"
+              ></font-awesome-icon>
+              <translate>Trigger import</translate>
+            </button>
+          </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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+
+import Spacer from "./Spacer";
+import { displayInfo } from "../lib/errors.js";
+
+export default {
+  name: "importstretches",
+  data() {
+    return {
+      disableUploadButton: false,
+      uploadLabel: "",
+      uploadFile: null
+    };
+  },
+  methods: {
+    submit() {
+      displayInfo({
+        title: this.$gettext("Import stretches"),
+        message: this.$gettext("under construction")
+      });
+    }
+  },
+  components: {
+    Spacer
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>