converting old html to vue

web/src/App.vue

@@ -1,28 +1,55 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <HelloWorld/>
+    <div>
+      <table>
+        <LogEntry v-for="(value,key) in json" :key="key" :columns="value"></LogEntry>
+      </table>
+    </div>
+    <br />
+    <br />
+    <a
+      style="font-size:10px"
+      rel="license"
+      href="https://www.gnu.org/licenses/gpl-3.0.en.html"
+    >GNU General Public License v3.0 or later &copy; Timo Hocker</a>
+    <!--
+    <script>
+      fetch('?json')
+        .then(res => res.json())
+        .then(json => {
+          let data = '<table>';
+          for (let row of json) {
+            data += `<tr><td>${row.join('</td><td>')}</td></tr>`;
+          }
+          data += '</table>';
+          document.getElementById('data').innerHTML = data;
+        });
+    </script>
+  </body>
+</html>
+    -->
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
+import LogEntry from "./components/LogEntry.vue";
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  name: "App",
+  components: ["LogEntry"],
+  data: {
+    json: []
+  },
+  mounted() {
+    fetch("?json")
+      .then(res => res.json())
+      .then(json => {
+        this.json = json;
+      });
   }
-}
+};
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+@import url("https://cdn.scode.ovh/bootstrapLight.css");
 </style>

web/src/components/HelloWorld.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

web/src/components/LogEntry.vue

@@ -0,0 +1,15 @@
+<template>
+  <tr>
+    <td v-for="(value,key) in columns" :key="key">{{value}}</td>
+  </tr>
+</template>
+
+<script>
+export default {
+  name: "LogEntry",
+  props: ["columns"]
+};
+</script>
+
+<style>
+</style>