--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/admin/importschedule/Importschedule.vue	Thu Nov 29 16:43:02 2018 +0100
@@ -0,0 +1,157 @@
+<template>
+  <div class="d-flex flex-row">
+    <div :class="spacerStyle"></div>
+    <div class="mt-3">
+      <div class="card schedulecard">
+        <div class="card-header shadow-sm text-white bg-info mb-3">
+          <translate>Importschedule</translate>
+        </div>
+        <div class="card-body schedulecardbody">
+          <div class="card-body schedulecardbody">
+            <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>
+            <table v-if="schedules.length" class="table">
+              <thead>
+                <tr>
+                  <th>
+                    <translate>Import</translate>
+                  </th>
+                  <th>
+                    <translate>Type</translate>
+                  </th>
+                  <th>
+                    <translate>Author</translate>
+                  </th>
+                  <th>
+                    <translate>Schedule</translate>
+                  </th>
+                  <th>
+                    <translate>Email</translate>
+                  </th>
+                  <th>&nbsp;</th>
+                  <th>&nbsp;</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(schedule, index) in schedules" :key="index">
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td>
+                    <font-awesome-icon icon="pencil-alt" fixed-width></font-awesome-icon>
+                  </td>
+                  <td>
+                    <font-awesome-icon @click="deleteSchedule" icon="trash" fixed-width></font-awesome-icon>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-else class="mt-4 small text-center py-3">
+              <translate>No schedules</translate>
+            </div>
+            <button @click="newImport" class="btn btn-info position-absolute newbutton">
+              <translate>New Import</translate>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Importscheduledetail></Importscheduledetail>
+  </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 { mapState } from "vuex";
+import Importscheduledetail from "./Importscheduledetail";
+//import { SCHEDULES } from "../../store/imports.js";
+
+export default {
+  name: "importschedule",
+  components: {
+    Importscheduledetail
+  },
+  data() {
+    return {
+      searchQuery: ""
+    };
+  },
+  methods: {
+    newImport() {
+      this.$store.commit("imports/setImportScheduleDetailVisible");
+    },
+    deleteSchedule(index) {
+      this.$store.commit("imports/deleteSchedule", index);
+    }
+  },
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    ...mapState("imports", ["schedules"]),
+    spacerStyle() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.spacer
+  height: 100vh
+
+.spacer-collapsed
+  min-width: $icon-width + $offset
+  transition: $transition-fast
+
+.spacer-expanded
+  min-width: $sidebar-width + $offset
+
+.schedulecard
+  width: 40vw
+  min-height: 20rem
+
+.schedulecard-body
+  width: 100%
+  margin-left: auto
+  margin-right: aut
+
+.newbutton
+  position:absolute
+  bottom: $offset
+  right: $offset
+</style>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/admin/importschedule/Importscheduledetail.vue	Thu Nov 29 16:43:02 2018 +0100
@@ -0,0 +1,35 @@
+<template>
+  <div v-if="importScheduleDetailVisible">
+    <div class="card">
+      <div class="card-header shadow-sm text-white bg-info mb-3">
+        <span @click="closeDetailview" class="pull-right">
+          <font-awesome-icon icon="times"></font-awesome-icon>
+        </span>
+      </div>
+      <div class="card-body">
+        <h1>lalala</h1>
+        <form @submit.prevent="save" class="ml-3"></form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "importscheduledetail",
+  computed: {
+    ...mapState("imports", ["importScheduleDetailVisible"])
+  },
+  methods: {
+    closeDetailview() {
+      this.$store.commit("imports/clearImportScheduleDetail");
+      this.$store.commit("imports/setImportScheduleDetailInvisible");
+    }
+  }
+};
+</script>
+
+<style>
+</style>