feat: implement FastAPI router, web + local UI updates, and metadata monitoring for the edge node
This commit is contained in:
Logan Cusano
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Scanner Display</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #000000;
|
||||
--text: #ffffff;
|
||||
--sys-color: #3b82f6; /* Blue for system */
|
||||
--dept-color: #f97316; /* Orange for department */
|
||||
--chan-color: #ffffff; /* White for channel */
|
||||
--muted: #64748b;
|
||||
--active-bg: #1e3a8a;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Top Status Bar */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #333;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
/* Main Display Area */
|
||||
.main-display {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.row-large {
|
||||
padding: 12px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.system-row { color: var(--sys-color); font-size: 28px; font-weight: 800; text-transform: uppercase; }
|
||||
.dept-row { color: var(--dept-color); font-size: 24px; font-weight: 700; }
|
||||
.chan-row { color: var(--chan-color); font-size: 32px; font-weight: 900; letter-spacing: 1px; }
|
||||
|
||||
.receiving .chan-row {
|
||||
background-color: var(--active-bg);
|
||||
animation: pulse 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from { box-shadow: 0 0 10px var(--sys-color); }
|
||||
to { box-shadow: 0 0 20px var(--sys-color); }
|
||||
}
|
||||
|
||||
/* Info Grid */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
background: #111;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.info-label { font-size: 12px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
|
||||
.info-value { font-weight: bold; color: #fff; font-size: 18px; }
|
||||
|
||||
/* Softkeys Bar (Bottom) */
|
||||
.softkeys {
|
||||
display: flex;
|
||||
border-top: 2px solid #333;
|
||||
background: #111;
|
||||
height: 50px;
|
||||
}
|
||||
.softkey {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-right: 1px solid #333;
|
||||
color: #ccc;
|
||||
}
|
||||
.softkey:last-child { border-right: none; }
|
||||
|
||||
/* Overlay UI (Volume, Hold) */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
padding: 20px 40px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 12px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="status-bar">
|
||||
<div id="status-icon">▶ RUNNING</div>
|
||||
<div id="clock">12:00:00</div>
|
||||
<div id="vol-indicator">VOL: 100%</div>
|
||||
</div>
|
||||
|
||||
<div class="main-display" id="main-display">
|
||||
<div class="row-large system-row" id="disp-system">NO SYSTEM</div>
|
||||
<div class="row-large dept-row" id="disp-dept">Scanning...</div>
|
||||
<div class="row-large chan-row" id="disp-chan">IDLE</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">TGID</span>
|
||||
<span class="info-value" id="info-tgid">---</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Node ID</span>
|
||||
<span class="info-value" id="info-node">---</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="softkeys">
|
||||
<div class="softkey">System</div>
|
||||
<div class="softkey">Dept</div>
|
||||
<div class="softkey">Chan</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay" id="overlay">HOLD</div>
|
||||
|
||||
<!-- Audio element for local playback -->
|
||||
<audio id="audio-player" autoplay></audio>
|
||||
|
||||
<script>
|
||||
// Elements
|
||||
const elSystem = document.getElementById('disp-system');
|
||||
const elDept = document.getElementById('disp-dept');
|
||||
const elChan = document.getElementById('disp-chan');
|
||||
const elTgid = document.getElementById('info-tgid');
|
||||
const elNode = document.getElementById('info-node');
|
||||
const elClock = document.getElementById('clock');
|
||||
const elMain = document.getElementById('main-display');
|
||||
const audioPlayer = document.getElementById('audio-player');
|
||||
const elVol = document.getElementById('vol-indicator');
|
||||
const elOverlay = document.getElementById('overlay');
|
||||
|
||||
let currentIcecastUrl = null;
|
||||
let isHolding = false;
|
||||
let volume = 1.0;
|
||||
|
||||
// Clock updater
|
||||
setInterval(() => {
|
||||
const now = new Date();
|
||||
elClock.textContent = now.toLocaleTimeString('en-US', { hour12: false });
|
||||
}, 1000);
|
||||
|
||||
// API Poller
|
||||
async function updateStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/status');
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
|
||||
elSystem.textContent = data.system_name || 'NO SYSTEM';
|
||||
elNode.textContent = (data.node_id || '---').slice(0, 6).toUpperCase();
|
||||
|
||||
if (data.is_recording && data.active_tgid) {
|
||||
elMain.classList.add('receiving');
|
||||
elChan.textContent = data.active_tgid_name || `TG ${data.active_tgid}`;
|
||||
elDept.textContent = 'Active Call';
|
||||
elTgid.textContent = data.active_tgid;
|
||||
} else {
|
||||
elMain.classList.remove('receiving');
|
||||
elChan.textContent = 'IDLE';
|
||||
elDept.textContent = 'Scanning...';
|
||||
elTgid.textContent = '---';
|
||||
}
|
||||
|
||||
if (data.icecast_url && currentIcecastUrl !== data.icecast_url) {
|
||||
currentIcecastUrl = data.icecast_url;
|
||||
audioPlayer.src = currentIcecastUrl;
|
||||
// Modern browsers might block autoplay without interaction
|
||||
audioPlayer.play().catch(e => console.log('Autoplay blocked', e));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch status', err);
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(updateStatus, 500);
|
||||
updateStatus();
|
||||
|
||||
// Show temporary overlay
|
||||
function showOverlay(text, timeout = 1000) {
|
||||
elOverlay.textContent = text;
|
||||
elOverlay.style.display = 'block';
|
||||
setTimeout(() => { elOverlay.style.display = 'none'; }, timeout);
|
||||
}
|
||||
|
||||
// Keyboard bindings for hardware buttons
|
||||
window.addEventListener('keydown', (e) => {
|
||||
// Simulate hardware interactions
|
||||
if (e.key === 'ArrowUp') {
|
||||
volume = Math.min(1.0, volume + 0.1);
|
||||
audioPlayer.volume = volume;
|
||||
elVol.textContent = `VOL: ${Math.round(volume * 100)}%`;
|
||||
showOverlay(`VOL: ${Math.round(volume * 100)}%`);
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
volume = Math.max(0.0, volume - 0.1);
|
||||
audioPlayer.volume = volume;
|
||||
elVol.textContent = `VOL: ${Math.round(volume * 100)}%`;
|
||||
showOverlay(`VOL: ${Math.round(volume * 100)}%`);
|
||||
} else if (e.key === 'Enter' || e.key === 'h' || e.key === 'H') {
|
||||
// Toggle Hold (not fully implemented in backend yet, just UI mock)
|
||||
isHolding = !isHolding;
|
||||
showOverlay(isHolding ? 'HOLD ON' : 'HOLD OFF');
|
||||
} else if (e.key === 'p' || e.key === 'P') {
|
||||
// Play/Pause audio
|
||||
if (audioPlayer.paused) {
|
||||
audioPlayer.play();
|
||||
showOverlay('PLAY');
|
||||
} else {
|
||||
audioPlayer.pause();
|
||||
showOverlay('PAUSED');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Attempt to start audio on first click (browser policy bypass)
|
||||
document.body.addEventListener('click', () => {
|
||||
if (audioPlayer.paused && currentIcecastUrl) {
|
||||
audioPlayer.play();
|
||||
}
|
||||
}, { once: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user