--- a/client/src/imports/Imports.vue	Mon Nov 12 15:12:04 2018 +0100
+++ b/client/src/imports/Imports.vue	Mon Nov 12 17:41:41 2018 +0100
@@ -1,45 +1,139 @@
 <template>
     <div>
-        <h1>Import</h1>
-        <div class="d-flex content flex-column">
-            <div class="jobcontainer">
-                <Job v-if="imports.queued" type="Running" :jobs="imports.queued"></Job>
-                <Job v-if="imports.successful" type="Done" :jobs="imports.successful"></Job>
-                <Job v-if="imports.failed" type="Failed" :jobs="imports.failed"></Job>
-                <Job v-if="imports.scheduled" type="Scheduled" :jobs="imports.scheduled"></Job>
+        <div class="imports shadow d-flex content flex-column">
+            <div class="card importcard">
+                <div
+                    class="card-header shadow-sm text-white bg-info mb-3"
+                >Import of sounding results</div>
+                <div class="card-body importcardbody">
+                    <div class="input-group mb-4">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text" id="bottlenecklabel">Bottleneck</span>
+                        </div>
+                        <input
+                            type="text"
+                            class="form-control"
+                            placeholder="Name of Bottleneck"
+                            aria-label="bottleneck"
+                            aria-describedby="bottlenecklabel"
+                            v-model="bottleneck"
+                        >
+                    </div>
+                    <div class="input-group mb-4">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text" id="importdatelabel">Date</span>
+                        </div>
+                        <input
+                            type="text"
+                            class="form-control"
+                            placeholder="Date of import"
+                            aria-label="bottleneck"
+                            aria-describedby="bottlenecklabel"
+                            v-model="importDate"
+                        >
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <label class="input-group-text" for="inputGroupSelect01">Depth reference</label>
+                        </div>
+                        <select v-model="depthReference" class="custom-select" id="depthreference">
+                            <option
+                                v-for="option in this.$options.depthReferenceOptions"
+                                :key="option"
+                            >{{option}}</option>
+                        </select>
+                    </div>
+                    <div class="input-group">
+                        <div class="custom-file">
+                            <input type="file" class="custom-file-input" id="inputGroupFile04">
+                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
+                        </div>
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-info" type="button">Upload!</button>
+                        </div>
+                    </div>
+                    <div class="downloadbtn">
+                        <a
+                            download="meta.json"
+                            :href="dataLink "
+                            class="btn btn-info text-white"
+                        >Generate Meta.json</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { displayError } from "../application/lib/errors.js";
-import { mapState } from "vuex";
-import Job from "./Job";
-
 export default {
   name: "imports",
-  components: {
-    Job
+  data() {
+    return {
+      depthReference: "",
+      bottleneck: "",
+      importDate: ""
+    };
   },
   computed: {
-    ...mapState("imports", ["imports"])
+    dataLink() {
+      return (
+        "data:text/json;charset=utf-8," +
+        encodeURIComponent(
+          JSON.stringify({
+            depthReference: this.depthReference,
+            bottleneck: this.bottleneck,
+            date: this.importDate
+          })
+        )
+      );
+    }
   },
-  mounted() {
-    this.$store.dispatch("imports/getImports").catch(error => {
-      const { status, data } = error.response;
-      displayError({
-        title: "Backend Error",
-        message: `${status}: ${data.message || data}`
-      });
-    });
-  }
+  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>
-.jobcontainer {
+.importcard {
+  height: 100%;
+}
+.importcardbody {
+  position: relative;
+  height: 100%;
+}
+.imports {
+  background-color: white;
+  width: 60rem;
+  height: 40rem;
   margin-left: auto;
   margin-right: auto;
+  margin-top: $offset;
+}
+.downloadbtn {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
 }
 </style>