gandalf/static/app.js

// Initialization
const UPDATE_INTERVALS = {
    deviceStatus: 30000,
    diagnostics: 60000
};

// Core update functions
function updateDeviceStatus() {
    console.log('Fetching device status...');
    fetch('/api/status')
        .then(response => response.json())
        .then(data => {
            console.log('Received status data:', data);
            Object.entries(data).forEach(([deviceName, status]) => {
                const deviceElement = document.querySelector(`.device-status[data-device-name="${deviceName}"]`);
                if (deviceElement) {
                    const indicator = deviceElement.querySelector('.status-indicator');
                    indicator.className = `status-indicator status-${status ? 'up' : 'down'}`;
                }
            });
        });
}

function toggleInterfaces(header) {
    const list = header.nextElementSibling;
    const icon = header.querySelector('.expand-icon');
    list.classList.toggle('collapsed');
    icon.style.transform = list.classList.contains('collapsed') ? 'rotate(-90deg)' : 'rotate(0deg)';
}

function updateInterfaceStatus(deviceName, interfaces) {
    const interfaceList = document.querySelector(`.interface-group[data-device-name="${deviceName}"] .interface-list`);
    if (interfaceList && interfaces) {
        interfaceList.innerHTML = '';
        Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
            interfaceList.innerHTML += `
                <div class="interface-item">
                    <span class="port-name">${portName}</span>
                    <span class="port-speed">${port.speed.current}/${port.speed.max} Mbps</span>
                    <span class="port-status ${port.state}">${port.state}</span>
                </div>
            `;
        });
    }
}

function updateSystemHealth(deviceName, diagnostics) {
    const metricsContainer = document.querySelector(`.health-metrics[data-device-name="${deviceName}"] .metrics-list`);
    if (metricsContainer && diagnostics) {
        const cpu = metricsContainer.querySelector('.cpu');
        const memory = metricsContainer.querySelector('.memory');
        const temperature = metricsContainer.querySelector('.temperature');

        cpu.innerHTML = `CPU: ${diagnostics.system?.cpu || 'N/A'}%`;
        memory.innerHTML = `Memory: ${diagnostics.system?.memory || 'N/A'}%`;
        temperature.innerHTML = `Temp: ${diagnostics.system?.temperature || 'N/A'}°C`;
    }
}

function updateSystemMetrics() {
    fetch('/api/metrics')
        .then(response => response.json())
        .then(data => {
            updateInterfaceStatus(data.interfaces);
            updatePowerMetrics(data.power);
            updateSystemHealth(data.health);
        });
}

//Metric updates like interfaces, power, and health

function updateDiagnostics() {
    fetch('/api/diagnostics')
        .then(response => response.json())
        .then(data => {
            Object.entries(data).forEach(([deviceName, diagnostics]) => {
                updateInterfaceStatus(deviceName, diagnostics.interfaces);
                updateSystemHealth(deviceName, diagnostics);
            });
        });
}

// 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();