# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1542031204 -3600
# Node ID dc3f0277628afbdfef78180ab560cc78cd7db945
# Parent  443fc80a315f476990feda2e428128416710e0f3
feat: Importqueue listing (Proof of concept)

This is only a prototypical overview of importqueue data from backend.
Uses GET to retrieve an overview of imports.
Shows in separate tables. Further concept needs to be developed to progress..

diff -r 443fc80a315f -r dc3f0277628a client/src/application/Sidebar.vue
--- a/client/src/application/Sidebar.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/application/Sidebar.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -3,24 +3,31 @@
         <div :class="menuStyle">
             <div class="menupoints" v-if="this.showSidebar">
                 <router-link to="/" class="text-body d-flex flex-row nav-link">
-                    <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
-                <a v-if="routeName == 'mainview'"
-                   href="#"
-                   class="text-body d-flex flex-row nav-link"
-                   @click="$store.commit('application/showBottlenecks', !showBottlenecks);">
-                    Bottlenecks
-                </a>
+                    <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology
+                </router-link>
+                <a
+                    v-if="routeName == 'mainview'"
+                    href="#"
+                    class="text-body d-flex flex-row nav-link"
+                    @click="$store.commit('application/showBottlenecks', !showBottlenecks);"
+                >Bottlenecks</a>
                 <div v-if="isSysAdmin">
-                    <hr />
+                    <hr>
                     <div class="nav-link d-flex menupadding text-muted">Administration</div>
                     <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
                         <i class="fa fa-address-card-o align-self-center navicon"></i>Users
                     </router-link>
-                    <router-link class="text-body d-flex flex-row nav-link" to="systemconfiguration">
-                        <i class="fa  fa-wrench align-self-center navicon"></i>Systemconfiguration
+                    <router-link class="text-body d-flex flex-row nav-link" to="imports">
+                        <i class="fa fa-exchange align-self-center navicon"></i>Imports
+                    </router-link>
+                    <router-link
+                        class="text-body d-flex flex-row nav-link"
+                        to="systemconfiguration"
+                    >
+                        <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration
                     </router-link>
                     <router-link class="text-body d-flex flex-row nav-link" to="logs">
-                        <i class="fa  fa-book align-self-center navicon"></i>Systeminformation
+                        <i class="fa fa-book align-self-center navicon"></i>Systeminformation
                     </router-link>
                 </div>
             </div>
diff -r 443fc80a315f -r dc3f0277628a client/src/application/Topbar.vue
--- a/client/src/application/Topbar.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/application/Topbar.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -139,7 +139,11 @@
     };
   },
   computed: {
-    ...mapState("application", ["showSidebar", "showSplitscreen", "showSearchbar"]),
+    ...mapState("application", [
+      "showSidebar",
+      "showSplitscreen",
+      "showSearchbar"
+    ]),
     ...mapState("map", ["openLayersMap"]),
     ...mapState("fairwayprofile", ["currentProfile"]),
     searchIndicator: function() {
@@ -216,10 +220,8 @@
         let newZoom = 11;
         if (resultEntry.type === "bottleneck")
           newZoom = Math.max(17, currentZoom);
-        if (resultEntry.type === "rhm")
-          newZoom = Math.max(15, currentZoom);
-        if (resultEntry.type === "city")
-          newZoom = Math.max(13, currentZoom);
+        if (resultEntry.type === "rhm") newZoom = Math.max(15, currentZoom);
+        if (resultEntry.type === "city") newZoom = Math.max(13, currentZoom);
         view.animate(
           {
             zoom: newZoom,
@@ -238,7 +240,7 @@
       if (!this.showSearchbar) {
         setTimeout(setFocus, 300);
       }
-      this.$store.commit("application/showSearchbar", !this.showSearchbar)
+      this.$store.commit("application/showSearchbar", !this.showSearchbar);
     }
   }
 };
diff -r 443fc80a315f -r dc3f0277628a client/src/bottlenecks/Bottlenecks.vue
--- a/client/src/bottlenecks/Bottlenecks.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -152,7 +152,10 @@
         });
     },
     selectSurvey(survey, bottleneck) {
-      this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck.properties.name);
+      this.$store.dispatch(
+        "bottlenecks/setSelectedBottleneck",
+        bottleneck.properties.name
+      );
       this.$store.commit("bottlenecks/setSelectedSurvey", survey);
       this.moveToBottleneck(bottleneck);
     },
