UI - Realtime - Add realtime warning to page if server goes offline

changedetectionio/static/js/realtime.js

@@ -55,6 +55,7 @@ $(document).ready(function () {
 
             // Connection status logging
             socket.on('connect', function () {
+                $('#realtime-conn-error').hide();
                 console.log('Socket.IO connected with path:', socketio_url);
                 console.log('Socket transport:', socket.io.engine.transport.name);
                 bindSocketHandlerButtonsEvents(socket);
@@ -74,7 +75,8 @@ $(document).ready(function () {
 
             socket.on('disconnect', function (reason) {
                 console.log('Socket.IO disconnected, reason:', reason);
-                $('.ajax-op').off('.socketHandlerNamespace')
+                $('.ajax-op').off('.socketHandlerNamespace');
+                $('#realtime-conn-error').show();
             });
 
             socket.on('queue_size', function (data) {

changedetectionio/static/styles/scss/styles.scss

@@ -1190,3 +1190,12 @@ ul {
   vertical-align: middle;
 }
 
+#realtime-conn-error {
+  position: absolute;
+  bottom: 0;
+  left: 30px;
+  background: var(--color-warning);
+  padding: 10px;
+  font-size: 0.8rem;
+  color: #fff;
+}

changedetectionio/static/styles/styles.css

@@ -1535,3 +1535,12 @@ ul {
     height: 21px;
     padding: 2px;
     vertical-align: middle; }
+
+#realtime-conn-error {
+  position: absolute;
+  bottom: 0;
+  left: 30px;
+  background: var(--color-warning);
+  padding: 10px;
+  font-size: 0.8rem;
+  color: #fff; }

changedetectionio/templates/base.html

@@ -236,6 +236,7 @@
     <script src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}" defer></script>
 
     <div id="checking-now-fixed-tab" style="display: none;"><span class="spinner"></span><span>&nbsp;Checking now</span></div>
+    <div id="realtime-conn-error" style="display:none">Realtime updates offline</div>
   </body>
 
 </html>