| ${escapeHtml(node.node_id)} |
${escapeHtml(node.display_name)} |
|
${connectionBadge(node.connection)} |
${escapeHtml(node.error_status ?? "no active error")}
|
|
`;
})
.join("");
}
function renderPanelTable() {
if (!appState.snapshot) {
elements.panelTableBody.innerHTML = "";
return;
}
elements.panelTableBody.innerHTML = snapshotPanels(appState.snapshot)
.map((panel) => {
const key = panelKey(panel.node_id, panel.panel_position);
const draft = ensurePanelDraft(key, panel);
return `
| ${escapeHtml(panel.node_id)} |
${escapeHtml(panel.panel_position)} |
|
|
|
|
|
|
|
${escapeHtml(panel.validation_state)} |
${connectionBadge(panel.connection)}
${escapeHtml(panel.error_status ?? "no active error")}
|
|
`;
})
.join("");
}
function renderDiscoverySummary() {
const discovery = appState.discovery;
elements.discoverySubnetInput.value = discovery.subnet;
if (discovery.scanning) {
elements.discoveryScanButton.disabled = true;
elements.discoveryScanButton.textContent = "Scanning...";
elements.discoverySummary.textContent = `Scanning subnet ${discovery.subnet}...`;
return;
}
elements.discoveryScanButton.disabled = false;
elements.discoveryScanButton.textContent = "Discover / Scan";
if (!discovery.results.length) {
elements.discoverySummary.textContent = "No scan executed yet.";
return;
}
elements.discoverySummary.textContent =
`Scanned ${discovery.scannedHosts} hosts in ${discovery.subnet}, ` +
`${discovery.reachableHosts} reachable. No automatic assignments are applied.`;
}
function renderDiscoveryTable() {
if (!appState.discovery.results.length) {
elements.discoveryTableBody.innerHTML =
'
| ${escapeHtml(result.ip)} |
${result.reachable ? connectionBadge("online") : connectionBadge("offline")} |
${escapeHtml(discoveredTypeLabel(result.detected_type))} |
${escapeHtml(result.hostname || "n/a")} |
${assignedNode ? `currently ${escapeHtml(assignedNode)}` : "currently unassigned"}
|
|
`;
})
.join("");
}
function renderEvents() {
if (!appState.snapshot) {
elements.eventList.innerHTML = "";
return;
}
const recentEvents = snapshotRecentEvents(appState.snapshot);
elements.eventList.innerHTML = recentEvents
.map(
(event) => `
${escapeHtml(event.message)}
`
)
.join("");
}
function renderFeedback() {
const { message, level } = appState.feedback;
if (!message) {
elements.feedbackBanner.classList.add("hidden");
elements.feedbackBanner.textContent = "";
return;
}
elements.feedbackBanner.className = `status-banner ${level}`;
elements.feedbackBanner.textContent = message;
}
async function runDiscoveryScan() {
const subnet = elements.discoverySubnetInput.value.trim();
if (!subnet) {
setFeedback("warning", "Subnet is required, e.g. 192.168.40.0/24.");
renderFeedback();
return;
}
appState.discovery.subnet = subnet;
appState.discovery.scanning = true;
renderDiscoverySummary();
renderDiscoveryTable();
try {
const response = await fetch("/api/v1/discovery/scan", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ subnet }),
});
const body = await response.json();
if (!response.ok) {
setFeedback(
"error",
`${body.error?.code ?? "discovery_scan_failed"}: ${body.error?.message ?? "request failed"}`
);
return;
}
appState.discovery.subnet = body.subnet || subnet;
appState.discovery.scannedHosts = body.scanned_hosts || 0;
appState.discovery.reachableHosts = body.reachable_hosts || 0;
appState.discovery.results = Array.isArray(body.results) ? body.results : [];
appState.discovery.assignmentDrafts.clear();
for (const result of appState.discovery.results) {
appState.discovery.assignmentDrafts.set(result.ip, assignedNodeForIp(result.ip) || "");
}
setFeedback(
"success",
`Discovery finished: ${appState.discovery.reachableHosts}/${appState.discovery.scannedHosts} reachable.`
);
} catch (error) {
setFeedback("error", `Discovery scan failed: ${error.message}`);
} finally {
appState.discovery.scanning = false;
renderDiscoverySummary();
renderDiscoveryTable();
renderFeedback();
}
}
async function applyDiscoveryAssignment(ip) {
if (!appState.snapshot) {
return;
}
const selectedNode = appState.discovery.assignmentDrafts.get(ip) || "";
if (!selectedNode) {
setFeedback("warning", `Choose a node slot for ${ip} before applying.`);
renderFeedback();
return;
}
const response = await sendCommand("set_node_reserved_ip", {
node_id: selectedNode,
reserved_ip: ip,
});
if (!response.ok) {
return;
}
setFeedback("success", `Assigned ${ip} to ${selectedNode}.`);
await loadState();
renderDiscoveryTable();
}
async function saveOutputSettings() {
if (!appState.snapshot || appState.outputSaving) {
return;
}
ensureOutputDraft();
const current = snapshotTechnical(appState.snapshot);
const draft = appState.outputDraft;
const commands = [];
if (draft.backend_mode !== current.backend_mode) {
commands.push({
type: "set_output_backend_mode",
payload: { mode: draft.backend_mode },
});
}
if (Boolean(draft.output_enabled) !== Boolean(current.output_enabled)) {
commands.push({
type: "set_live_output_enabled",
payload: { enabled: Boolean(draft.output_enabled) },
});
}
if (Number(draft.output_fps) !== Number(current.output_fps)) {
commands.push({
type: "set_output_fps",
payload: { output_fps: parseInteger(draft.output_fps, current.output_fps) },
});
}
if (commands.length === 0) {
setFeedback("info", "No backend/output changes to apply.");
renderFeedback();
return;
}
appState.outputSaving = true;
renderOutputControls();
try {
for (const command of commands) {
const response = await sendCommand(command.type, command.payload);
if (!response.ok) {
return;
}
}
appState.outputDirty = false;
setFeedback("success", "Backend/output settings applied.");
await loadState();
} finally {
appState.outputSaving = false;
renderOutputControls();
}
}
async function saveNode(nodeId) {
if (!appState.snapshot) {
return;
}
const draft = ensureNodeDraft(nodeId);
const payload = {
node_id: nodeId,
reserved_ip: draft.reserved_ip || null,
};
const response = await sendCommand("set_node_reserved_ip", payload);
if (!response.ok) {
return;
}
draft.dirty = false;
setFeedback("success", `Node target updated for ${nodeId}.`);
await loadState();
}
async function savePanel(key) {
if (!appState.snapshot) {
return;
}
const [nodeId, panelPosition] = key.split(":");
const draft = appState.panelDrafts.get(key);
if (!draft) {
return;
}
const payload = {
node_id: nodeId,
panel_position: panelPosition,
physical_output_name: draft.physical_output_name.trim(),
driver_kind: draft.driver_kind,
driver_reference: draft.driver_reference.trim(),
led_count: parseInteger(draft.led_count, 106),
direction: draft.direction,
color_order: draft.color_order,
enabled: Boolean(draft.enabled),
};
const response = await sendCommand("update_panel_mapping", payload);
if (!response.ok) {
return;
}
draft.dirty = false;
setFeedback("success", `Panel mapping updated for ${nodeId}:${panelPosition}.`);
await loadState();
}
async function sendCommand(type, payload) {
try {
const response = await fetch("/api/v1/command", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ command: { type, payload } }),
});
const body = await response.json();
if (!response.ok) {
setFeedback(
"error",
`${body.error?.code ?? "command_failed"}: ${body.error?.message ?? "request failed"}`
);
renderFeedback();
return { ok: false, body };
}
setFeedback("success", body.summary || `${type} accepted`);
renderFeedback();
return { ok: true, body };
} catch (error) {
setFeedback("error", `Command ${type} failed: ${error.message}`);
renderFeedback();
return { ok: false, body: null };
}
}
function handlePanelDraftInput(event) {
const row = event.target.closest("[data-panel-key]");
if (!row) {
return;
}
const key = row.dataset.panelKey;
const draft = appState.panelDrafts.get(key);
if (!draft) {
return;
}
const field = event.target.dataset.field;
if (!field) {
return;
}
draft[field] = event.target.type === "checkbox" ? event.target.checked : event.target.value;
if (field === "led_count") {
draft.led_count = parseInteger(draft.led_count, 106);
}
draft.dirty = true;
updatePanelRowState(row, draft);
}
function updateNodeRowState(row, draft) {
const button = row.querySelector("[data-save-node]");
if (button) {
button.disabled = !draft.dirty;
}
}
function updatePanelRowState(row, draft) {
const button = row.querySelector("[data-save-panel]");
if (button) {
button.disabled = !draft.dirty;
}
const toggleLabel = row.querySelector(".table-checkbox span");
if (toggleLabel) {
toggleLabel.textContent = draft.enabled ? "on" : "off";
}
}
function ensureOutputDraft() {
if (!appState.outputDraft) {
appState.outputDraft = {
backend_mode: "preview_only",
output_enabled: false,
output_fps: 40,
};
}
}
function snapshotSystem(snapshot) {
return snapshot?.system ?? {
project_name: "Infinity Vis",
topology_label: "Technical surface waiting for snapshot",
};
}
function snapshotTechnical(snapshot) {
return snapshot?.technical ?? {
backend_mode: "preview_only",
output_enabled: false,
output_fps: 40,
live_status: "Waiting for technical state...",
};
}
function snapshotNodes(snapshot) {
return Array.isArray(snapshot?.nodes) ? snapshot.nodes : [];
}
function snapshotPanels(snapshot) {
return Array.isArray(snapshot?.panels) ? snapshot.panels : [];
}
function snapshotRecentEvents(snapshot) {
return Array.isArray(snapshot?.recent_events) ? snapshot.recent_events : [];
}
function ensureNodeDraft(nodeId) {
const existing = appState.nodeDrafts.get(nodeId);
if (existing) {
return existing;
}
const draft = { reserved_ip: "", dirty: false };
appState.nodeDrafts.set(nodeId, draft);
return draft;
}
function ensurePanelDraft(key, panel = null) {
const existing = appState.panelDrafts.get(key);
if (existing) {
return existing;
}
const draft = {
physical_output_name: panel?.physical_output_name || "",
driver_kind: panel?.driver_kind || "pending_validation",
driver_reference: panel?.driver_reference || "",
led_count: panel?.led_count || 106,
direction: panel?.direction || "forward",
color_order: panel?.color_order || "grb",
enabled: Boolean(panel?.enabled),
dirty: false,
};
appState.panelDrafts.set(key, draft);
return draft;
}
function assignedNodeForIp(ip) {
if (!appState.snapshot || !ip) {
return null;
}
const match = snapshotNodes(appState.snapshot).find((node) => node.reserved_ip === ip);
return match ? match.node_id : null;
}
function renderNodeOptions(selectedNodeId) {
const nodes = snapshotNodes(appState.snapshot);
return nodes
.map((node) => {
const selected = node.node_id === selectedNodeId ? "selected" : "";
return `