add message bubble

components/wifi-manager/code.js

@@ -448,10 +448,10 @@ function checkStatus(){
     if (blockAjax) return;
     blockAjax = true;
     $.getJSON( "/status.json", function( data ) {
-        if(data.hasOwnProperty('ssid') && data['ssid'] != ""){
+        if (data.hasOwnProperty('ssid') && data['ssid'] != ""){
-            if(data["ssid"] === selectedSSID){
+            if (data["ssid"] === selectedSSID){
                 //that's a connection attempt
-                if(data["urc"] === 0){
+                if (data["urc"] === 0){
                     //got connection
                     $("#connected-to span").text(data["ssid"]);
                     $("#connect-details h1").text(data["ssid"]);
@@ -473,7 +473,7 @@ function checkStatus(){
                     enableAPTimer = false;
                     if (!recovery) enableStatusTimer = false;
                 }
-                else if(data["urc"] === 1){
+                else if (data["urc"] === 1){
                     //failed attempt
                     $("#connected-to span").text('');
                     $("#connect-details h1").text('');
@@ -497,7 +497,7 @@ function checkStatus(){
                     enableStatusTimer = true;
                 }
             }
-            else if(data.hasOwnProperty('urc') && data['urc'] === 0){
+            else if (data.hasOwnProperty('urc') && data['urc'] === 0){
                 //ESP32 is already connected to a wifi without having the user do anything
                 if( !($("#wifi-status").is(":visible")) ){
                     $("#connected-to span").text(data["ssid"]);
@@ -512,7 +512,7 @@ function checkStatus(){
                 if (!recovery) enableStatusTimer = false;
             }
         }
-        else if(data.hasOwnProperty('urc') && data['urc'] === 2){
+        else if (data.hasOwnProperty('urc') && data['urc'] === 2){
             //that's a manual disconnect
             if($("#wifi-status").is(":visible")){
                 $("#wifi-status").slideUp( "fast", function() {});
@@ -546,19 +546,19 @@ function checkStatus(){
                 enableStatusTimer = false;
             }
         }
-        if(data.hasOwnProperty('project_name') && data['project_name'] != ''){
+        if (data.hasOwnProperty('project_name') && data['project_name'] != ''){
             pname = data['project_name'];
         }
-        if(data.hasOwnProperty('version') && data['version'] != ''){
+        if (data.hasOwnProperty('version') && data['version'] != ''){
             ver = data['version'];
             $("span#foot-fw").html("fw: <strong>"+ver+"</strong>, mode: <strong>"+pname+"</strong>");
         }
-        if(data.hasOwnProperty('ota_pct') && data['ota_pct'] != 0){
+        if (data.hasOwnProperty('ota_pct') && data['ota_pct'] != 0){
             otapct = data['ota_pct'];
             $('.progress-bar').css('width', otapct+'%').attr('aria-valuenow', otapct);
             $('.progress-bar').html(otapct+'%');
         }
-        if(data.hasOwnProperty('ota_dsc') && data['ota_dsc'] != ''){
+        if (data.hasOwnProperty('ota_dsc') && data['ota_dsc'] != ''){
             otadsc = data['ota_dsc'];
             $("span#flash-status").html(otadsc);
             if (otadsc.match(/Error:/) || otapct > 95) {
@@ -568,6 +568,14 @@ function checkStatus(){
         } else {
             $("span#flash-status").html('');
         }
+        if (data.hasOwnProperty('message') && data['message'] != ''){
+            $('#message').html(data['message']);
+            $("#content").fadeTo("slow", 0.3, function() {
+                $("#message").show(500).delay(5000).hide(500, function() {
+                    $("#content").fadeTo("slow", 1.0);
+                });
+            });
+        }
         blockAjax = false;
     })
     .fail(function() {
@@ -598,7 +606,6 @@ function getConfig() {
                     "</tr>"
                 );
                 $("input#"+key).val(data[key]);
-                console.log(key+": "+data[key]);    //TODO
             }
         }
         $("tbody#nvsTable").append(

components/wifi-manager/index.html

@@ -44,8 +44,9 @@
                 <a class="nav-link" data-toggle="tab" href="#tab-credits">Credits</a>
             </li>
         </ul>
-        <div id="mode"></div>
+        <div id="message"></div>
 
+        <div id="content">
             <div id="myTabContent" class="tab-content">
                 <div class="tab-pane fade active show" id="tab-wifi">
                     <div id="wifi">
@@ -315,5 +316,6 @@
             </div>
             <footer class="footer"><span id="foot-fw"></span><span id="foot-wifi"></span></footer>
             <iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
+        </div>
     </body>
 </html>

components/wifi-manager/style.css

@@ -331,3 +331,24 @@ td.value {
 #boot-div {
     float: right;
 }
+
+iframe#dummyframe {
+    float: right;
+}
+
+div#message {
+    display: none;
+    color: #000;
+    background: #f00;
+    position:fixed;
+    padding: 8px;
+    top: 20%;
+    left: 50%;
+    width:20em;
+    height:4em;
+    text-align: center;
+    margin-left: -10em; /*set to a negative number 1/2 of your width*/
+    margin-top: -2em; /*set to a negative number 1/2 of your height*/
+    border-radius: 8px;
+    box-shadow: 0px 5px 2px -5px rgba(255, 255, 255, 0.5) inset, 0px 10px 20px -5px rgba(255, 255, 255, 0.1) inset, 0 0px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 1px rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.3);
+}