Mercurial > gemma
changeset 1240:9b0a7b3ea297
inport sounding results
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 20 Nov 2018 17:37:30 +0100 |
parents | d842d9d10872 |
children | a45fa8943254 |
files | client/src/imports/Imports.vue |
diffstat | 1 files changed, 88 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/imports/Imports.vue Tue Nov 20 17:04:06 2018 +0100 +++ b/client/src/imports/Imports.vue Tue Nov 20 17:37:30 2018 +0100 @@ -2,9 +2,9 @@ <div> <h4>Import soundingresults</h4> <hr class="mr-auto ml-auto mb-0 w-90"> - <div v-if="editState" class="p-3"> + <div v-if="editState" class="ml-auto mr-auto mt-4 w-90"> <div class="d-flex flex-row input-group mb-4"> - <div class=""> + <div class="offset-r"> <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> </div> <input @@ -18,12 +18,12 @@ > </div> <div class="d-flex flex-row input-group mb-4"> - <div class=""> + <div class="offset-r"> <label class="label-text" for="importdate" id="importdatelabel">Date</label> </div> <input id="importdate" - type="date" + type="text" class="form-control" placeholder="Date of import" aria-label="bottleneck" @@ -32,7 +32,7 @@ > </div> <div class="d-flex flex-row input-group mb-4"> - <div class=""> + <div class="offset-r"> <label class="label-text" for="depthreference">Depth reference</label> </div> <select v-model="depthReference" class="custom-select" id="depthreference"> @@ -43,7 +43,7 @@ </select> </div> </div> - <div class="uploadsection mr-auto ml-auto mt-4 mb-4"> + <div class="w-90 ml-auto mr-auto mt-4 mb-4"> <div v-if="uploadState" class="d-flex flex-row input-group mb-4"> <div class="custom-file"> <input @@ -55,19 +55,25 @@ <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label> </div> </div> - <div class="downloadbtn text-right"> + <div class="buttons text-right"> <a v-if="editState" download="meta.json" :href="dataLink " - class="btn btn-outline-info mr-2" - >Generate Meta.json</a> + class="btn btn-outline-info pull-left" + >Download Meta.json</a> + <button + v-if="editState" + @click="deleteTempData" + class="btn btn-danger" + type="button" + >Cancel Upload</button> <button :disabled="disableUpload" - @click="submitUpload" + @click="submit" class="btn btn-info" type="button" - >Upload!</button> + >{{uploadState?"Upload":"Confirm"}}</button> </div> </div> </div> @@ -90,20 +96,81 @@ importDate: "", uploadLabel: defaultLabel, uploadFile: null, - disableUpload: false + disableUpload: false, + token: null }; }, methods: { + initialState() { + this.importState = IMPORTSTATE.UPLOAD; + this.depthReference = ""; + this.bottleneck = ""; + this.importDate = ""; + this.uploadLabel = defaultLabel; + this.uploadFile = null; + this.disableUpload = false; + this.token = null; + }, fileSelected(e) { const files = e.target.files || e.dataTransfer.files; if (!files) return; this.uploadLabel = files[0].name; this.uploadFile = files[0]; }, - submitUpload() { + deleteTempData() { + HTTP.delete("/imports/soundingresult-upload/" + this.token, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + } + }) + .then(() => { + this.initialState(); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + }, + submit() { if (!this.uploadFile || this.disableUpload) return; + if (this.importState === IMPORTSTATE.UPLOAD) { + this.upload(); + } else { + this.confirm(); + } + }, + upload() { let formData = new FormData(); formData.append("soundingresult", this.uploadFile); + HTTP.post("/imports/soundingresult-upload", formData, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-Type": "multipart/form-data" + } + }) + .then(response => { + const { bottleneck, date } = response.data.meta; + const depthReference = response.data.meta["depth-reference"]; + this.importState = IMPORTSTATE.EDIT; + this.bottleneck = bottleneck; + this.depthReference = depthReference; + this.importDate = date; + this.token = response.data.token; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + }, + confirm() { + let formData = new FormData(); + formData.append("token", this.token); HTTP.post("/imports/soundingresult", formData, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), @@ -112,8 +179,10 @@ }) .then(() => { displayInfo({ - title: "Import success" + title: "Import", + message: "Successfully imported " + this.bottleneck }); + this.initialState(); }) .catch(error => { const { status, data } = error.response; @@ -171,8 +240,11 @@ </script> <style lang="sass" scoped> -.uploadsection - width: 90% +.offset-r + margin-right: $large-offset + +.buttons button + margin-left: $offset !important .label-text width: 10rem