--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Tue Mar 12 17:13:04 2019 +0100
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Wed Mar 13 09:45:29 2019 +0100
@@ -1,5 +1,89 @@
 <template>
-  <div>AGM</div>
+  <div class="diffs">
+    <div v-for="(result, index) in entry.summary" :key="index">
+      <div class="pl-3 d-flex flex-row">
+        <span v-if="result.versions.length == 1" class="agmcode text-left"
+          ><small
+            >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small
+          ></span
+        >
+        <span v-if="result.versions.length == 2" class="agmcode text-left"
+          ><small>{{ result["fk-gauge-id"] }}</small></span
+        >
+        <span class="agmdetail text-left"
+          ><small>{{ result["measure-date"] | dateTime }}</small></span
+        >
+        <div
+          @click="toggleDiff(index)"
+          class="small ml-auto mt-auto mb-auto text-info text-left"
+        >
+          <font-awesome-icon
+            class="pointer"
+            v-if="showDiff == index"
+            icon="angle-up"
+            fixed-width
+          ></font-awesome-icon>
+          <font-awesome-icon
+            class="pointer"
+            v-if="showDiff != index"
+            icon="angle-down"
+            fixed-width
+          ></font-awesome-icon>
+        </div>
+      </div>
+      <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
+        <div>
+          <div class="d-flex flex-row pl-3 text-left">
+            <div class="header border-bottom agmdetailskeys">
+              <small><translate>Value</translate></small>
+            </div>
+            <div
+              v-if="result.versions.length == 2"
+              class="header border-bottom agmdetailsvalues"
+            >
+              <small><translate>Old</translate></small>
+            </div>
+            <div class="header border-bottom agmdetailsvalues">
+              <small><translate>New</translate></small>
+            </div>
+          </div>
+          <div
+            class="d-flex flex-row pl-3 text-left"
+            v-for="(entry, index) in Object.keys(result.versions[0])"
+            :key="index"
+          >
+            <div
+              v-if="
+                result.versions.length == 1 ||
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailskeys"
+            >
+              <small>{{ entry }}</small>
+            </div>
+            <div
+              v-if="
+                result.versions.length == 1 ||
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailsvalues"
+            >
+              <small>{{ result.versions[0][entry] }}</small>
+            </div>
+            <div
+              v-if="
+                result.versions.length == 2 &&
+                  result.versions[0][entry] != result.versions[1][entry]
+              "
+              class="agmdetailsvalues"
+            >
+              <small>{{ result.versions[1][entry] }}</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -16,9 +100,33 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+
+const NODIFF = -1;
+
 export default {
-  name: "agmdetails"
+  name: "agmdetails",
+  props: ["entry"],
+  data() {
+    return {
+      showDiff: NODIFF
+    };
+  },
+  methods: {
+    toggleDiff(number) {
+      if (this.showDiff !== number || this.showDiff == NODIFF) {
+        this.showDiff = number;
+      } else {
+        this.showDiff = NODIFF;
+      }
+    }
+  }
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.diffs {
+  width: 615px;
+  max-height: 20vh;
+  overflow-y: auto;
+}
+</style>