-
-
-
- | Name |
- ID |
- SNR |
- Batterie |
- Zuletzt gesehen |
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ ID |
+ Hardware |
+ SNR |
+ Batterie |
+ Zuletzt gesehen |
+
+
+
+
+
-
+
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index b5c1a4c..cd82513 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -2,6 +2,7 @@ const nodesTable = document.getElementById('nodesTable');
const messagesList = document.getElementById('messagesList');
const statusDot = document.getElementById('statusDot');
const statusText = document.getElementById('statusText');
+const nodeCountBadge = document.getElementById('nodeCountBadge');
let nodes = {};
let ws;
@@ -48,38 +49,49 @@ function connectWebSocket() {
function renderNodes() {
const sorted = Object.values(nodes).sort((a, b) => (b.last_seen || 0) - (a.last_seen || 0));
+ nodeCountBadge.textContent = sorted.length;
nodesTable.innerHTML = sorted.map(node => {
const name = node.long_name || node.short_name || node.node_id;
- const snr = node.snr != null ? node.snr.toFixed(1) : '-';
+ const shortId = node.node_id ? node.node_id.slice(-4) : '?';
+ const hw = node.hw_model || '-';
+ const snr = node.snr != null ? `${node.snr.toFixed(1)} dB` : '-';
const battery = renderBattery(node.battery);
const lastSeen = node.last_seen ? timeAgo(node.last_seen) : '-';
- const shortId = node.node_id ? node.node_id.slice(-4) : '?';
+ const onlineClass = isOnline(node.last_seen) ? 'text-success' : '';
return `
- | ${escapeHtml(name)} |
- ${escapeHtml(shortId)} |
- ${snr} |
- ${battery} |
- ${lastSeen} |
+ ${escapeHtml(name)} |
+ ${escapeHtml(shortId)} |
+ ${escapeHtml(hw)} |
+ ${snr} |
+ ${battery} |
+ ${lastSeen} |
`;
}).join('');
}
function renderBattery(level) {
- if (level == null) return '-';
- let color = '#00e676';
- if (level < 20) color = '#ff5252';
- else if (level < 50) color = '#ff9100';
- return `
${level}%`;
+ if (level == null) return '
-';
+ let colorClass = 'bg-success';
+ if (level < 20) colorClass = 'bg-danger';
+ else if (level < 50) colorClass = 'bg-warning';
+ return `
+
+ ${level}%
+ `;
}
function addMessage(msg) {
- const li = document.createElement('li');
- li.className = 'message-item';
+ const item = document.createElement('div');
+ item.className = 'list-group-item list-group-item-action py-2 px-3';
const time = msg.timestamp ? new Date(msg.timestamp * 1000).toLocaleTimeString('de-DE') : '';
const from = msg.from_node ? msg.from_node.slice(-4) : '?';
- li.innerHTML = `
${time} von ${escapeHtml(from)}
${escapeHtml(msg.payload || '')}
`;
- messagesList.prepend(li);
- // Keep max 100 messages
+ item.innerHTML = `
+
+ ${escapeHtml(from)}
+ ${time}
+
+
${escapeHtml(msg.payload || '')}
`;
+ messagesList.prepend(item);
while (messagesList.children.length > 100) {
messagesList.removeChild(messagesList.lastChild);
}
@@ -92,6 +104,11 @@ function updateStats(stats) {
document.getElementById('statTextMessages').textContent = stats.text_messages || 0;
}
+function isOnline(lastSeen) {
+ if (!lastSeen) return false;
+ return (Date.now() / 1000 - lastSeen) < 900; // < 15 min
+}
+
function timeAgo(timestamp) {
const seconds = Math.floor(Date.now() / 1000 - timestamp);
if (seconds < 60) return `${seconds}s`;