KPRSpaceAPI/templates/index.html
2025-10-19 23:02:59 -06:00

50 lines
1.4 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hackspace Status</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<h1>Hackspace Status</h1>
<div id="status" class="status unknown">Loading...</div>
<img id="latest" src="" alt="Latest screenshot" />
<div class="controls">
<button id="start">Start Monitor</button>
<button id="stop">Stop Monitor</button>
</div>
<pre id="info"></pre>
</div>
<script>
async function refresh() {
try {
const r = await fetch('/api/status');
const j = await r.json();
const s = document.getElementById('status');
s.textContent = (j.status || 'unknown').toUpperCase();
s.className = 'status ' + (j.status || 'unknown');
const img = document.getElementById('latest');
if (j.image) {
img.src = j.image + '?_=' + Date.now();
} else {
img.src = '';
}
document.getElementById('info').textContent = JSON.stringify(j, null, 2);
} catch (e) {
console.error(e);
}
}
document.getElementById('start').addEventListener('click', async () => {
await fetch('/api/start', {method: 'POST'});
});
document.getElementById('stop').addEventListener('click', async () => {
await fetch('/api/stop', {method: 'POST'});
});
setInterval(refresh, 30000);
refresh();
</script>
</body>
</html>