adam/potato-mesh
1
0
Fork 0
mirror of https://github.com/l5yth/potato-mesh.git synced 2026-07-03 00:11:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Limit chat log and highlight short names by role (#42)

Browse Source 
* Limit chat log size and style short names

* Escape short names in HTML rendering
This commit is contained in:
l5y
2025-09-14 21:22:19 +02:00
committed by GitHub
parent 7008804ae2
commit 27d4ed39db
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/index.html
+23 -10
View File
@@ -34,6 +34,7 @@
#chat { flex: 0 0 33%; max-width: 33%; height: 60vh; border: 1px solid #ddd; border-radius: 8px; overflow-y: auto; padding: 6px; font-size: 12px; }
.chat-entry-node { font-family: ui-monospace, Menlo, Consolas, monospace; color: #555 }
.chat-entry-msg { font-family: ui-monospace, Menlo, Consolas, monospace; }
.short-name { display:inline-block; border-radius:4px; padding:0 2px; }
.controls { display: flex; gap: 8px; align-items: center; }
button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #f6f6f6; }
@@ -107,6 +108,7 @@
const seenNodeIds = new Set();
const seenMessageIds = new Set();
const NODE_LIMIT = 1000;
const CHAT_LIMIT = 1000;
const REFRESH_MS = 60000;
refreshInfo.textContent = `#MediumFast — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
@@ -153,8 +155,21 @@
.replace(/'/g, ''');
}
function renderShortHtml(short){
return escapeHtml(String(short).padStart(4, ' ')).replace(/ /g, ' ');
function renderShortHtml(short, role){
if (!short) {
return `<span class="short-name" style="background:#ccc">&nbsp;&nbsp;&nbsp;&nbsp;</span>`;
}
const padded = escapeHtml(String(short).padStart(4, ' ')).replace(/ /g, '&nbsp;');
const color = roleColors[role] || roleColors.CLIENT;
return `<span class="short-name" style="background:${color}">${padded}</span>`;
}
function appendChatEntry(div) {
chatEl.appendChild(div);
while (chatEl.childElementCount > CHAT_LIMIT) {
chatEl.removeChild(chatEl.firstChild);
}
chatEl.scrollTop = chatEl.scrollHeight;
}
function addNewNodeChatEntry(n) {
@@ -162,23 +177,21 @@
const ts = formatDate(new Date(n.first_heard * 1000));
div.className = 'chat-entry-node';
const nodeId = escapeHtml(n.node_id || '');
const short = renderShortHtml(n.short_name || '');
const short = renderShortHtml(n.short_name, n.role);
const longName = escapeHtml(n.long_name || '');
div.innerHTML = `[${ts}] ${nodeId} ${short} <em>New node: ${longName}</em>`;
chatEl.appendChild(div);
chatEl.scrollTop = chatEl.scrollHeight;
appendChatEntry(div);
}
function addNewMessageChatEntry(m) {
const div = document.createElement('div');
const ts = formatDate(new Date(m.rx_time * 1000));
const from = m.from_id ? escapeHtml(m.from_id) : '<em>(unknown)</em>';
const short = renderShortHtml(m.node?.short_name || '');
const short = renderShortHtml(m.node?.short_name, m.node?.role);
const text = escapeHtml(m.text || '');
div.className = 'chat-entry-msg';
div.innerHTML = `[${ts}] ${from} ${short} ${text}`;
chatEl.appendChild(div);
chatEl.scrollTop = chatEl.scrollHeight;
appendChatEntry(div);
}
function pad(n) { return String(n).padStart(2, "0"); }
@@ -250,7 +263,7 @@
const tr = document.createElement('tr');
tr.innerHTML = `
<td class="mono">${n.node_id || ""}</td>
<td>${n.short_name || ""}</td>
<td>${renderShortHtml(n.short_name, n.role)}</td>
<td>${n.long_name || ""}</td>
<td>${timeAgo(n.last_heard, nowSec)}</td>
<td>${n.role || "CLIENT"}</td>
@@ -289,7 +302,7 @@
});
const lines = [
`<b>${n.long_name || ''}</b>`,
`<b>${n.short_name || ''}</b> <span class="mono">${n.node_id || ''}</span>`,
`${renderShortHtml(n.short_name, n.role)} <span class="mono">${n.node_id || ''}</span>`,
n.hw_model ? `Model: ${fmtHw(n.hw_model)}` : null,
`Role: ${n.role || 'CLIENT'}`,
(n.battery_level != null ? `Battery: ${fmtAlt(n.battery_level, "%")}, ${fmtAlt(n.voltage, "V")}` : null),