Mercurial > gemma
view client/src/components/stretches/StretchForm.vue @ 4238:fe24cdde614d
styles-config: prepare components for WMS-Layer styling and set default color values
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 17:21:14 +0200 |
parents | c9b60130cdfb |
children | 08aef146f95a |
line wrap: on
line source
<template> <div class="d-flex flex-column"> <div class="d-flex justify-content-between mt-2 px-2"> <div class="text-left flex-fill mr-1"> <small class="text-muted"> <translate>ID</translate> </small> <input id="id" type="text" class="form-control form-control-sm" placeholder="AT_Stretch_12" v-model="id" :disabled="editStretch" /> <span class="text-left text-danger"> <small v-if="errors.id && !id"> <translate>Please enter an id</translate> </small> </span> </div> <div class="text-left flex-fill ml-1"> <small class="text-muted"> <translate>Countrycode</translate> </small> <input id="countryCode" type="text" class="form-control form-control-sm" placeholder="AT" v-model="countryCode" /> <span class="text-left text-danger"> <small v-if="errors.countryCode && !countryCode"> <translate>Please enter a countrycode </translate> </small> </span> </div> </div> <div class="d-flex justify-content-between mt-2 px-2"> <div class="text-left flex-fill"> <small class="text-muted"> <translate>Start rhm</translate> </small> <div class="d-flex flex-row position-relative"> <input id="startrhm" type="text" class="form-control form-control-sm" placeholder="e.g. ATXXX000010000019900" v-model="startrhm" ref="startrhm" @focus="enablePipette('start')" @blur="disablePipette('start')" /> <span class="input-group-text position-absolute input-button" @click="$refs.startrhm.focus()" v-tooltip="pipetteTooltip" > <font-awesome-icon :class="{ 'text-info': pipetteStart }" icon="crosshairs" /> </span> </div> <span class="text-left text-danger"> <small v-if="errors.startrhm && !startrhm"> <translate>Please enter a start point</translate> </small> </span> </div> <div class="text-left flex-fill ml-2"> <small class="text-muted"> <translate>End rhm</translate> </small> <div class="d-flex flex-row position-relative"> <input id="endrhm" type="text" class="form-control form-control-sm" placeholder="e.g. ATXXX000010000019900" v-model="endrhm" ref="endrhm" @focus="enablePipette('end')" @blur="disablePipette('end')" /> <span class="input-group-text position-absolute input-button" @click="$refs.endrhm.focus()" v-tooltip="pipetteTooltip" > <font-awesome-icon :class="{ 'text-info': pipetteEnd }" icon="crosshairs" /> </span> </div> <span class="text-left text-danger"> <small v-if="errors.endrhm && !endrhm"> <translate>Please enter an end point</translate> </small> </span> </div> <div class="text-left ml-2" v-if="!editStretch"> <small class="text-muted"> <translate>Tolerance for snapping to axis</translate> </small> <div class="d-flex flex-row position-relative"> <input class="form-control form-control-sm" v-model.number="tolerance" type="number" min="0" step="any" id="tolerance" /> <span class="input-group-text position-absolute input-button"> m </span> </div> <span class="text-left text-danger"> <small v-if="errors.tolerance && !tolerance"> <translate>Please enter a tolerance value</translate> </small> </span> </div> </div> <div class="d-flex flex-row justify-content-between px-2"> <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 form-control-sm" placeholder="" v-model="objbn" /> <span class="text-left text-danger"> <small v-if="errors.objbn && !objbn"> <translate>Please enter an objectname</translate> </small> </span> </div> <div class="mt-2 w-50 text-left"> <small class="text-muted"> <translate>National Object name</translate> </small> <input id="nobjbn" type="text" class="form-control form-control-sm" v-model="nobjbn" /> </div> </div> <div class="d-flex flex-row justify-content-between px-2"> <div class="mt-2 w-50 text-left"> <small class="text-muted"> <translate>Date info</translate> </small> <input id="date_info" type="date" class="form-control form-control-sm" placeholder="date_info" v-model="date_info" /> <span class="text-left text-danger"> <small v-if="errors.date_info && !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 Organization</translate> </small> <input id="source_organization" type="text" class="form-control form-control-sm" v-model="source_organization" /> <span class="text-left text-danger"> <small v-if="errors.source_organization && !source_organization"> <translate>Please enter a source organization</translate> </small> </span> </div> </div> <div class="d-flex justify-content-between mt-2 p-2 border-top"> <button @click="$parent.showForm = false" class="btn btn-sm btn-warning"> <translate>Back</translate> </button> <button @click="save" type="submit" class="shadow-sm btn btn-sm btn-info submit-button" > <translate>Submit</translate> </button> </div> </div> </template> <style lang="sass" scoped> .input-button border-top-left-radius: 0 border-bottom-left-radius: 0 right: 0 height: 31px </style> <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, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Tom Gottfried <tom.gottfried@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { displayError, displayInfo } from "@/lib/errors"; import { sortTable } from "@/lib/mixins"; export default { mixins: [sortTable], props: ["editStretch"], data() { return { pipetteStart: false, pipetteEnd: false, id: null, startrhm: null, endrhm: null, tolerance: 5, objbn: null, nobjbn: null, date_info: new Date().toISOString().split("T")[0], source_organization: null, countryCode: null, errors: { id: false, startrhm: false, endrhm: false, tolerance: false, objbn: false, nobjbn: false, date_info: false, source_organization: false, countryCode: false } }; }, computed: { ...mapState("map", ["identifiedFeatures"]), ...mapGetters("map", ["openLayersMap"]), pipetteTooltip() { return this.$gettext("Choose a distance mark by clicking on the map."); } }, watch: { identifiedFeatures() { const distanceMark = this.identifiedFeatures.find(x => /^distance_marks_geoserver/.test(x["id_"]) ); if (distanceMark) { const location = distanceMark.get("location"); this.startrhm = this.pipetteStart ? location : this.startrhm; this.endrhm = this.pipetteEnd ? location : this.endrhm; this.pipetteStart = false; this.pipetteEnd = false; this.$store.commit("map/mapPopupEnabled", true); } } }, methods: { enablePipette(t) { this.openLayersMap() .getLayer("DISTANCEMARKSAXIS") .setVisible(true); this.$store.commit("map/mapPopupEnabled", false); if (t === "start") { this.pipetteStart = true; this.pipetteEnd = false; } else { this.pipetteStart = false; this.pipetteEnd = true; } }, disablePipette() { this.$store.commit("map/mapPopupEnabled", true); this.pipetteStart = false; this.pipetteEnd = false; }, validate() { const fields = [ "id", "startrhm", "endrhm", "objbn", "countryCode", "date_info", "source_organization" ]; if (!this.editStretch) fields.push("tolerance"); fields.forEach(field => { if (!this[field]) { this.errors[field] = true; } else { this.errors[field] = false; } }); // return true if no errors return !Object.values(this.errors).reduce((a, b) => a + b, 0); }, save() { if (this.validate()) { const data = { name: this.id, from: this.startrhm, to: this.endrhm, "source-organization": this.source_organization, "date-info": this.date_info, objnam: this.objbn, nobjnam: this.nobjbn, countries: this.countryCode.split(",").map(x => { return x.trim(); }) }; if (!this.editStretch) { data["tolerance"] = this.tolerance; } this.$parent.loading = true; this.$store .dispatch("imports/saveStretch", data) .then(() => { displayInfo({ title: this.$gettext("Import"), message: this.$gettext("Starting import of stretch") }); this.$store.dispatch("imports/loadStretches").then(() => { this.$parent.loading = false; this.$parent.showForm = false; }); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } } }, mounted() { if (this.editStretch) { const props = this.editStretch.properties; this.id = props.name; this.startrhm = props.lower.replace(/[,()]/g, ""); this.endrhm = props.upper.replace(/[,()]/g, ""); this.tolerance = props.tolerance; this.objbn = props.objnam; this.nobjbn = props.nobjnam; this.date_info = props.date_info.split("T")[0]; this.source_organization = props.source_organization; this.countryCode = props.countries; } } }; </script>