Mercurial > gemma
view client/src/imports/Imports.vue @ 1242:da99d4560fd4
feat: import sounding results
Sends now bottleneck, importdate, depthreference over the wire.
Changed success message to "starting import for ...".
In case of an error, display errormessages.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 09:38:51 +0100 |
parents | 9b0a7b3ea297 |
children | 29036b3916ab |
line wrap: on
line source
<template> <div> <h4>Import soundingresults</h4> <hr class="mr-auto ml-auto mb-0 w-90"> <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="offset-r"> <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> </div> <input id="bottleneck" type="text" class="form-control" placeholder="Name of Bottleneck" aria-label="bottleneck" aria-describedby="bottlenecklabel" v-model="bottleneck" > </div> <div class="d-flex flex-row input-group mb-4"> <div class="offset-r"> <label class="label-text" for="importdate" id="importdatelabel">Date</label> </div> <input id="importdate" type="date" class="form-control" placeholder="Date of import" aria-label="bottleneck" aria-describedby="bottlenecklabel" v-model="importDate" > </div> <div class="d-flex flex-row input-group mb-4"> <div class="offset-r"> <label class="label-text" for="depthreference">Depth reference</label> </div> <select v-model="depthReference" class="custom-select" id="depthreference"> <option v-for="option in this.$options.depthReferenceOptions" :key="option" >{{option}}</option> </select> </div> </div> <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 type="file" @change="fileSelected" class="custom-file-input" id="uploadFile" > <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label> </div> </div> <div class="buttons text-right"> <a v-if="editState" download="meta.json" :href="dataLink " 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="submit" class="btn btn-info" type="button" >{{uploadState?"Upload":"Confirm"}}</button> </div> </div> </div> </template> <script> import { HTTP } from "../application/lib/http"; import { displayError, displayInfo } from "../application/lib/errors.js"; const defaultLabel = "Choose .zip-file"; const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" }; export default { name: "imports", data() { return { importState: IMPORTSTATE.UPLOAD, depthReference: "", bottleneck: "", importDate: "", uploadLabel: defaultLabel, uploadFile: null, 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]; }, 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 = new Date(date).toISOString().split("T")[0]; this.token = response.data.token; }) .catch(error => { const { status, data } = error.response; const messages = data.messages ? data.messages.join(", ") : ""; displayError({ title: "Backend Error", message: `${status}: ${messages}` }); }); }, confirm() { let formData = new FormData(); formData.append("token", this.token); ["bottleneck", "importDate", "depthReference"].forEach(x => { if (this[x]) formData.append(x, this[x]); }); HTTP.post("/imports/soundingresult", formData, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-Type": "multipart/form-data" } }) .then(() => { displayInfo({ title: "Import", message: "Starting import for " + this.bottleneck }); this.initialState(); }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }, computed: { editState() { return this.importState === IMPORTSTATE.EDIT; }, uploadState() { return this.importState === IMPORTSTATE.UPLOAD; }, dataLink() { return ( "data:text/json;charset=utf-8," + encodeURIComponent( JSON.stringify({ depthReference: this.depthReference, bottleneck: this.bottleneck, date: this.importDate }) ) ); } }, depthReferenceOptions: [ "", "NAP", "KP", "FZP", "ADR", "TAW", "PUL", "NGM", "ETRS", "POT", "LDC", "HDC", "ZPG", "GLW", "HSW", "LNW", "HNW", "IGN", "WGS", "RN", "HBO" ] }; </script> <style lang="sass" scoped> .offset-r margin-right: $large-offset .buttons button margin-left: $offset !important .label-text width: 10rem text-align: left line-height: 2.25rem </style>