Implementation with iwd

cmd/repeater/static/app.js

@@ -5,7 +5,11 @@ const appState = {
     autoScrollLogs: true,
     ws: null,
     reconnectAttempts: 0,
-    maxReconnectAttempts: 5
+    maxReconnectAttempts: 5,
+    connectedSSID: null,
+    networks: [],
+    uptime: 0,
+    uptimeInterval: null
 };
 
 // Initialize the application
@@ -30,7 +34,8 @@ async function initializeApp() {
     // Start periodic updates
     startPeriodicUpdates();
 
-    showToast('success', 'Connecté', 'Interface web chargée avec succès');
+    // Start uptime counter
+    startUptimeCounter();
 }
 
 // ===== API Functions =====
@@ -62,6 +67,7 @@ async function scanWifi() {
         const response = await fetch('/api/wifi/scan');
         const networks = await response.json();
 
+        appState.networks = networks;
         displayWifiNetworks(networks);
         showToast('success', 'Scan WiFi', `${networks.length} réseau(x) trouvé(s)`);
     } catch (error) {
@@ -128,6 +134,10 @@ async function disconnectWifi() {
         if (response.ok) {
             showToast('success', 'Déconnecté', 'Déconnexion WiFi réussie');
             await loadStatus();
+            // Force refresh WiFi list to remove green highlighting
+            if (appState.networks.length > 0) {
+                displayWifiNetworks(appState.networks);
+            }
         } else {
             throw new Error('Disconnection failed');
         }
@@ -288,10 +298,22 @@ function updateStatusDisplay(status) {
 
     appState.hotspotEnabled = status.hotspotEnabled;
 
+    // Check if connectedSSID changed and refresh WiFi list if needed
+    const connectedSSIDChanged = appState.connectedSSID !== status.connectedSSID;
+    appState.connectedSSID = status.connectedSSID;
+
+    if (connectedSSIDChanged && appState.networks.length > 0) {
+        displayWifiNetworks(appState.networks);
+    }
+
     // Update stats
     document.getElementById('connectedDevices').textContent = status.connectedCount;
     document.getElementById('dataUsage').textContent = `${status.dataUsage.toFixed(1)} MB`;
+
+    // Update uptime in state (will be incremented by the interval)
+    appState.uptime = status.uptime;
     document.getElementById('uptime').textContent = formatUptime(status.uptime);
+
     document.getElementById('currentNetwork').textContent = status.connectedSSID || '-';
 }
 
@@ -307,15 +329,21 @@ function displayWifiNetworks(networks) {
     networks.forEach(network => {
         const wifiItem = document.createElement('div');
         wifiItem.className = 'wifi-item';
+
+        // Mark the currently connected network
+        if (appState.connectedSSID && network.ssid === appState.connectedSSID) {
+            wifiItem.classList.add('connected');
+        }
+
         wifiItem.onclick = () => selectWifi(network, wifiItem);
 
         wifiItem.innerHTML = `
             <div class="wifi-info">
                 <div class="wifi-ssid">${escapeHtml(network.ssid)}</div>
                 <div class="wifi-details">
-                    <span>${network.security}</span>
-                    <span>Canal ${network.channel}</span>
-                    <span>${network.bssid}</span>
+                    <span>${escapeHtml(network.security)}</span>
+                    <span>Canal ${escapeHtml(String(network.channel))}</span>
+                    <span>${escapeHtml(network.bssid)}</span>
                 </div>
             </div>
             <div class="wifi-signal">
@@ -533,3 +561,16 @@ function startPeriodicUpdates() {
         loadDevices();
     }, 10000);
 }
+
+function startUptimeCounter() {
+    // Clear any existing interval
+    if (appState.uptimeInterval) {
+        clearInterval(appState.uptimeInterval);
+    }
+
+    // Increment uptime every second
+    appState.uptimeInterval = setInterval(() => {
+        appState.uptime++;
+        document.getElementById('uptime').textContent = formatUptime(appState.uptime);
+    }, 1000);
+}

cmd/repeater/static/style.css

@@ -130,6 +130,7 @@ body {
     gap: 1rem;
     align-items: center;
     transition: all 0.3s ease;
+    max-width: 100%;
 }
 
 .stat-card:hover {
@@ -154,6 +155,7 @@ body {
 
 .stat-content {
     flex: 1;
+    min-width: 0;
 }
 
 .stat-value {
@@ -162,6 +164,9 @@ body {
     color: var(--text-primary);
     line-height: 1;
     margin-bottom: 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .stat-label {
@@ -413,6 +418,16 @@ body {
     border-left: 4px solid #667eea;
 }
 
+.wifi-item.connected {
+    background: #d1fae5;
+    border-left-color: var(--success-color) !important;
+}
+
+.wifi-item.connected .wifi-ssid {
+    color: var(--success-color);
+    font-weight: 700;
+}
+
 .wifi-item.loading {
     justify-content: center;
     color: var(--text-secondary);