Mercurial > gemma
changeset 1145:2d34715dd52e
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>