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;
     },