Mercurial > gemma

comparison client/src/imports/Imports.vue @ 1240:9b0a7b3ea297

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
inport sounding results
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 20 Nov 2018 17:37:30 +0100
parents ec4b06d3a3a8
children da99d4560fd4
comparison
equal deleted inserted replaced
1239:d842d9d10872 1240:9b0a7b3ea297
1 <template> 1 <template>
2 <div> 2 <div>
3 <h4>Import soundingresults</h4> 3 <h4>Import soundingresults</h4>
4 <hr class="mr-auto ml-auto mb-0 w-90"> 4 <hr class="mr-auto ml-auto mb-0 w-90">
5 <div v-if="editState" class="p-3"> 5 <div v-if="editState" class="ml-auto mr-auto mt-4 w-90">
6 <div class="d-flex flex-row input-group mb-4"> 6 <div class="d-flex flex-row input-group mb-4">
7 <div class=""> 7 <div class="offset-r">
8 <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> 8 <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label>
9 </div> 9 </div>
10 <input 10 <input
11 id="bottleneck" 11 id="bottleneck"
12 type="text" 12 type="text"
16 aria-describedby="bottlenecklabel" 16 aria-describedby="bottlenecklabel"
17 v-model="bottleneck" 17 v-model="bottleneck"
18 > 18 >
19 </div> 19 </div>
20 <div class="d-flex flex-row input-group mb-4"> 20 <div class="d-flex flex-row input-group mb-4">
21 <div class=""> 21 <div class="offset-r">
22 <label class="label-text" for="importdate" id="importdatelabel">Date</label> 22 <label class="label-text" for="importdate" id="importdatelabel">Date</label>
23 </div> 23 </div>
24 <input 24 <input
25 id="importdate" 25 id="importdate"
26 type="date" 26 type="text"
27 class="form-control" 27 class="form-control"
28 placeholder="Date of import" 28 placeholder="Date of import"
29 aria-label="bottleneck" 29 aria-label="bottleneck"
30 aria-describedby="bottlenecklabel" 30 aria-describedby="bottlenecklabel"
31 v-model="importDate" 31 v-model="importDate"
32 > 32 >
33 </div> 33 </div>
34 <div class="d-flex flex-row input-group mb-4"> 34 <div class="d-flex flex-row input-group mb-4">
35 <div class=""> 35 <div class="offset-r">
36 <label class="label-text" for="depthreference">Depth reference</label> 36 <label class="label-text" for="depthreference">Depth reference</label>
37 </div> 37 </div>
38 <select v-model="depthReference" class="custom-select" id="depthreference"> 38 <select v-model="depthReference" class="custom-select" id="depthreference">
39 <option 39 <option
40 v-for="option in this.$options.depthReferenceOptions" 40 v-for="option in this.$options.depthReferenceOptions"
41 :key="option" 41 :key="option"
42 >{{option}}</option> 42 >{{option}}</option>
43 </select> 43 </select>
44 </div> 44 </div>
45 </div> 45 </div>
46 <div class="uploadsection mr-auto ml-auto mt-4 mb-4"> 46 <div class="w-90 ml-auto mr-auto mt-4 mb-4">
47 <div v-if="uploadState" class="d-flex flex-row input-group mb-4"> 47 <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
48 <div class="custom-file"> 48 <div class="custom-file">
49 <input 49 <input
50 type="file" 50 type="file"
51 @change="fileSelected" 51 @change="fileSelected"
53 id="uploadFile" 53 id="uploadFile"
54 > 54 >
55 <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label> 55 <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label>
56 </div> 56 </div>
57 </div> 57 </div>
58 <div class="downloadbtn text-right"> 58 <div class="buttons text-right">
59 <a 59 <a
60 v-if="editState" 60 v-if="editState"
61 download="meta.json" 61 download="meta.json"
62 :href="dataLink " 62 :href="dataLink "
63 class="btn btn-outline-info mr-2" 63 class="btn btn-outline-info pull-left"
64 >Generate Meta.json</a> 64 >Download Meta.json</a>
65 <button
66 v-if="editState"
67 @click="deleteTempData"
68 class="btn btn-danger"
69 type="button"
70 >Cancel Upload</button>
65 <button 71 <button
66 :disabled="disableUpload" 72 :disabled="disableUpload"
67 @click="submitUpload" 73 @click="submit"
68 class="btn btn-info" 74 class="btn btn-info"
69 type="button" 75 type="button"
70 >Upload!</button> 76 >{{uploadState?"Upload":"Confirm"}}</button>
71 </div> 77 </div>
72 </div> 78 </div>
73 </div> 79 </div>
74 </template> 80 </template>
75 81
88 depthReference: "", 94 depthReference: "",
89 bottleneck: "", 95 bottleneck: "",
90 importDate: "", 96 importDate: "",
91 uploadLabel: defaultLabel, 97 uploadLabel: defaultLabel,
92 uploadFile: null, 98 uploadFile: null,
93 disableUpload: false 99 disableUpload: false,
100 token: null
94 }; 101 };
95 }, 102 },
96 methods: { 103 methods: {
104 initialState() {
105 this.importState = IMPORTSTATE.UPLOAD;
106 this.depthReference = "";
107 this.bottleneck = "";
108 this.importDate = "";
109 this.uploadLabel = defaultLabel;
110 this.uploadFile = null;
111 this.disableUpload = false;
112 this.token = null;
113 },
97 fileSelected(e) { 114 fileSelected(e) {
98 const files = e.target.files || e.dataTransfer.files; 115 const files = e.target.files || e.dataTransfer.files;
99 if (!files) return; 116 if (!files) return;
100 this.uploadLabel = files[0].name; 117 this.uploadLabel = files[0].name;
101 this.uploadFile = files[0]; 118 this.uploadFile = files[0];
102 }, 119 },
103 submitUpload() { 120 deleteTempData() {
121 HTTP.delete("/imports/soundingresult-upload/" + this.token, {
122 headers: {
123 "X-Gemma-Auth": localStorage.getItem("token")
124 }
125 })
126 .then(() => {
127 this.initialState();
128 })
129 .catch(error => {
130 const { status, data } = error.response;
131 displayError({
132 title: "Backend Error",
133 message: `${status}: ${data.message || data}`
134 });
135 });
136 },
137 submit() {
104 if (!this.uploadFile || this.disableUpload) return; 138 if (!this.uploadFile || this.disableUpload) return;
139 if (this.importState === IMPORTSTATE.UPLOAD) {
140 this.upload();
141 } else {
142 this.confirm();
143 }
144 },
145 upload() {
105 let formData = new FormData(); 146 let formData = new FormData();
106 formData.append("soundingresult", this.uploadFile); 147 formData.append("soundingresult", this.uploadFile);
148 HTTP.post("/imports/soundingresult-upload", formData, {
149 headers: {
150 "X-Gemma-Auth": localStorage.getItem("token"),
151 "Content-Type": "multipart/form-data"
152 }
153 })
154 .then(response => {
155 const { bottleneck, date } = response.data.meta;
156 const depthReference = response.data.meta["depth-reference"];
157 this.importState = IMPORTSTATE.EDIT;
158 this.bottleneck = bottleneck;
159 this.depthReference = depthReference;
160 this.importDate = date;
161 this.token = response.data.token;
162 })
163 .catch(error => {
164 const { status, data } = error.response;
165 displayError({
166 title: "Backend Error",
167 message: `${status}: ${data.message || data}`
168 });
169 });
170 },
171 confirm() {
172 let formData = new FormData();
173 formData.append("token", this.token);
107 HTTP.post("/imports/soundingresult", formData, { 174 HTTP.post("/imports/soundingresult", formData, {
108 headers: { 175 headers: {
109 "X-Gemma-Auth": localStorage.getItem("token"), 176 "X-Gemma-Auth": localStorage.getItem("token"),
110 "Content-Type": "multipart/form-data" 177 "Content-Type": "multipart/form-data"
111 } 178 }
112 }) 179 })
113 .then(() => { 180 .then(() => {
114 displayInfo({ 181 displayInfo({
115 title: "Import success" 182 title: "Import",
116 }); 183 message: "Successfully imported " + this.bottleneck
184 });
185 this.initialState();
117 }) 186 })
118 .catch(error => { 187 .catch(error => {
119 const { status, data } = error.response; 188 const { status, data } = error.response;
120 displayError({ 189 displayError({
121 title: "Backend Error", 190 title: "Backend Error",
169 ] 238 ]
170 }; 239 };
171 </script> 240 </script>
172 241
173 <style lang="sass" scoped> 242 <style lang="sass" scoped>
174 .uploadsection 243 .offset-r
175 width: 90% 244 margin-right: $large-offset
245
246 .buttons button
247 margin-left: $offset !important
176 248
177 .label-text 249 .label-text
178 width: 10rem 250 width: 10rem
179 text-align: left 251 text-align: left
180 line-height: 2.25rem 252 line-height: 2.25rem