# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1552406929 -3600
# Node ID 11fd7ee37f10c4ee8e2e7e8d8347ae49c5a09f4f
# Parent  8d767359fddb33c9a297ab1934be047a99f50799
overview2: added stretch zoom functionality

diff -r 8d767359fddb -r 11fd7ee37f10 client/src/assets/application.scss
--- a/client/src/assets/application.scss	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/assets/application.scss	Tue Mar 12 17:08:49 2019 +0100
@@ -179,3 +179,7 @@
   padding: 0.25rem 0.1rem;
   font-size: 80%;
 }
+
+.empty {
+  margin-right: 1.25rem;
+}
diff -r 8d767359fddb -r 11fd7ee37f10 client/src/components/importoverview/AdditionalDetail.vue
--- a/client/src/components/importoverview/AdditionalDetail.vue	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/components/importoverview/AdditionalDetail.vue	Tue Mar 12 17:08:49 2019 +0100
@@ -1,12 +1,18 @@
 <template>
   <div>
-    <FairwayDimensionDetail v-if="isFairwayDimension"></FairwayDimensionDetail>
+    <FairwayDimensionDetail
+      :entry="entry"
+      v-if="isFairwayDimension"
+    ></FairwayDimensionDetail>
     <ApprovedGaugeMeasurementDetail
+      :entry="entry"
       v-if="isApprovedGaugeMeasurement"
     ></ApprovedGaugeMeasurementDetail>
-    <BottleneckDetail v-if="isBottleneck"></BottleneckDetail>
-    <StretchDetail v-if="isStretch"></StretchDetail>
-    <SoundingResultDetail v-if="isSoundingResult"></SoundingResultDetail>
+    <BottleneckDetail :entry="entry" v-if="isBottleneck"></BottleneckDetail>
+    <SoundingResultDetail
+      :entry="entry"
+      v-if="isSoundingResult"
+    ></SoundingResultDetail>
   </div>
 </template>
 
@@ -31,7 +37,6 @@
   components: {
     SoundingResultDetail: () => import("./SoundingResultDetail.vue"),
     BottleneckDetail: () => import("./BottleneckDetail.vue"),
-    StretchDetail: () => import("./StretchDetails.vue"),
     ApprovedGaugeMeasurementDetail: () =>
       import("./ApprovedGaugeMeasurementDetail.vue"),
     FairwayDimensionDetail: () => import("./FairwayDimension.vue")
diff -r 8d767359fddb -r 11fd7ee37f10 client/src/components/importoverview/LogDetail.vue
--- a/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 17:08:49 2019 +0100
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex fex-row">
-      <div v-if="entry.state == 'pending'">
+      <div v-if="hasAdditionalInfo">
         <font-awesome-icon
           v-if="entry.id === showAdditional"
           @click="toggleAdditionalInfo"
@@ -17,7 +17,11 @@
           fixed-width
         ></font-awesome-icon>
         <span class="text-info"><translate>Additional Info</translate></span>
+        <span class="text-info" v-if="isApprovedGaugeMeasurement">
+          ({{ entry.summary.length }})</span
+        >
       </div>
+      <StretchDetail v-if="isStretch" :entry="entry"></StretchDetail>
     </div>
     <AdditionalDetail
       v-if="entry.id === showAdditional"
@@ -71,6 +75,7 @@
   name: "logdetail",
   props: ["entry"],
   components: {
+    StretchDetail: () => import("./StretchDetails.vue"),
     AdditionalDetail: () => import("./AdditionalDetail.vue"),
     AdditionalLog: () => import("./AdditionalLog.vue")
   },
@@ -91,7 +96,28 @@
     }
   },
   computed: {
-    ...mapState("imports", ["showAdditional", "showLogs"])
+    ...mapState("imports", ["showAdditional", "showLogs"]),
+    kind() {
+      return this.entry.kind.toUpperCase();
+    },
+    hasAdditionalInfo() {
+      return this.entry.state == "pending" && this.isApprovedGaugeMeasurement;
+    },
+    isFairwayDimension() {
+      return this.kind === "FD";
+    },
+    isApprovedGaugeMeasurement() {
+      return this.kind === "AGM";
+    },
+    isBottleneck() {
+      return this.kind === "BN" || this.kind === "UBN";
+    },
+    isStretch() {
+      return this.kind === "ST";
+    },
+    isSoundingResult() {
+      return this.kind === "SR";
+    }
   }
 };
 </script>
diff -r 8d767359fddb -r 11fd7ee37f10 client/src/components/importoverview/LogEntry.vue
--- a/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 17:08:49 2019 +0100
@@ -15,6 +15,10 @@
         icon="angle-right"
         fixed-width
       ></font-awesome-icon>
+      <div class="id">
+        <span v-if="entry.id > 9">{{ entry.id }}</span>
+        <span v-else>&nbsp; {{ entry.id }}</span>
+      </div>
       <div class="kind">{{ entry.kind.toUpperCase() }}</div>
       <div class="enqueued">{{ entry.enqueued | surveyDate }}</div>
       <div class="user">{{ entry.user }}</div>
@@ -135,6 +139,9 @@
 .logentry {
 }
 
+.id {
+  width: 10%;
+}
 .kind {
   width: 10%;
 }
diff -r 8d767359fddb -r 11fd7ee37f10 client/src/components/importoverview/StretchDetails.vue
--- a/client/src/components/importoverview/StretchDetails.vue	Tue Mar 12 16:16:43 2019 +0100
+++ b/client/src/components/importoverview/StretchDetails.vue	Tue Mar 12 17:08:49 2019 +0100
@@ -1,5 +1,10 @@
 <template>
-  <div>Stretches Detail</div>
+  <div>
+    <span class="empty">&nbsp;</span>
+    <a @click="zoomToStretch()" class="text-info pointer">{{
+      entry.summary.stretch
+    }}</a>
+  </div>
 </template>
 
 <script>
@@ -16,8 +21,40 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+import { displayError } from "@/lib/errors.js";
+import { LAYERS } from "@/store/map.js";
+
 export default {
-  name: "stretchdetails"
+  name: "stretchdetails",
+  props: ["entry"],
+  methods: {
+    moveToExtent(feature) {
+      this.$store.commit("map/moveToExtent", {
+        feature: feature,
+        zoom: 17,
+        preventZoomOut: true
+      });
+    },
+    zoomToStretch() {
+      const name = this.entry.summary.stretch;
+      this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
+      this.$store
+        .dispatch("imports/loadStretch", name)
+        .then(response => {
+          if (response.data.features.length < 1)
+            throw new Error("no feaures found for: " + name);
+          this.moveToExtent(response.data.features[0]);
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  }
 };
 </script>