Mercurial > gemma
view client/src/imports/Imports.vue @ 1212:387826a2efd3
feat: import soundingresults. Uses now import API correctly
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 13:48:50 +0100 |
parents | 55eae66af749 |
children | 9d93968db2cd |
line wrap: on
line source
<template> <div :class="importStyle"> <div @click="$store.commit('application/showImportSoundingResults', false);" class="ui-element close-imports" > <i class="fa fa-close"></i> </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"; import { mapState } from "vuex"; 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: { ...mapState("application", ["showImportSoundingResults"]), editState() { return this.importState === IMPORTSTATE.EDIT; }, uploadState() { return this.importState === IMPORTSTATE.UPLOAD; }, importStyle() { return [ "ui-element shadow imports", { importscollapsed: !this.showImportSoundingResults, importsextended: this.showImportSoundingResults } ]; }, 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% .imports position: relative background-color: #ffffff padding-top: $offset opacity: $slight-transparent border-radius: $border-radius transition: left 0.3s ease overflow: hidden background: #fff margin-left: $offset margin-top: -$offset width: 90% .importscollapsed width: 0 height: 0 transition: $transition-fast .importsextended min-width: 600px .close-imports position: absolute z-index: 2 right: 0 top: 7px border-radius: $border-radius height: $icon-width width: $icon-height display: none .importsextended .close-imports display: block .label-text width: 10rem text-align: left line-height: 2.25rem </style>