fix message race condition

components/wifi-manager/code.js

@@ -667,8 +667,8 @@ function refreshAPHTML(data){
 }
 
 function getMessages() {
-	   $.getJSON("/messages.json?1", function(data) {
-	        data.forEach(function(msg) {
+	   $.getJSON("/messages.json?1", async function(data) {
+            for (const msg of data) {
 	        	var msg_age = msg["current_time"] - msg["sent_time"];
 				var msg_time  = new Date();
 				msg_time.setTime( msg_time.getTime() - msg_age );
@@ -701,7 +701,7 @@ function getMessages() {
 	        			});
 	        			break;
 	        		case "MESSAGING_CLASS_SYSTEM":
-	        			showMessage(msg["message"], msg["type"],msg_age);
+	        			var r = await showMessage(msg["message"], msg["type"],msg_age);
 
                         $("#syslogTable").append(
                             "<tr class='"+msg["type"]+"'>"+
@@ -713,8 +713,7 @@ function getMessages() {
 				default:
 					break;
 				}	
-	        });
-	        
+           } 
 	    })
 	    .fail(function(xhr, ajaxOptions, thrownError) {
 	        console.log(xhr.status);
@@ -961,16 +960,18 @@ function showMessage(message, severity, age=0) {
     }
     	
     $('#message').html(message);
-    $("#content").fadeTo("slow", 0.3, function() {
-        $("#message").show(500).delay(5000).hide(500, function() {
-            $("#content").fadeTo("slow", 1.0);
+    return new Promise(function(resolve, reject) {
+        $("#content").fadeTo("slow", 0.3, function() {
+            $("#message").show(500).delay(5000).hide(500, function() {
+                $("#content").fadeTo("slow", 1.0, function() {
+                    resolve(true);
+                });
+            });
         });
     });
+
 }
 
 function inRange(x, min, max) {
     return ((x-min)*(x-max) <= 0);
 }
-
-    
-    

components/wifi-manager/style.css

@@ -386,6 +386,7 @@ div#message {
     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);
+    z-index: 20;
 }
 
 tr.hide {