# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1547568171 -3600
# Node ID b16a6db0008f2aa46e0d9863c78500a31ffba8ef
# Parent  77582da3adb081ea7146e27522d3b57f429d0989
feat: define sections and stretches with targetting option

diff -r 77582da3adb0 -r b16a6db0008f client/src/components/ImportStretches.vue
--- 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>