wifi.html: rebuild propre depuis v1.4.4 + nouvelles features

Repart du code v1.4.4 qui fonctionne (elementsToLoad, config.json,
window.onload) et ajoute proprement: bouton oublier reseau, cards
contextuelles, infos WiFi detaillees, scan ameliore avec cache notice.
Ne touche PAS au systeme de chargement d'origine.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

html/wifi.html

@@ -72,34 +72,13 @@
                 </div>
                 <table class="table table-sm mb-0" id="connection-info-table" style="display:none;">
                   <tbody>
-                    <tr>
+                    <tr><td class="text-muted" style="width:40%">SSID</td><td><strong id="info-ssid">-</strong></td></tr>
-                      <td class="text-muted" style="width:40%">SSID</td>
+                    <tr><td class="text-muted">Signal</td><td><span id="info-signal">-</span></td></tr>
-                      <td><strong id="info-ssid">-</strong></td>
+                    <tr><td class="text-muted">Adresse IP</td><td><code id="info-ip">-</code></td></tr>
-                    </tr>
+                    <tr><td class="text-muted">Passerelle</td><td><code id="info-gateway">-</code></td></tr>
-                    <tr>
+                    <tr><td class="text-muted">Hostname</td><td><code id="info-hostname">-</code></td></tr>
-                      <td class="text-muted">Signal</td>
+                    <tr><td class="text-muted">Frequence</td><td id="info-freq">-</td></tr>
-                      <td><span id="info-signal-bar"></span> <span id="info-signal">-</span></td>
+                    <tr><td class="text-muted">Securite</td><td id="info-security">-</td></tr>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Adresse IP</td>
-                      <td><code id="info-ip">-</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Passerelle</td>
-                      <td><code id="info-gateway">-</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Hostname</td>
-                      <td><code id="info-hostname">-</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Frequence</td>
-                      <td id="info-freq">-</td>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Securite</td>
-                      <td id="info-security">-</td>
-                    </tr>
                   </tbody>
                 </table>
                 <button class="btn btn-outline-primary btn-sm mt-2" onclick="get_internet()">Rafraichir</button>
@@ -116,14 +95,8 @@
               <div class="card-body">
                 <table class="table table-sm mb-0">
                   <tbody>
-                    <tr>
+                    <tr><td class="text-muted" style="width:40%">Etat</td><td id="info-eth-status">-</td></tr>
-                      <td class="text-muted" style="width:40%">Etat</td>
+                    <tr><td class="text-muted">Adresse IP</td><td><code id="info-eth-ip">-</code></td></tr>
-                      <td id="info-eth-status">-</td>
-                    </tr>
-                    <tr>
-                      <td class="text-muted">Adresse IP</td>
-                      <td><code id="info-eth-ip">-</code></td>
-                    </tr>
                   </tbody>
                 </table>
               </div>
@@ -162,12 +135,7 @@
                 </div>
                 <table class="table table-hover mb-0" id="wifi-scan-table" style="display:none;">
                   <thead>
-                    <tr>
+                    <tr><th>SSID</th><th>Signal</th><th>Securite</th><th></th></tr>
-                      <th>SSID</th>
-                      <th>Signal</th>
-                      <th>Securite</th>
-                      <th></th>
-                    </tr>
                   </thead>
                   <tbody id="data-table-body_wifi_scan"></tbody>
                 </table>
@@ -232,24 +200,8 @@
             })
             .catch(error => console.error(`Error loading ${file}:`, error));
     });
-
-    
 });
 
