# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1543421392 -3600
# Node ID 9d2806002f50d578aada8bd068d81566edec10e1
# Parent  522488564de06db4ba4ee56a93685cc02bcbcea2
staging: activate according soundingresult

diff -r 522488564de0 -r 9d2806002f50 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Wed Nov 28 16:47:36 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Wed Nov 28 17:09:52 2018 +0100
@@ -1,7 +1,8 @@
 <template>
   <div class="w-90">
     <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon><translate>Staging Area</translate>
+      <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon>
+      <translate>Staging Area</translate>
     </h6>
     <table class="table mb-0">
       <thead>
@@ -18,10 +19,7 @@
       <tbody v-if="filteredData.length">
         <tr v-for="data in filteredData" :key="data.id">
           <td>
-            <a
-              @click="zoomTo([data.summary.lat, data.summary.lon])"
-              href="#"
-            >{{ data.summary.bottleneck }}</a>
+            <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck }}</a>
           </td>
           <td>{{ data.kind.toUpperCase() }}</td>
           <td>{{ data.summary.date }}</td>
@@ -47,12 +45,16 @@
       </tbody>
       <tbody v-else>
         <tr>
-          <td class="text-center" colspan="6"><translate>No results.</translate></td>
+          <td class="text-center" colspan="6">
+            <translate>No results.</translate>
+          </td>
         </tr>
       </tbody>
     </table>
     <div class="p-3" v-if="filteredData.length">
-      <button @click="confirmReview" class="btn btn-info"><translate>Confirm</translate></button>
+      <button @click="confirmReview" class="btn btn-info">
+        <translate>Confirm</translate>
+      </button>
     </div>
   </div>
 </template>
@@ -123,13 +125,19 @@
     isApproved(item) {
       return item.status === STATES.APPROVED;
     },
-    zoomTo(coordinates) {
-      if (!coordinates) return;
+    zoomTo(id) {
+      if (!id) return;
+      const soundingResult = this.filteredData.filter(x => x.id == id)[0];
+      const { lat, lon, bottleneck, date } = soundingResult.summary;
+      const coordinates = [lat, lon];
+
       this.$store.commit("map/moveMap", {
         coordinates: coordinates,
         zoom: 17,
         preventZoomOut: true
       });
+      this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck);
+      this.$store.commit("bottlenecks/selectedSurvey", date);
     },
     toggleApproval(id, newStatus) {
       this.$store.commit("imports/toggleApproval", {