diff client/src/components/ImportApprovedGaugeMeasurement.vue @ 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
children 724758455a4e
line wrap: on
line diff
--- /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>