Mercurial > gemma

comparison client/src/components/map/contextbox/Imports.vue @ 1278:8f4bf8576acd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
removed directory with only one file
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 08:57:38 +0100
parents
children 60e15c2d26a2
comparison
equal deleted inserted replaced
1277:10b01a298745 1278:8f4bf8576acd
1 <template>
2 <div>
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
4 <i class="fa fa-upload mr-2"></i>
5 Import Soundingresults
6 </h6>
7 <div v-if="editState" class="ml-auto mr-auto mt-4 w-90">
8 <div class="d-flex flex-row input-group mb-4">
9 <div class="offset-r">
10 <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label>
11 </div>
12 <input
13 id="bottleneck"
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="d-flex flex-row input-group mb-4">
23 <div class="offset-r">
24 <label class="label-text" for="importdate" id="importdatelabel">Date</label>
25 </div>
26 <input
27 id="importdate"
28 type="date"
29 class="form-control"
30 placeholder="Date of import"
31 aria-label="bottleneck"
32 aria-describedby="bottlenecklabel"
33 v-model="importDate"
34 >
35 </div>
36 <div class="d-flex flex-row input-group mb-4">
37 <div class="offset-r">
38 <label class="label-text" for="depthreference">Depth reference</label>
39 </div>
40 <select v-model="depthReference" class="custom-select" id="depthreference">
41 <option
42 v-for="option in this.$options.depthReferenceOptions"
43 :key="option"
44 >{{option}}</option>
45 </select>
46 </div>
47 </div>
48 <div class="w-90 ml-auto mr-auto mt-4 mb-4">
49 <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
50 <div class="custom-file">
51 <input
52 type="file"
53 @change="fileSelected"
54 class="custom-file-input"
55 id="uploadFile"
56 >
57 <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label>
58 </div>
59 </div>
60 <div class="buttons text-right">
61 <a
62 v-if="editState"
63 download="meta.json"
64 :href="dataLink "
65 class="btn btn-outline-info pull-left"
66 >Download Meta.json</a>
67 <button
68 v-if="editState"
69 @click="deleteTempData"
70 class="btn btn-danger"
71 type="button"
72 >Cancel Upload</button>
73 <button
74 :disabled="disableUpload"
75 @click="submit"
76 class="btn btn-info"
77 type="button"
78 >{{uploadState?"Upload":"Confirm"}}</button>
79 </div>
80 </div>
81 </div>
82 </template>
83
84 <script>
85 import { HTTP } from "../../../lib/http";
86 import { displayError, displayInfo } from "../../../lib/errors.js";
87
88 const defaultLabel = "Choose .zip-file";
89 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
90
91 export default {
92 name: "imports",
93 data() {
94 return {
95 importState: IMPORTSTATE.UPLOAD,
96 depthReference: "",
97 bottleneck: "",
98 importDate: "",
99 uploadLabel: defaultLabel,
100 uploadFile: null,
101 disableUpload: false,
102 token: null
103 };
104 },
105 methods: {
106 initialState() {
107 this.importState = IMPORTSTATE.UPLOAD;
108 this.depthReference = "";
109 this.bottleneck = "";
110 this.importDate = "";
111 this.uploadLabel = defaultLabel;
112 this.uploadFile = null;
113 this.disableUpload = false;
114 this.token = null;
115 },
116 fileSelected(e) {
117 const files = e.target.files || e.dataTransfer.files;
118 if (!files) return;
119 this.uploadLabel = files[0].name;
120 this.uploadFile = files[0];
121 },
122 deleteTempData() {
123 HTTP.delete("/imports/soundingresult-upload/" + this.token, {
124 headers: {
125 "X-Gemma-Auth": localStorage.getItem("token")
126 }
127 })
128 .then(() => {
129 this.initialState();
130 })
131 .catch(error => {
132 const { status, data } = error.response;
133 displayError({
134 title: "Backend Error",
135 message: `${status}: ${data.message || data}`
136 });
137 });
138 },
139 submit() {
140 if (!this.uploadFile || this.disableUpload) return;
141 if (this.importState === IMPORTSTATE.UPLOAD) {
142 this.upload();
143 } else {
144 this.confirm();
145 }
146 },
147 upload() {
148 let formData = new FormData();
149 formData.append("soundingresult", this.uploadFile);
150 HTTP.post("/imports/soundingresult-upload", formData, {
151 headers: {
152 "X-Gemma-Auth": localStorage.getItem("token"),
153 "Content-Type": "multipart/form-data"
154 }
155 })
156 .then(response => {
157 const { bottleneck, date } = response.data.meta;
158 const depthReference = response.data.meta["depth-reference"];
159 this.importState = IMPORTSTATE.EDIT;
160 this.bottleneck = bottleneck;
161 this.depthReference = depthReference;
162 this.importDate = new Date(date).toISOString().split("T")[0];
163 this.token = response.data.token;
164 })
165 .catch(error => {
166 const { status, data } = error.response;
167 const messages = data.messages ? data.messages.join(", ") : "";
168 displayError({
169 title: "Backend Error",
170 message: `${status}: ${messages}`
171 });
172 });
173 },
174 confirm() {
175 let formData = new FormData();
176 formData.append("token", this.token);
177 ["bottleneck", "importDate", "depthReference"].forEach(x => {
178 if (this[x]) formData.append(x, this[x]);
179 });
180 HTTP.post("/imports/soundingresult", formData, {
181 headers: {
182 "X-Gemma-Auth": localStorage.getItem("token"),
183 "Content-Type": "multipart/form-data"
184 }
185 })
186 .then(() => {
187 displayInfo({
188 title: "Import",
189 message: "Starting import for " + this.bottleneck
190 });
191 this.initialState();
192 })
193 .catch(error => {
194 const { status, data } = error.response;
195 displayError({
196 title: "Backend Error",
197 message: `${status}: ${data.message || data}`
198 });
199 });
200 }
201 },
202 computed: {
203 editState() {
204 return this.importState === IMPORTSTATE.EDIT;
205 },
206 uploadState() {
207 return this.importState === IMPORTSTATE.UPLOAD;
208 },
209 dataLink() {
210 return (
211 "data:text/json;charset=utf-8," +
212 encodeURIComponent(
213 JSON.stringify({
214 depthReference: this.depthReference,
215 bottleneck: this.bottleneck,
216 date: this.importDate
217 })
218 )
219 );
220 }
221 },
222 depthReferenceOptions: [
223 "",
224 "NAP",
225 "KP",
226 "FZP",
227 "ADR",
228 "TAW",
229 "PUL",
230 "NGM",
231 "ETRS",
232 "POT",
233 "LDC",
234 "HDC",
235 "ZPG",
236 "GLW",
237 "HSW",
238 "LNW",
239 "HNW",
240 "IGN",
241 "WGS",
242 "RN",
243 "HBO"
244 ]
245 };
246 </script>
247
248 <style lang="sass" scoped>
249 .offset-r
250 margin-right: $large-offset
251
252 .buttons button
253 margin-left: $offset !important
254
255 .label-text
256 width: 10rem
257 text-align: left
258 line-height: 2.25rem
259 </style>