delete ws connection alert after reconnection

assets/js/channels.js

@@ -62,15 +62,36 @@ function displayAlert(content = 'Can not reach the server - please reload the pa
   if (document.getElementById(elemid) === null) {
     let elem = document.createElement('div');
     elem.id = elemid;
-    elem.style.cssText = 'position:absolute;width:100%;opacity:0.5;z-index:100;background:#e63946;color:#f1faee;text-align:center;';
+    elem.style.cssText = 'position:fixed;top:0;width:100%;opacity:0.5;z-index:100;background:#e63946;color:#f1faee;text-align:center;';
+    elem.style.height = '1.8em';
     elem.innerHTML = content + '<a href="javascript:location.reload();" style="color:#a8dadc;padding: 0 10pt;font-weight:bold;">Reload</a>';
-    setTimeout(() => {
-      document.body.appendChild(elem);
-      document.location.href = '#' + elemid;
+    let elemspacer = document.createElement('div');
+    elemspacer.id = elemid + 'spacer';
+    elemspacer.style.height = (Genie.Settings.webchannels_alert_overlay) ? 0 : elem.style.height;
+    Genie.WebChannels.alertTimeout = setTimeout(() => {
+      if (Genie.Settings.webchannels_show_alert) {
+        document.body.prepend(elem);
+        document.body.prepend(elemspacer);
+      }
+      if (window.GENIEMODEL) GENIEMODEL.ws_disconnected = true;
     }, Genie.Settings.webchannels_server_gone_alert_timeout);
   }
 }
 
+function deleteAlert() {
+  clearInterval(Genie.WebChannels.alertTimeout);
+  if (window.GENIEMODEL) GENIEMODEL.ws_disconnected = false
+  let elemid = 'wsconnectionalert';
+  let elem = document.getElementById(elemid);
+  let elemspacer = document.getElementById(elemid + 'spacer');
+  if (elem !== null) {
+    elem.remove();
+  }
+  if (elemspacer !== null) {
+    elemspacer.remove();
+  }
+}
+
 function newSocketConnection(host = Genie.Settings.websockets_exposed_host) {
   let ws = new WebSocket(Genie.Settings.websockets_protocol + '//' + host
     + (Genie.Settings.websockets_exposed_port > 0 ? (':' + Genie.Settings.websockets_exposed_port) : '')
@@ -248,6 +269,7 @@ function subscription_ready() {
     }
   }
 
+  deleteAlert();
   if (isDev()) console.info('Subscription ready');
 };
 

src/Assets.jl

@@ -241,6 +241,8 @@ function js_settings(channel::String = Genie.config.webchannels_default_route) :
     :webchannels_connection_attempts => Genie.config.webchannels_connection_attempts,
     :webchannels_reconnect_delay     => Genie.config.webchannels_reconnect_delay,
     :webchannels_subscription_trails => Genie.config.webchannels_subscription_trails,
+    :webchannels_show_alert          => Genie.config.webchannels_show_alert,
+    :webchannels_alert_overlay       => Genie.config.webchannels_alert_overlay,
 
     :webthreads_default_route         => channel,
     :webthreads_js_file               => Genie.config.webthreads_js_file,

src/Configuration.jl

@@ -260,6 +260,8 @@ Base.@kwdef mutable struct Settings
   webchannels_connection_attempts                     = 10
   webchannels_reconnect_delay                         = 500 # milliseconds
   webchannels_subscription_trails                     = 4
+  webchannels_show_alert::Bool                        = true
+  webchannels_alert_overlay::Bool                     = false
 
   webthreads_default_route::String                    = webchannels_default_route
   webthreads_js_file::String                          = "webthreads.js"