Initial commit

static/script.js

@@ -0,0 +1,231 @@
+// 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);