Add Wi-Fi scan details display and MQTT publish

- HTML: Add Wi-Fi scan results container to network.html
- Rust: Implement `wifi_scan_details()` with RSSI, channel, auth method
- API & UI: Fetch and display scan results in table format
- MQTT: Publish top 10 networks sorted by RSSI to `/wifi_scan`

Software/MainBoard/rust/src_webpack/src/network.ts

@@ -1,7 +1,9 @@
 import { Controller } from "./main";
-import {NetworkConfig, SSIDList} from "./api";
+import {NetworkConfig, SSIDList, WifiScanResult} from "./api";
 
 export class NetworkConfigView {
+    private wifiResults: HTMLElement;
+    
     setScanResult(ssidList: SSIDList) {
       this.ssidlist.innerHTML = ''
       for (const ssid of ssidList.ssids) {
@@ -10,6 +12,47 @@ export class NetworkConfigView {
         this.ssidlist.appendChild(wi);
       }
     }
+    
+    async scanAndDisplayWifiDetails() {
+        try {
+            const response = await fetch('/wifi_details');
+            if (response.ok) {
+                const data: WifiScanResult[] = await response.json();
+                this.displayWifiResults(data);
+            }
+        } catch (error) {
+            console.error('Error fetching Wi-Fi details:', error);
+            this.displayWifiResults([]);
+        }
+    }
+    
+    displayWifiResults(results: WifiScanResult[]) {
+        const wifiContainer = document.getElementById('wifi-results');
+        if (!wifiContainer) return;
+        
+        if (results.length === 0) {
+            wifiContainer.innerHTML = '<p>No Wi-Fi networks found</p>';
+            return;
+        }
+        
+        let html = '<table style="width:100%; border-collapse: collapse;">';
+        html += '<tr><th style="text-align:left; padding: 8px;">SSID</th>';
+        html += '<th style="text-align:left; padding: 8px;">Signal (RSSI)</th>';
+        html += '<th style="text-align:left; padding: 8px;">Channel</th>';
+        html += '<th style="text-align:left; padding: 8px;">Authentication</th></tr>';
+        
+        results.forEach(result => {
+            html += '<tr style="border-bottom: 1px solid #ddd;">';
+            html += `<td style="padding: 8px;">${result.ssid}</td>`;
+            html += `<td style="padding: 8px;">${result.rssi} dBm</td>`;
+            html += `<td style="padding: 8px;">${result.channel}</td>`;
+            html += `<td style="padding: 8px;">${result.auth_method}</td>`;
+            html += '</tr>';
+        });
+        
+        html += '</table>';
+        wifiContainer.innerHTML = html;
+    }
     private readonly ap_ssid: HTMLInputElement;
     private readonly ssid: HTMLInputElement;
     private readonly password: HTMLInputElement;
@@ -47,9 +90,14 @@ export class NetworkConfigView {
       this.ssidlist = document.getElementById("ssidlist") as HTMLElement
 
       let scanWifiBtn = document.getElementById("scan") as HTMLButtonElement;
-      scanWifiBtn.onclick = function (){
+      scanWifiBtn.onclick = async () => {
         controller.scanWifi();
-      }
+        // After Wi-Fi scan, fetch and display detailed results
+        await this.scanAndDisplayWifiDetails();
+      };
+      
+      // Store wifiResults reference for later use
+      this.wifiResults = document.getElementById('wifi-results') as HTMLElement;
     }
 
     setConfig(network: NetworkConfig) {