100 lines
3.2 KiB
JavaScript
100 lines
3.2 KiB
JavaScript
// Initialization
|
|
const UPDATE_INTERVALS = {
|
|
deviceStatus: 30000,
|
|
diagnostics: 60000
|
|
};
|
|
|
|
// Core update functions
|
|
function updateDeviceStatus() {
|
|
console.log('Updating device status...');
|
|
fetch('/api/status')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Received status data:', data);
|
|
Object.entries(data).forEach(([deviceName, status]) => {
|
|
console.log(`Updating ${deviceName} status to ${status}`);
|
|
updateDeviceIndicator(deviceName, status);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error updating status:', error));
|
|
}
|
|
|
|
function updateDiagnostics() {
|
|
fetch('/api/diagnostics')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const diagnosticsPanel = document.querySelector('.diagnostics-content');
|
|
diagnosticsPanel.innerHTML = '';
|
|
|
|
Object.entries(data).forEach(([device, diagnostics]) => {
|
|
const diagElement = createDiagnosticElement(device, diagnostics);
|
|
diagnosticsPanel.appendChild(diagElement);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Element creation functions
|
|
function createDiagnosticElement(device, diagnostics) {
|
|
const element = document.createElement('div');
|
|
element.className = `diagnostic-item ${diagnostics.connection_type}-diagnostic`;
|
|
|
|
const content = `
|
|
<h3>${device}</h3>
|
|
<div class="diagnostic-details">
|
|
<div class="status-group">
|
|
<span class="label">Status:</span>
|
|
<span class="value ${diagnostics.state.toLowerCase()}">${diagnostics.state}</span>
|
|
</div>
|
|
<div class="firmware-group">
|
|
<span class="label">Firmware:</span>
|
|
<span class="value">${diagnostics.firmware.version}</span>
|
|
</div>
|
|
${createInterfaceHTML(diagnostics.interfaces)}
|
|
</div>
|
|
`;
|
|
|
|
element.innerHTML = content;
|
|
return element;
|
|
}
|
|
|
|
function createInterfaceHTML(interfaces) {
|
|
let html = '<div class="interfaces-group">';
|
|
|
|
// Add port information
|
|
Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
|
|
html += `
|
|
<div class="interface-item">
|
|
<span class="label">${portName}:</span>
|
|
<span class="value">${port.speed.current}/${port.speed.max} Mbps</span>
|
|
<span class="state ${port.state.toLowerCase()}">${port.state}</span>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
// Add radio information
|
|
Object.entries(interfaces.radios || {}).forEach(([radioName, radio]) => {
|
|
html += `
|
|
<div class="interface-item">
|
|
<span class="label">${radioName}:</span>
|
|
<span class="value">${radio.standard} - Ch${radio.channel} (${radio.width})</span>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
html += '</div>';
|
|
return html;
|
|
}
|
|
|
|
// Initialize updates
|
|
function initializeUpdates() {
|
|
// Set update intervals
|
|
setInterval(updateDeviceStatus, UPDATE_INTERVALS.deviceStatus);
|
|
setInterval(updateDiagnostics, UPDATE_INTERVALS.diagnostics);
|
|
|
|
// Initial updates
|
|
updateDeviceStatus();
|
|
updateDiagnostics();
|
|
}
|
|
|
|
// Start the application
|
|
initializeUpdates(); |