Fix offline icons

components/wifi-manager/webapp/.vscode/launch.json

@@ -1,5 +1,11 @@
 {
     "configurations": [
+        {
+            "command": "npm run dev",
+            "name": "Run npm dev",
+            "request": "launch",
+            "type": "node-terminal"
+        },
         {
             "type": "chrome",
             "request": "launch",

components/wifi-manager/webapp/dist/postcss.config.d.ts

@@ -1 +0,0 @@
-export {};

components/wifi-manager/webapp/dist/src/js/custom.d.ts

@@ -1 +0,0 @@
-export {};

components/wifi-manager/webapp/dist/src/js/test.d.ts

@@ -1,69 +0,0 @@
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getStatus(): {};
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function getRadioButton(entry: any): string;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare function pushStatus(): void;
-declare let sd: {};
-declare let rf: boolean;
-declare function refreshStatus(): void;

components/wifi-manager/webapp/dist/test.d.ts

@@ -1 +0,0 @@
-export {};

components/wifi-manager/webapp/dist/test/test.d.ts

@@ -1 +0,0 @@
-export {};

components/wifi-manager/webapp/dist/webpack.config.d.ts

@@ -1,2 +0,0 @@
-declare function _exports(env: any, options: any): {};
-export = _exports;

components/wifi-manager/webapp/dist/webpack/postcss.config.d.ts

@@ -1,6 +0,0 @@
-export const parser: string;
-export const plugins: {
-    'postcss-import': {};
-    'postcss-cssnext': {};
-    cssnano: {};
-};

components/wifi-manager/webapp/dist/webpack/webpack.dev.d.ts

@@ -1,35 +0,0 @@
-import HtmlWebPackPlugin = require("html-webpack-plugin");
-export namespace entry {
-    const test: string;
-}
-export namespace devServer {
-    export namespace _static {
-        const directory: string;
-        const staticOptions: {};
-        const publicPath: string;
-        const serveIndex: boolean;
-        const watch: boolean;
-    }
-    export { _static as static };
-    export namespace devMiddleware {
-        const publicPath_1: string;
-        export { publicPath_1 as publicPath };
-    }
-    export const open: boolean;
-    export const compress: boolean;
-    export const port: number;
-    export const host: string;
-    export const allowedHosts: string;
-    export const headers: {
-        'Access-Control-Allow-Origin': string;
-        'Accept-Encoding': string;
-    };
-    export namespace client {
-        const logging: string;
-        const overlay: boolean;
-        const progress: boolean;
-    }
-    export function onListening(devServer: any): void;
-    export function onBeforeSetupMiddleware(devServer: any): void;
-}
-export const plugins: HtmlWebPackPlugin[];

components/wifi-manager/webapp/src/index.ejs

@@ -44,19 +44,19 @@
 
 		</div>
 		<div class="info navbar-right" style="display: inline-flex;">
-			<span class="recovery_element material-icons " style="color:orange; display: none">system_update_alt</span>
-			<span id="battery" class="material-icons" style="fill:white; display: none">battery_full</span>
-			<span id="o_jack" class="material-icons" style="fill:white; display: none">headphones</span>
-			<span id="s_airplay" class="material-icons" style="fill:white; display: none">airplay</span>
+			<span class="recovery_element material-icons " style="color:orange; display: none" aria-label="🛑" >system_update_alt</span>
+			<span id="battery" class="material-icons" style="fill:white; display: none" aria-label="🔋" >battery_full</span>
+			<span id="o_jack" class="material-icons" style="fill:white; display: none" aria-label="🎧">headphones</span>
+			<span id="s_airplay" class="material-icons" style="fill:white; display: none" aria-label="🍎">airplay</span>
 			<em id="s_cspot" class="fab fa-spotify" style="fill:white; display: inline"></em>
 			<span data-bs-toggle="tooltip" id="o_type" data-bs-placement="top" title="">
-				<span id="o_bt" class="material-icons" style="fill:white; display: none">bluetooth</span>
-				<span id="o_spdif" class="material-icons" style="fill:white; display: none">graphic_eq</span>
-				<span id="o_i2s" class="material-icons" style="fill:white; display: none">speaker</span>
+				<span id="o_bt" class="material-icons" style="fill:white; display: none" aria-label="">bluetooth</span>
+				<span id="o_spdif" class="material-icons" style="fill:white; display: none" aria-label="">graphic_eq</span>
+				<span id="o_i2s" class="material-icons" style="fill:white; display: none" aria-label="🔈">speaker</span>
 			</span>
-			<span id="ethernet" class="material-icons if_eth" style="fill:white; display: none">cable</span>
+			<span id="ethernet" class="material-icons if_eth" style="fill:white; display: none" aria-label="ETH">cable</span>
 			<span id="wifiStsIcon" class="material-icons if_wifi"
-				style="fill:white; display: none">signal_wifi_statusbar_4_bar</span>
+				style="fill:white; display: none" aria-label=""></span>
 
 		</div>
 	</header>
@@ -374,7 +374,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="card-body if_wifi" style="display: none">
+					<!-- <div class="card-body if_wifi" style="display: none">
 						<table class="table table-hover">
 							<thead>
 								<tr>
@@ -388,7 +388,7 @@
 						</table>
 						<button type="button" id="updateAP" class="btn btn-info btn-sm">Scan</button>
 
-					</div>
+					</div> -->
 
 
 

components/wifi-manager/webapp/src/js/custom.js

@@ -77,22 +77,22 @@ const nvsTypes = {
   NVS_TYPE_ANY: 0xff /*! < Must be last */,
 };
 const btIcons = {
-  bt_playing: 'media_bluetooth_on',
-  bt_disconnected: 'media_bluetooth_off',
-  bt_neutral: 'bluetooth',
-  bt_connecting: 'bluetooth_searching',
-  bt_connected: 'bluetooth_connected',
-  bt_disabled: 'bluetooth_disabled',
-  play_arrow: 'play_circle_filled',
-  pause: 'pause_circle',
-  stop: 'stop_circle',
-  '': '',
+  bt_playing: {'label':'','icon': 'media_bluetooth_on'},
+  bt_disconnected: {'label':'','icon': 'media_bluetooth_off'},
+  bt_neutral: {'label':'','icon': 'bluetooth'},
+  bt_connecting: {'label':'','icon': 'bluetooth_searching'},
+  bt_connected: {'label':'','icon': 'bluetooth_connected'},
+  bt_disabled: {'label':'','icon': 'bluetooth_disabled'},
+  play_arrow: {'label':'','icon': 'play_circle_filled'},
+  pause: {'label':'','icon': 'pause_circle'},
+  stop: {'label':'','icon': 'stop_circle'},
+  '':  {'label':'','icon':''}
 };
 const batIcons = [
-  { icon: "battery_0_bar", ranges: [{ f: 5.8, t: 6.8 }, { f: 8.8, t: 10.2 }] },
-  { icon: "battery_2_bar", ranges: [{ f: 6.8, t: 7.4 }, { f: 10.2, t: 11.1 }] },
-  { icon: "battery_3_bar", ranges: [{ f: 7.4, t: 7.5 }, { f: 11.1, t: 11.25 }] },
-  { icon: "battery_4_bar", ranges: [{ f: 7.5, t: 7.8 }, { f: 11.25, t: 11.7 }] }
+  { icon: "battery_0_bar", label:'▪', ranges: [{ f: 5.8, t: 6.8 }, { f: 8.8, t: 10.2 }] },
+  { icon: "battery_2_bar", label:'▪▪', ranges: [{ f: 6.8, t: 7.4 }, { f: 10.2, t: 11.1 }] },
+  { icon: "battery_3_bar", label:'▪▪▪', ranges: [{ f: 7.4, t: 7.5 }, { f: 11.1, t: 11.25 }] },
+  { icon: "battery_4_bar", label:'▪▪▪▪', ranges: [{ f: 7.5, t: 7.8 }, { f: 11.25, t: 11.7 }] }
 ];
 const btStateIcons = [
   { desc: 'Idle', sub: ['bt_neutral'] },
@@ -464,13 +464,19 @@ window.handleReboot = function (link) {
     $('#reboot_nav').removeClass('active'); delayReboot(500, '', link);
   }
 }
+function isConnected(){
+  return ConnectedTo.ip && ConnectedTo.ip!='0.0.0.0';
+}
+function getIcon(icons){
+  return isConnected()?icons.icon:icons.label;
+}
 function handlebtstate(data) {
   let icon = '';
   let tt = '';
   if (data.bt_status !== undefined && data.bt_sub_status !== undefined) {
     const iconindex = btStateIcons[data.bt_status].sub[data.bt_sub_status];
     if (iconindex) {
-      icon = btIcons[iconindex];
+      icon =  btIcons[iconindex];
       tt = btStateIcons[data.bt_status].desc;
     } else {
       icon = btIcons.bt_connected;
@@ -479,7 +485,7 @@ function handlebtstate(data) {
   }
 
   $('#o_type').attr('title', tt);
-  $('#o_bt').html(icon);
+  $('#o_bt').html(isConnected()?icon.label:icon.text);
 }
 function handleTemplateTypeRadio(outtype) {
   $('#o_type').children('span').css({ display: 'none' });
@@ -857,7 +863,6 @@ window.handleConnect = function () {
   $("*[class*='connecting']").hide();
   $('#ssid-wait').text(ConnectingToSSID.ssid);
   $('.connecting').show();
-
   $.ajax({
     url: '/connect.json',
     dataType: 'text',
@@ -876,6 +881,10 @@ window.handleConnect = function () {
 
 }
 $(document).ready(function () {
+  $('.material-icons').each(function (_index, entry) {
+    entry.attributes['icon']=entry.textContent;
+  });
+  setIcons(true);
   handleNVSVisible();
   flashState.init();
   $('#fw-url-input').on('input', function () {
@@ -1294,20 +1303,23 @@ window.setURL = function (button) {
 
 function rssiToIcon(rssi) {
   if (rssi >= -55) {
-    return `signal_wifi_statusbar_4_bar`;
+    return {'label':'****','icon':`signal_wifi_statusbar_4_bar`};
   } else if (rssi >= -60) {
-    return `network_wifi_3_bar`;
+    return {'label':'***','icon':`network_wifi_3_bar`};
   } else if (rssi >= -65) {
-    return `network_wifi_2_bar`;
+    return {'label':'**','icon':`network_wifi_2_bar`};
   } else if (rssi >= -70) {
-    return `network_wifi_1_bar`;
+    return {'label':'*','icon':`network_wifi_1_bar`};
   } else {
-    return `signal_wifi_statusbar_null`;
+    return {'label':'.','icon':`signal_wifi_statusbar_null`};
   }
 }
 
 function refreshAP() {
   if (ConnectedTo?.urc === connectReturnCode.ETH) return;
+  $.ajaxSetup({
+    timeout: 3000 //Time in milliseconds
+  });
   $.getJSON('/scan.json', async function () {
     await sleep(2000);
     $.getJSON('/ap.json', function (data) {
@@ -1327,10 +1339,13 @@ function refreshAP() {
   });
 }
 function formatAP(ssid, rssi, auth) {
+  const rssi_icon=rssiToIcon(rssi);
+  const auth_icon={label:auth == 0 ? '🔓' : '🔒',icon:auth == 0 ? 'no_encryption' : 'lock'};
+  
   return `<tr data-bs-toggle="modal" data-bs-target="#WifiConnectDialog"><td></td><td>${ssid}</td><td>
-  <span class="material-icons" style="fill:white; display: inline" >${rssiToIcon(rssi)}</span>
+  <span class="material-icons" style="fill:white; display: inline" aria-label="${rssi_icon.label}" icon="${rssi_icon.icon}" >${getIcon(rssi_icon)}</span>
   	</td><td>
-    <span class="material-icons">${(auth == 0 ? 'no_encryption' : 'lock')}</span>
+    <span class="material-icons" aria-label="${auth_icon.label}" icon="${auth_icon.icon}">${getIcon(auth_icon)}</span>
   </td></tr>`;
 }
 function refreshAPHTML2(data) {
@@ -1411,6 +1426,9 @@ function getBTSinkOpt(name) {
   return $(`${btSinkNamesOptSel} option:contains('${name}')`);
 }
 function getMessages() {
+  $.ajaxSetup({
+    timeout: messageInterval //Time in milliseconds
+  });
   $.getJSON('/messages.json', async function (data) {
     for (const msg of data) {
       const msgAge = msg.current_time - msg.sent_time;
@@ -1627,7 +1645,13 @@ function handleWifiDialog(data) {
 
   }
 }
+function setIcons(offline){
+  $('.material-icons').each(function (_index, entry) {
+    entry.textContent = entry.attributes[offline?'aria-label':'icon'].value;
+  });
+}
 function handleNetworkStatus(data) {
+  setIcons(data.ssid==='');
   if (hasConnectionChanged(data) || !data.urc) {
     ConnectedTo = data;
     $(".if_eth").hide();
@@ -1658,16 +1682,18 @@ function batteryToIcon(voltage) {
   for (const iconEntry of batIcons) {
     for (const entryRanges of iconEntry.ranges) {
       if (inRange(voltage, entryRanges.f, entryRanges.t)) {
-        return iconEntry.icon;
+        return { label: iconEntry.label, icon:iconEntry.icon};
       }
     }
   }
 
 
-  return "battery_full";
+  return {label:'▪▪▪▪',icon:"battery_full"};
 }
 function checkStatus() {
-
+  $.ajaxSetup({
+    timeout: statusInterval //Time in milliseconds
+  });
   $.getJSON('/status.json', function (data) {
     handleRecoveryMode(data);
     handleNVSVisible();
@@ -1691,7 +1717,10 @@ function checkStatus() {
       $('span#flash-status').html('');
     }
     if (data.Voltage) {
-      $('#battery').html(`${batteryToIcon(data.Voltage)}`);
+      const bat_icon=batteryToIcon(data.Voltage);
+      $('#battery').html(`${getIcon(bat_icon)}`);
+      $('#battery').attr("aria-label",bat_icon.label);
+      $('#battery').attr("icon",bat_icon.icon);
       $('#battery').show();
     } else {
       $('#battery').hide();
@@ -1835,6 +1864,9 @@ function getLongOps(data, name, longopts) {
   return data.values[name] !== undefined ? data.values[name][longopts] : "";
 }
 function getCommands() {
+  $.ajaxSetup({
+    timeout: 7000 //Time in milliseconds
+  });
   $.getJSON('/commands.json', function (data) {
     console.log(data);
     $('.orec').show();
@@ -1956,6 +1988,9 @@ function getCommands() {
 }
 
 function getConfig() {
+  $.ajaxSetup({
+    timeout: 7000 //Time in milliseconds
+  });
   $.getJSON('/config.json', function (entries) {
     $('#nvsTable tr').remove();
     const data = (entries.config ? entries.config : entries);

components/wifi-manager/webapp/webapp.cmake

@@ -1,5 +1,5 @@
-target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.7964a13ec910c36040b8.css.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.f2de74635f23b31fbdce.css.gz BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
-target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.d78ba9.bundle.js.gz BINARY)
-target_add_binary_data( __idf_wifi-manager webapp/dist/js/node_vendors.d78ba9.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.a5db51.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/node_vendors.a5db51.bundle.js.gz BINARY)

components/wifi-manager/webapp/webpack.c

@@ -1,34 +1,34 @@
 // Automatically generated. Do not edit manually!.
 #include <inttypes.h>
-extern const uint8_t _index_7964a13ec910c36040b8_css_gz_start[] asm("_binary_index_7964a13ec910c36040b8_css_gz_start");
-extern const uint8_t _index_7964a13ec910c36040b8_css_gz_end[] asm("_binary_index_7964a13ec910c36040b8_css_gz_end");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_start[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_start");
+extern const uint8_t _index_f2de74635f23b31fbdce_css_gz_end[] asm("_binary_index_f2de74635f23b31fbdce_css_gz_end");
 extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
 extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
 extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
 extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
-extern const uint8_t _index_d78ba9_bundle_js_gz_start[] asm("_binary_index_d78ba9_bundle_js_gz_start");
-extern const uint8_t _index_d78ba9_bundle_js_gz_end[] asm("_binary_index_d78ba9_bundle_js_gz_end");
-extern const uint8_t _node_vendors_d78ba9_bundle_js_gz_start[] asm("_binary_node_vendors_d78ba9_bundle_js_gz_start");
-extern const uint8_t _node_vendors_d78ba9_bundle_js_gz_end[] asm("_binary_node_vendors_d78ba9_bundle_js_gz_end");
+extern const uint8_t _index_a5db51_bundle_js_gz_start[] asm("_binary_index_a5db51_bundle_js_gz_start");
+extern const uint8_t _index_a5db51_bundle_js_gz_end[] asm("_binary_index_a5db51_bundle_js_gz_end");
+extern const uint8_t _node_vendors_a5db51_bundle_js_gz_start[] asm("_binary_node_vendors_a5db51_bundle_js_gz_start");
+extern const uint8_t _node_vendors_a5db51_bundle_js_gz_end[] asm("_binary_node_vendors_a5db51_bundle_js_gz_end");
 const char * resource_lookups[] = {
-	"/css/index.7964a13ec910c36040b8.css.gz",
+	"/css/index.f2de74635f23b31fbdce.css.gz",
 	"/favicon-32x32.png",
 	"/index.html.gz",
-	"/js/index.d78ba9.bundle.js.gz",
-	"/js/node_vendors.d78ba9.bundle.js.gz",
+	"/js/index.a5db51.bundle.js.gz",
+	"/js/node_vendors.a5db51.bundle.js.gz",
 ""
 };
 const uint8_t * resource_map_start[] = {
-	_index_7964a13ec910c36040b8_css_gz_start,
+	_index_f2de74635f23b31fbdce_css_gz_start,
 	_favicon_32x32_png_start,
 	_index_html_gz_start,
-	_index_d78ba9_bundle_js_gz_start,
-	_node_vendors_d78ba9_bundle_js_gz_start
+	_index_a5db51_bundle_js_gz_start,
+	_node_vendors_a5db51_bundle_js_gz_start
 };
 const uint8_t * resource_map_end[] = {
-	_index_7964a13ec910c36040b8_css_gz_end,
+	_index_f2de74635f23b31fbdce_css_gz_end,
 	_favicon_32x32_png_end,
 	_index_html_gz_end,
-	_index_d78ba9_bundle_js_gz_end,
-	_node_vendors_d78ba9_bundle_js_gz_end
+	_index_a5db51_bundle_js_gz_end,
+	_node_vendors_a5db51_bundle_js_gz_end
 };

components/wifi-manager/webapp/webpack.h

@@ -1,6 +1,6 @@
 /***********************************
 webpack_headers
-dist/css/index.7964a13ec910c36040b8.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.d78ba9.bundle.js.gz,dist/js/node_vendors.d78ba9.bundle.js.gz
+dist/css/index.f2de74635f23b31fbdce.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.a5db51.bundle.js.gz,dist/js/node_vendors.a5db51.bundle.js.gz
 ***********************************/
 #pragma once
 #include <inttypes.h>

components/wifi-manager/webapp/webpack/webpack.dev.js

@@ -136,8 +136,6 @@ module.exports ={
         test: './src/test.ts',
     },
     devServer: {
-
-        
         static: {
             directory: path.resolve(__dirname, './dist'),
             staticOptions: {},
@@ -154,7 +152,6 @@ module.exports ={
           },        
         devMiddleware: {
             publicPath: "/",
-
           },
         open: true,
         compress: true,
@@ -183,7 +180,7 @@ module.exports ={
         console.log('Listening on port:', port);
       },
 
-        onBeforeSetupMiddleware: function (devServer) {
+      setupMiddlewares: function (middlewares, devServer) {
             data.devServer=devServer;
             devServer.app.use(bodyParser.json()) // for parsing application/json
             devServer.app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
@@ -438,6 +435,7 @@ module.exports ={
             devServer.app.get('/reboot', function(req, res) {
                 waitForReboot();
                 res.json({"result" : "OK" }); });
+            return middlewares;
         },
     },
     plugins: [