# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1549556133 -3600
# Node ID ba43b29e869415074f98b59a206c1aa5646b218b
# Parent  e22a354a23121bfd66745aa0c94390f080271346
agm: staging diff POC

diff -r e22a354a2312 -r ba43b29e8694 client/src/assets/application.scss
--- a/client/src/assets/application.scss	Thu Feb 07 16:01:12 2019 +0100
+++ b/client/src/assets/application.scss	Thu Feb 07 17:15:33 2019 +0100
@@ -132,3 +132,7 @@
 .headline {
   font-weight: bold;
 }
+
+.pointer {
+  cursor: pointer;
+}
diff -r e22a354a2312 -r ba43b29e8694 client/src/components/staging/StagingDetail.vue
--- a/client/src/components/staging/StagingDetail.vue	Thu Feb 07 16:01:12 2019 +0100
+++ b/client/src/components/staging/StagingDetail.vue	Thu Feb 07 17:15:33 2019 +0100
@@ -4,6 +4,7 @@
       <div class="mt-auto d-flex flex-row mb-auto small name text-left">
         <a
           v-if="isSoundingResult(data.kind.toUpperCase())"
+          class="text-left pointer"
           @click="zoomTo()"
           href="#"
           >{{ data.summary.bottleneck }}</a
@@ -13,12 +14,22 @@
             data.summary.bottlenecks.length
           }})</span
         >
-        <span v-if="isFairwayDimension(data.kind.toUpperCase())"
+        <a
+          v-if="isApprovedGaugeMeasurement(data.kind.toUpperCase())"
+          class="text-left pointer"
+          ><translate>Approved Gauge Measurements</translate> ({{
+            data.summary.length
+          }})</a
+        >
+        <span
+          class="text-left pointer"
+          v-if="isFairwayDimension(data.kind.toUpperCase())"
           >{{ data.summary["source-organization"] }} (LOS:
           {{ data.summary.los }})</span
         >
         <a
           href="#"
+          class="text-left pointer"
           @click="zoomToStretch(data.summary.stretch)"
           v-if="isStretch(data.kind.toUpperCase())"
           >{{ data.summary.stretch }}</a
@@ -89,6 +100,23 @@
             ></font-awesome-icon>
           </div>
         </div>
+        <div v-if="isApprovedGaugeMeasurement(data.kind.toUpperCase())">
+          <div
+            @click="showAGMDetails = !showAGMDetails"
+            class="mt-auto mb-auto text-info text-left"
+          >
+            <font-awesome-icon
+              v-if="showAGMDetails"
+              icon="angle-up"
+              fixed-width
+            ></font-awesome-icon>
+            <font-awesome-icon
+              v-if="!showAGMDetails"
+              icon="angle-down"
+              fixed-width
+            ></font-awesome-icon>
+          </div>
+        </div>
         <div v-else class="empty"></div>
       </div>
     </div>
@@ -104,23 +132,23 @@
               bottleneck.properties.objnam
             }}</a>
             <div
-              @click="showFull = !showFull"
+              @click="showBottleneckDetails = !showBottleneckDetails"
               class="small mt-auto mb-auto text-info text-left"
             >
               <font-awesome-icon
-                v-if="showFull"
+                v-if="showBottleneckDetails"
                 icon="angle-up"
                 fixed-width
               ></font-awesome-icon>
               <font-awesome-icon
-                v-if="!showFull"
+                v-if="!showBottleneckDetails"
                 icon="angle-down"
                 fixed-width
               ></font-awesome-icon>
             </div>
           </div>
 
-          <div class="d-flex flex-row" v-if="showFull">
+          <div class="d-flex flex-row" v-if="showBottleneckDetails">
             <table>
               <tr
                 v-for="(info, index) in Object.keys(bottleneck.properties)"
@@ -137,6 +165,43 @@
         </div>
       </div>
     </div>
+    <div v-if="showAGMDetails">
+      <div class="pl-3 d-flex flex-row">
+        <span class="condensed header agmcode text-left"
+          ><translate>ISRS Code</translate></span
+        >
+        <span class="condensed header agmdetail text-left"
+          ><translate>Date of measurement</translate></span
+        >
+      </div>
+      <div v-for="(result, index) in data.summary" :key="index">
+        <div class="pl-3 d-flex flex-row">
+          <span class="condensed agmcode text-left">{{
+            result["fk-gauge-id"]
+          }}</span>
+          <span class="condensed agmdetail text-left">{{
+            formatSurveyDate(result["measure-date"])
+          }}</span>
+        </div>
+        <div class="pl-3 d-flex flex-row">
+          <div>
+            <div
+              class="d-flex flex-row condensed pl-3 text-left"
+              v-for="(entry, index) in Object.keys(result.versions[0])"
+              :key="index"
+            >
+              <div class="agmdetailskeys">{{ entry }}</div>
+              <div class="agmdetailsvalues">
+                {{ result.versions[0][entry] }}
+              </div>
+              <div v-if="result.versions.length == 2" class="agmdetailsvalues">
+                {{ result.versions[1][entry] }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -169,7 +234,8 @@
   props: ["data"],
   data() {
     return {
-      showFull: false,
+      showAGMDetails: false,
+      showBottleneckDetails: false,
       show: false,
       loading: false,
       bottlenecks: []
@@ -281,6 +347,9 @@
     isFairwayDimension(kind) {
       return kind === "FD";
     },
+    isApprovedGaugeMeasurement(kind) {
+      return kind === "AGM";
+    },
     isBottleneck(kind) {
       return kind === "BN";
     },
@@ -377,4 +446,20 @@
 .controls {
   width: 60px;
 }
+
+.agmcode {
+  width: 200px;
+}
+
+.agmdate {
+  width: 100px;
+}
+
+.agmdetailskeys {
+  width: 130px;
+}
+
+.agmdetailsvalues {
+  width: 200px;
+}
 </style>