@@ -182,7 +185,7 @@
         this.openBottleneck = null;
       } else {
         this.openBottleneck = name;
-        
+
         HTTP.get("/surveys/" + name, {
           headers: {
             "X-Gemma-Auth": localStorage.getItem("token"),
@@ -205,9 +208,7 @@
       return current ? current.substr(0, current.length - 1) : "";
     },
     displayCurrentChainage(from, to) {
-      return (
-        from / 10 + " - " + to / 10
-      );
+      return from / 10 + " - " + to / 10;
     }
   },
   mounted() {
diff -r 443fc80a315f -r dc3f0277628a client/src/fairway/Fairwayprofile.vue
--- a/client/src/fairway/Fairwayprofile.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/fairway/Fairwayprofile.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -121,14 +121,16 @@
       if (
         !this.selectedSurvey ||
         !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info)
-      ) return [];
+      )
+        return [];
       return this.currentProfile[this.selectedSurvey.date_info];
     },
     additionalData() {
       if (
         !this.additionalSurvey ||
         !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info)
-      ) return [];
+      )
+        return [];
       return this.currentProfile[this.additionalSurvey.date_info];
     },
     waterColor() {
diff -r 443fc80a315f -r dc3f0277628a client/src/imports/Imports.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/imports/Imports.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -0,0 +1,46 @@
+<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>
+        </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
+  },
+  computed: {
+    ...mapState("imports", ["imports"])
+  },
+  mounted() {
+    this.$store.dispatch("imports/getImports").catch(error => {
+      const { status, data } = error.response;
+      displayError({
+        title: "Backend Error",
+        message: `${status}: ${data.message || data}`
+      });
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.jobcontainer {
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
+
diff -r 443fc80a315f -r dc3f0277628a client/src/imports/Job.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/imports/Job.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -0,0 +1,36 @@
+<template>
+    <div class="job">
+        <h3 class="header">{{type}}</h3>
+        <table class="table table-responsive">
+            <thead>
+                <tr>
+                    <th>Enqueued</th>
+                    <th>Kind</th>
+                    <th>User</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="job in jobs" :key="job.id">
+                    <td>{{job.enqueued}}</td>
+                    <td>{{job.kind}}</td>
+                    <td>{{job.user}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "job",
+  props: ["type", "jobs"]
+};
+</script>
+
+<style lang="scss" scoped>
+.job {
+  position: relative;
+  text-align: left;
+}
+</style>
+
diff -r 443fc80a315f -r dc3f0277628a client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/map/Maplayer.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -81,7 +81,9 @@
   methods: {
     removeCurrentInteraction() {
       this.$store.commit("map/setCurrentMeasurement", null);
-      this.getLayerByName("Draw Tool").data.getSource().clear();
+      this.getLayerByName("Draw Tool")
+        .data.getSource()
+        .clear();
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
@@ -204,13 +206,16 @@
       var features = this.openLayersMap.getFeaturesAtPixel(pixel);
       if (features) {
         this.$store.commit("map/setIdentifiedFeatures", features);
-        
+
         // get selected bottleneck from identified features
         for (let feature of features) {
           let id = feature.getId();
           // RegExp.prototype.test() works with number, str and undefined
           if (/^bottlenecks\./.test(id)) {
-            this.$store.dispatch("bottlenecks/setSelectedBottleneck", feature.get("objnam"));
+            this.$store.dispatch(
+              "bottlenecks/setSelectedBottleneck",
+              feature.get("objnam")
+            );
           }
         }
       }
diff -r 443fc80a315f -r dc3f0277628a client/src/router.js
--- a/client/src/router.js	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/router.js	Mon Nov 12 15:00:04 2018 +0100
@@ -1,14 +1,14 @@
 /*
  * 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 
+ *
+ * Copyright (C) 2018 by via donau
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
- * 
+ *
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
@@ -25,6 +25,7 @@
 const Main = () => import("./application/Main.vue");
 const Usermanagement = () => import("./usermanagement/Usermanagement.vue");
 const Logs = () => import("./logs/logs.vue");
+const Imports = () => import("./imports/Imports.vue");
 const Systemconfiguration = () =>
   import("./systemconfiguration/systemconfiguration.vue");
 
@@ -86,6 +87,22 @@
       }
     },
     {
+      path: "/imports",
+      name: "imports",
+      component: Imports,
+      meta: {
+        requiresAuth: true
+      },
+      beforeEnter: (to, from, next) => {
+        const isSysadmin = store.getters["user/isSysAdmin"];
+        if (!isSysadmin) {
+          next("/");
+        } else {
+          next();
+        }
+      }
+    },
+    {
       path: "/",
       name: "mainview",
       component: Main,
diff -r 443fc80a315f -r dc3f0277628a client/src/store.js
--- a/client/src/store.js	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/store.js	Mon Nov 12 15:00:04 2018 +0100
@@ -1,14 +1,14 @@
 /*
  * 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 
+ *
+ * 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>
@@ -22,6 +22,7 @@
 import map from "./store/map";
 import fairwayprofile from "./store/fairway";
 import bottlenecks from "./store/bottlenecks";
+import imports from "./store/imports";
 
 Vue.use(Vuex);
 
@@ -29,6 +30,7 @@
   modules: {
     application,
     fairwayprofile,
+    imports,
     bottlenecks,
     map,
     user,
diff -r 443fc80a315f -r dc3f0277628a client/src/store/imports.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/store/imports.js	Mon Nov 12 15:00:04 2018 +0100
@@ -0,0 +1,51 @@
+/*
+ * 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 "../application/lib/http";
+
+const Imports = {
+  namespaced: true,
+  state: {
+    imports: {}
+  },
+  mutations: {
+    setImports: (state, imports) => {
+      const groupedImports = imports.reduce((o, n) => {
+        if (!o[n.state]) o[n.state] = [];
+        o[n.state].push(n);
+        return o;
+      }, {});
+      state.imports = groupedImports;
+    }
+  },
+  actions: {
+    getImports({ commit }) {
+      return new Promise((resolve, reject) => {
+        HTTP.get("/imports", {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            commit("setImports", response.data.imports);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    }
+  }
+};
+
+export default Imports;
diff -r 443fc80a315f -r dc3f0277628a client/src/usermanagement/Usermanagement.vue
--- a/client/src/usermanagement/Usermanagement.vue	Fri Nov 09 10:57:49 2018 +0100
+++ b/client/src/usermanagement/Usermanagement.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -214,7 +214,7 @@
     spacerStyle() {
       return {
         spacer: true,
-        "spacer-expanded": (this.showUsermenu && this.showSidebar),
+        "spacer-expanded": this.showUsermenu && this.showSidebar,
         "spacer-collapsed": !this.showUsermenu && this.showSidebar
       };
     },