Mercurial > gemma
view client/src/imports/Imports.vue @ 1230:957907eaaa72
implemented context sensitive box below search bar (see: issue224)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 20 Nov 2018 08:47:53 +0100 |
parents | ba8cd80d68b6 |
children | ec4b06d3a3a8 |
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="p-3"> <div class="d-flex flex-row input-group mb-4"> <div class=""> <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=""> <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=""> <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="uploadsection mr-auto ml-auto mt-4 mb-4"> <div 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="downloadbtn text-right"> <a v-if="editState" download="meta.json" :href="dataLink " class="btn btn-outline-info mr-2" >Generate Meta.json</a> <button :disabled="disableUpload" @click="submitUpload" class="btn btn-info" type="button" >Upload!</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 }; }, methods: { fileSelected(e) { const files = e.target.files || e.dataTransfer.files; if (!files) return; this.uploadLabel = files[0].name; this.uploadFile = files[0]; }, submitUpload() { if (!this.uploadFile || this.disableUpload) return; let formData = new FormData(); formData.append("soundingresult", this.uploadFile); HTTP.post("/imports/soundingresult", formData, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-Type": "multipart/form-data" } }) .then(() => { displayInfo({ title: "Import success" }); }) .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> .uploadsection width: 90% .label-text width: 10rem text-align: left line-height: 2.25rem </style>