Mercurial > gemma
view client/src/components/ImportStretches.vue @ 1809:b16a6db0008f
feat: define sections and stretches with targetting option
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 15 Jan 2019 17:02:51 +0100 |
parents | 975a7de89f05 |
children | 199fa7e759aa |
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 section and stretches</translate> </h6> <div class="ml-3 mr-3"> <div class="d-flex flex-row justify-content-between"> <div class="mt-1 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="!id"> <translate>Please enter an id</translate> </small> </span> </div> <div class="mt-1 w-50 ml-2 text-left"> <small class="text-muted"><translate>Function</translate> </small> <select v-model="funktion" class="custom-select"> <option value="section"><translate>Section</translate></option> <option value="stretch"><translate>Stretch</translate></option> </select> <span class="text-left text-danger"> <small v-if="!funktion"> <translate>Please enter a function</translate> </small> </span> </div> </div> <div class="d-flex flex-column justify-content-between"> <div class="mt-1 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="pipetteStart = !pipetteStart" :class="{ 'text-info': pipetteStart }" icon="bullseye" ></font-awesome-icon> </span> </div> <span class="text-left text-danger"> <small v-if="!startrhm"> <translate>Please enter a start point</translate> </small> </span> </div> <div class="mt-1 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="pipetteEnd = !pipetteEnd" :class="{ 'text-info': pipetteEnd }" icon="bullseye" ></font-awesome-icon> </span> </div> <span class="text-left text-danger"> <small v-if="!endrhm"> <translate>Please enter an end point</translate> </small> </span> </div> </div> <div class="d-flex flex-row justify-content-between"> <div class="mt-1 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="!objbn"> <translate>Please enter an objectname</translate> </small> </span> </div> <div class="mt-1 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="!nobjbn"> <translate>Please enter an objectname</translate> </small> </span> </div> </div> <div class="d-flex flex-row justify-content-between"> <div class="mt-1 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_info"> <translate>Please enter a date</translate> </small> </span> </div> <div class="mt-1 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="!source"> <translate>Please enter a source</translate> </small> </span> </div> </div> </div> <div class="text-right 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 } from "vuex"; import { displayInfo } from "@/lib/errors.js"; export default { name: "importstretches", data() { return { id: "", funktion: "", startrhm: "", endrhm: "", objbn: "", nobjbn: "", date_info: new Date().toISOString().split("T")[0], source: "", pipetteStart: false, pipetteEnd: false }; }, methods: { submit() { 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; } } }, computed: { ...mapState("map", ["identifiedFeatures", "currentMeasurement"]) } }; </script> <style lang="scss" scoped></style>