converting old html to vue

index.js

@@ -1,6 +1,8 @@
-const http = require('http');
-const url = require('url');
+// const http = require('http');
+// const url = require('url');
+const path = require('path');
 const fs = require('fs');
+const express = require('express');
 
 const config = JSON.parse(fs.readFileSync('config.json', 'utf-8'));
 
@@ -12,23 +14,36 @@ const pg = require('postgresupdater')(
   config.database.database
 );
 
-const server = http.createServer(async (req, res) => {
-  await pg.waitForInit();
-  const queryUrl = url.parse(req.url, true);
+const app = express();
 
-  let body;
-  req.on('data', data => {
-    body += data;
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'html')));
+
+app.post('/', (req, res, next) => {
+  console.log('post');
+  if (req.query.json) {
+    // json mod requests
+  } else {
+    console.log(req.body);
+    pg.query(
+      `INSERT INTO "Log" ("App", "Type", "Client", "Message", "Misc", "Stack") Values($1, $2, $3, $4, $5, $6)`,
+      [
+        req.body.app,
+        req.body.type,
+        req.body.client,
+        req.body.message,
+        req.body.misc,
+        req.body.stack
+      ]
+    );
+  }
+  res.status(201).end();
+  next();
 });
 
-  req.on('end', async () => {
-    if (!body && !queryUrl.search) {
-      fs.readFile('view.html', (err, file) => {
-        res.writeHead(200, { 'content-type': 'text/html' });
-        res.end(file);
-      });
-      return;
-    } else if (queryUrl.search == '?json') {
+app.get('/', async (req, res, next) => {
+  console.log('get');
+  if (req.query.json) {
     const data = await pg.query(
       `SELECT "Timestamp", "Type", "App", "Client", "Message", "Misc", "Stack" FROM "LogView"`
     );
@@ -36,27 +51,62 @@ const server = http.createServer(async (req, res) => {
     for (let row of data.rows) {
       rows.push(Object.values(row));
     }
-      res.writeHead(200, { 'content-type': 'application/json' });
-      res.end(JSON.stringify(rows));
+    res
+      .status(200)
+      .type('application/json')
+      .end(JSON.stringify(rows));
     return;
   }
-
-    try {
-      body = JSON.parse(/(?:undefined)*(.*)/.exec(body)[1]);
-      console.log(body.app, body.client, body.message, body.misc, body.stack);
-      pg.query(
-        `INSERT INTO "Log" ("App", "Type", "Client", "Message", "Misc", "Stack") Values($1, $2, $3, $4, $5, $6)`,
-        [body.app, body.type, body.client, body.message, body.misc, body.stack]
-      );
-    } catch (e) {
-      console.error(e);
-      if (body) console.error(body);
-    }
-
-    res.writeHead(201);
-    res.end();
-  });
+  next();
 });
 
-server.listen(config.port);
+app.listen(config.port);
+
+// const server = http.createServer(async (req, res) => {
+//   await pg.waitForInit();
+//   const queryUrl = url.parse(req.url, true);
+
+//   let body;
+//   req.on('data', data => {
+//     body += data;
+//   });
+
+//   req.on('end', async () => {
+//     if (!body && !queryUrl.search) {
+//       fs.readFile('view.html', (err, file) => {
+//         res.writeHead(200, { 'content-type': 'text/html' });
+//         res.end(file);
+//       });
+//       return;
+//     } else if (queryUrl.search == '?json') {
+//       const data = await pg.query(
+//         `SELECT "Timestamp", "Type", "App", "Client", "Message", "Misc", "Stack" FROM "LogView"`
+//       );
+//       const rows = [];
+//       for (let row of data.rows) {
+//         rows.push(Object.values(row));
+//       }
+//       res.writeHead(200, { 'content-type': 'application/json' });
+//       res.end(JSON.stringify(rows));
+//       return;
+//     }
+
+//     try {
+//       body = JSON.parse(/(?:undefined)*(.*)/.exec(body)[1]);
+//       console.log(body.app, body.client, body.message, body.misc, body.stack);
+//       pg.query(
+//         `INSERT INTO "Log" ("App", "Type", "Client", "Message", "Misc", "Stack") Values($1, $2, $3, $4, $5, $6)`,
+//         [body.app, body.type, body.client, body.message, body.misc, body.stack]
+//       );
+//     } catch (e) {
+//       console.error(e);
+//       if (body) console.error(body);
+//     }
+
+//     res.writeHead(201);
+//     res.end();
+//   });
+// });
+
+// server.listen(config.port);
 console.log('server listening on', config.port);

package.json

@@ -14,7 +14,6 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "express": "^4.17.1",
-    "postgresupdater": "^1.0.0",
-    "serve-static": "^1.14.1"
+    "postgresupdater": "^1.0.0"
   }
 }

view.html

@@ -1,39 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" href="https://cdn.scode.ovh/bootstrapLight.css" />
-    <style>
-      table {
-        border-collapse: collapse;
-      }
-      table,
-      th,
-      td {
-        border: 1px solid #085;
-        padding: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="data"></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>

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>