Added "Lost connection" popup

Author: Fiahblade

assets/js/actions.js

@@ -42,14 +42,14 @@ async function updateServers() {
         }
     }).then((response) => {
         response.data.forEach(server => {
+            showLostConnectionPopup(false);
 
             $(`[data-server-guid="${server.Guid}"]`).data("server", server) 
             $(`.serverName-${server.Guid}`).html(`${server.Name}`)
             $(`.serverStatus-${server.Guid}`).html(`${GetFriendlyStatusName(server.Status)}`)
             $(`.serverStatusColor-${server.Guid}`).removeClass(["color-0", "color-1", "color-2", "color-3","color-4"]).addClass(`color-${server.Status}`)  
         })
     }).catch(err => {
-        console.error(err);
-        showPopup("Failed to fetch server status.")
+        showLostConnectionPopup(true);
     });
 }

assets/js/panel.js

@@ -127,3 +127,11 @@ function showPopup(content) {
             message: content
     });
 }
+
+function showLostConnectionPopup(visible) {
+    let parameter = visible ? "show": "hide";
+
+    $(".ui.basic.modal").modal({
+        closable: false,
+    }).modal(parameter);
+}

panel.html

@@ -58,6 +58,17 @@
         </div>
     </div>
 
+    <div class="ui basic modal">
+        <div class="ui icon header">
+            <i class="satellite dish icon"></i>
+            Lost connection to the MC Server Soft API.
+        </div>
+        <div class="center aligned content">
+          <p>Trying to restore the connection.</p>
+          <i class="sync loading icon"></i>
+        </div>
+      </div>
+
     <script src="assets/core/jquery.min.js"></script>
     <script src="assets/core/fomantic/semantic.min.js"></script>
     <script src="assets/core/axios.min.js"></script>