|
|
${escapeHtml(node.name || node.label || 'Unnamed')}
|
${truncateMAC(node.mac)}
|
${capitalize(status)}
|
${escapeHtml(node.firmware_version || '--')}
${isOutdated ? `
→
${escapeHtml(state.latestFirmware || '?')}
` : ''}
|
${formatUptime(node.uptime_seconds)}
|
${formatRole(node.role)}
|
|
${formatPacketRate(node)}
|
${formatTemperature(node.temperature)}
|
|
`;
}).join('');
// Bind row events
bindRowEvents();
}
function bindRowEvents() {
// Checkbox handlers
document.querySelectorAll('.node-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', (e) => {
const mac = e.target.dataset.mac;
if (e.target.checked) {
state.selectedNodes.add(mac);
} else {
state.selectedNodes.delete(mac);
}
updateBulkActions();
renderTable(); // Re-render to update selected state
});
});
// Row click for fly-to
document.querySelectorAll('.fleet-row').forEach(row => {
row.addEventListener('click', (e) => {
// Don't trigger if clicking on checkbox, actions, or label
if (e.target.closest('.checkbox') ||
e.target.closest('.action-buttons') ||
e.target.closest('.node-label')) {
return;
}
const mac = row.dataset.mac;
flyToNode(mac);
});
});
// Label double-click for inline edit
document.querySelectorAll('.node-label').forEach(labelEl => {
labelEl.addEventListener('dblclick', (e) => {
e.stopPropagation();
const mac = labelEl.dataset.mac;
startLabelEdit(labelEl, mac);
});
});
// Action buttons
document.querySelectorAll('.btn-locate').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const mac = btn.dataset.mac;
identifyNode(mac);
});
});
document.querySelectorAll('.btn-ota').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const mac = btn.dataset.mac;
showOTAModal(mac);
});
});
document.querySelectorAll('.btn-flyto').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const mac = btn.dataset.mac;
flyToNode(mac);
});
});
document.querySelectorAll('.btn-more').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const mac = btn.dataset.mac;
showMoreActions(btn, mac);
});
});
}
// ============================================
// Inline Label Edit
// ============================================
function startLabelEdit(element, mac) {
const currentValue = element.textContent;
const node = state.nodes.find(n => n.mac === mac);
const existingLabel = node.name || node.label || '';
element.contentEditable = true;
element.classList.add('editing');
element.textContent = existingLabel;
// Focus and select all text
element.focus();
const range = document.createRange();
range.selectNodeContents(element);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
const handleBlur = async () => {
element.removeEventListener('blur', handleBlur);
element.removeEventListener('keydown', handleKeydown);
const newValue = element.textContent.trim();
element.contentEditable = false;
element.classList.remove('editing');
// Validate
if (newValue.length > 32) {
showToast('Label must be 32 characters or less', 'warning');
element.textContent = currentValue;
return;
}
if (newValue === currentValue) {
// No change
element.textContent = currentValue;
return;
}
// Save to server
try {
const response = await fetch(`/api/nodes/${mac}/label`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ label: newValue })
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
// Update local state
const nodeIndex = state.nodes.findIndex(n => n.mac === mac);
if (nodeIndex !== -1) {
state.nodes[nodeIndex].name = newValue;
state.nodes[nodeIndex].label = newValue;
}
showToast('Label updated', 'success');
applyFilters();
} catch (error) {
console.error('[FleetPage] Failed to update label:', error);
showToast('Failed to update label', 'error');
element.textContent = currentValue;
}
};
const handleKeydown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
element.blur();
} else if (e.key === 'Escape') {
e.preventDefault();
element.textContent = currentValue;
element.blur();
}
};
element.addEventListener('blur', handleBlur);
element.addEventListener('keydown', handleKeydown);
}
// ============================================
// Bulk Actions
// ============================================
function toggleSelectAll(checked) {
state.filteredNodes.forEach(node => {
if (checked) {
state.selectedNodes.add(node.mac);
} else {
state.selectedNodes.delete(node.mac);
}
});
updateBulkActions();
renderTable();
}
function clearSelection() {
state.selectedNodes.clear();
updateBulkActions();
renderTable();
}
function updateBulkActions() {
const count = state.selectedNodes.size;
elements.bulkSelectedCount.textContent = count;
elements.selectAllCheckbox.checked = count > 0 && count === state.filteredNodes.length;
elements.bulkActionsBar.style.display = count > 0 ? 'block' : 'none';
// Update button states
const hasOutdated = Array.from(state.selectedNodes).some(mac => {
const node = state.nodes.find(n => n.mac === mac);
return node && isFirmwareOutdated(node);
});
elements.bulkOtaBtn.disabled = !hasOutdated;
}
// ============================================
// Node Actions
// ============================================
async function identifyNode(mac) {
try {
showToast('Sending identify command...', 'info');
const response = await fetch(`/api/nodes/${mac}/identify`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ duration_ms: 5000 })
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
showToast(`Identifying ${formatMAC(mac)}`, 'success');
} catch (error) {
console.error('[FleetPage] Identify failed:', error);
showToast('Failed to send identify command', 'error');
}
}
function flyToNode(mac) {
// Store target MAC in localStorage for expert mode
localStorage.setItem('fleetFlyToMAC', mac);
// Redirect to expert mode
window.location.href = '/?highlight=' + mac;
}
function showOTAModal(mac) {
const node = state.nodes.find(n => n.mac === mac);
if (!node) return;
elements.otaNodeLabel.textContent = node.name || node.label || formatMAC(mac);
elements.otaCurrentVersion.textContent = node.firmware_version || 'Unknown';
elements.otaLatestVersion.textContent = state.latestFirmware || 'Unknown';
elements.otaInfoCurrent.textContent = node.firmware_version || 'Unknown';
elements.otaInfoLatest.textContent = state.latestFirmware || 'Unknown';
elements.otaInfoStatus.textContent = getNodeStatus(node);
elements.otaInfoStatus.className = 'info-value ' + getNodeStatus(node);
elements.otaModal.dataset.targetMAC = mac;
openModal('ota-modal');
}
function showBulkOTAModal() {
const macs = Array.from(state.selectedNodes);
const outdated = macs.filter(mac => {
const node = state.nodes.find(n => n.mac === mac);
return node && isFirmwareOutdated(node);
});
if (outdated.length === 0) {
showToast('No selected nodes have outdated firmware', 'warning');
return;
}
// Show confirmation
if (outdated.length === 1) {
showOTAModal(outdated[0]);
} else {
// For multiple nodes, confirm without showing modal
if (confirm(`Update ${outdated.length} nodes to firmware ${state.latestFirmware || 'latest'}?`)) {
updateMultipleNodes(outdated);
}
}
}
async function confirmOTA() {
const mac = elements.otaModal.dataset.targetMAC;
if (!mac) return;
closeModal('ota-modal');
try {
showToast('Starting firmware update...', 'info');
const response = await fetch(`/api/nodes/${mac}/ota`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
showToast(`Firmware update started for ${formatMAC(mac)}`, 'success');
fetchFleetData(); // Refresh to show updating status
} catch (error) {
console.error('[FleetPage] OTA failed:', error);
showToast('Failed to start firmware update', 'error');
}
}
async function updateMultipleNodes(macs) {
try {
showToast(`Starting updates for ${macs.length} nodes...`, 'info');
// Update nodes in sequence with 30s stagger
for (let i = 0; i < macs.length; i++) {
setTimeout(async () => {
try {
await fetch(`/api/nodes/${macs[i]}/ota`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});
if (i === macs.length - 1) {
showToast(`Firmware updates started for ${macs.length} nodes`, 'success');
fetchFleetData();
}
} catch (error) {
console.error(`[FleetPage] OTA failed for ${macs[i]}:`, error);
}
}, i * 30000); // 30 second stagger
}
showToast(`Firmware updates queued for ${macs.length} nodes`, 'info');
} catch (error) {
console.error('[FleetPage] Bulk OTA failed:', error);
showToast('Failed to start firmware updates', 'error');
}
}
async function updateAllFirmware() {
if (!confirm('Update all nodes to the latest firmware?\n\nThis will update nodes in sequence with a 30-second gap between each node.')) {
return;
}
try {
const response = await fetch('/api/nodes/update-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
showToast(`Firmware updates started for ${data.count || 0} nodes`, 'success');
fetchFleetData();
} catch (error) {
console.error('[FleetPage] Update all failed:', error);
showToast('Failed to start firmware updates', 'error');
}
}
function showRoleModal() {
const count = state.selectedNodes.size;
elements.roleNodeCount.textContent = count;
openModal('role-modal');
}
async function confirmRoleAssignment() {
const selected = document.querySelector('input[name="role-assignment"]:checked');
if (!selected) {
showToast('Please select a role', 'warning');
return;
}
const newRole = selected.value;
closeModal('role-modal');
try {
const macs = Array.from(state.selectedNodes);
let successCount = 0;
for (const mac of macs) {
try {
const response = await fetch(`/api/nodes/${mac}/role`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ role: newRole })
});
if (response.ok) {
successCount++;
// Update local state
const nodeIndex = state.nodes.findIndex(n => n.mac === mac);
if (nodeIndex !== -1) {
state.nodes[nodeIndex].role = newRole;
}
}
} catch (error) {
console.error(`[FleetPage] Failed to update role for ${mac}:`, error);
}
}
if (successCount > 0) {
showToast(`Role updated for ${successCount} nodes`, 'success');
fetchFleetData();
}
if (successCount < macs.length) {
showToast(`Failed to update ${macs.length - successCount} nodes`, 'warning');
}
} catch (error) {
console.error('[FleetPage] Role assignment failed:', error);
showToast('Failed to assign roles', 'error');
}
}
function showRemoveModal() {
const macs = Array.from(state.selectedNodes);
elements.removeNodeCount.textContent = macs.length;
// List nodes to be removed
const listHTML = '