Merge pull request #379 from pollen-robotics/373-bis-debug-wifi

373 Improve wifi settings

Author: FabienDanieau

src/reachy_mini/daemon/app/dashboard/static/css/app.css

@@ -3,9 +3,12 @@ const updateManager = {
     preRelease: false,
 
     isUpdateAvailable: async () => {
-        fetch('/update/available?pre_release=' + updateManager.preRelease)
-            .then(response => response.json())
-            .then(data => {
+        await fetch('/update/available?pre_release=' + updateManager.preRelease)
+            .then(async response => {
+                if (!response.ok) {
+                    return false;
+                }
+                const data = await response.json();
                 return data.update.reachy_mini;
             }).catch(error => {
                 console.error('Error checking for updates:', error);

src/reachy_mini/daemon/app/dashboard/static/fonts/Archivo-Italic-VariableFont_wdth,wght.ttf

@@ -1,16 +1,18 @@
 
-const refreshStatus = () => {
-    fetch('/wifi/status')
+const getStatus = async () => {
+    return await fetch('/wifi/status')
         .then(response => response.json())
-        .then(data => {
-            handleStatus(data);
-        })
         .catch(error => {
             console.error('Error fetching WiFi status:', error);
-            handleStatus('error');
+            return { mode: 'error' };
         });
+};
 
-    fetch('/wifi/error')
+const refreshStatus = async () => {
+    const status = await getStatus();
+    handleStatus(status);
+
+    await fetch('/wifi/error')
         .then(response => response.json())
         .then(data => {
             if (data.error !== null) {
@@ -24,6 +26,27 @@ const refreshStatus = () => {
         });
 };
 
+const scanAndListWifiNetworks = async () => {
+    await fetch('/wifi/scan_and_list', { method: 'POST' })
+        .then(response => response.json())
+        .then(data => {
+            const ssidSelect = document.getElementById('ssid');
+            data.forEach(ssid => {
+                const option = document.createElement('option');
+                option.value = ssid;
+                option.textContent = ssid;
+                ssidSelect.appendChild(option);
+            });
+        })
+        .catch(() => {
+            const ssidSelect = document.getElementById('ssid');
+            const option = document.createElement('option');
+            option.value = "";
+            option.textContent = "Unable to load networks";
+            ssidSelect.appendChild(option);
+        });
+};
+
 const connectToWifi = (_) => {
     const ssid = document.getElementById('ssid').value;
     const password = document.getElementById('password').value;
@@ -45,11 +68,15 @@ const connectToWifi = (_) => {
                     throw new Error(errData.detail || 'Failed to connect to WiFi');
                 });
             }
+
+            // Clear the form fields
+            document.getElementById('ssid').value = '';
+            document.getElementById('password').value = '';
+
             return response.json();
         })
         .then(data => {
-            console.log('Connection response:', data);
-            handleStatus('busy');
+            handleStatus({ mode: 'busy' });
         })
         .catch(error => {
             console.error('Error connecting to WiFi:', error);
@@ -58,33 +85,92 @@ const connectToWifi = (_) => {
     return false; // Prevent form submission
 };
 
+let currentMode = null;
+
 const handleStatus = (status) => {
     const statusDiv = document.getElementById('wifi-status');
-    const addWifiDiv = document.getElementById('add-wifi');
-    const busyDiv = document.getElementById('busy');
 
-    addWifiDiv.classList = 'hidden';
+    const knownNetworksDiv = document.getElementById('known-networks');
+    const knownNetworksList = document.getElementById('known-networks-list');
+    knownNetworksDiv.classList.remove('hidden');
+
+    const mode = status.mode;
+
+    knownNetworksList.innerHTML = '';
+    if (status.known_networks !== undefined && Array.isArray(status.known_networks)) {
+        status.known_networks.forEach((network) => {
+            const li = document.createElement('li');
+            li.classList = 'flex flex-row items-center mb-1 gap-4 justify-left';
+
+            const nameSpan = document.createElement('span');
+            nameSpan.innerText = network;
+            li.appendChild(nameSpan);
+
+            // const removeBtn = document.createElement('span');
+            // removeBtn.innerText = ' (remove ❌)';
+            // removeBtn.style.cursor = 'pointer';
+            // removeBtn.title = 'Remove network';
+            // removeBtn.onclick = async () => {
+            //     if (confirm(`Remove network '${network}'?`)) {
+            //         removeNetwork(network);
+            //     }
+            // };
+            // li.appendChild(removeBtn);
 
-    if (status == 'hotspot') {
+            knownNetworksList.appendChild(li);
+        });
+    }
+
+    if (mode == 'hotspot') {
         statusDiv.innerText = 'Hotspot mode active. 🔌';
-        addWifiDiv.classList.remove('hidden');
-    } else if (status == 'wlan') {
-        statusDiv.innerText = 'Connected to WiFi. 📶';
-    } else if (status == 'disconnected') {
+
+    } else if (mode == 'wlan') {
+        if (currentMode !== null && currentMode !== 'wlan') {
+            alert(`Successfully connected to WiFi network: ${status.connected_network} ✅`);
+        }
+
+        statusDiv.innerText = `Connected to WiFi (SSID: ${status.connected_network}). 📶`;
+
+    } else if (mode == 'disconnected') {
         statusDiv.innerText = 'WiFi disconnected. ❌';
-    } else if (status == 'busy') {
+    } else if (mode == 'busy') {
         statusDiv.innerText = 'Changing your WiFi configuration... Please wait ⏳';
-        busyDiv.hidden = false;
-    } else if (status == 'error') {
+    } else if (mode == 'error') {
         statusDiv.innerText = 'Error connecting to WiFi. ⚠️';
     } else {
         console.warn(`Unknown status: ${status}`);
     }
 
-    currentStatus = status;
+    currentMode = mode;
+};
+
+const removeNetwork = async (ssid) => {
+    const status = await getStatus();
+
+    // TODO:
+    // if ssid !== status.connected_network:
+    //    remove connection
+    // else:
+    //    refresh nmcli? go back to hotspot if needed?
+};
+
+const cleanAndRefresh = async () => {
+    const statusDiv = document.getElementById('wifi-status');
+    statusDiv.innerText = 'Checking WiFi configuration...';
+
+    const knownNetworksDiv = document.getElementById('known-networks');
+    knownNetworksDiv.classList.add('hidden');
+
+    const addWifi = document.getElementById('add-wifi');
+    addWifi.classList.add('hidden');
+
+    await scanAndListWifiNetworks();
+    await refreshStatus();
+
+    addWifi.classList.remove('hidden');
 };
 
-window.addEventListener('load', () => {
-    refreshStatus();
+window.addEventListener('load', async () => {
+    await cleanAndRefresh();
     setInterval(refreshStatus, 1000);
 });

src/reachy_mini/daemon/app/dashboard/static/fonts/Archivo-VariableFont_wdth,wght.ttf

@@ -0,0 +1 @@
+node_modules

src/reachy_mini/daemon/app/dashboard/static/fonts/Asap-Italic-VariableFont_wdth,wght.ttf

@@ -0,0 +1,15 @@
+# Generate static Tailwind CSS
+
+## Requirements
+
+(From this folder)
+
+```bash
+pnpm install -D tailwindcss @tailwindcss/cli 
+```
+
+## Generate CSS
+
+```bash
+npx @tailwindcss/cli -i ./styles/app.css -o ../static/css/app.css
+```