hostapd-webui/static/script.js

// Hostapd Web UI JavaScript
// Handles API communication and dynamic UI updates

const API_BASE_URL = '/api/v1/sta';
const REFRESH_INTERVAL = 2000;

let isRefreshing = false;

// DOM Elements
const stationTableBody = document.getElementById('station-tbody');
const errorMessage = document.getElementById('error-message');
const lastUpdate = document.getElementById('last-update');

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    // Load initial data
    refreshStations();
    
    startAutoRefresh();
});

// Start auto-refresh interval
function startAutoRefresh() {
    setInterval(refreshStations, REFRESH_INTERVAL);
}

// Refresh station data
async function refreshStations() {
    if (isRefreshing) return; // Prevent concurrent refreshes
    
    isRefreshing = true;
    
    try {
        // Fetch station list
        const stations = await fetchStations();
        
        if (stations.length === 0) {
            showNoStations();
        } else {
            // Fetch details for each station and populate table
            await populateStationTable(stations);
        }
        
        // Update last refresh time
        lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;
        
        // Hide any previous error messages
        hideError();
        
    } catch (error) {
        console.error('Error refreshing stations:', error);
        showError('Failed to load station data. Please check if the API is running.');
    } finally {
        isRefreshing = false;
    }
}

// Fetch list of connected stations
async function fetchStations() {
    const response = await fetch(`${API_BASE_URL}/list`);
    
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
}

// Populate table with station data
async function populateStationTable(stations) {
    // Process each station concurrently
    const stationPromises = stations.map(async (mac) => {
        try {
            const details = await fetchStationDetails(mac);
            return { mac, details, error: null };
        } catch (error) {
            return { mac, details: null, error: error.message };
        }
    });
    
    const stationResults = await Promise.all(stationPromises);
    
    const rows = [];
    // Add rows to table
    stationResults.forEach(({ mac, details, error }) => {
        const row = document.createElement('tr');
        
        if (error) {
            row.innerHTML = `
                <td>${mac}</td>
                <td colspan="6" class="error">Error: ${error}</td>
            `;
        } else {
            // Calculate total bytes
            const rxBytes = parseInt(details.rx_bytes) || 0;
            const txBytes = parseInt(details.tx_bytes) || 0;
            
            // Determine signal strength category
            const signal = parseInt(details.signal) || 0;
            let signalClass = 'status-established';
            if (signal < -80) signalClass = 'status-new';
            else if (signal < -60) signalClass = 'status-medium';
            
            row.innerHTML = `
                <td><span class="${getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
                <td><span class="${signalClass}">${signal} dBm</span></td>
                <td>${formatDataRate(details.rx_rate_info)}/${formatDataRate(details.tx_rate_info)}</td>
                <td>${formatBytes(rxBytes)}/${formatBytes(txBytes)}</td>
            `;
        }
        rows.push(row);    
    });
    stationTableBody.replaceChildren(...rows);
}

// Fetch details for a specific station
async function fetchStationDetails(mac) {
    const response = await fetch(`${API_BASE_URL}/details/${mac}`);
    
    if (!response.ok) {
        if (response.status === 404) {
            throw new Error('Station not found');
        } else if (response.status === 400) {
            throw new Error('Invalid MAC address');
        } else {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
    }
    
    return await response.json();
}

// Show message when no stations are connected
function showNoStations() {
    stationTableBody.innerHTML = `
        <tr>
            <td colspan="7" class="loading">No stations connected</td>
        </tr>
    `;
}

// Show error message
function showError(message) {
    errorMessage.querySelector('p').textContent = message;
    errorMessage.classList.remove('hidden');
}

// Hide error message
function hideError() {
    errorMessage.classList.add('hidden');
}

// Format data rate (assuming it's in Mbps or similar)
function formatDataRate(rateStr) {
    if (!rateStr) return 'N/A';
    
    const rate = parseInt(rateStr);
    if (isNaN(rate)) return rateStr;
    
    // Convert to Mbps if it seems to be in a different unit
    if (rate > 1000) {
        return `${(rate / 1000).toFixed(1)} Mbps`;
    }
    return `${rate} Mbps`;
}

// Format bytes to human readable format
function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    if (!bytes) return 'N/A';
    
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Format duration from seconds to human readable format
function formatDuration(secondsStr) {
    if (!secondsStr) return 'N/A';
    
    const seconds = parseInt(secondsStr);
    if (isNaN(seconds) || seconds <= 0) return 'Just now';
    
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    if (hours > 0) {
        return `${hours}h ${minutes}m`;
    } else if (minutes > 0) {
        return `${minutes}m ${secs}s`;
    } else {
        return `${secs}s`;
    }
}

// Get connection status based on connection time
function getConnectionStatus(connectedTimeStr) {
    if (!connectedTimeStr) return 'Unknown';
    
    const seconds = parseInt(connectedTimeStr);
    if (isNaN(seconds)) return 'Connected';
    
    if (seconds < 60) return 'New';
    else if (seconds < 300) return 'Medium';
    else return 'Established';
}

// Get CSS class for connection status
function getConnectionStatusClass(connectedTimeStr) {
    if (!connectedTimeStr) return 'status-established';
    
    const seconds = parseInt(connectedTimeStr);
    if (isNaN(seconds)) return 'status-established';
    
    if (seconds < 60) return 'status-new';
    else if (seconds < 300) return 'status-medium';
    else return 'status-established';
}

// Add CSS classes for status indicators (in case they're not in the CSS)
const style = document.createElement('style');
style.textContent = `
    .status-connected { color: #27ae60; font-weight: bold; }
    .status-connecting { color: #f39c12; font-weight: bold; }
    .status-disconnected { color: #7f8c8d; font-weight: bold; }
    .status-error { color: #e74c3c; font-weight: bold; }
`;
document.head.appendChild(style);