Mercurial > gemma

comparison client/src/components/importconfiguration/types/Soundingresults.vue @ 2978:d6dd158b8071 unified_import

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
unified_import: reorganizing files
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 09 Apr 2019 13:42:44 +0200
parents client/src/components/importconfiguration/ImportSoundingresults.vue@ab26fb7a76f6
children 1b8bb4f89227
comparison
equal deleted inserted replaced
2977:ab26fb7a76f6 2978:d6dd158b8071
1 <template>
2 <div>
3 <div v-if="editState" class="mb-3">
4 <div
5 v-for="(message, index) in messages"
6 :key="index"
7 class="alert alert-warning small rounded-0"
8 >
9 {{ message }}
10 </div>
11 <div class="d-flex flex-row w-100">
12 <div class="w-50 mr-2 text-left">
13 <small class="text-muted">
14 <translate>Bottleneck</translate>
15 </small>
16 <select v-model="bottleneck" class="custom-select">
17 <option
18 v-for="bottleneck in availableBottlenecks"
19 :value="bottleneck"
20 :key="bottleneck.properties.objnam"
21 >
22 {{ bottleneck.properties.objnam }}
23 </option>
24 </select>
25 <span class="text-danger">
26 <small v-if="!bottleneck">
27 <translate>Please select a bottleneck</translate>
28 </small>
29 </span>
30 </div>
31 <div class="w-50 ml-3 text-left">
32 <small class="text-muted">
33 <translate>Projection</translate>&nbsp;(EPSG)
34 </small>
35 <input
36 class="form-control"
37 v-model="projection"
38 value="4326"
39 placeholder="e.g. 4326"
40 type="number"
41 />
42 <span class="text-left text-danger">
43 <small v-if="!projection">
44 <translate>Please enter a projection</translate>
45 </small>
46 </span>
47 </div>
48 </div>
49 <div class="d-flex flex-row w-100 mt-3">
50 <div class="w-50 mr-2 text-left">
51 <small class="text-muted">
52 <translate>Depthreference</translate>
53 </small>
54 <select
55 v-model="depthReference"
56 class="custom-select"
57 id="depthreference"
58 >
59 <option
60 v-for="option in this.depthReferenceOptions"
61 :key="option"
62 >{{ option }}</option
63 >
64 </select>
65 <span class="text-left text-danger">
66 <small v-if="!depthReference">
67 <translate>Please enter a reference</translate>
68 </small>
69 </span>
70 </div>
71 <div class="w-50 ml-3 text-left">
72 <small class="text-muted"> <translate>Date</translate> </small>
73 <input
74 id="importdate"
75 type="date"
76 class="form-control"
77 placeholder="Date of import"
78 aria-label="bottleneck"
79 aria-describedby="bottlenecklabel"
80 v-model="importDate"
81 />
82 <span class="text-left text-danger">
83 <small v-if="!importDate">
84 <translate>Please enter a date</translate>
85 </small>
86 </span>
87 </div>
88 </div>
89 </div>
90 <div class="mt-3">
91 <div v-if="uploadState" class="input-group">
92 <div class="custom-file">
93 <input
94 accept=".zip"
95 type="file"
96 @change="fileSelected"
97 class="custom-file-input"
98 id="uploadFile"
99 />
100 <label class="pointer custom-file-label" for="uploadFile">
101 {{ uploadLabel }}
102 </label>
103 </div>
104 </div>
105 <div class="d-flex justify-content-between mt-3" v-if="editState">
106 <a
107 download="meta.json"
108 :href="dataLink"
109 :class="[
110 'btn btn-outline-info',
111 { disabled: !bottleneck || !importDate || !depthReference }
112 ]"
113 >
114 <translate>Download Meta.json</translate>
115 </a>
116 <span>
117 <button
118 :disabled="disableUploadButton"
119 @click="confirm"
120 class="btn btn-info mr-2"
121 type="button"
122 >
123 <translate>Confirm</translate>
124 </button>
125 <button :key="1" @click="deleteTempData()" class="btn btn-warning">
126 Back
127 </button>
128 </span>
129 </div>
130 <div v-if="uploadState" class="d-flex flex-row-100 mt-3">
131 <button :key="2" @click="back()" class="ml-auto btn btn-warning">
132 Back
133 </button>
134 </div>
135 </div>
136 </div>
137 </template>
138
139 <script>
140 /* This is Free Software under GNU Affero General Public License v >= 3.0
141 * without warranty, see README.md and license for details.
142 *
143 * SPDX-License-Identifier: AGPL-3.0-or-later
144 * License-Filename: LICENSES/AGPL-3.0.txt
145 *
146 * Copyright (C) 2018 by via donau
147 * – Österreichische Wasserstraßen-Gesellschaft mbH
148 * Software engineering by Intevation GmbH
149 *
150 * Author(s):
151 * Thomas Junk <thomas.junk@intevation.de>
152 * Markus Kottländer <markus.kottlaender@intevation.de>
153 */
154 import { HTTP } from "@/lib/http";
155 import { displayError, displayInfo } from "@/lib/errors.js";
156 import { mapState } from "vuex";
157
158 const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" };
159
160 export default {
161 data() {
162 return {
163 importState: IMPORTSTATE.UPLOAD,
164 depthReference: "",
165 bottleneck: "",
166 projection: "",
167 importDate: "",
168 uploadLabel: this.$gettext("choose .zip- file"),
169 uploadFile: null,
170 disableUpload: false,
171 token: null,
172 messages: []
173 };
174 },
175 methods: {
176 back() {
177 this.$store.commit("importschedule/setListMode");
178 },
179 initialState() {
180 this.importState = IMPORTSTATE.UPLOAD;
181 this.depthReference = "";
182 this.bottleneck = null;
183 this.projection = "";
184 this.importDate = "";
185 this.uploadLabel = this.$gettext("choose .zip- file");
186 this.uploadFile = null;
187 this.disableUpload = false;
188 this.token = null;
189 this.messages = [];
190 },
191 fileSelected(e) {
192 const files = e.target.files || e.dataTransfer.files;
193 if (!files) return;
194 this.uploadLabel = files[0].name;
195 this.uploadFile = files[0];
196 this.upload();
197 },
198 deleteTempData() {
199 HTTP.delete("/imports/sr-upload/" + this.token, {
200 headers: {
201 "X-Gemma-Auth": localStorage.getItem("token")
202 }
203 })
204 .then(() => {
205 this.initialState();
206 })
207 .catch(error => {
208 const { status, data } = error.response;
209 displayError({
210 title: this.$gettext("Backend Error"),
211 message: `${status}: ${data.message || data}`
212 });
213 });
214 },
215 upload() {
216 let formData = new FormData();
217 formData.append("soundingresult", this.uploadFile);
218 HTTP.post("/imports/sr-upload", formData, {
219 headers: {
220 "X-Gemma-Auth": localStorage.getItem("token"),
221 "Content-Type": "multipart/form-data"
222 }
223 })
224 .then(response => {
225 if (response.data.meta) {
226 const { bottleneck, date, epsg } = response.data.meta;
227 const depthReference = response.data.meta["depth-reference"];
228 this.bottleneck = this.bottlenecks.find(
229 bn => bn.properties.objnam === bottleneck
230 );
231 this.depthReference = depthReference;
232 this.importDate = new Date(date).toISOString().split("T")[0];
233 this.projection = epsg;
234 }
235 this.importState = IMPORTSTATE.EDIT;
236 this.token = response.data.token;
237 this.messages = response.data.messages;
238 })
239 .catch(error => {
240 const { status, data } = error.response;
241 const messages = data.messages ? data.messages.join(", ") : "";
242 displayError({
243 title: this.$gettext("Backend Error"),
244 message: `${status}: ${messages}`
245 });
246 });
247 },
248 confirm() {
249 let formData = new FormData();
250 formData.append("token", this.token);
251 if (this.bottleneck)
252 formData.append("bottleneck", this.bottleneck.properties.objnam);
253 if (this.importDate)
254 formData.append("date", this.importDate.split("T")[0]);
255 if (this.depthReference)
256 formData.append("depth-reference", this.depthReference);
257 if (this.projection) formData.append("", this.projection);
258
259 HTTP.post("/imports/sr", formData, {
260 headers: {
261 "X-Gemma-Auth": localStorage.getItem("token"),
262 "Content-Type": "multipart/form-data"
263 }
264 })
265 .then(() => {
266 displayInfo({
267 title: this.$gettext("Import"),
268 message:
269 this.$gettext("Starting import for ") +
270 this.bottleneck.properties.objnam
271 });
272 this.initialState();
273 })
274 .catch(error => {
275 const { status, data } = error.response;
276 displayError({
277 title: this.$gettext("Backend Error"),
278 message: `${status}: ${data.message || data}`
279 });
280 });
281 }
282 },
283 mounted() {
284 this.$store.dispatch("bottlenecks/loadBottlenecks");
285 },
286 watch: {
287 showContextBox() {
288 if (!this.showContextBox && this.token) this.deleteTempData();
289 }
290 },
291 computed: {
292 ...mapState("application", ["showContextBox"]),
293 ...mapState("bottlenecks", ["bottlenecks"]),
294 importSoundingresultsLabel() {
295 return this.$gettext("Import Soundingresults");
296 },
297 disableUploadButton() {
298 if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload;
299 if (
300 !this.bottleneck ||
301 !this.importDate ||
302 !this.depthReference ||
303 !this.projection
304 )
305 return true;
306 return this.disableUpload;
307 },
308 availableBottlenecks() {
309 return this.bottlenecks;
310 },
311 editState() {
312 return this.importState === IMPORTSTATE.EDIT;
313 },
314 uploadState() {
315 return this.importState === IMPORTSTATE.UPLOAD;
316 },
317 Upload() {
318 return this.$gettext("Upload");
319 },
320 Confirm() {
321 return this.$gettext("Confirm");
322 },
323 dataLink() {
324 if (this.bottleneck && this.depthReference && this.import) {
325 return (
326 "data:text/json;charset=utf-8," +
327 encodeURIComponent(
328 JSON.stringify({
329 depthReference: this.depthReference,
330 bottleneck: this.bottleneck.properties.objnam,
331 date: this.importDate
332 })
333 )
334 );
335 }
336 },
337 depthReferenceOptions() {
338 if (
339 this.bottleneck &&
340 this.bottleneck.properties.reference_water_levels
341 ) {
342 return Object.keys(
343 JSON.parse(this.bottleneck.properties.reference_water_levels)
344 );
345 }
346 return [];
347 }
348 }
349 };
350 </script>