Mercurial > gemma

changeset 1145:2d34715dd52e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Import of sounding results First UI concept and download of meta.json
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 12 Nov 2018 17:41:41 +0100
parents 5f98d0c9d738
children c84dbc608b85
files client/public/index.html client/src/App.vue client/src/imports/Importqueue.vue client/src/imports/Imports.vue
diffstat 4 files changed, 193 insertions(+), 52 deletions(-) [+]
line wrap: on
line diff
--- a/client/public/index.html	Mon Nov 12 15:12:04 2018 +0100
+++ b/client/public/index.html	Mon Nov 12 17:41:41 2018 +0100
@@ -1,21 +1,33 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>gemmajs</title>
-</head>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>gemmajs</title>
+    <style>
+      html {
+        height: 100%;
+        width: 100%;
+        margin: 0 auto;
+      }
+      body {
+        height: 100%;
+        width: 100%;
+        background-color: #efefef !important;
+      }
+    </style>
+  </head>
 
-<body>
-  <noscript>
-    <strong>This webapplication needs Javascript enabled to run.
-            Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-  <!-- built files will be auto injected -->
-</body>
-
+  <body>
+    <noscript>
+      <strong
+        >This webapplication needs Javascript enabled to run. Please enable it
+        to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>
--- a/client/src/App.vue	Mon Nov 12 15:12:04 2018 +0100
+++ b/client/src/App.vue	Mon Nov 12 17:41:41 2018 +0100
@@ -27,17 +27,6 @@
 </template>
 
 <style lang="scss" scoped>
-html {
-  height: 100%;
-  width: 100%;
-  margin: 0 auto;
-}
-body {
-  height: 100%;
-  width: 100%;
-  background-color: #efefef !important;
-}
-
 .topcontainer {
   height: 10vh;
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/imports/Importqueue.vue	Mon Nov 12 17:41:41 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: "importqueue",
+  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>
+
--- a/client/src/imports/Imports.vue	Mon Nov 12 15:12:04 2018 +0100
+++ b/client/src/imports/Imports.vue	Mon Nov 12 17:41:41 2018 +0100
@@ -1,45 +1,139 @@
 <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 class="imports shadow d-flex content flex-column">
+            <div class="card importcard">
+                <div
+                    class="card-header shadow-sm text-white bg-info mb-3"
+                >Import of sounding results</div>
+                <div class="card-body importcardbody">
+                    <div class="input-group mb-4">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text" id="bottlenecklabel">Bottleneck</span>
+                        </div>
+                        <input
+                            type="text"
+                            class="form-control"
+                            placeholder="Name of Bottleneck"
+                            aria-label="bottleneck"
+                            aria-describedby="bottlenecklabel"
+                            v-model="bottleneck"
+                        >
+                    </div>
+                    <div class="input-group mb-4">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text" id="importdatelabel">Date</span>
+                        </div>
+                        <input
+                            type="text"
+                            class="form-control"
+                            placeholder="Date of import"
+                            aria-label="bottleneck"
+                            aria-describedby="bottlenecklabel"
+                            v-model="importDate"
+                        >
+                    </div>
+                    <div class="input-group mb-3">
+                        <div class="input-group-prepend">
+                            <label class="input-group-text" for="inputGroupSelect01">Depth reference</label>
+                        </div>
+                        <select v-model="depthReference" class="custom-select" id="depthreference">
+                            <option
+                                v-for="option in this.$options.depthReferenceOptions"
+                                :key="option"
+                            >{{option}}</option>
+                        </select>
+                    </div>
+                    <div class="input-group">
+                        <div class="custom-file">
+                            <input type="file" class="custom-file-input" id="inputGroupFile04">
+                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
+                        </div>
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-info" type="button">Upload!</button>
+                        </div>
+                    </div>
+                    <div class="downloadbtn">
+                        <a
+                            download="meta.json"
+                            :href="dataLink "
+                            class="btn btn-info text-white"
+                        >Generate Meta.json</a>
+                    </div>
+                </div>
             </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
+  data() {
+    return {
+      depthReference: "",
+      bottleneck: "",
+      importDate: ""
+    };
   },
   computed: {
-    ...mapState("imports", ["imports"])
+    dataLink() {
+      return (
+        "data:text/json;charset=utf-8," +
+        encodeURIComponent(
+          JSON.stringify({
+            depthReference: this.depthReference,
+            bottleneck: this.bottleneck,
+            date: this.importDate
+          })
+        )
+      );
+    }
   },
-  mounted() {
-    this.$store.dispatch("imports/getImports").catch(error => {
-      const { status, data } = error.response;
-      displayError({
-        title: "Backend Error",
-        message: `${status}: ${data.message || data}`
-      });
-    });
-  }
+  depthReferenceOptions: [
+    "",
+    "NAP",
+    "KP",
+    "FZP",
+    "ADR",
+    "TAW",
+    "PUL",
+    "NGM",
+    "ETRS",
+    "POT",
+    "LDC",
+    "HDC",
+    "ZPG",
+    "GLW",
+    "HSW",
+    "LNW",
+    "HNW",
+    "IGN",
+    "WGS",
+    "RN",
+    "HBO"
+  ]
 };
 </script>
 
 <style lang="scss" scoped>
-.jobcontainer {
+.importcard {
+  height: 100%;
+}
+.importcardbody {
+  position: relative;
+  height: 100%;
+}
+.imports {
+  background-color: white;
+  width: 60rem;
+  height: 40rem;
   margin-left: auto;
   margin-right: auto;
+  margin-top: $offset;
+}
+.downloadbtn {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
 }
 </style>