Merge branch 'tweak/start-timeout-warning' into 'dev'

Server Start Timeout Warning

See merge request crafty-controller/crafty-4!518

CHANGELOG.md

@@ -17,6 +17,7 @@ TBD
 ### Tweaks
 - Make server directories non-configurable ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/511))
 - Add popover to server port to detail it's purpose ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/514))
+- Add server start timeout w/ WS Warning ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/518))
 ### Lang
 TBD
 <br><br>

app/frontend/templates/panel/dashboard.html

@@ -606,7 +606,6 @@
   function send_command(server_id, command) {
     /* this getCookie function is in base.html */
     const token = getCookie("_xsrf");
-
     $.ajax({
       type: "POST",
       headers: { 'X-XSRFToken': token },
@@ -623,6 +622,51 @@
     });
   }
 
+
+  function warn(message, link = null, className = null) {
+    var closeEl = document.createElement('span');
+    var strongEL = document.createElement('strong');
+    var msgEl = document.createElement('div');
+
+    closeEl.innerHTML = '×';
+    strongEL.textContent = 'Warning: ';
+    msgEl.append(strongEL, message);
+
+
+    closeEl.style.marginLeft = '15px';
+    closeEl.style.fontWeight = 'bold';
+    closeEl.style.float = 'right';
+    closeEl.style.fontSize = '22px';
+    closeEl.style.lineHeight = '20px';
+    closeEl.style.cursor = 'pointer';
+
+    closeEl.addEventListener('click', function () { this.parentElement.style.display = 'none'; });
+
+    var parentEl = document.createElement('div');
+
+    parentEl.style.padding = '20px';
+    parentEl.style.backgroundColor = '#f7970f';
+
+    parentEl.appendChild(closeEl);
+    parentEl.appendChild(msgEl);
+    if (link) {
+      let linkEl = document.createElement('a')
+      linkEl.href = link;
+      linkEl.innerHTML = "See our documentation for details.";
+      linkEl.style.color = 'white';
+      linkEl.style.textDecoration = 'underline';
+      linkEl.target = "_blank";
+
+      parentEl.appendChild(linkEl);
+    }
+
+    if (className) {
+      parentEl.classList.add(className);
+    }
+
+    document.querySelector('.dynamicMsg').appendChild(parentEl);
+  }
+
   function send_kill(server_id) {
     /* this getCookie function is in base.html */
     const token = getCookie("_xsrf");
@@ -774,11 +818,15 @@
       send_command(server_id, 'start_server');
       bootbox.alert({
         backdrop: true,
-        title: '{% raw translate("dashboard", "sendingCommand", data["lang"]) %}',
+        title: '<span class="dynamicMsg">{% raw translate("dashboard", "sendingCommand", data["lang"]) %}</span>',
         message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientStart", data["lang"]) %} </div>'
       });
+      setTimeout(finishTimeout, 60000);
     });
-
+    function finishTimeout() {
+      warn("It seems this is taking a while...it's possible you're using UBlock or a similar ad blocker and it's causing some of our connections to not make it to the server. Try disabling your ad blocker.",
+        null, 'wssError');
+    }
     $(".stop_button").click(function () {
       console.log("stopping server");
       server_id = $(this).attr("data-id");