From 39dc175b88fe7e76770708c96bad9915c1eaa893 Mon Sep 17 00:00:00 2001
From: Aaron LI <aaronly.me@outlook.com>
Date: Mon, 28 Nov 2016 12:28:12 +0800
Subject: webui: Some JavaScript cleanups and refactors

Credit:
"JavaScript: The Good Parts" by Douglas Crockford
---
 fg21sim/webui/static/js/websocket.js | 56 ++++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 25 deletions(-)

(limited to 'fg21sim/webui/static/js/websocket.js')

diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 4cd8b8d..8060874 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -28,6 +28,24 @@ var getWebSocketURL = function (uri) {
 };
 
 
+/**
+ * Toggle the visibility of element "#ws-status".
+ */
+var toggleWSReconnect = function (action) {
+  action = typeof action !== "undefined" ? action : "toggle";
+  var target = $("#ws-reconnect");
+  if (action === "toggle") {
+    target.toggle();
+  } else if (action === "show") {
+    target.show();
+  } else if (action === "hide") {
+    target.hide();
+  } else {
+    console.error("toggleWSReconnect: Unknown action:", action);
+  }
+};
+
+
 /**
  * Update the contents of element "#ws-status" according to the current
  * WebSocket status.
@@ -66,6 +84,7 @@ var updateWSStatus = function (action) {
     $("#ws-status .icon").removeClass("fa-question-circle")
       .addClass("fa-times-circle");
     $("#ws-status .text").text("Unsupported!!");
+    toggleWSReconnect("hide");
   }
   else {
     console.error("updateWSStatus: Unknown action:", action);
@@ -73,28 +92,6 @@ var updateWSStatus = function (action) {
 };
 
 
-/**
- * Toggle the visibility of element "#ws-status".
- */
-var toggleWSReconnect = function (action) {
-  /**
-   * Function default parameters: https://stackoverflow.com/a/894877/4856091
-   */
-  action = typeof action !== "undefined" ? action : "toggle";
-
-  var target = $("#ws-reconnect");
-  if (action === "toggle") {
-    target.toggle();
-  } else if (action === "show") {
-    target.show();
-  } else if (action === "hide") {
-    target.hide();
-  } else {
-    console.error("toggleWSReconnect: Unknown action:", action);
-  }
-};
-
-
 /**
  * Connect to WebSocket and bind functions to events
  */
@@ -145,7 +142,7 @@ var connectWebSocket = function (url) {
 
 $(document).ready(function () {
   /**
-   * Check `WebSocket` support
+   * Check "WebSocket" support
    */
   if (window.WebSocket) {
     // WebSocket supported
@@ -161,10 +158,19 @@ $(document).ready(function () {
       console.log("Manually reconnect the WebSocket:", ws_url);
       connectWebSocket(ws_url);
     });
-
   } else {
     // WebSocket NOT supported
-    console.error("Oops, WebSocket is NOT supported!");
+    console.warn("Oops, WebSocket is NOT supported!");
     updateWSStatus("unsupported");
+    // Create a modal box and show a warning
+    var modalBox = $("<div>").addClass("modal").attr("id", "modal-websocket");
+    $("body").append(modalBox);
+    showModal(modalBox, {
+      icon: "warning",
+      title: "WebSocket is NOT supported by the browser!",
+      contents: ("The <strong>necessary functionalities</strong> do NOT " +
+                 "depend on WebSocket. However, the user experience may be " +
+                 "affected due to the missing WebSocket functionalities.")
+    });
   }
 });
-- 
cgit v1.2.2