Before (${(event.coverage_before * 100).toFixed(0)}% coverage)
After (${(event.coverage_after * 100).toFixed(0)}% coverage)
Blend:
`;
document.body.appendChild(overlay);
// Close handlers
overlay.querySelector('.gdop-compare-close').addEventListener('click', function() {
overlay.remove();
});
overlay.addEventListener('click', function(e) {
if (e.target === overlay) overlay.remove();
});
// Draw GDOP maps
if (event.gdop_before && event.gdop_after) {
drawGDOPMap('gdop-before-canvas', event.gdop_before, event.gdop_cols, event.gdop_rows);
drawGDOPMap('gdop-after-canvas', event.gdop_after, event.gdop_cols, event.gdop_rows);
}
// Blend slider
var slider = document.getElementById('gdop-blend-slider');
if (slider) {
slider.addEventListener('input', function() {
updateBlend(slider.value);
});
}
}
function drawGDOPMap(canvasId, data, cols, rows) {
var canvas = document.getElementById(canvasId);
if (!canvas || !data || !cols || !rows) return;
var ctx = canvas.getContext('2d');
var rect = canvas.getBoundingClientRect();
canvas.width = rect.width * window.devicePixelRatio;
canvas.height = rect.height * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
var cellWidth = rect.width / cols;
var cellHeight = rect.height / rows;
for (var row = 0; row < rows; row++) {
for (var col = 0; col < cols; col++) {
var idx = row * cols + col;
var gdop = data[idx] || 10;
var color = gdopToColor(gdop);
ctx.fillStyle = color;
ctx.fillRect(col * cellWidth, row * cellHeight, cellWidth, cellHeight);
}
}
}
function gdopToColor(gdop) {
// GDOP < 2 = green, 2-5 = yellow, > 5 = red
var t = Math.min(1, Math.max(0, (gdop - 1) / 5));
if (gdop < 2) {
// Green to yellow
var g = 1;
var r = t * 2;
return 'rgb(' + Math.floor(r * 255) + ',' + Math.floor(g * 255) + ',0)';
} else {
// Yellow to red
var r = 1;
var g = Math.max(0, 1 - (t - 0.4) * 1.5);
return 'rgb(' + Math.floor(r * 255) + ',' + Math.floor(g * 200) + ',0)';
}
}
function updateBlend(value) {
// Adjust opacity of the after map
var afterCanvas = document.getElementById('gdop-after-canvas');
if (afterCanvas) {
afterCanvas.style.opacity = value / 100;
}
}
function showEventComparison(eventId) {
// Find the event in history
var event = state.history.find(function(e) {
return String(e.id) === String(eventId);
});
if (event && event.gdop_before && event.gdop_after) {
showGDOPComparison(event);
}
}
// ============================================
// Actions
// ============================================
function onOptimiseClick() {
var btn = document.getElementById('fleet-optimise-btn');
if (btn) btn.disabled = true;
fetch('/api/fleet/optimise', { method: 'POST' })
.then(function(res) { return res.json(); })
.then(function(data) {
if (btn) btn.disabled = false;
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Fleet optimised: ' + (data.trigger_reason || 'manual'), 'success');
}
handleFleetHealth(data);
})
.catch(function(err) {
if (btn) btn.disabled = false;
console.error('[Fleet] Optimise failed:', err);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Optimisation failed', 'error');
}
});
}
function onSimulateSelect(e) {
var mac = e.target.value;
var resultEl = document.getElementById('fleet-simulate-result');
if (!mac) {
if (resultEl) resultEl.classList.add('hidden');
return;
}
fetch('/api/fleet/simulate?mac=' + encodeURIComponent(mac))
.then(function(res) { return res.json(); })
.then(function(data) {
if (!resultEl) return;
resultEl.classList.remove('hidden');
var delta = data.coverage_delta || 0;
var deltaAbs = Math.abs(delta * 100).toFixed(0);
var direction = delta < 0 ? 'drop' : 'increase';
var className = delta < -0.1 ? 'degraded' : 'ok';
resultEl.className = 'simulate-result ' + className;
resultEl.innerHTML =
'
Node Information
MAC Address: ${node.mac} Role: ${node.role} Status: ${node.online ? 'Online' : 'Offline'} Firmware: ${node.firmware_version || '--'} Uptime: ${formatUptime(node.uptime_seconds || 0)}
Health Metrics
Health Score: ${((node.health_score || 0) * 100).toFixed(0)}% Last Seen: ${new Date((node.last_seen_ms || 0)).toLocaleString()}
Identify Node
Fly to Node
`;
document.body.appendChild(modal);
modal.querySelector('.fleet-close-modal').addEventListener('click', function() {
modal.remove();
});
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.remove();
}
});
}
function bulkIdentify() {
if (selectedNodes.size === 0) return;
selectedNodes.forEach(function(mac) {
identifyNode(mac, 3000); // 3 second blink
});
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Identifying ' + selectedNodes.size + ' nodes', 'info');
}
}
function refreshFullTable() {
fetchFleetHealth();
fetchFleetHistory();
renderFullTable();
}
function formatUptime(seconds) {
if (!seconds) return '--';
var days = Math.floor(seconds / 86400);
var hours = Math.floor((seconds % 86400) / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
if (days > 0) {
return days + 'd ' + hours + 'h';
} else if (hours > 0) {
return hours + 'h ' + minutes + 'm';
} else {
return minutes + 'm';
}
}
function formatPosition(x, y, z) {
var px = (x || 0).toFixed(1);
var py = (y || 0).toFixed(1);
var pz = (z || 0).toFixed(1);
return '(' + px + ', ' + py + ', ' + pz + ')';
}
// ============================================
// Bulk Actions
// ============================================
function bulkRestart() {
if (selectedNodes.size === 0) return;
selectedNodes.forEach(function(mac) {
restartNode(mac);
});
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Restarting ' + selectedNodes.size + ' nodes', 'info');
}
}
function restartNode(mac) {
fetch('/api/nodes/' + mac + '/reboot', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(function(res) {
if (!res.ok) {
throw new Error('Restart failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
if (window.SpaxelApp && window.SpaxelApp.showToast) {
window.SpaxelApp.showToast('Restart command sent to ' + mac, 'success');
}
})
.catch(function(err) {
console.error('[Fleet] Restart error:', err);
if (window.SpaxelApp && window.SpaxelApp.showToast) {
window.SpaxelApp.showToast('Failed to restart ' + mac + ': ' + err.message, 'error');
}
});
}
function updateAllNodes() {
if (!confirm('Start OTA update for all nodes? This may take several minutes.')) {
return;
}
fetch('/api/nodes/update-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(function(res) {
if (!res.ok) {
throw new Error('Update all failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('OTA update started for ' + (data.count || 0) + ' nodes', 'success');
}
})
.catch(function(err) {
console.error('[Fleet] Update all error:', err);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Failed to start OTA update: ' + err.message, 'error');
}
});
}
function rebaselineAllNodes() {
if (!confirm('Re-baseline all links? This requires an empty room for accurate results.')) {
return;
}
fetch('/api/nodes/rebaseline-all', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(function(res) {
if (!res.ok) {
throw new Error('Re-baseline failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Re-baseline started for ' + (data.count || 0) + ' nodes', 'success');
}
})
.catch(function(err) {
console.error('[Fleet] Re-baseline error:', err);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Failed to start re-baseline: ' + err.message, 'error');
}
});
}
function exportConfig() {
fetch('/api/export')
.then(function(res) {
if (!res.ok) {
throw new Error('Export failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'spaxel-config-' + new Date().toISOString().slice(0, 10) + '.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Configuration exported successfully', 'success');
}
})
.catch(function(err) {
console.error('[Fleet] Export error:', err);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Failed to export configuration: ' + err.message, 'error');
}
});
}
function importConfig() {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'application/json';
input.onchange = function(e) {
var file = e.target.files[0];
if (!file) return;
var reader = new FileReader();
reader.onload = function(event) {
try {
var config = JSON.parse(event.target.result);
if (!confirm('Import configuration? This will replace all existing nodes, zones, and settings.')) {
return;
}
fetch('/api/import', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config)
})
.then(function(res) {
if (!res.ok) {
throw new Error('Import failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Configuration imported successfully. Reloading...', 'success');
}
setTimeout(function() {
location.reload();
}, 2000);
})
.catch(function(err) {
console.error('[Fleet] Import error:', err);
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Failed to import configuration: ' + err.message, 'error');
}
});
} catch (err) {
if (window.SpaxelApp && SpaxelApp.showToast) {
SpaxelApp.showToast('Invalid JSON file: ' + err.message, 'error');
}
}
};
reader.readAsText(file);
};
input.click();
}
// ============================================
// Public API
// ============================================
window.FleetPanel = {
init: init,
handleFleetChange: handleFleetChange,
handleFleetHealth: handleFleetHealth,
showWarning: showWarning,
dismissWarning: dismissWarning,
getState: function() { return state; },
identifyNode: identifyNode,
flyToNode: flyToNode,
toggleFullTableView: toggleFullTableView,
showFullTableView: showFullTableView,
hideFullTableView: hideFullTableView
};
// ============================================
// Identify Node Action
// ============================================
function identifyNode(mac, durationMs) {
var payload = durationMs ? JSON.stringify({ duration_ms: durationMs }) : JSON.stringify({});
fetch('/api/nodes/' + mac + '/identify', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: payload
})
.then(function(res) {
if (!res.ok) {
throw new Error('Identify failed: ' + res.status);
}
return res.json();
})
.then(function(data) {
if (window.SpaxelApp && window.SpaxelApp.showToast) {
window.SpaxelApp.showToast('Identify command sent to ' + mac, 'success');
}
})
.catch(function(err) {
console.error('[Fleet] Identify error:', err);
if (window.SpaxelApp && window.SpaxelApp.showToast) {
window.SpaxelApp.showToast('Failed to identify ' + mac + ': ' + err.message, 'error');
}
});
}
// Auto-init when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();