changeset 1753:68bd990dd8e5

feat: added import dialogs for approved gauge meas. and waterway profiles
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 10 Jan 2019 15:55:08 +0100
parents 64fec6db7efc
children 807569b08513
files client/src/assets/application.scss client/src/components/ImportApprovedGaugeMeasurement.vue client/src/components/ImportWaterwayProfiles.vue client/src/components/Sidebar.vue client/src/router.js
diffstat 5 files changed, 251 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Thu Jan 10 15:19:45 2019 +0100
+++ b/client/src/assets/application.scss	Thu Jan 10 15:55:08 2019 +0100
@@ -19,7 +19,7 @@
 $icon-width: 2rem;
 $large-offset: 2rem;
 $offset: 1rem;
-$sidebar-width: 20rem;
+$sidebar-width: 21rem;
 $slight-transparent: 0.96;
 $small-offset: 0.5rem;
 $smaller: 0.9rem;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ImportApprovedGaugeMeasurement.vue	Thu Jan 10 15:55:08 2019 +0100
@@ -0,0 +1,99 @@
+<template>
+  <div class="d-flex flex-row">
+    <Spacer></Spacer>
+    <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3">
+      <h6
+        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+      >
+        <font-awesome-icon
+          icon="cloud-upload-alt"
+          class="mr-2"
+        ></font-awesome-icon>
+        <translate class="headline">Import approved gaugemeasurements</translate>
+      </h6>
+      <div class="card-body stretches-card">
+        <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+          <div class="d-flex flex-row input-group mb-4">
+            <div class="flex-column w-100">
+              <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>
+          <div class="buttons text-right">
+            <button
+              :disabled="disableUploadButton"
+              @click="submit"
+              class="btn btn-info mt-4"
+              type="button"
+            >
+              <font-awesome-icon
+                class="fa-fw mr-2"
+                fixed-width
+                icon="play"
+              ></font-awesome-icon>
+              <translate>Trigger import</translate>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </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 { displayInfo } from "@/lib/errors.js";
+
+export default {
+  name: "importapprovedgaugemeasurements",
+  data() {
+    return {
+      disableUploadButton: false,
+      uploadLabel: this.$gettext("choose file to upload"),
+      uploadFile: null
+    };
+  },
+  methods: {
+    fileSelected(e) {
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files) return;
+      this.uploadLabel = files[0].name;
+      this.uploadFile = files[0];
+    },
+    submit() {
+      displayInfo({
+        title: this.$gettext("Import"),
+        message: this.$gettext("under construction")
+      });
+    }
+  },
+  components: {
+    Spacer: () => import("./Spacer")
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ImportWaterwayProfiles.vue	Thu Jan 10 15:55:08 2019 +0100
@@ -0,0 +1,99 @@
+<template>
+  <div class="d-flex flex-row">
+    <Spacer></Spacer>
+    <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3">
+      <h6
+        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+      >
+        <font-awesome-icon
+          icon="cloud-upload-alt"
+          class="mr-2"
+        ></font-awesome-icon>
+        <translate class="headline">Import Waterwayprofiles</translate>
+      </h6>
+      <div class="card-body stretches-card">
+        <div class="w-95 ml-auto mr-auto mt-4 mb-4">
+          <div class="d-flex flex-row input-group mb-4">
+            <div class="flex-column w-100">
+              <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>
+          <div class="buttons text-right">
+            <button
+              :disabled="disableUploadButton"
+              @click="submit"
+              class="btn btn-info mt-4"
+              type="button"
+            >
+              <font-awesome-icon
+                class="fa-fw mr-2"
+                fixed-width
+                icon="play"
+              ></font-awesome-icon>
+              <translate>Trigger import</translate>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </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 { displayInfo } from "@/lib/errors.js";
+
+export default {
+  name: "importwaterwayprofiles",
+  data() {
+    return {
+      disableUploadButton: false,
+      uploadLabel: this.$gettext("choose file to upload"),
+      uploadFile: null
+    };
+  },
+  methods: {
+    fileSelected(e) {
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files) return;
+      this.uploadLabel = files[0].name;
+      this.uploadFile = files[0];
+    },
+    submit() {
+      displayInfo({
+        title: this.$gettext("Import"),
+        message: this.$gettext("under construction")
+      });
+    }
+  },
+  components: {
+    Spacer: () => import("./Spacer")
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
--- a/client/src/components/Sidebar.vue	Thu Jan 10 15:19:45 2019 +0100
+++ b/client/src/components/Sidebar.vue	Thu Jan 10 15:55:08 2019 +0100
@@ -52,6 +52,26 @@
             >Import soundingresults</span
           >
         </router-link>
+        <router-link to="/importapprovedgaugemeasurement">
+          <font-awesome-icon
+            class="fa-fw mr-2"
+            fixed-width
+            icon="upload"
+          ></font-awesome-icon>
+          <span class="fix-trans-space" v-translate
+            >Import approved gaugemeasurements</span
+          >
+        </router-link>
+        <router-link to="/importwaterwayprofiles">
+          <font-awesome-icon
+            class="fa-fw mr-2"
+            fixed-width
+            icon="upload"
+          ></font-awesome-icon>
+          <span class="fix-trans-space" v-translate
+            >Import waterway profiles</span
+          >
+        </router-link>
         <router-link to="/importstretches" v-if="this.$options.IMPORTSTRETCHES">
           <font-awesome-icon
             class="fa-fw mr-2"
--- a/client/src/router.js	Thu Jan 10 15:19:45 2019 +0100
+++ b/client/src/router.js	Thu Jan 10 15:55:08 2019 +0100
@@ -127,6 +127,38 @@
       }
     },
     {
+      path: "/importwaterwayprofiles",
+      name: "waterwayprofiles",
+      component: () => import("./components/ImportWaterwayProfiles"),
+      meta: {
+        requiresAuth: true
+      },
+      beforeEnter: (to, from, next) => {
+        const isWaterwayAdmin = store.getters["user/isWaterwayAdmin"];
+        if (!isWaterwayAdmin) {
+          next("/");
+        } else {
+          next();
+        }
+      }
+    },
+    {
+      path: "/importapprovedgaugemeasurement",
+      name: "approvedgaugemeasurement",
+      component: () => import("./components/ImportApprovedGaugeMeasurement"),
+      meta: {
+        requiresAuth: true
+      },
+      beforeEnter: (to, from, next) => {
+        const isWaterwayAdmin = store.getters["user/isWaterwayAdmin"];
+        if (!isWaterwayAdmin) {
+          next("/");
+        } else {
+          next();
+        }
+      }
+    },
+    {
       path: "/importschedule",
       name: "importschedule",
       component: () => import("./components/importschedule/Importschedule.vue"),