jwetzell/aas-js
1
0
Fork 0
mirror of https://github.com/jwetzell/aas-js.git synced 2026-09-10 22:49:32 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add a demo webui

Browse Source
This commit is contained in:
Joel Wetzell
2023-11-24 13:54:36 -06:00
parent ca5b37a54d
commit b13e906f44
8 changed files with 1254 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1157 -17
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -1
View File
@@ -18,6 +18,7 @@
}, },
"workspaces": [ "workspaces": [
"packages/lib", "packages/lib",
"packages/cli" "packages/cli",
"packages/webui"
] ]
} }
packages/webui/.gitignore
+1
View File
@@ -0,0 +1 @@
html/assets/css/tailwind.css
packages/webui/html/index.html
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="assets/css/tailwind.css" rel="stylesheet" />
<title>AAS Console</title>
</head>
<body>
<div class="absolute top-2 left-2 rounded-full hidden bg-green-300 w-3 h-3" id="status"></div>
<div class="hidden w-full justify-around" id="scoreboard">
<div class="flex flex-col items-center">
<div>Home</div>
<div id="home_score"></div>
</div>
<div id="clock"></div>
<div class="flex flex-col items-center">
<div>Guest</div>
<div id="guest_score"></div>
</div>
</div>
<div id="initializing" class="w-screen h-screen flex justify-center items-center">
<div>initializing</div>
</div>
<script>
const socket = new WebSocket(`ws://localhost:8080`);
let statusTimeout;
socket.onmessage = (message) => {
const msgObj = JSON.parse(message.data);
console.log(msgObj);
if (msgObj.eventName === 'update') {
document.getElementById('status').classList.remove('hidden');
if (statusTimeout) {
console.log('cancelling existing timeout');
clearTimeout(statusTimeout);
}
statusTimeout = setTimeout(() => {
document.getElementById('status').classList.add('hidden');
}, 100);
document.getElementById('scoreboard').classList.remove('hidden');
document.getElementById('scoreboard').classList.add('flex');
document.getElementById('initializing').classList.add('hidden');
document.getElementById('clock').innerHTML = msgObj.data.time.display;
document.getElementById('home_score').innerHTML = msgObj.data.home.score;
document.getElementById('guest_score').innerHTML = msgObj.data.guest.score;
} else if (msgObj.eventName === 'initializing') {
document.getElementById('scoreboard').classList.add('hidden');
document.getElementById('initializing').classList.remove('hidden');
}
};
</script>
</body>
</html>
packages/webui/index.js
+8
View File
@@ -0,0 +1,8 @@
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, './html')));
app.listen(3000);
packages/webui/package.json
+19
View File
@@ -0,0 +1,19 @@
{
"name": "aas-webui",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"prestart": "tailwindcss -i tailwind.css -o ./html/assets/css/tailwind.css",
"start": "node index.js",
"dev:css": "tailwindcss -i tailwind.css -o ./html/assets/css/tailwind.css --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"tailwindcss": "^3.3.5"
}
}
packages/webui/tailwind.config.js
+8
View File
@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./html/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};
packages/webui/tailwind.css
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;