Mercurial > gemma
changeset 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 | 77582da3adb0 |
children | 7ee9bdaac336 2b4de58a9031 |
files | client/src/components/ImportStretches.vue |
diffstat | 1 files changed, 146 insertions(+), 70 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Tue Jan 15 16:51:38 2019 +0100 +++ b/client/src/components/ImportStretches.vue Tue Jan 15 17:02:51 2019 +0100 @@ -4,33 +4,58 @@ <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon> <translate>Define section and stretches</translate> </h6> - <div class="ml-3 mr-3 w-75"> - <div class="mt-1 text-left"> - <small class="text-muted"> <translate>ID</translate> </small> - <input - id="id" - type="text" - class="form-control" - placeholder="ID" - 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="d-flex flex-row justify-content-between"> - <div class="mt-1 mr-3 text-left"> - <small class="text-muted"> <translate>Start rhm</translate> </small> + <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="startrhm" + id="id" type="text" class="form-control" - placeholder="ATXXX00001000000019900" - aria-label="startrhm" - v-model="startrhm" + 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> @@ -38,23 +63,32 @@ </div> <div class="mt-1 text-left"> <small class="text-muted"> <translate>End rhm</translate> </small> - <input - id="endrhm" - type="text" - class="form-control" - placeholder="ATXXX00001000000019900" - aria-label="endrhm" - v-model="endrhm" - /> + <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="!id"> + <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-3 text-left"> + <div class="mt-1 mr-2 w-50 text-left"> <small class="text-muted"> <translate>Object name</translate> </small> <input id="objbn" @@ -65,12 +99,12 @@ v-model="objbn" /> <span class="text-left text-danger"> - <small v-if="!id"> + <small v-if="!objbn"> <translate>Please enter an objectname</translate> </small> </span> </div> - <div class="mt-1 text-left"> + <div class="mt-1 ml-2 w-50 text-left"> <small class="text-muted"> <translate>National Object name</translate> </small> @@ -83,42 +117,55 @@ v-model="nobjbn" /> <span class="text-left text-danger"> - <small v-if="!id"> + <small v-if="!nobjbn"> <translate>Please enter an objectname</translate> </small> </span> </div> </div> - <div class="mt-1 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="!id"> <translate>Please enter a date</translate> </small> - </span> + <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 class="mt-1 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="!id"> - <translate>Please enter a source</translate> - </small> - </span> - </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> @@ -137,22 +184,51 @@ * 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: "", - function: "", - startrhm: 0, - endrhm: 0, + funktion: "", + startrhm: "", + endrhm: "", objbn: "", nobjbn: "", - date_info: null, - source: "" + date_info: new Date().toISOString().split("T")[0], + source: "", + pipetteStart: false, + pipetteEnd: false }; }, - methods: {} + 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>