chore: more info when scan wifi

src_data/dashboard.html

@@ -38,8 +38,8 @@
                   <div class="thermostat-temp-target"><span id="thermostat-heating-target"></span> <span class="temp-unit"></span></div>
                   <div class="thermostat-temp-current">Current: <span id="thermostat-heating-current"></span> <span class="temp-unit"></span></div>
                 </div>
-                <div class="thermostat-minus"><button id="thermostat-heating-minus" class="outline"><b>-</b></button></div>
-                <div class="thermostat-plus"><button id="thermostat-heating-plus" class="outline"><b>+</b></button></div>
+                <div class="thermostat-minus"><button id="thermostat-heating-minus" class="outline"><i class="icons-down"></i></button></div>
+                <div class="thermostat-plus"><button id="thermostat-heating-plus" class="outline"><i class="icons-up"></i></button></div>
                 <div class="thermostat-control">
                   <input type="checkbox" role="switch" id="thermostat-heating-enabled" value="true">
                   <label htmlFor="thermostat-heating-enabled">Enable</label>
@@ -55,8 +55,8 @@
                   <div class="thermostat-temp-target"><span id="thermostat-dhw-target"></span> <span class="temp-unit"></span></div>
                   <div class="thermostat-temp-current">Current: <span id="thermostat-dhw-current"></span> <span class="temp-unit"></span></div>
                 </div>
-                <div class="thermostat-minus"><button class="outline" id="thermostat-dhw-minus"><b>-</b></button></div>
-                <div class="thermostat-plus"><button class="outline" id="thermostat-dhw-plus"><b>+</b></button></div>
+                <div class="thermostat-minus"><button class="outline" id="thermostat-dhw-minus"><i class="icons-down"></i></button></div>
+                <div class="thermostat-plus"><button class="outline" id="thermostat-dhw-plus"><i class="icons-up"></i></button></div>
                 <div class="thermostat-control">
                   <input type="checkbox" role="switch" id="thermostat-dhw-enabled" value="true">
                   <label htmlFor="thermostat-dhw-enabled">Enable</label>

src_data/network.html

@@ -82,7 +82,7 @@
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">SSID</th>
-                  <th scope="col">Signal</th>
+                  <th scope="col">Info</th>
                 </tr>
               </thead>
               <tbody></tbody>

src_data/static/app.css

@@ -86,18 +86,6 @@ tr.network:hover {
 	cursor: pointer;
 }
 
-.greatSignal {
-	background-color: var(--pico-form-element-valid-border-color);
-}
-
-.normalSignal {
-	background-color: #e48500;
-}
-
-.badSignal {
-	background-color: var(--pico-form-element-invalid-border-color);
-}
-
 .primary {
 	border: 0.25rem solid var(--pico-form-element-invalid-border-color);
 	padding: 1rem;
@@ -194,3 +182,13 @@ tr.network:hover {
 
 	margin: 1.25rem 0;
 }
+
+[class*=" icons-"],[class=icons],[class^=icons-] {font-size: 1.35rem; }
+*:has(> [class*=" icons-"], > [class=icons], > [class^=icons-]):has(+ * > [class*=" icons-"], + * > [class=icons], + * > [class^=icons-]) { margin: 0 0.5rem 0 0; }
+[data-tooltip]:has(> [class*=" icons-"], > [class=icons], > [class^=icons-]) { border: 0!important; }
+
+
+/*!
+ *  Icons icon font. Generated by Iconly: https://iconly.io/
+ */
+ @font-face{font-display:auto;font-family:"Icons";font-style:normal;font-weight:400;src:url(./fonts/iconly.eot?1717885802370);src:url(./fonts/iconly.eot?#iefix) format("embedded-opentype"),url(./fonts/iconly.woff2?1717885802370) format("woff2"),url(./fonts/iconly.woff?1717885802370) format("woff"),url(./fonts/iconly.ttf?1717885802370) format("truetype")}[class*=" icons-"],[class=icons],[class^=icons-]{display:inline-block;font-family:"Icons"!important;font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.icons-plus:before{content:"\e000"}.icons-minus:before{content:"\e001"}.icons-unlocked:before{content:"\e002"}.icons-locked:before{content:"\e003"}.icons-wifi-strength-1:before{content:"\e004"}.icons-wifi-strength-0:before{content:"\e005"}.icons-wifi-strength-2:before{content:"\e006"}.icons-wifi-strength-3:before{content:"\e008"}.icons-down:before{content:"\e009"}.icons-wifi-strength-4:before{content:"\e00a"}.icons-up:before{content:"\e00c"}

src_data/static/app.js

@@ -150,19 +150,56 @@ function setupNetworkScanForm(formSelector, tableSelector) {
         };
 
         row.insertCell().textContent = "#" + (i + 1);
-        row.insertCell().innerHTML = result[i].hidden ? '<i>Hidden</i>' : result[i].ssid;
+        row.insertCell().innerHTML = result[i].hidden ? ("<i>" + result[i].bssid + "</i>") : result[i].ssid;
 
-        const signalCell = row.insertCell();
-        const signalElement = document.createElement("kbd");
-        signalElement.textContent = result[i].signalQuality + "%";
-        if (result[i].signalQuality > 60) {
-          signalElement.classList.add('greatSignal');
+        // info cell
+        let infoCell = row.insertCell();
+
+        // signal quality
+        let signalQualityIcon = document.createElement("i");
+        if (result[i].signalQuality > 80) {
+          signalQualityIcon.classList.add('icons-wifi-strength-4');
+        } else if (result[i].signalQuality > 60) {
+          signalQualityIcon.classList.add('icons-wifi-strength-3');
         } else if (result[i].signalQuality > 40) {
-          signalElement.classList.add('normalSignal');
+          signalQualityIcon.classList.add('icons-wifi-strength-2');
+        } else if (result[i].signalQuality > 20) {
+          signalQualityIcon.classList.add('icons-wifi-strength-1');
         } else {
-          signalElement.classList.add('badSignal');
+          signalQualityIcon.classList.add('icons-wifi-strength-0');
         }
-        signalCell.appendChild(signalElement);
+        
+        let signalQualityContainer = document.createElement("span");
+        signalQualityContainer.setAttribute('data-tooltip', result[i].signalQuality + "%");
+        signalQualityContainer.appendChild(signalQualityIcon);
+        infoCell.appendChild(signalQualityContainer);
+
+        // auth
+        const authList = {
+          0: "Open",
+          1: "WEP",
+          2: "WPA",
+          3: "WPA2",
+          4: "WPA/WPA2",
+          5: "WPA/WPA2 Enterprise",
+          6: "WPA3",
+          7: "WPA2/WPA3",
+          8: "WAPI",
+          9: "OWE",
+          10: "WPA3 Enterprise"
+        };
+        let authIcon = document.createElement("i");
+
+        if (result[i].auth == 0) {
+          authIcon.classList.add('icons-unlocked');
+        } else {
+          authIcon.classList.add('icons-locked');
+        }
+
+        let authContainer = document.createElement("span");
+        authContainer.setAttribute('data-tooltip', (result[i].auth in authList) ? authList[result[i].auth] : "unknown");
+        authContainer.appendChild(authIcon);
+        infoCell.appendChild(authContainer);
       }
 
       if (button) {