Mercurial > gemma
changeset 1357:f3bcce4e6f22
import soundingresults: lists bottlenecks and awaits until user makes inputs
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 26 Nov 2018 16:15:10 +0100 |
parents | ce24990b3d5c |
children | ac6aa40005b4 |
files | client/src/components/map/contextbox/ImportSoundingresults.vue |
diffstat | 1 files changed, 44 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 16:12:09 2018 +0100 +++ b/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 16:15:10 2018 +0100 @@ -9,35 +9,44 @@ <div class="offset-r"> <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> </div> - <input - id="bottleneck" - type="text" - class="form-control" - placeholder="Name of Bottleneck" - aria-label="bottleneck" - aria-describedby="bottlenecklabel" - v-model="bottleneck" - > + <div class="d-flex flex-column"> + <select v-model="bottleneck" class="custom-select"> + <option v-for="bottleneck in availableBottlenecks" :key="bottleneck">{{bottleneck}}</option> + </select> + <span class="text-left text-danger"> + <small v-if="!bottleneck">Please select a bottleneck</small> + </span> + </div> </div> <div class="d-flex flex-row input-group mb-4"> <div class="offset-r"> <label class="label-text" for="importdate" id="importdatelabel">Date</label> </div> - <input - id="importdate" - type="date" - class="form-control" - placeholder="Date of import" - aria-label="bottleneck" - aria-describedby="bottlenecklabel" - v-model="importDate" - > + <div class="d-flex flex-column"> + <input + id="importdate" + type="date" + class="form-control" + placeholder="Date of import" + aria-label="bottleneck" + aria-describedby="bottlenecklabel" + v-model="importDate" + > + <span class="text-left text-danger"> + <small v-if="!importDate">Please enter a date</small> + </span> + </div> <div class="offset-r"> <label class="label-text w-100 depthreferencelabel" for="depthreference">Depthreference</label> </div> - <select v-model="depthReference" class="custom-select" id="depthreference"> - <option v-for="option in this.$options.depthReferenceOptions" :key="option">{{ option }}</option> - </select> + <div class="d-flex flex-column"> + <select v-model="depthReference" class="custom-select" id="depthreference"> + <option v-for="option in this.$options.depthReferenceOptions" :key="option">{{ option }}</option> + </select> + <span class="text-left text-danger"> + <small v-if="!depthReference">Please enter a reference</small> + </span> + </div> </div> <div class="text-left"> <small v-for="(message, index) in messages" :key="index"> @@ -78,7 +87,7 @@ type="button" >Cancel Upload</button> <button - :disabled="disableUpload" + :disabled="disableUploadButton" @click="submit" class="btn btn-info" type="button" @@ -114,7 +123,6 @@ name: "imports", data() { return { - availableBottlenecks: "", importState: IMPORTSTATE.UPLOAD, depthReference: "", bottleneck: "", @@ -230,6 +238,9 @@ }); } }, + mounted() { + this.$store.dispatch("bottlenecks/loadBottlenecks"); + }, watch: { showContextBox() { if (!this.showContextBox && this.token) this.deleteTempData(); @@ -237,6 +248,16 @@ }, computed: { ...mapState("application", ["showContextBox"]), + ...mapState("bottlenecks", ["bottlenecks"]), + disableUploadButton() { + if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload; + if (!this.bottleneck || !this.importDate || !this.depthReference) + return true; + return this.disableUpload; + }, + availableBottlenecks() { + return this.bottlenecks.map(x => x.properties.name); + }, editState() { return this.importState === IMPORTSTATE.EDIT; },