-
-function load_ethernet_info() {
-    $.ajax({
-      url: 'launcher.php?type=internet',
-      dataType: 'json',
-      method: 'GET',
-      success: function(response) {
-        const eth = response.ethernet;
-        document.getElementById('info-eth-status').textContent = eth.connection || '-';
-        document.getElementById('info-eth-ip').textContent = eth.IP || '-';
-      }
-    });
-}
-
 function getSignalBadge(signal) {
     const val = parseInt(signal, 10);
     if (isNaN(val)) return '';
@@ -275,7 +227,6 @@ function get_internet(){
         const wifi = response.wifi;
         const eth = response.ethernet;
 
-        // WiFi info
         document.getElementById('info-ssid').textContent = wifi.ssid || '-';
         document.getElementById('info-signal').innerHTML = wifi.signal ? getSignalBadge(wifi.signal) : '-';
         document.getElementById('info-ip').textContent = wifi.IP || '-';
@@ -284,9 +235,7 @@ function get_internet(){
         document.getElementById('info-freq').textContent = wifi.frequency ? wifi.frequency + ' MHz' : '-';
         document.getElementById('info-security').textContent = wifi.security || '-';
 
-        // Ethernet info
+        document.getElementById('info-eth-status').textContent = eth.connection || '-';
-        const ethStatus = eth.connection || '-';
-        document.getElementById('info-eth-status').textContent = ethStatus;
         document.getElementById('info-eth-ip').textContent = eth.IP || '-';
 
         document.getElementById('connection-info-loading').style.display = 'none';
@@ -299,81 +248,45 @@ function get_internet(){
     });
 }
 
+function wifi_connect(SSID, PASS){
+    console.log("Connecting to wifi");
+    if (typeof PASS === 'undefined') {
+      var myModal = new bootstrap.Modal(document.getElementById('myModal'));
+      document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
+      document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
+      document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
+      myModal.show();
+    } else {
+      var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
+      if (myModal) { myModal.hide(); }
 
-  function wifi_connect(SSID, PASS){
+      $.ajax({
-        console.log("Connecting to wifi");
+        url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
-        console.log(SSID);
+        dataType: 'json',
-        console.log(PASS);
+        method: 'GET',
-        if (typeof PASS === 'undefined') {
+        success: function(response) {
-          console.log("Need to add password");
+          console.log(response);
-          //open bootstrap modal to ask for password
+          showConnectionStatus(response);
-          var myModal = new bootstrap.Modal(document.getElementById('myModal'));
+        },
-          //modifiy modal title
+        error: function(xhr, status, error) {
-          document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
+          console.error('AJAX request failed:', status, error);
-          //add input field to modal body
+          alert('Error: Could not start connection process');
-          document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
-          //add button to modal footer
-          document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
-          myModal.show();
-        } else {
-          console.log("Will try to connect to "+SSID+" with password "+PASS);
-          console.log("Start PHP script:");
-
-          // Close modal
-          var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
-          if (myModal) {
-            myModal.hide();
-          }
-
-          $.ajax({
-                url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
-                dataType: 'json', // Changed to JSON
-                method: 'GET',
-                success: function(response) {
-                            console.log(response);
-
-                            // Show connection status message
-                            showConnectionStatus(response);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                            alert('Error: Could not start connection process');
-                        }
-                });
-
         }
-            }
+      });
+    }
+}
 
-  function showConnectionStatus(response) {
+function showConnectionStatus(response) {
-    // Get user language (default to French)
     const lang = localStorage.getItem('language') || 'fr';
     const instructions = response.instructions[lang] || response.instructions['fr'];
 
-    // Create overlay with instructions
     const overlay = document.createElement('div');
     overlay.id = 'connection-status-overlay';
-    overlay.style.cssText = `
+    overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;color:white;';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.9);
-      z-index: 9999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-    `;
-
     overlay.innerHTML = `
       <div style="max-width: 600px; padding: 40px; text-align: center;">
-        <div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem;">
+        <div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem;"><span class="visually-hidden">Loading...</span></div>
-          <span class="visually-hidden">Loading...</span>
-        </div>
-
         <h2 class="mb-4">${instructions.title}</h2>
-
         <div class="alert alert-info text-start" role="alert">
           <ol class="mb-0" style="padding-left: 20px;">
             <li class="mb-2"><strong>${instructions.step1}</strong></li>
@@ -382,43 +295,19 @@ function get_internet(){
             <li class="mb-2">${instructions.step4}</li>
           </ol>
         </div>
-
+        <div class="alert alert-warning text-start" role="alert"><strong>Important:</strong> ${instructions.warning}</div>
-        <div class="alert alert-warning text-start" role="alert">
-          <strong>⚠️ Important:</strong> ${instructions.warning}
-        </div>
-
         <div class="mt-4">
-          <p class="text-muted">
+          <p class="text-muted">${lang === 'fr' ? 'Reconnexion à' : 'Reconnecting to'}: <strong class="text-white">${response.ssid}</strong></p>
-            ${lang === 'fr' ? 'Reconnexion à' : 'Reconnecting to'}:
+          <p class="text-muted">${lang === 'fr' ? 'Nom du capteur' : 'Sensor name'}: <strong class="text-white">${response.deviceName}</strong></p>
-            <strong class="text-white">${response.ssid}</strong>
-          </p>
-          <p class="text-muted">
-            ${lang === 'fr' ? 'Nom du capteur' : 'Sensor name'}:
-            <strong class="text-white">${response.deviceName}</strong>
-          </p>
         </div>
-
+        <div class="mt-4"><small class="text-muted">${lang === 'fr' ? 'Cette fenêtre va se fermer automatiquement...' : 'This window will close automatically...'}</small></div>
-        <div class="mt-4">
+      </div>`;
-          <small class="text-muted">
-            ${lang === 'fr' ? 'Cette fenêtre va se fermer automatiquement...' : 'This window will close automatically...'}
-          </small>
-        </div>
-      </div>
-    `;
-
     document.body.appendChild(overlay);
+    setTimeout(() => { const o = document.getElementById('connection-status-overlay'); if (o) o.remove(); }, 30000);
+}
 
-    // Auto-close after 30 seconds (gives time to read)
+function wifi_forget(){
-    setTimeout(() => {
-      if (document.getElementById('connection-status-overlay')) {
-        document.getElementById('connection-status-overlay').remove();
-      }
-    }, 30000);
-  }
-
-  function wifi_forget(){
     if (!confirm('Oublier le réseau WiFi actuel et passer en mode hotspot ?')) return;
-
     $.ajax({
       url: 'launcher.php?type=wifi_forget',
       dataType: 'json',
@@ -432,36 +321,19 @@ function get_internet(){
         alert('Error: Could not forget WiFi network');
       }
     });
-  }
+}
 
-  function showForgetStatus(response) {
+function showForgetStatus(response) {
     const lang = localStorage.getItem('language') || 'fr';
     const instructions = response.instructions[lang] || response.instructions['fr'];
 
     const overlay = document.createElement('div');
     overlay.id = 'connection-status-overlay';
-    overlay.style.cssText = `
+    overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;color:white;';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.9);
-      z-index: 9999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-    `;
-
     overlay.innerHTML = `
       <div style="max-width: 600px; padding: 40px; text-align: center;">
-        <div class="spinner-border text-warning mb-4" role="status" style="width: 4rem; height: 4rem;">
+        <div class="spinner-border text-warning mb-4" role="status" style="width: 4rem; height: 4rem;"><span class="visually-hidden">Loading...</span></div>
-          <span class="visually-hidden">Loading...</span>
-        </div>
-
         <h2 class="mb-4">${instructions.title}</h2>
-
         <div class="alert alert-info text-start" role="alert">
           <ol class="mb-0" style="padding-left: 20px;">
             <li class="mb-2"><strong>${instructions.step1}</strong></li>
@@ -470,30 +342,14 @@ function get_internet(){
             <li class="mb-2">${instructions.step4}</li>
           </ol>
         </div>
-
+        <div class="alert alert-warning text-start" role="alert"><strong>Important:</strong> ${instructions.warning}</div>
-        <div class="alert alert-warning text-start" role="alert">
+        <div class="mt-4"><p class="text-muted">Hotspot: <strong class="text-white">${response.deviceName}</strong></p></div>
-          <strong>Important:</strong> ${instructions.warning}
+      </div>`;
-        </div>
-
-        <div class="mt-4">
-          <p class="text-muted">
-            ${lang === 'fr' ? 'Hotspot' : 'Hotspot'}:
-            <strong class="text-white">${response.deviceName}</strong>
-          </p>
-        </div>
-      </div>
-    `;
-
     document.body.appendChild(overlay);
+    setTimeout(() => { const o = document.getElementById('connection-status-overlay'); if (o) o.remove(); }, 30000);
+}
 
-    setTimeout(() => {
+function wifi_scan(){
-      if (document.getElementById('connection-status-overlay')) {
-        document.getElementById('connection-status-overlay').remove();
-      }
-    }, 30000);
-  }
-
-  function wifi_scan(){
     console.log("Scanning Wifi");
     document.getElementById('wifi-scan-empty').innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div> Scan en cours...';
 
@@ -524,24 +380,19 @@ function get_internet(){
         response.forEach(network => {
           const row = document.createElement("tr");
 
-          // SSID
           const ssidCell = document.createElement("td");
-          const truncatedSSID = network.SSID.length > 25 ? network.SSID.substring(0, 25) + '...' : network.SSID;
+          ssidCell.textContent = network.SSID.length > 25 ? network.SSID.substring(0, 25) + '...' : network.SSID;
-          ssidCell.textContent = truncatedSSID;
           row.appendChild(ssidCell);
 
-          // Signal with badge
           const signalCell = document.createElement("td");
           signalCell.innerHTML = getSignalBadge(network.SIGNAL);
           row.appendChild(signalCell);
 
-          // Security
           const securityCell = document.createElement("td");
           securityCell.textContent = network.SECURITY || '--';
           securityCell.classList.add('text-muted');
           row.appendChild(securityCell);
 
-          // Connect button
           const buttonCell = document.createElement("td");
           buttonCell.classList.add('text-end');
           const button = document.createElement("button");
@@ -559,72 +410,75 @@ function get_internet(){
         document.getElementById('wifi-scan-empty').innerHTML = '<span class="text-danger">Erreur lors du scan</span>';
       }
     });
-  }
+}
-
-
 
     window.onload = function() {
-      $.ajax({
+    fetch('../config.json')
-        url: 'launcher.php?type=get_config_sqlite',
+        .then(response => response.json())
-        dataType: 'json',
+        .then(data => {
-        method: 'GET',
+          console.log("Getting config file (onload)");
-        success: function(data) {
+            const deviceID = data.deviceID.trim().toUpperCase();
-          console.log("Getting SQLite config table (wifi page):");
+             const deviceName = data.deviceName;
-          console.log(data);
 
-          // WiFi connection status — toggle cards
+           function updateSidebarDeviceName(deviceName) {
-          const WIFI_statusElement = document.getElementById("wifi-status");
+             const elements = document.querySelectorAll('.sideBar_sensorName');
-          console.log("WIFI is: " + data.WIFI_status);
+             if (elements.length > 0) {
+               elements.forEach((element) => {
+                 element.innerText = deviceName;
+               });
+             }
+           }
 
-          if (data.WIFI_status === "connected") {
+           if (deviceName) {
-            WIFI_statusElement.textContent = "Connected";
+             updateSidebarDeviceName(deviceName);
-            WIFI_statusElement.className = "badge text-bg-success";
+             setTimeout(() => updateSidebarDeviceName(deviceName), 100);
-            document.getElementById('btn-forget-wifi').style.display = 'inline-block';
+             setTimeout(() => updateSidebarDeviceName(deviceName), 500);
-            document.getElementById('card-connection-info').style.display = '';
+             document.title = deviceName;
-            document.getElementById('card-hotspot-info').style.display = 'none';
+           }
-            document.getElementById('card-wifi-scan').style.display = 'none';
-            // Auto-load connection details
-            get_internet();
-          } else if (data.WIFI_status === "hotspot") {
-            WIFI_statusElement.textContent = "Hotspot";
-            WIFI_statusElement.className = "badge text-bg-warning";
-            document.getElementById('btn-forget-wifi').style.display = 'none';
-            document.getElementById('card-connection-info').style.display = 'none';
-            document.getElementById('card-hotspot-info').style.display = '';
-            document.getElementById('card-wifi-scan').style.display = '';
-            // Auto-load cached scan results in hotspot mode
-            wifi_scan();
-          } else {
-            WIFI_statusElement.textContent = "Unknown";
-            WIFI_statusElement.className = "badge text-bg-secondary";
-            document.getElementById('btn-forget-wifi').style.display = 'none';
-            document.getElementById('card-connection-info').style.display = 'none';
-            document.getElementById('card-hotspot-info').style.display = 'none';
-            document.getElementById('card-wifi-scan').style.display = '';
-          }
 
-          // Always load ethernet info
+            const WIFI_statusElement = document.getElementById("wifi-status");
-          load_ethernet_info();
+
-        },
+            if (data.WIFI_status === "connected") {
-        error: function(xhr, status, error) {
+              WIFI_statusElement.textContent = "Connected";
-          console.error('AJAX request failed:', status, error);
+              WIFI_statusElement.className = "badge text-bg-success";
+              document.getElementById('btn-forget-wifi').style.display = 'inline-block';
+              document.getElementById('card-connection-info').style.display = '';
+              document.getElementById('card-hotspot-info').style.display = 'none';
+              document.getElementById('card-wifi-scan').style.display = 'none';
+              get_internet();
+            } else if (data.WIFI_status === "hotspot") {
+              WIFI_statusElement.textContent = "Hotspot";
+              WIFI_statusElement.className = "badge text-bg-warning";
+              document.getElementById('btn-forget-wifi').style.display = 'none';
+              document.getElementById('card-connection-info').style.display = 'none';
+              document.getElementById('card-hotspot-info').style.display = '';
+              document.getElementById('card-wifi-scan').style.display = '';
+              wifi_scan();
+            } else {
+              WIFI_statusElement.textContent = "Unknown";
+              WIFI_statusElement.className = "badge text-bg-secondary";
+              document.getElementById('btn-forget-wifi').style.display = 'none';
+              document.getElementById('card-connection-info').style.display = 'none';
+              document.getElementById('card-hotspot-info').style.display = 'none';
+              document.getElementById('card-wifi-scan').style.display = '';
+            }
+
+            $.ajax({
+                url: 'launcher.php?type=RTC_time',
+                dataType: 'text',
+                method: 'GET',
+                success: function(response) {
+                            const RTC_Element = document.getElementById("RTC_time");
+                            RTC_Element.textContent = response;
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+
+        })
+        .catch(error => console.error('Error loading config.json:', error));
         }
-      });
-
-      // Load RTC time
-      $.ajax({
-        url: 'launcher.php?type=RTC_time',
-        dataType: 'text',
-        method: 'GET',
-        success: function(response) {
-          const RTC_Element = document.getElementById("RTC_time");
-          if (RTC_Element) RTC_Element.textContent = response;
-        },
-        error: function(xhr, status, error) {
-          console.error('AJAX request failed:', status, error);
-        }
-      });
-    }
 
 </script>