webui: Add preliminary WebSocket support to front-end UI

Add a label to the header banner to show the WebSocket support status
and connection status.

4 files changed, 65 insertions, 0 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 4dcffb8..4672298 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -120,6 +120,7 @@ header.masthead {
 }
 .navigation .description {
     font-style: italic;
+    margin-right: 2.5rem;
 }
 .navigation .navigation-list {
     list-style: none;
@@ -247,6 +248,10 @@ label, legend {
     background-color: #d9534f;
 }
 
+.label .icon {
+    margin-right: 0.2rem;
+}
+
 
 /**
  * Button styles
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
new file mode 100644
index 0000000..08f128f
--- /dev/null
+++ b/fg21sim/webui/static/js/websocket.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ * MIT license
+ *
+ * WebSocket codes for the Web UI of "fg21sim"
+ */
+
+
+$(document).ready(function () {
+  /**
+   * Check `WebSocket` support
+   */
+  if (window.WebSocket) {
+    // WebSocket supported
+    var createWebSocket = function (uri) {
+      $("#ws-status .text").text("Supported");
+      var proto = {"http:": "ws:", "https:": "wss:"}[location.protocol];
+      var host = location.hostname;
+      var port = location.port;
+      var url = proto + "//" + host + ":" + port + uri;
+      var socket = new WebSocket(url);
+      return socket;
+    };
+
+    var ws = createWebSocket("/ws");
+    ws.onopen = function () {
+      $("#ws-status").removeClass("label-default label-danger")
+                     .addClass("label-success");
+      $("#ws-status .icon").removeClass("fa-question-circle fa-warning")
+                           .addClass("fa-check-circle");
+      $("#ws-status .text").text("Connected");
+    };
+    ws.onclose = function () {
+      $("#ws-status").removeClass("label-default label-success")
+                     .addClass("label-danger");
+      $("#ws-status .icon").removeClass("fa-question-circle fa-check-circle")
+                           .addClass("fa-warning");
+      $("#ws-status .text").text("Disconnected!");
+    };
+    ws.onmessage = function (e) {
+      console.log("WS received: " + e.data);
+    };
+
+  } else {
+    // WebSocket NOT supported
+    $("#ws-status").removeClass("label-default").addClass("label-danger");
+    $("#ws-status .icon").removeClass("fa-question-circle")
+                         .addClass("fa-times-circle");
+    $("#ws-status .text").text("Unsupported!!");
+  }
+});
diff --git a/fg21sim/webui/templates/header.html b/fg21sim/webui/templates/header.html
index 6309b50..b086515 100644
--- a/fg21sim/webui/templates/header.html
+++ b/fg21sim/webui/templates/header.html
@@ -12,6 +12,11 @@
     </a>
     <span class="description">Foregrounds Simulation for EoR 21cm Signal Detection</span>
 
+    <span id="ws-status" class="label label-default">
+        <span class="icon fa fa-question-circle" aria-hidden="true"></span>
+        <span class="text">N/A</span>
+    </span>
+
     <ul class="navigation-list float-right">
       <li class="navigation-item"><a class="navigation-link button button-outline" href="#configs" title="Configurations"><span class="fa fa-wrench" aria-hidden="true"></span> Configurations</a></li>
       <li class="navigation-item"><a class="navigation-link button button-outline" href="#console" title="Console"><span class="fa fa-gamepad" aria-hidden="true"></span> Console</a></li>
diff --git a/fg21sim/webui/templates/index.html b/fg21sim/webui/templates/index.html
index 105c4a0..8eb65cd 100644
--- a/fg21sim/webui/templates/index.html
+++ b/fg21sim/webui/templates/index.html
@@ -28,3 +28,7 @@
 {% block footer %}
   {% include "footer.html" %}
 {% end %}
+
+{% block extra_script %}
+  <script src="{{ static_url('js/websocket.js') }}"></script>
+{% end %}