Mercurial > gemma

comparison client/src/components/map/contextbox/Import_soundingresults.vue @ 1280:f9e4c494e4c5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed imports to import soundingresults
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 22 Nov 2018 10:00:22 +0100
parents client/src/components/map/contextbox/Imports.vue@60e15c2d26a2
children
comparison
equal deleted inserted replaced
1279:60e15c2d26a2 1280:f9e4c494e4c5
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 /* This is Free Software under GNU Affero General Public License v >= 3.0
86 * without warranty, see README.md and license for details.
87 *
88 * SPDX-License-Identifier: AGPL-3.0-or-later
89 * License-Filename: LICENSES/AGPL-3.0.txt
90 *
91 * Copyright (C) 2018 by via donau
92 * – Österreichische Wasserstraßen-Gesellschaft mbH
93 * Software engineering by Intevation GmbH
94 *
95 * Author(s):
96 * Thomas Junk <thomas.junk@intevation.de>
97 * Markus Kottländer <markus.kottlaender@intevation.de>
98 */
99 import { HTTP } from "../../../lib/http";
100 import { displayError, displayInfo } from "../../../lib/errors.js";
101
102 const defaultLabel = "Choose .zip-file";
103 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
104
105 export default {
106 name: "imports",
107 data() {
108 return {
109 importState: IMPORTSTATE.UPLOAD,
110 depthReference: "",
111 bottleneck: "",
112 importDate: "",
113 uploadLabel: defaultLabel,
114 uploadFile: null,
115 disableUpload: false,
116 token: null
117 };
118 },
119 methods: {
120 initialState() {
121 this.importState = IMPORTSTATE.UPLOAD;
122 this.depthReference = "";
123 this.bottleneck = "";
124 this.importDate = "";
125 this.uploadLabel = defaultLabel;
126 this.uploadFile = null;
127 this.disableUpload = false;
128 this.token = null;
129 },
130 fileSelected(e) {
131 const files = e.target.files || e.dataTransfer.files;
132 if (!files) return;
133 this.uploadLabel = files[0].name;
134 this.uploadFile = files[0];
135 },
136 deleteTempData() {
137 HTTP.delete("/imports/soundingresult-upload/" + this.token, {
138 headers: {
139 "X-Gemma-Auth": localStorage.getItem("token")
140 }
141 })
142 .then(() => {
143 this.initialState();
144 })
145 .catch(error => {
146 const { status, data } = error.response;
147 displayError({
148 title: "Backend Error",
149 message: `${status}: ${data.message || data}`
150 });
151 });
152 },
153 submit() {
154 if (!this.uploadFile || this.disableUpload) return;
155 if (this.importState === IMPORTSTATE.UPLOAD) {
156 this.upload();
157 } else {
158 this.confirm();
159 }
160 },
161 upload() {
162 let formData = new FormData();
163 formData.append("soundingresult", this.uploadFile);
164 HTTP.post("/imports/soundingresult-upload", formData, {
165 headers: {
166 "X-Gemma-Auth": localStorage.getItem("token"),
167 "Content-Type": "multipart/form-data"
168 }
169 })
170 .then(response => {
171 const { bottleneck, date } = response.data.meta;
172 const depthReference = response.data.meta["depth-reference"];
173 this.importState = IMPORTSTATE.EDIT;
174 this.bottleneck = bottleneck;
175 this.depthReference = depthReference;
176 this.importDate = new Date(date).toISOString().split("T")[0];
177 this.token = response.data.token;
178 })
179 .catch(error => {
180 const { status, data } = error.response;
181 const messages = data.messages ? data.messages.join(", ") : "";
182 displayError({
183 title: "Backend Error",
184 message: `${status}: ${messages}`
185 });
186 });
187 },
188 confirm() {
189 let formData = new FormData();
190 formData.append("token", this.token);
191 ["bottleneck", "importDate", "depthReference"].forEach(x => {
192 if (this[x]) formData.append(x, this[x]);
193 });
194 HTTP.post("/imports/soundingresult", formData, {
195 headers: {
196 "X-Gemma-Auth": localStorage.getItem("token"),
197 "Content-Type": "multipart/form-data"
198 }
199 })
200 .then(() => {
201 displayInfo({
202 title: "Import",
203 message: "Starting import for " + this.bottleneck
204 });
205 this.initialState();
206 })
207 .catch(error => {
208 const { status, data } = error.response;
209 displayError({
210 title: "Backend Error",
211 message: `${status}: ${data.message || data}`
212 });
213 });
214 }
215 },
216 computed: {
217 editState() {
218 return this.importState === IMPORTSTATE.EDIT;
219 },
220 uploadState() {
221 return this.importState === IMPORTSTATE.UPLOAD;
222 },
223 dataLink() {
224 return (
225 "data:text/json;charset=utf-8," +
226 encodeURIComponent(
227 JSON.stringify({
228 depthReference: this.depthReference,
229 bottleneck: this.bottleneck,
230 date: this.importDate
231 })
232 )
233 );
234 }
235 },
236 depthReferenceOptions: [
237 "",
238 "NAP",
239 "KP",
240 "FZP",
241 "ADR",
242 "TAW",
243 "PUL",
244 "NGM",
245 "ETRS",
246 "POT",
247 "LDC",
248 "HDC",
249 "ZPG",
250 "GLW",
251 "HSW",
252 "LNW",
253 "HNW",
254 "IGN",
255 "WGS",
256 "RN",
257 "HBO"
258 ]
259 };
260 </script>
261
262 <style lang="sass" scoped>
263 .offset-r
264 margin-right: $large-offset
265
266 .buttons button
267 margin-left: $offset !important
268
269 .label-text
270 width: 10rem
271 text-align: left
272 line-height: 2.25rem
273 </style>