changeset 1607:38f91897ca69

import sounding result in new section
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 17 Dec 2018 16:48:09 +0100
parents a4d8f284db93
children 427f9010b4a9
files client/src/components/Contextbox.vue client/src/components/ImportSoundingresults.vue client/src/components/Sidebar.vue client/src/components/importschedule/Importschedule.vue client/src/router.js
diffstat 5 files changed, 178 insertions(+), 149 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Contextbox.vue	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/components/Contextbox.vue	Mon Dec 17 16:48:09 2018 +0100
@@ -4,7 +4,6 @@
       <font-awesome-icon icon="times"></font-awesome-icon>
     </div>
     <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
-    <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
     <Staging v-if="contextBoxContent === 'staging'"></Staging>
   </div>
 </template>
@@ -29,7 +28,6 @@
   name: "contextbox",
   components: {
     Bottlenecks: () => import("./Bottlenecks"),
-    Importsounding: () => import("./ImportSoundingresults.vue"),
     Staging: () => import("./Staging.vue")
   },
   computed: {
--- a/client/src/components/ImportSoundingresults.vue	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/components/ImportSoundingresults.vue	Mon Dec 17 16:48:09 2018 +0100
@@ -1,135 +1,142 @@
 <template>
-  <div>
-    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
-      <translate>Import Soundingresults</translate>
-    </h6>
-    <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
-      <div class="d-flex flex-column">
-        <div class="d-flex flex-row">
-          <div class="mt-1 text-left w-50 ml-2 mr-4">
-            <small class="text-muted">
-              <translate>Bottleneck</translate>
+  <div class="main d-flex flex-column">
+    <div class="d-flex flex-row">
+      <Spacer></Spacer>
+      <div class="card shadow-xs mt-3 mr-3 w-100 importsoundingresultscard">
+        <h6
+          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
+          <translate class="headline">Import Soundingresults</translate>
+        </h6>
+        <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
+          <div class="d-flex flex-column">
+            <div class="d-flex flex-row">
+              <div class="mt-1 text-left w-50 ml-2 mr-4">
+                <small class="text-muted">
+                  <translate>Bottleneck</translate>
+                </small>
+                <select v-model="bottleneck" class="custom-select">
+                  <option
+                    v-for="bottleneck in availableBottlenecks"
+                    :key="bottleneck"
+                    >{{ bottleneck }}</option
+                  >
+                </select>
+                <span class="text-danger">
+                  <small v-if="!bottleneck">
+                    <translate>Please select a bottleneck</translate>
+                  </small>
+                </span>
+              </div>
+              <div class="d-flex flex-column mt-1 text-left w-50 mr-2">
+                <small class="text-muted">
+                  <translate>Projection</translate>&nbsp;(EPSG)
+                </small>
+                <input
+                  class="form-control"
+                  v-model="projection"
+                  value="4326"
+                  placeholder="e.g. 4326"
+                  type="number"
+                />
+                <span class="text-left text-danger">
+                  <small v-if="!projection">
+                    <translate>Please enter a projection</translate>
+                  </small>
+                </span>
+              </div>
+            </div>
+            <div class="d-flex flex-row">
+              <div class="mt-1 text-left w-50 ml-2 mr-4">
+                <small class="text-muted">
+                  <translate>Depthreference</translate>
+                </small>
+                <select
+                  v-model="depthReference"
+                  class="custom-select"
+                  id="depthreference"
+                >
+                  <option
+                    v-for="option in this.$options.depthReferenceOptions"
+                    :key="option"
+                    >{{ option }}</option
+                  >
+                </select>
+                <span class="text-left text-danger">
+                  <small v-if="!depthReference">
+                    <translate>Please enter a reference</translate>
+                  </small>
+                </span>
+              </div>
+              <div class="mt-1 text-left w-50 mr-2">
+                <small class="text-muted"> <translate>Date</translate> </small>
+                <input
+                  id="importdate"
+                  type="date"
+                  class="form-control"
+                  placeholder="Date of import"
+                  aria-label="bottleneck"
+                  aria-describedby="bottlenecklabel"
+                  v-model="importDate"
+                />
+                <span class="text-left text-danger">
+                  <small v-if="!importDate">
+                    <translate>Please enter a date</translate>
+                  </small>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="ml-2 mt-2 text-left">
+            <small v-for="(message, index) in messages" :key="index">
+              {{ message }}
             </small>
-            <select v-model="bottleneck" class="custom-select">
-              <option
-                v-for="bottleneck in availableBottlenecks"
-                :key="bottleneck"
-                >{{ bottleneck }}</option
-              >
-            </select>
-            <span class="text-danger">
-              <small v-if="!bottleneck">
-                <translate>Please select a bottleneck</translate>
-              </small>
-            </span>
-          </div>
-          <div class="d-flex flex-column mt-1 text-left w-50 mr-2">
-            <small class="text-muted">
-              <translate>Projection</translate>&nbsp;(EPSG)
-            </small>
-            <input
-              class="form-control"
-              v-model="projection"
-              value="4326"
-              placeholder="e.g. 4326"
-              type="number"
-            />
-            <span class="text-left text-danger">
-              <small v-if="!projection">
-                <translate>Please enter a projection</translate>
-              </small>
-            </span>
           </div>
         </div>
-        <div class="d-flex flex-row">
-          <div class="mt-1 text-left w-50 ml-2 mr-4">
-            <small class="text-muted">
-              <translate>Depthreference</translate>
-            </small>
-            <select
-              v-model="depthReference"
-              class="custom-select"
-              id="depthreference"
+        <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+          <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
+            <div class="custom-file">
+              <input
+                accept=".zip"
+                type="file"
+                @change="fileSelected"
+                class="custom-file-input"
+                id="uploadFile"
+              />
+              <label class="custom-file-label" for="uploadFile">
+                {{ uploadLabel }}
+              </label>
+            </div>
+          </div>
+          <div class="buttons text-right">
+            <a
+              v-if="editState"
+              download="meta.json"
+              :href="dataLink"
+              class="btn btn-outline-info pull-left mt-4"
             >
-              <option
-                v-for="option in this.$options.depthReferenceOptions"
-                :key="option"
-                >{{ option }}</option
-              >
-            </select>
-            <span class="text-left text-danger">
-              <small v-if="!depthReference">
-                <translate>Please enter a reference</translate>
-              </small>
-            </span>
-          </div>
-          <div class="mt-1 text-left w-50 mr-2">
-            <small class="text-muted"> <translate>Date</translate> </small>
-            <input
-              id="importdate"
-              type="date"
-              class="form-control"
-              placeholder="Date of import"
-              aria-label="bottleneck"
-              aria-describedby="bottlenecklabel"
-              v-model="importDate"
-            />
-            <span class="text-left text-danger">
-              <small v-if="!importDate">
-                <translate>Please enter a date</translate>
-              </small>
-            </span>
+              <translate>Download Meta.json</translate>
+            </a>
+            <button
+              v-if="editState"
+              @click="deleteTempData"
+              class="btn btn-danger mt-4"
+              type="button"
+            >
+              <translate>Cancel Upload</translate>
+            </button>
+            <button
+              :disabled="disableUploadButton"
+              @click="submit"
+              class="btn btn-info mt-4"
+              type="button"
+            >
+              {{ uploadState ? Upload : Confirm }}
+            </button>
           </div>
         </div>
       </div>
-      <div class="ml-2 mt-2 text-left">
-        <small v-for="(message, index) in messages" :key="index">
-          {{ message }}
-        </small>
-      </div>
-    </div>
-    <div class="w-95 ml-auto mr-auto mt-4 mb-4">
-      <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
-        <div class="custom-file">
-          <input
-            accept=".zip"
-            type="file"
-            @change="fileSelected"
-            class="custom-file-input"
-            id="uploadFile"
-          />
-          <label class="custom-file-label" for="uploadFile">
-            {{ uploadLabel }}
-          </label>
-        </div>
-      </div>
-      <div class="buttons text-right">
-        <a
-          v-if="editState"
-          download="meta.json"
-          :href="dataLink"
-          class="btn btn-outline-info pull-left"
-        >
-          <translate>Download Meta.json</translate>
-        </a>
-        <button
-          v-if="editState"
-          @click="deleteTempData"
-          class="btn btn-danger"
-          type="button"
-        >
-          <translate>Cancel Upload</translate>
-        </button>
-        <button
-          :disabled="disableUploadButton"
-          @click="submit"
-          class="btn btn-info"
-          type="button"
-        >
-          {{ uploadState ? Upload : Confirm }}
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -152,11 +159,15 @@
 import { HTTP } from "../lib/http";
 import { displayError, displayInfo } from "../lib/errors.js";
 import { mapState } from "vuex";
+import Spacer from "./Spacer";
 
 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
 
 export default {
   name: "imports",
+  components: {
+    Spacer
+  },
   data() {
     return {
       importState: IMPORTSTATE.UPLOAD,
@@ -355,6 +366,10 @@
 </script>
 
 <style lang="scss" scoped>
+.importsoundingresultscard {
+  height: 100%;
+}
+
 .projectionLabel {
   margin-left: $small-offset;
 }
--- a/client/src/components/Sidebar.vue	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/components/Sidebar.vue	Mon Dec 17 16:48:09 2018 +0100
@@ -29,20 +29,6 @@
       </a>
       <div v-if="isWaterwayAdmin">
         <a
-          :class="['secondary', { active: isActive('imports') }]"
-          @click="toggleContextBox('imports')"
-          href="#"
-        >
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="upload"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate
-            >Import soundingresults</span
-          >
-        </a>
-        <a
           :class="['secondary', { active: isActive('staging') }]"
           @click="toggleContextBox('staging')"
           href="#"
@@ -54,6 +40,26 @@
           ></font-awesome-icon>
           <span class="fix-trans-space" v-translate>Staging area</span>
         </a>
+        <small class="text-muted pl-3"> <translate>Import</translate> </small>
+        <hr class="m-0" />
+        <router-link to="/importsoundingresults">
+          <font-awesome-icon
+            class="fa-fw mr-2"
+            fixed-width
+            icon="upload"
+          ></font-awesome-icon>
+          <span class="fix-trans-space" v-translate
+            >Import soundingresults</span
+          >
+        </router-link>
+        <router-link to="importschedule" v-if="this.$options.IMPORTSCHEDULE">
+          <font-awesome-icon
+            class="fa-fw mr-2"
+            fixed-width
+            icon="clock"
+          ></font-awesome-icon>
+          <translate class="fix-trans-space">Imports</translate>
+        </router-link>
         <small class="text-muted pl-3">
           <translate>Systemadministration</translate>
         </small>
@@ -92,14 +98,6 @@
           ></font-awesome-icon>
           <span class="fix-trans-space" v-translate>Importqueue</span>
         </router-link>
-        <router-link to="importschedule" v-if="this.$options.IMPORTSCHEDULE">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="clock"
-          ></font-awesome-icon>
-          <translate class="fix-trans-space">Unattended Imports</translate>
-        </router-link>
       </div>
       <hr class="m-0" />
       <a @click="logoff" href="#">
--- a/client/src/components/importschedule/Importschedule.vue	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Mon Dec 17 16:48:09 2018 +0100
@@ -7,7 +7,7 @@
           class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
         >
           <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon>
-          <translate class="headline">Unattended Imports</translate>
+          <translate class="headline">Imports</translate>
         </h6>
         <div class="card-body schedulecardbody">
           <div class="card-body schedulecardbody">
--- a/client/src/router.js	Mon Dec 17 15:54:27 2018 +0100
+++ b/client/src/router.js	Mon Dec 17 16:48:09 2018 +0100
@@ -29,6 +29,8 @@
   import("./components/importschedule/Importschedule.vue");
 const Systemconfiguration = () =>
   import("./components/Systemconfiguration.vue");
+const Importsoundingresults = () =>
+  import("./components/ImportSoundingresults");
 
 Vue.use(Router);
 
@@ -104,6 +106,22 @@
       }
     },
     {
+      path: "/importsoundingresults",
+      name: "importsoundingresults",
+      component: Importsoundingresults,
+      meta: {
+        requiresAuth: true
+      },
+      beforeEnter: (to, from, next) => {
+        const isWaterwayAdmin = store.getters["user/isWaterwayAdmin"];
+        if (!isWaterwayAdmin) {
+          next("/");
+        } else {
+          next();
+        }
+      }
+    },
+    {
       path: "/importschedule",
       name: "importschedule",
       component: Importschedule,