converting old html to vue
This commit is contained in:
Timo Hocker
parent
b7483e9141
commit
41a6bf7048
140
index.js
140
index.js
@ -1,6 +1,8 @@
|
|||||||
const http = require('http');
|
// const http = require('http');
|
||||||
const url = require('url');
|
// const url = require('url');
|
||||||
|
const path = require('path');
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
const express = require('express');
|
||||||
|
|
||||||
const config = JSON.parse(fs.readFileSync('config.json', 'utf-8'));
|
const config = JSON.parse(fs.readFileSync('config.json', 'utf-8'));
|
||||||
|
|
||||||
@ -12,51 +14,99 @@ const pg = require('postgresupdater')(
|
|||||||
config.database.database
|
config.database.database
|
||||||
);
|
);
|
||||||
|
|
||||||
const server = http.createServer(async (req, res) => {
|
const app = express();
|
||||||
await pg.waitForInit();
|
|
||||||
const queryUrl = url.parse(req.url, true);
|
|
||||||
|
|
||||||
let body;
|
app.use(express.json());
|
||||||
req.on('data', data => {
|
app.use(express.static(path.join(__dirname, 'html')));
|
||||||
body += data;
|
|
||||||
});
|
|
||||||
|
|
||||||
req.on('end', async () => {
|
app.post('/', (req, res, next) => {
|
||||||
if (!body && !queryUrl.search) {
|
console.log('post');
|
||||||
fs.readFile('view.html', (err, file) => {
|
if (req.query.json) {
|
||||||
res.writeHead(200, { 'content-type': 'text/html' });
|
// json mod requests
|
||||||
res.end(file);
|
} else {
|
||||||
});
|
console.log(req.body);
|
||||||
return;
|
pg.query(
|
||||||
} else if (queryUrl.search == '?json') {
|
`INSERT INTO "Log" ("App", "Type", "Client", "Message", "Misc", "Stack") Values($1, $2, $3, $4, $5, $6)`,
|
||||||
const data = await pg.query(
|
[
|
||||||
`SELECT "Timestamp", "Type", "App", "Client", "Message", "Misc", "Stack" FROM "LogView"`
|
req.body.app,
|
||||||
);
|
req.body.type,
|
||||||
const rows = [];
|
req.body.client,
|
||||||
for (let row of data.rows) {
|
req.body.message,
|
||||||
rows.push(Object.values(row));
|
req.body.misc,
|
||||||
}
|
req.body.stack
|
||||||
res.writeHead(200, { 'content-type': 'application/json' });
|
]
|
||||||
res.end(JSON.stringify(rows));
|
);
|
||||||
return;
|
}
|
||||||
}
|
res.status(201).end();
|
||||||
|
next();
|
||||||
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);
|
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"`
|
||||||
|
);
|
||||||
|
const rows = [];
|
||||||
|
for (let row of data.rows) {
|
||||||
|
rows.push(Object.values(row));
|
||||||
|
}
|
||||||
|
res
|
||||||
|
.status(200)
|
||||||
|
.type('application/json')
|
||||||
|
.end(JSON.stringify(rows));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
console.log('server listening on', config.port);
|
||||||
|
|||||||
@ -14,7 +14,6 @@
|
|||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"postgresupdater": "^1.0.0",
|
"postgresupdater": "^1.0.0"
|
||||||
"serve-static": "^1.14.1"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
39
view.html
39
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 © 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>
|
|
||||||
@ -1,28 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<img src="./assets/logo.png">
|
<div>
|
||||||
<HelloWorld/>
|
<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 © 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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from './components/HelloWorld'
|
import LogEntry from "./components/LogEntry.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: "App",
|
||||||
components: {
|
components: ["LogEntry"],
|
||||||
HelloWorld
|
data: {
|
||||||
|
json: []
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
fetch("?json")
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(json => {
|
||||||
|
this.json = json;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
@import url("https://cdn.scode.ovh/bootstrapLight.css");
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -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>
|
|
||||||
15
web/src/components/LogEntry.vue
Normal file
15
web/src/components/LogEntry.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user