Mercurial > gemma
changeset 1871:8ae7a1fba4cd
prototypical listview for stretches. new and back buttons. have fun
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 17 Jan 2019 17:29:39 +0100 |
parents | 3050d702913a |
children | f63712670c25 |
files | client/src/components/ImportStretches.vue client/src/components/Sidebar.vue |
diffstat | 2 files changed, 220 insertions(+), 146 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Thu Jan 17 16:41:10 2019 +0100 +++ b/client/src/components/ImportStretches.vue Thu Jan 17 17:29:39 2019 +0100 @@ -4,176 +4,209 @@ <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> + <div v-if="!edit" class="mb-3"> + <div + class="mt-3 mr-3 ml-3 d-flex flex-row justify-content-between border-bottom" + > + <div>id</div> + <div>funktion</div> + <div>startrhm</div> + <div>endrhm</div> + </div> + <div + class=" mr-3 ml-3 d-flex flex-row justify-content-between" + v-for="stretch in stretches" + :key="stretch.id" + > + <div>{{ stretch.id }}</div> + <div>{{ stretch.funktion }}</div> + <div>{{ stretch.startrhm }}</div> + <div>{{ stretch.endrhm }}</div> + </div> + <div class="mt-3" v-if="stretches.length == 0"> + <translate>No results.</translate> + </div> + </div> + <div v-if="edit"> + <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="countryCode" + id="id" type="text" class="form-control" - placeholder="AT" + placeholder="AT_Section_12" aria-label="id" v-model="id" /> <span class="text-left text-danger"> - <small v-if="countryCodeError && !countryCode"> - <translate>Please enter a countrycode </translate> + <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="countryCode" + /> + <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 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"> + <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="startrhm" + id="objbn" type="text" class="form-control" - placeholder="e.g. ATXXX00001000000019900" - aria-label="startrhm" - v-model="startrhm" + placeholder="" + aria-label="objbn" + v-model="objbn" /> - <span class="input-group-text"> - <font-awesome-icon - @click="togglePipette('start')" - :class="{ 'text-info': pipetteStart }" - icon="bullseye" - ></font-awesome-icon> + <span class="text-left text-danger"> + <small v-if="objbnError && !objbn"> + <translate>Please enter an objectname</translate> + </small> </span> </div> - <span class="text-left text-danger"> - <small v-if="startrhmError && !startrhm"> - <translate>Please enter a start point</translate> + <div class="mt-2 ml-2 w-50 text-left"> + <small class="text-muted"> + <translate>National Object name</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" + id="nobjbn" type="text" class="form-control" - placeholder="e.g. ATXXX00001000000019900" - aria-label="endrhm" - v-model="endrhm" + placeholder="" + aria-label="nobjbn" + v-model="nobjbn" /> - <span class="input-group-text"> - <font-awesome-icon - @click="togglePipette('end')" - :class="{ 'text-info': pipetteEnd }" - icon="bullseye" - ></font-awesome-icon> + <span class="text-left text-danger"> + <small v-if="nobjbnError && !nobjbn"> + <translate>Please enter an objectname</translate> + </small> </span> </div> - <span class="text-left text-danger"> - <small v-if="endrhmError && !endrhm"> - <translate>Please enter an end point</translate> - </small> - </span> + </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="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 class="text-right mt-2 mr-3 mb-3"> + <button @click="edit = false" class="btn btn-warning mr-2">Back</button> + <button + @click="save" + type="submit" + class="shadow-sm btn btn-info submit-button" + > + <translate>Submit</translate> + </button> </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> + <div class="text-right mr-3"> + <button v-if="!edit" @click="startEdit()" class="btn btn-info"> + <translate>New stretch</translate> </button> </div> </div> @@ -200,6 +233,8 @@ name: "importstretches", data() { return { + stretches: [], + edit: false, id: "", funktion: "", startrhm: "", @@ -222,7 +257,36 @@ countryCodeError: false }; }, + mounted() { + this.edit = false; + }, methods: { + clean() { + this.id = ""; + this.funktion = ""; + this.startrhm = ""; + this.endrhm = ""; + this.objbn = ""; + this.nobjbn = ""; + this.countryCode = ""; + this.date_info = new Date().toISOString().split("T")[0]; + this.source = ""; + this.pipetteStart = false; + this.pipetteEnd = false; + this.idError = false; + this.funktionError = false; + this.startrhmError = false; + this.endrhmError = false; + this.objbnError = false; + this.nobjbnError = false; + this.date_infoError = false; + this.sourceError = false; + this.countryCodeError = false; + }, + startEdit() { + this.clean(); + this.edit = true; + }, togglePipette(t) { if (t === "start") { this.pipetteStart = !this.pipetteStart; @@ -251,8 +315,20 @@ } }); }, - submit() { + save() { this.validate(); + this.stretches.push({ + id: this.id, + funktion: this.funktion, + startrhm: this.startrhm, + endrhm: this.endrhm, + objbn: this.objbn, + nobjbn: this.nobjbn, + countryCode: this.countryCode, + date_info: this.date_info, + source: this.source + }); + this.edit = false; displayInfo({ title: this.$gettext("Sections"), message: this.$gettext("Not implemented!")
--- a/client/src/components/Sidebar.vue Thu Jan 17 16:41:10 2019 +0100 +++ b/client/src/components/Sidebar.vue Thu Jan 17 17:29:39 2019 +0100 @@ -52,9 +52,7 @@ fixed-width icon="road" ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Define sections and stretches</span - > + <span class="fix-trans-space" v-translate>Define stretches</span> </a> </div> <div v-if="isWaterwayAdmin">