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

import { Controller } from "./main";
import {NetworkConfig, SSIDList, WifiScanResult} from "./api";

export class NetworkConfigView {
    private wifiResults: HTMLElement;
    
    setScanResult(ssidList: SSIDList) {
      this.ssidlist.innerHTML = ''
      for (const ssid of ssidList.ssids) {
          const wi = document.createElement("option");
          wi.value = ssid;
        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;
    private readonly mqtt_url: HTMLInputElement;
    private readonly base_topic: HTMLInputElement;
    private readonly max_wait: HTMLInputElement;
    private readonly mqtt_user: HTMLInputElement;
    private readonly mqtt_password: HTMLInputElement;
    private readonly ssidlist: HTMLElement;
    
    constructor(controller: Controller, publicIp: string) {
      (document.getElementById("network_view") as HTMLElement).innerHTML = require('./network.html') as string;

      (document.getElementById("remote_ip") as HTMLElement).innerText = publicIp;

      this.ap_ssid = (document.getElementById("ap_ssid") as HTMLInputElement);
      this.ap_ssid.onchange = controller.configChanged
  
      this.ssid = (document.getElementById("ssid") as HTMLInputElement);
      this.ssid.onchange = controller.configChanged
      this.password = (document.getElementById("password") as HTMLInputElement);
      this.password.onchange = controller.configChanged
      this.max_wait = (document.getElementById("max_wait") as HTMLInputElement);
      this.max_wait.onchange = controller.configChanged

      this.mqtt_url = document.getElementById("mqtt_url") as HTMLInputElement;
      this.mqtt_url.onchange = controller.configChanged
      this.base_topic = document.getElementById("base_topic") as HTMLInputElement;
      this.base_topic.onchange = controller.configChanged
      this.mqtt_user = document.getElementById("mqtt_user") as HTMLInputElement;
      this.mqtt_user.onchange = controller.configChanged
      this.mqtt_password = document.getElementById("mqtt_password") as HTMLInputElement;
      this.mqtt_password.onchange = controller.configChanged

      this.ssidlist = document.getElementById("ssidlist") as HTMLElement

      let scanWifiBtn = document.getElementById("scan") as HTMLButtonElement;
      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) {
      this.ap_ssid.value = network.ap_ssid;
      this.ssid.value = network.ssid;
      this.password.value = network.password;
      this.mqtt_url.value = network.mqtt_url;
      this.base_topic.value = network.base_topic;
      this.mqtt_user.value = network.mqtt_user ?? "";
      this.mqtt_password.value = network.mqtt_password ?? "";
      this.max_wait.value = network.max_wait.toString();
    }
    
    getConfig(): NetworkConfig {
      return {
        max_wait: +this.max_wait.value,
        ap_ssid: this.ap_ssid.value,
        ssid: this.ssid.value ?? null,
        password: this.password.value ?? null,
        mqtt_url: this.mqtt_url.value ?? null,
        mqtt_user: this.mqtt_user.value ? this.mqtt_user.value : null,
        mqtt_password: this.mqtt_password.value ? this.mqtt_password.value : null,
        base_topic: this.base_topic.value ?? null
      }
    }
  }