add message bubble

components/wifi-manager/code.js

@@ -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);
+}