Mercurial > gemma
view client/src/components/ImportApprovedGaugeMeasurement.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 approved gaugemeasurements" /> <div class="card-body stretches-card"> <div class="w-95 ml-auto mr-auto mt-4 mb-4"> <div class="d-flex flex-column text-left w-25"> <label class="text-nowrap" for="originator"> <small class="text-muted" >{{ $options.ORIGINATOR }} / {{ $options.FROM }}</small > </label> <input type="text" v-model="originator" class="form-control" id="originator" /> <span class="text-left text-danger"> <small v-if="!originator"> <translate>Please enter an originator</translate> </small> </span> </div> <div class="mt-4 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> </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 { HTTP } from "@/lib/http"; import { displayError, displayInfo } from "@/lib/errors.js"; import app from "@/main"; export default { name: "importapprovedgaugemeasurements", data() { return { disableUploadButton: false, uploadLabel: this.$gettext("choose file to upload"), uploadFile: null, originator: "viadonau" }; }, methods: { initialState() { this.uploadLabel = this.$gettext("choose file to upload"); this.uploadFile = null; this.originator = "viadonau"; }, 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.originator || !this.uploadFile) return; let formData = new FormData(); formData.append("agm", this.uploadFile); formData.append("originator", this.originator); HTTP.post("/imports/agm", formData, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-Type": "multipart/form-data" } }) .then(() => { displayInfo({ title: this.$gettext("Import"), message: this.$gettext( "Starting import of Approved Gauge Measurements" ) }); this.initialState(); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } }, components: { Spacer: () => import("./Spacer") }, ORIGINATOR: app.$gettext("originator"), FROM: app.$gettext("from") }; </script> <style lang="scss" scoped></style>