chore: more info when scan wifi

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) {