Mercurial > gemma
view client/src/components/ImportWaterwayProfiles.vue @ 2455:54c9fe587fe6
Subdivide SQL function to prepare for improved error handling
The context of an error (e.g. the function in which it occured)
can be inferred by the database client. Not doing all in one
statement will render the context more meaningful.
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Fri, 01 Mar 2019 18:38:02 +0100 |
parents | f185503ef35a |
children | bb5286acfee2 |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <Spacer></Spacer> <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3"> <UIBoxHeader icon="upload" title="Import Waterway Profiles" /> <div class="card-body stretches-card"> <div class="w-95 ml-auto mr-auto mt-4 mb-4"> <div class="mb-4"> <div class="d-flex flex-row"> <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input class="form-control" type="url" v-model="url" /> </div> </div> </div> <div v-if="!url" class="d-flex flex-row"> <small ><translate class="text-danger" >Please enter a URL</translate ></small > </div> <div class="d-flex flex-row"> <div class="flex-column mt-3 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> <input class="form-control" type="text" v-model="featureType" /> </div> <div v-if="!featureType" class="d-flex flex-row"> <small ><translate class="text-danger" >Please enter a Featuretype</translate ></small > </div> </div> <div class="flex-column mt-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> <input class="form-control" type="text" v-model="sortBy" /> </div> <div v-if="!sortBy" class="d-flex flex-row"> <small ><translate class="text-danger" >Please enter SortBy</translate ></small > </div> </div> </div> </div> <div class="d-flex flex-row text-left"> <div class="mt-3 mb-3 flex-column w-100"> <div class="custom-file"> <input accept=".csv" type="file" @change="fileSelected" class="custom-file-input" id="uploadFile" /> <label class="pointer custom-file-label" for="uploadFile"> {{ uploadLabel }} </label> </div> </div> </div> <div class="buttons text-right"> <button :disabled="disableUploadButton" @click="submit" class="btn btn-info mt-4" type="button" > <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" ></font-awesome-icon> <translate>Trigger import</translate> </button> </div> </div> </div> </div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ import { displayError, displayInfo } from "@/lib/errors.js"; import { HTTP } from "@/lib/http"; export default { name: "importwaterwayprofiles", data() { return { url: "https://service.d4d-portal.info/wamos/wfs/", sortBy: "hydro_scamin", featureType: "ws-wamos:ienc_wtwprf", disableUploadButton: false, uploadLabel: this.$gettext("choose file to upload"), uploadFile: null }; }, methods: { fileSelected(e) { const files = e.target.files || e.dataTransfer.files; if (!files) return; this.uploadLabel = files[0].name; this.uploadFile = files[0]; }, submit() { if (!this.url || !this.featureType || !this.sortBy || !this.uploadFile) return; let formData = new FormData(); formData.append("wp", this.uploadFile); formData.append("url", this.url); formData.append("feature-type", this.featureType); formData.append("sort-by", this.sortBy); HTTP.post("/imports/wp", formData, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-Type": "multipart/form-data" } }) .then(() => { displayInfo({ title: this.$gettext("Import"), message: this.$gettext( this.uploadLabel + this.$gettext(" was successfully uploaded.") ) }); this.url = "https://service.d4d-portal.info/wamos/wfs/"; this.uploadFile = null; this.uploadLabel = this.$gettext("choose file to upload"); }) .catch(error => { const { status, data } = error.response; const messages = data.messages ? data.messages.join(", ") : ""; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${messages}` }); }); } }, components: { Spacer: () => import("./Spacer") } }; </script> <style lang="scss" scoped></style>