Mercurial > gemma

comparison client/src/imports/Imports.vue @ 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 67c45d2d1aad
comparison
equal deleted inserted replaced
1144:5f98d0c9d738 1145:2d34715dd52e
1 <template> 1 <template>
2 <div> 2 <div>
3 <h1>Import</h1> 3 <div class="imports shadow d-flex content flex-column">
4 <div class="d-flex content flex-column"> 4 <div class="card importcard">
5 <div class="jobcontainer"> 5 <div
6 <Job v-if="imports.queued" type="Running" :jobs="imports.queued"></Job> 6 class="card-header shadow-sm text-white bg-info mb-3"
7 <Job v-if="imports.successful" type="Done" :jobs="imports.successful"></Job> 7 >Import of sounding results</div>
8 <Job v-if="imports.failed" type="Failed" :jobs="imports.failed"></Job> 8 <div class="card-body importcardbody">
9 <Job v-if="imports.scheduled" type="Scheduled" :jobs="imports.scheduled"></Job> 9 <div class="input-group mb-4">
10 <div class="input-group-prepend">
11 <span class="input-group-text" id="bottlenecklabel">Bottleneck</span>
12 </div>
13 <input
14 type="text"
15 class="form-control"
16 placeholder="Name of Bottleneck"
17 aria-label="bottleneck"
18 aria-describedby="bottlenecklabel"
19 v-model="bottleneck"
20 >
21 </div>
22 <div class="input-group mb-4">
23 <div class="input-group-prepend">
24 <span class="input-group-text" id="importdatelabel">Date</span>
25 </div>
26 <input
27 type="text"
28 class="form-control"
29 placeholder="Date of import"
30 aria-label="bottleneck"
31 aria-describedby="bottlenecklabel"
32 v-model="importDate"
33 >
34 </div>
35 <div class="input-group mb-3">
36 <div class="input-group-prepend">
37 <label class="input-group-text" for="inputGroupSelect01">Depth reference</label>
38 </div>
39 <select v-model="depthReference" class="custom-select" id="depthreference">
40 <option
41 v-for="option in this.$options.depthReferenceOptions"
42 :key="option"
43 >{{option}}</option>
44 </select>
45 </div>
46 <div class="input-group">
47 <div class="custom-file">
48 <input type="file" class="custom-file-input" id="inputGroupFile04">
49 <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
50 </div>
51 <div class="input-group-append">
52 <button class="btn btn-outline-info" type="button">Upload!</button>
53 </div>
54 </div>
55 <div class="downloadbtn">
56 <a
57 download="meta.json"
58 :href="dataLink "
59 class="btn btn-info text-white"
60 >Generate Meta.json</a>
61 </div>
62 </div>
10 </div> 63 </div>
11 </div> 64 </div>
12 </div> 65 </div>
13 </template> 66 </template>
14 67
15 <script> 68 <script>
16 import { displayError } from "../application/lib/errors.js";
17 import { mapState } from "vuex";
18 import Job from "./Job";
19
20 export default { 69 export default {
21 name: "imports", 70 name: "imports",
22 components: { 71 data() {
23 Job 72 return {
73 depthReference: "",
74 bottleneck: "",
75 importDate: ""
76 };
24 }, 77 },
25 computed: { 78 computed: {
26 ...mapState("imports", ["imports"]) 79 dataLink() {
80 return (
81 "data:text/json;charset=utf-8," +
82 encodeURIComponent(
83 JSON.stringify({
84 depthReference: this.depthReference,
85 bottleneck: this.bottleneck,
86 date: this.importDate
87 })
88 )
89 );
90 }
27 }, 91 },
28 mounted() { 92 depthReferenceOptions: [
29 this.$store.dispatch("imports/getImports").catch(error => { 93 "",
30 const { status, data } = error.response; 94 "NAP",
31 displayError({ 95 "KP",
32 title: "Backend Error", 96 "FZP",
33 message: `${status}: ${data.message || data}` 97 "ADR",
34 }); 98 "TAW",
35 }); 99 "PUL",
36 } 100 "NGM",
101 "ETRS",
102 "POT",
103 "LDC",
104 "HDC",
105 "ZPG",
106 "GLW",
107 "HSW",
108 "LNW",
109 "HNW",
110 "IGN",
111 "WGS",
112 "RN",
113 "HBO"
114 ]
37 }; 115 };
38 </script> 116 </script>
39 117
40 <style lang="scss" scoped> 118 <style lang="scss" scoped>
41 .jobcontainer { 119 .importcard {
120 height: 100%;
121 }
122 .importcardbody {
123 position: relative;
124 height: 100%;
125 }
126 .imports {
127 background-color: white;
128 width: 60rem;
129 height: 40rem;
42 margin-left: auto; 130 margin-left: auto;
43 margin-right: auto; 131 margin-right: auto;
132 margin-top: $offset;
133 }
134 .downloadbtn {
135 position: absolute;
136 right: $offset;
137 bottom: $offset;
44 } 138 }
45 </style> 139 </style>