Mercurial > gemma
view client/src/components/ImportStretches.vue @ 1870:3050d702913a
sections and stretches: only stretches. only sysadmin.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 17 Jan 2019 16:41:10 +0100 |
parents | 27c4effba5b1 |
children | 8ae7a1fba4cd |
line wrap: on
line source
<template> <div class="d-flex flex-column mb-3"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon> <translate>Define stretches</translate> </h6> <div class="ml-3 mr-3"> <div class="d-flex flex-row justify-content-between"> <div class="mt-2 w-50 mr-2 text-left"> <small class="text-muted"> <translate>ID</translate> </small> <input id="id" type="text" class="form-control" placeholder="AT_Section_12" aria-label="id" v-model="id" /> <span class="text-left text-danger"> <small v-if="idError && !id"> <translate>Please enter an id</translate> </small> </span> </div> <div class="mt-2 w-50 ml-2 text-left"> <div> <small class="text-muted"> <translate>Countrycode</translate> </small> <input id="countryCode" type="text" class="form-control" placeholder="AT" aria-label="id" v-model="id" /> <span class="text-left text-danger"> <small v-if="countryCodeError && !countryCode"> <translate>Please enter a countrycode </translate> </small> </span> </div> <div class="w-50 ml-2"></div> </div> </div> <div class="d-flex flex-column justify-content-between"> <div class="mt-2 text-left"> <small class="text-muted"> <translate>Start rhm</translate> </small> <div class="d-flex flex-row"> <input id="startrhm" type="text" class="form-control" placeholder="e.g. ATXXX00001000000019900" aria-label="startrhm" v-model="startrhm" /> <span class="input-group-text"> <font-awesome-icon @click="togglePipette('start')" :class="{ 'text-info': pipetteStart }" icon="bullseye" ></font-awesome-icon> </span> </div> <span class="text-left text-danger"> <small v-if="startrhmError && !startrhm"> <translate>Please enter a start point</translate> </small> </span> </div> <div class="mt-2 text-left"> <small class="text-muted"> <translate>End rhm</translate> </small> <div class="d-flex flex-row"> <input id="endrhm" type="text" class="form-control" placeholder="e.g. ATXXX00001000000019900" aria-label="endrhm" v-model="endrhm" /> <span class="input-group-text"> <font-awesome-icon @click="togglePipette('end')" :class="{ 'text-info': pipetteEnd }" icon="bullseye" ></font-awesome-icon> </span> </div> <span class="text-left text-danger"> <small v-if="endrhmError && !endrhm"> <translate>Please enter an end point</translate> </small> </span> </div> </div> <div class="d-flex flex-row justify-content-between"> <div class="mt-2 mr-2 w-50 text-left"> <small class="text-muted"> <translate>Object name</translate> </small> <input id="objbn" type="text" class="form-control" placeholder="" aria-label="objbn" v-model="objbn" /> <span class="text-left text-danger"> <small v-if="objbnError && !objbn"> <translate>Please enter an objectname</translate> </small> </span> </div> <div class="mt-2 ml-2 w-50 text-left"> <small class="text-muted"> <translate>National Object name</translate> </small> <input id="nobjbn" type="text" class="form-control" placeholder="" aria-label="nobjbn" v-model="nobjbn" /> <span class="text-left text-danger"> <small v-if="nobjbnError && !nobjbn"> <translate>Please enter an objectname</translate> </small> </span> </div> </div> <div class="d-flex flex-row justify-content-between"> <div class="mt-2 mr-2 w-50 text-left"> <small class="text-muted"> <translate>Date info</translate> </small> <input id="date_info" type="date" class="form-control" placeholder="date_info" aria-label="date_info" v-model="date_info" /> <span class="text-left text-danger"> <small v-if="date_infoError && !date_info"> <translate>Please enter a date</translate> </small> </span> </div> <div class="mt-2 ml-2 w-50 text-left"> <small class="text-muted"> <translate>Source</translate> </small> <input id="source" type="text" class="form-control" placeholder="source" aria-label="source" v-model="source" /> <span class="text-left text-danger"> <small v-if="sourceError && !source"> <translate>Please enter a source</translate> </small> </span> </div> </div> </div> <div class="text-right mt-2 mr-3 mb-3"> <button @click="submit" type="submit" class="shadow-sm btn btn-info submit-button" > <translate>Submit</translate> </button> </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 { mapState, mapGetters } from "vuex"; import { displayInfo } from "@/lib/errors.js"; export default { name: "importstretches", data() { return { id: "", funktion: "", startrhm: "", endrhm: "", objbn: "", nobjbn: "", countryCode: "", date_info: new Date().toISOString().split("T")[0], source: "", pipetteStart: false, pipetteEnd: false, idError: false, funktionError: false, startrhmError: false, endrhmError: false, objbnError: false, nobjbnError: false, date_infoError: false, sourceError: false, countryCodeError: false }; }, methods: { togglePipette(t) { if (t === "start") { this.pipetteStart = !this.pipetteStart; this.pipetteEnd = false; } else { this.pipetteEnd = !this.pipetteEnd; this.pipetteStart = false; } }, validate() { const fields = [ "id", "funktion", "startrhm", "endrhm", "objbn", "nobjbn", "date_info", "source" ]; fields.forEach(field => { if (!this[field]) { this[field + "Error"] = true; } else { this[field + "Error"] = false; } }); }, submit() { this.validate(); displayInfo({ title: this.$gettext("Sections"), message: this.$gettext("Not implemented!") }); } }, watch: { identifiedFeatures() { const filterDistanceMarks = x => { return /^distance_marks/.test(x["id_"]); }; const distanceMark = this.identifiedFeatures.filter(filterDistanceMarks); if (distanceMark.length > 0) { const value = distanceMark[0]["id_"] .split(".")[1] .replace(/,|\(|\)/g, ""); this.startrhm = this.pipetteStart ? value : this.startrhm; this.endrhm = this.pipetteEnd ? value : this.endrhm; this.pipetteStart = false; this.pipetteEnd = false; } } }, computed: { ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), ...mapGetters("user", ["isSysAdmin"]) } }; </script> <style lang="scss" scoped></style>