changeset 1405:522488564de0

import soundingresults: layout adjusted and epsg selection added
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 28 Nov 2018 16:47:36 +0100
parents d4939311a99a
children 9d2806002f50
files client/src/components/admin/Importqueue.vue client/src/components/map/contextbox/ImportSoundingresults.vue
diffstat 2 files changed, 95 insertions(+), 71 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/admin/Importqueue.vue	Wed Nov 28 16:27:44 2018 +0100
+++ b/client/src/components/admin/Importqueue.vue	Wed Nov 28 16:47:36 2018 +0100
@@ -87,6 +87,9 @@
       accepted: false
     };
   },
+  mounted() {
+    this.loadQueue();
+  },
   methods: {
     setFilter(name) {
       this[name] = !this[name];
@@ -113,9 +116,6 @@
         });
       });
     },
-    mounted() {
-      this.loadQueue();
-    },
     refresh() {
       this.loadQueue();
     }
@@ -149,7 +149,7 @@
           const result = filterCriteria.map(selectedState => {
             return y.state === selectedState;
           });
-          return result.every(x => x);
+          return result.some(x => x);
         });
       return filtered;
     },
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue	Wed Nov 28 16:27:44 2018 +0100
+++ b/client/src/components/map/contextbox/ImportSoundingresults.vue	Wed Nov 28 16:47:36 2018 +0100
@@ -1,54 +1,65 @@
 <template>
   <div>
     <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon><translate>Import
-      Soundingresults</translate>
+      <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>Import
+      Soundingresults
     </h6>
     <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
-      <div class="d-flex flex-row input-group mb-4">
-        <div class="offset-r">
-          <label for="bottleneck" class="label-text" id="bottlenecklabel"><translate>Bottleneck</translate></label>
+      <div class="d-flex flex-column">
+        <div class="d-flex flex-row">
+          <div class="mt-1 text-left w-50 ml-2 mr-4">
+            <small class="text-muted">Bottleneck</small>
+            <select v-model="bottleneck" class="custom-select">
+              <option v-for="bottleneck in availableBottlenecks" :key="bottleneck">{{bottleneck}}</option>
+            </select>
+            <span class="text-danger">
+              <small v-if="!bottleneck">Please select a bottleneck</small>
+            </span>
+          </div>
+          <div class="mt-1 text-left w-50 mr-2">
+            <small class="text-muted">Projection</small>
+            <select v-model="projection" class="custom-select" id="depthreference">
+              <option
+                v-for="projection in this.$options.projections"
+                :key="projection"
+              >{{ projection }}</option>
+            </select>
+            <span class="text-left text-danger">
+              <small v-if="!projection">Please enter a projection</small>
+            </span>
+          </div>
         </div>
-        <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"><translate>Please select a bottleneck</translate></small>
-          </span>
+        <div class="d-flex flex-row">
+          <div class="mt-1 text-left w-50 ml-2 mr-4">
+            <small class="text-muted">Depthreference</small>
+            <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 class="mt-1 text-left w-50 mr-2">
+            <small class="text-muted">Date</small>
+            <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>
       </div>
-      <div class="d-flex flex-row input-group mb-4">
-        <div class="offset-r">
-          <label class="label-text" for="importdate" id="importdatelabel"><translate>Date</translate></label>
-        </div>
-        <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"><translate> Please enter a date</translate></small>
-          </span>
-        </div>
-        <div class="offset-r">
-          <label class="label-text w-100 depthreferencelabel" for="depthreference"><translate>Depthreference</translate></label>
-        </div>
-        <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"><translate>Please enter a reference</translate></small>
-          </span>
-        </div>
-      </div>
-      <div class="text-left">
+      <div class="ml-2 mt-2 text-left">
         <small v-for="(message, index) in messages" :key="index">
           {{
           message
@@ -79,13 +90,13 @@
           download="meta.json"
           :href="dataLink"
           class="btn btn-outline-info pull-left"
-        ><translate>Download</translate> Meta.json</a>
+        >Download Meta.json</a>
         <button
           v-if="editState"
           @click="deleteTempData"
           class="btn btn-danger"
           type="button"
-        ><translate>Cancel Upload</translate></button>
+        >Cancel Upload</button>
         <button
           :disabled="disableUploadButton"
           @click="submit"
@@ -126,6 +137,7 @@
       importState: IMPORTSTATE.UPLOAD,
       depthReference: "",
       bottleneck: "",
+      projection: "",
       importDate: "",
       uploadLabel: defaultLabel,
       uploadFile: null,
@@ -139,6 +151,7 @@
       this.importState = IMPORTSTATE.UPLOAD;
       this.depthReference = "";
       this.bottleneck = "";
+      this.projection = "";
       this.importDate = "";
       this.uploadLabel = defaultLabel;
       this.uploadFile = null;
@@ -188,11 +201,12 @@
       })
         .then(response => {
           if (response.data.meta) {
-            const { bottleneck, date } = response.data.meta;
+            const { bottleneck, date, epsg } = response.data.meta;
             const depthReference = response.data.meta["depth-reference"];
             this.bottleneck = bottleneck;
             this.depthReference = depthReference;
             this.importDate = new Date(date).toISOString().split("T")[0];
+            this.projection = epsg;
           }
           this.importState = IMPORTSTATE.EDIT;
           this.token = response.data.token;
@@ -215,6 +229,7 @@
         formData.append("date", this.importDate.split("T")[0]);
       if (this.depthReference)
         formData.append("depth-reference", this.depthReference);
+      if (this.projection) formData.append("", this.projection);
 
       HTTP.post("/imports/soundingresult", formData, {
         headers: {
@@ -251,7 +266,12 @@
     ...mapState("bottlenecks", ["bottlenecks"]),
     disableUploadButton() {
       if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload;
-      if (!this.bottleneck || !this.importDate || !this.depthReference)
+      if (
+        !this.bottleneck ||
+        !this.importDate ||
+        !this.depthReference ||
+        !this.projection
+      )
         return true;
       return this.disableUpload;
     },
@@ -277,33 +297,37 @@
       );
     }
   },
+  projections: ["", "4326"],
   depthReferenceOptions: [
     "",
-    "NAP",
-    "KP",
-    "FZP",
-    "ADR",
-    "TAW",
-    "PUL",
-    "NGM",
-    "ETRS",
-    "POT",
-    "LDC",
-    "HDC",
-    "ZPG",
-    "GLW",
-    "HSW",
-    "LNW",
-    "HNW",
-    "IGN",
-    "WGS",
-    "RN",
-    "HBO"
+    // "NAP",
+    // "KP",
+    // "FZP",
+    // "ADR",
+    // "TAW",
+    // "PUL",
+    // "NGM",
+    // "ETRS",
+    // "POT",
+    // "LDC",
+    // "HDC",
+    // "ZPG",
+    // "GLW",
+    // "HSW",
+    // "LNW",
+    // "HNW",
+    // "IGN",
+    // "WGS",
+    "RN" //,
+    // "HBO"
   ]
 };
 </script>
 
 <style lang="sass" scoped>
+.projectionLabel
+  margin-left: $small-offset
+
 .depthreferencelabel
   margin-left: $small-offset