Mercurial > gemma

comparison client/src/components/map/contextbox/ImportSoundingresults.vue @ 1405:522488564de0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
import soundingresults: layout adjusted and epsg selection added
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 28 Nov 2018 16:47:36 +0100
parents acb71a982837
children 15c3672e2e86
comparison
equal deleted inserted replaced
1404:d4939311a99a 1405:522488564de0
1 <template> 1 <template>
2 <div> 2 <div>
3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 3 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
4 <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon><translate>Import 4 <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>Import
5 Soundingresults</translate> 5 Soundingresults
6 </h6> 6 </h6>
7 <div v-if="editState" class="ml-auto mr-auto mt-4 w-95"> 7 <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
8 <div class="d-flex flex-row input-group mb-4"> 8 <div class="d-flex flex-column">
9 <div class="offset-r"> 9 <div class="d-flex flex-row">
10 <label for="bottleneck" class="label-text" id="bottlenecklabel"><translate>Bottleneck</translate></label> 10 <div class="mt-1 text-left w-50 ml-2 mr-4">
11 <small class="text-muted">Bottleneck</small>
12 <select v-model="bottleneck" class="custom-select">
13 <option v-for="bottleneck in availableBottlenecks" :key="bottleneck">{{bottleneck}}</option>
14 </select>
15 <span class="text-danger">
16 <small v-if="!bottleneck">Please select a bottleneck</small>
17 </span>
18 </div>
19 <div class="mt-1 text-left w-50 mr-2">
20 <small class="text-muted">Projection</small>
21 <select v-model="projection" class="custom-select" id="depthreference">
22 <option
23 v-for="projection in this.$options.projections"
24 :key="projection"
25 >{{ projection }}</option>
26 </select>
27 <span class="text-left text-danger">
28 <small v-if="!projection">Please enter a projection</small>
29 </span>
30 </div>
11 </div> 31 </div>
12 <div class="d-flex flex-column"> 32 <div class="d-flex flex-row">
13 <select v-model="bottleneck" class="custom-select"> 33 <div class="mt-1 text-left w-50 ml-2 mr-4">
14 <option v-for="bottleneck in availableBottlenecks" :key="bottleneck">{{bottleneck}}</option> 34 <small class="text-muted">Depthreference</small>
15 </select> 35 <select v-model="depthReference" class="custom-select" id="depthreference">
16 <span class="text-left text-danger"> 36 <option
17 <small v-if="!bottleneck"><translate>Please select a bottleneck</translate></small> 37 v-for="option in this.$options.depthReferenceOptions"
18 </span> 38 :key="option"
39 >{{ option }}</option>
40 </select>
41 <span class="text-left text-danger">
42 <small v-if="!depthReference">Please enter a reference</small>
43 </span>
44 </div>
45 <div class="mt-1 text-left w-50 mr-2">
46 <small class="text-muted">Date</small>
47 <input
48 id="importdate"
49 type="date"
50 class="form-control"
51 placeholder="Date of import"
52 aria-label="bottleneck"
53 aria-describedby="bottlenecklabel"
54 v-model="importDate"
55 >
56 <span class="text-left text-danger">
57 <small v-if="!importDate">Please enter a date</small>
58 </span>
59 </div>
19 </div> 60 </div>
20 </div> 61 </div>
21 <div class="d-flex flex-row input-group mb-4"> 62 <div class="ml-2 mt-2 text-left">
22 <div class="offset-r">
23 <label class="label-text" for="importdate" id="importdatelabel"><translate>Date</translate></label>
24 </div>
25 <div class="d-flex flex-column">
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 <span class="text-left text-danger">
36 <small v-if="!importDate"><translate> Please enter a date</translate></small>
37 </span>
38 </div>
39 <div class="offset-r">
40 <label class="label-text w-100 depthreferencelabel" for="depthreference"><translate>Depthreference</translate></label>
41 </div>
42 <div class="d-flex flex-column">
43 <select v-model="depthReference" class="custom-select" id="depthreference">
44 <option v-for="option in this.$options.depthReferenceOptions" :key="option">{{ option }}</option>
45 </select>
46 <span class="text-left text-danger">
47 <small v-if="!depthReference"><translate>Please enter a reference</translate></small>
48 </span>
49 </div>
50 </div>
51 <div class="text-left">
52 <small v-for="(message, index) in messages" :key="index"> 63 <small v-for="(message, index) in messages" :key="index">
53 {{ 64 {{
54 message 65 message
55 }} 66 }}
56 </small> 67 </small>
77 <a 88 <a
78 v-if="editState" 89 v-if="editState"
79 download="meta.json" 90 download="meta.json"
80 :href="dataLink" 91 :href="dataLink"
81 class="btn btn-outline-info pull-left" 92 class="btn btn-outline-info pull-left"
82 ><translate>Download</translate> Meta.json</a> 93 >Download Meta.json</a>
83 <button 94 <button
84 v-if="editState" 95 v-if="editState"
85 @click="deleteTempData" 96 @click="deleteTempData"
86 class="btn btn-danger" 97 class="btn btn-danger"
87 type="button" 98 type="button"
88 ><translate>Cancel Upload</translate></button> 99 >Cancel Upload</button>
89 <button 100 <button
90 :disabled="disableUploadButton" 101 :disabled="disableUploadButton"
91 @click="submit" 102 @click="submit"
92 class="btn btn-info" 103 class="btn btn-info"
93 type="button" 104 type="button"
124 data() { 135 data() {
125 return { 136 return {
126 importState: IMPORTSTATE.UPLOAD, 137 importState: IMPORTSTATE.UPLOAD,
127 depthReference: "", 138 depthReference: "",
128 bottleneck: "", 139 bottleneck: "",
140 projection: "",
129 importDate: "", 141 importDate: "",
130 uploadLabel: defaultLabel, 142 uploadLabel: defaultLabel,
131 uploadFile: null, 143 uploadFile: null,
132 disableUpload: false, 144 disableUpload: false,
133 token: null, 145 token: null,
137 methods: { 149 methods: {
138 initialState() { 150 initialState() {
139 this.importState = IMPORTSTATE.UPLOAD; 151 this.importState = IMPORTSTATE.UPLOAD;
140 this.depthReference = ""; 152 this.depthReference = "";
141 this.bottleneck = ""; 153 this.bottleneck = "";
154 this.projection = "";
142 this.importDate = ""; 155 this.importDate = "";
143 this.uploadLabel = defaultLabel; 156 this.uploadLabel = defaultLabel;
144 this.uploadFile = null; 157 this.uploadFile = null;
145 this.disableUpload = false; 158 this.disableUpload = false;
146 this.token = null; 159 this.token = null;
186 "Content-Type": "multipart/form-data" 199 "Content-Type": "multipart/form-data"
187 } 200 }
188 }) 201 })
189 .then(response => { 202 .then(response => {
190 if (response.data.meta) { 203 if (response.data.meta) {
191 const { bottleneck, date } = response.data.meta; 204 const { bottleneck, date, epsg } = response.data.meta;
192 const depthReference = response.data.meta["depth-reference"]; 205 const depthReference = response.data.meta["depth-reference"];
193 this.bottleneck = bottleneck; 206 this.bottleneck = bottleneck;
194 this.depthReference = depthReference; 207 this.depthReference = depthReference;
195 this.importDate = new Date(date).toISOString().split("T")[0]; 208 this.importDate = new Date(date).toISOString().split("T")[0];
209 this.projection = epsg;
196 } 210 }
197 this.importState = IMPORTSTATE.EDIT; 211 this.importState = IMPORTSTATE.EDIT;
198 this.token = response.data.token; 212 this.token = response.data.token;
199 this.messages = response.data.messages; 213 this.messages = response.data.messages;
200 }) 214 })
213 if (this.bottleneck) formData.append("bottleneck", this.bottleneck); 227 if (this.bottleneck) formData.append("bottleneck", this.bottleneck);
214 if (this.importDate) 228 if (this.importDate)
215 formData.append("date", this.importDate.split("T")[0]); 229 formData.append("date", this.importDate.split("T")[0]);
216 if (this.depthReference) 230 if (this.depthReference)
217 formData.append("depth-reference", this.depthReference); 231 formData.append("depth-reference", this.depthReference);
232 if (this.projection) formData.append("", this.projection);
218 233
219 HTTP.post("/imports/soundingresult", formData, { 234 HTTP.post("/imports/soundingresult", formData, {
220 headers: { 235 headers: {
221 "X-Gemma-Auth": localStorage.getItem("token"), 236 "X-Gemma-Auth": localStorage.getItem("token"),
222 "Content-Type": "multipart/form-data" 237 "Content-Type": "multipart/form-data"
249 computed: { 264 computed: {
250 ...mapState("application", ["showContextBox"]), 265 ...mapState("application", ["showContextBox"]),
251 ...mapState("bottlenecks", ["bottlenecks"]), 266 ...mapState("bottlenecks", ["bottlenecks"]),
252 disableUploadButton() { 267 disableUploadButton() {
253 if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload; 268 if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload;
254 if (!this.bottleneck || !this.importDate || !this.depthReference) 269 if (
270 !this.bottleneck ||
271 !this.importDate ||
272 !this.depthReference ||
273 !this.projection
274 )
255 return true; 275 return true;
256 return this.disableUpload; 276 return this.disableUpload;
257 }, 277 },
258 availableBottlenecks() { 278 availableBottlenecks() {
259 return this.bottlenecks.map(x => x.properties.name); 279 return this.bottlenecks.map(x => x.properties.name);
275 }) 295 })
276 ) 296 )
277 ); 297 );
278 } 298 }
279 }, 299 },
300 projections: ["", "4326"],
280 depthReferenceOptions: [ 301 depthReferenceOptions: [
281 "", 302 "",
282 "NAP", 303 // "NAP",
283 "KP", 304 // "KP",
284 "FZP", 305 // "FZP",
285 "ADR", 306 // "ADR",
286 "TAW", 307 // "TAW",
287 "PUL", 308 // "PUL",
288 "NGM", 309 // "NGM",
289 "ETRS", 310 // "ETRS",
290 "POT", 311 // "POT",
291 "LDC", 312 // "LDC",
292 "HDC", 313 // "HDC",
293 "ZPG", 314 // "ZPG",
294 "GLW", 315 // "GLW",
295 "HSW", 316 // "HSW",
296 "LNW", 317 // "LNW",
297 "HNW", 318 // "HNW",
298 "IGN", 319 // "IGN",
299 "WGS", 320 // "WGS",
300 "RN", 321 "RN" //,
301 "HBO" 322 // "HBO"
302 ] 323 ]
303 }; 324 };
304 </script> 325 </script>
305 326
306 <style lang="sass" scoped> 327 <style lang="sass" scoped>
328 .projectionLabel
329 margin-left: $small-offset
330
307 .depthreferencelabel 331 .depthreferencelabel
308 margin-left: $small-offset 332 margin-left: $small-offset
309 333
310 .offset-r 334 .offset-r
311 margin-right: $small-offset 335 margin-right: $small-offset