--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/map/Staging.vue	Thu Nov 22 07:07:12 2018 +0100
@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+          <i class="fa fa-list-ol mr-2"></i>
+          Staging Area
+        </h6>
+        <table class="table mb-0">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Datatype</th>
+                    <th>Importdate</th>
+                    <th>ImportID</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody v-if="filteredData.length">
+                <tr v-for="data in filteredData" :key="data.id">
+                    <td>
+                        <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a>
+                    </td>
+                    <td>{{ data.type }}</td>
+                    <td>{{ data.date }}</td>
+                    <td>{{ data.importID }}</td>
+                    <td>
+                        <button class="btn btn-outline-info">
+                            <i class="fa fa-thumbs-up"></i>
+                        </button>
+                        &nbsp;
+                        <button class="btn btn-outline-info">
+                            <i class="fa fa-thumbs-down"></i>
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody v-else>
+                <tr>
+                    <td class="text-center" colspan="6">No results.</td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="p-3" v-if="filteredData.length">
+            <button class="btn btn-info">Confirm</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+const demodata = [
+  {
+    id: 1,
+    name: "B1",
+    date: "2018-11-19 10:23",
+    location: [16.5364, 48.1471],
+    status: "Not approved",
+    importID: "123456789",
+    type: "bottleneck"
+  },
+  {
+    id: 2,
+    name: "B2",
+    date: "2018-11-19 10:24",
+    location: [16.5364, 48.1472],
+    status: "Not approved",
+    importID: "123456789",
+    type: "bottleneck"
+  },
+  {
+    id: 3,
+    name: "s1",
+    date: "2018-11-13 10:25",
+    location: [16.5364, 48.1473],
+    status: "Not approved",
+    importID: "987654321",
+    type: "soundingresult"
+  },
+  {
+    id: 4,
+    name: "s2",
+    date: "2018-11-13 10:26",
+    location: [16.5364, 48.1474],
+    status: "Not approved",
+    importID: "987654321",
+    type: "soundingresult"
+  }
+];
+
+export default {
+  computed: {
+    ...mapState("application", ["searchQuery"]),
+    filteredData() {
+      return demodata.filter(data => {
+        const nameFound = data.name
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+        const dateFound = data.date
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+        const locationFound = data.location.find(coord => {
+          return coord
+            .toString()
+            .toLowerCase()
+            .includes(this.searchQuery.toLowerCase());
+        });
+        const statusFound = data.status
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+        const importIDFound = data.importID
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+        const typeFound = data.type
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+
+        return (
+          nameFound ||
+          dateFound ||
+          locationFound ||
+          statusFound ||
+          importIDFound ||
+          typeFound
+        );
+      });
+    }
+  },
+  methods: {
+    zoomTo(coordinates) {
+      this.$store.commit("map/moveMap", {
+        coordinates: coordinates,
+        zoom: 17,
+        preventZoomOut: true
+      });
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.table th,
+td
+  font-size: 0.9rem
+  border-top: 0px !important
+  border-bottom-width: 1px
+  text-align: left
+  padding: 0.5rem !important
+</style>