--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/AGMLogItem.vue	Thu Jun 27 15:11:02 2019 +0200
@@ -0,0 +1,110 @@
+<template>
+  <div class="d-flex flex-column">
+    <div class="px-2 d-flex justify-content-between">
+      <div class="d-flex">
+        <div @click="show = !show" class="my-auto text-left">
+          <UISpinnerButton
+            :state="show"
+            :icons="['angle-right', 'angle-down']"
+            classes="text-info"
+          />
+        </div>
+        <div>
+          {{ line["fk-gauge-id"] }}
+          <sup v-if="isNew(line)" class="text-success">
+            (<translate>New</translate>)
+          </sup>
+        </div>
+      </div>
+      <div>{{ line["measure-date"] | dateTime }}</div>
+    </div>
+    <div v-if="show" class="compare-table">
+      <div class="row no-gutters px-4 text-left font-weight-bold">
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          <translate>Value</translate>
+        </div>
+        <div v-if="isOld(line)" class="col-4">
+          <translate>Old</translate>
+        </div>
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          <translate>New</translate>
+        </div>
+      </div>
+      <div
+        class="row no-gutters px-4 text-left"
+        v-for="(entry, index) in Object.keys(line.versions[0])"
+        :key="index"
+        v-if="isNew(line) || isDifferent(line, entry)"
+      >
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          {{ entry }}
+        </div>
+        <div :class="isNew(line) ? 'col-6' : 'col-4'">
+          {{ line.versions[0][entry] }}
+        </div>
+        <div
+          v-if="isOld(line) && isDifferent(line, entry)"
+          :class="isNew(line) ? 'col-6' : 'col-4'"
+        >
+          {{ line.versions[1][entry] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["line", "index", "showDiff"],
+  data() {
+    return {
+      show: this.index == this.showDiff
+    };
+  },
+  methods: {
+    isNew(result) {
+      return result && result.versions && result.versions.length === 1;
+    },
+    isOld(result) {
+      return !this.isNew(result);
+    },
+    isDifferent(result, entry) {
+      return (
+        this.isOld(result) &&
+        result.versions[0][entry] != result.versions[1][entry]
+      );
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.diffs
+  width: 100%
+  overflow-y: auto
+  > div
+    border-top: dashed 1px #dee2e6
+    &:first-child
+      border-top: none
+    .compare-table
+      position: relative
+      overflow: hidden
+      &::after
+        content: ''
+        position: absolute
+        top: 0
+        right: -5px
+        bottom: 0
+        left: -5px
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
+      > div
+        font-size: 0.7rem
+        &:nth-child(odd)
+          background-color: #f8f9fa
+
+.split
+  max-height: 35vh
+
+.full
+  max-height: 70vh
+</style>