Initial implementation of Sahsa Clock
Pygame framebuffer clock for Le Potato (ARM Debian) with aiohttp webhook server. Renders 12-hour clock directly to /dev/fb0 (no X11/Wayland). Supports full-screen message overlays pushed via a browser dashboard or Bearer-token API. Includes first-run setup wizard, session-based dashboard auth, bcrypt password storage, per-IP rate limiting, and systemd service unit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
130
dashboard/app.js
Normal file
130
dashboard/app.js
Normal file
@@ -0,0 +1,130 @@
|
||||
'use strict';
|
||||
|
||||
const msgTextarea = document.getElementById('msg');
|
||||
const charNum = document.getElementById('char-num');
|
||||
const sendBtn = document.getElementById('send-btn');
|
||||
const clearBtn = document.getElementById('clear-btn');
|
||||
const statusDot = document.getElementById('status-dot');
|
||||
const statusText = document.getElementById('status-text');
|
||||
|
||||
// ── Character counter ────────────────────────────────────────────────────────
|
||||
|
||||
msgTextarea.addEventListener('input', () => {
|
||||
charNum.textContent = msgTextarea.value.length;
|
||||
});
|
||||
|
||||
// ── Duration helper ──────────────────────────────────────────────────────────
|
||||
|
||||
function getSelectedDuration() {
|
||||
const checked = document.querySelector('input[name="duration"]:checked');
|
||||
return checked ? parseInt(checked.value, 10) : 60;
|
||||
}
|
||||
|
||||
// ── Auth redirect helper ─────────────────────────────────────────────────────
|
||||
|
||||
function handleUnauth(status) {
|
||||
if (status === 401) {
|
||||
window.location.href = '/login';
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ── Send message ─────────────────────────────────────────────────────────────
|
||||
|
||||
async function sendMessage() {
|
||||
const text = msgTextarea.value.trim();
|
||||
if (!text) {
|
||||
msgTextarea.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const duration = getSelectedDuration();
|
||||
const body = { text };
|
||||
if (duration === 0) {
|
||||
body.persist = true;
|
||||
} else {
|
||||
body.duration = duration;
|
||||
}
|
||||
|
||||
sendBtn.disabled = true;
|
||||
try {
|
||||
const res = await fetch('/dashboard/message', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (handleUnauth(res.status)) return;
|
||||
|
||||
if (res.ok) {
|
||||
msgTextarea.value = '';
|
||||
charNum.textContent = '0';
|
||||
await refreshStatus();
|
||||
} else {
|
||||
const err = await res.text();
|
||||
setStatus(false, `Error: ${err}`);
|
||||
}
|
||||
} catch {
|
||||
setStatus(false, 'Could not reach server.');
|
||||
} finally {
|
||||
sendBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Clear message ────────────────────────────────────────────────────────────
|
||||
|
||||
async function clearMessage() {
|
||||
try {
|
||||
const res = await fetch('/dashboard/message', { method: 'DELETE' });
|
||||
if (handleUnauth(res.status)) return;
|
||||
if (res.ok) {
|
||||
await refreshStatus();
|
||||
}
|
||||
} catch {
|
||||
setStatus(false, 'Could not reach server.');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Status polling ───────────────────────────────────────────────────────────
|
||||
|
||||
function setStatus(active, message) {
|
||||
statusDot.className = 'status-dot' + (active ? ' active' : '');
|
||||
statusText.textContent = message;
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
try {
|
||||
const res = await fetch('/dashboard/status');
|
||||
if (handleUnauth(res.status)) return;
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.active) {
|
||||
let detail = '';
|
||||
if (data.persistent) {
|
||||
detail = ' — until cleared';
|
||||
} else if (data.remaining_seconds !== null) {
|
||||
const secs = Math.round(data.remaining_seconds);
|
||||
const mins = Math.floor(secs / 60);
|
||||
detail = mins > 0
|
||||
? ` — ${mins}m ${secs % 60}s remaining`
|
||||
: ` — ${secs}s remaining`;
|
||||
}
|
||||
setStatus(true, `Showing: "${data.text}"${detail}`);
|
||||
} else {
|
||||
setStatus(false, 'Screen is showing the clock.');
|
||||
}
|
||||
} catch {
|
||||
setStatus(false, 'Could not reach server.');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Wire up events ───────────────────────────────────────────────────────────
|
||||
|
||||
sendBtn.addEventListener('click', sendMessage);
|
||||
clearBtn.addEventListener('click', clearMessage);
|
||||
|
||||
// Initial status fetch, then poll every 5 seconds
|
||||
refreshStatus();
|
||||
setInterval(refreshStatus, 5000);
|
||||
Reference in New Issue
Block a user