# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1561044069 -7200
# Node ID dbdef91a3ff3682bb3ee137b3819226c58319b95
# Parent  e1972355fcfb3536b3caed2850b0a87df618697f
first implementation

diff -r e1972355fcfb -r dbdef91a3ff3 client/package.json
--- a/client/package.json	Thu Jun 20 13:47:54 2019 +0200
+++ b/client/package.json	Thu Jun 20 17:21:09 2019 +0200
@@ -54,6 +54,7 @@
     "vue-js-toggle-button": "^1.3.0",
     "vue-router": "^3.0.2",
     "vue-snotify": "^3.2.1",
+    "vue-virtual-scroll-list": "^1.3.9",
     "vuex": "^3.0.1",
     "webpack-cli": "^3.1.2"
   },
diff -r e1972355fcfb -r dbdef91a3ff3 client/src/components/importoverview/AdditionalLog.vue
--- a/client/src/components/importoverview/AdditionalLog.vue	Thu Jun 20 13:47:54 2019 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Thu Jun 20 17:21:09 2019 +0200
@@ -5,7 +5,15 @@
       { split: showAdditional }
     ]"
   >
-    <div
+    <virtual-list :size="20" :remain="8">
+      <Item
+        class="d-flex flex-row px-2 border-top"
+        v-for="item in details.entries"
+        :key="item.time"
+        :line="item"
+      />
+    </virtual-list>
+    <!-- <div
       class="d-flex flex-row px-2 border-top"
       v-for="(line, index) in details.entries"
       :key="index"
@@ -43,7 +51,7 @@
         ]"
         >{{ line.message }}</span
       >
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -59,16 +67,6 @@
 
     &:hover
       background-color: #fcfcfc
-
-  .kind
-    width: 9%
-
-  .time
-    width: 26%
-
-  .message
-    width: 65%
-    word-wrap: break-word
 </style>
 
 <script>
@@ -86,9 +84,14 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import { mapState } from "vuex";
+import virtualList from "vue-virtual-scroll-list";
 
 export default {
   name: "additionallogs",
+  components: {
+    "virtual-list": virtualList,
+    Item: () => import("./LogItem.vue")
+  },
   computed: {
     ...mapState("imports", ["showAdditional", "details"])
   }
diff -r e1972355fcfb -r dbdef91a3ff3 client/src/components/importoverview/LogItem.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/LogItem.vue	Thu Jun 20 17:21:09 2019 +0200
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <span
+      :class="[
+        'kind',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.kind.toUpperCase() }}</span
+    >
+    <span
+      :class="[
+        'time',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.time | dateTime }}</span
+    >
+    <span
+      :class="[
+        'message',
+        {
+          'text-danger': /error/.test(line.kind),
+          'text-warning': /warn/.test(line.kind),
+          'font-weight-bold': /warn|error/.test(line.kind)
+        }
+      ]"
+      >{{ line.message }}</span
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Item",
+  props: ["height", "line", "index"]
+};
+</script>
+
+<style lang="sass" scoped>
+  .kind
+    width: 9%
+
+  .time
+    width: 26%
+
+  .message
+    width: 65%
+    word-wrap: break-word
+</style>
diff -r e1972355fcfb -r dbdef91a3ff3 client/yarn.lock
--- a/client/yarn.lock	Thu Jun 20 13:47:54 2019 +0200
+++ b/client/yarn.lock	Thu Jun 20 17:21:09 2019 +0200
@@ -11587,6 +11587,11 @@
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroll-list@^1.3.9:
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.3.9.tgz#ba3ce6425374fb323ea83ab33daa2727117808ed"
+  integrity sha512-K979Bk0Fmfxrjb9KIMhJmkIDrKLR/Y+N4B5ivJzzYoTRPGyz/JEe7jLn3vwzYt3YbU6a0KV7c0rf2DP7GGZh3g==
+
 vue@^2.5.16:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"