webui: Implement status updating function

Add "updateTaskStatus()" to update the "#task-status" element.

Also add function "getServerTaskStatus()" to get the task status from
the server.

3 files changed, 128 insertions, 3 deletions

diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js
new file mode 100644
index 0000000..6d5783a
--- /dev/null
+++ b/fg21sim/webui/static/js/console.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2016 Weitian LI <liweitianux@live.com>
+ * MIT license
+ *
+ * Web UI of "fg21sim"
+ * Console operations using the WebSocket communications
+ */
+
+"use strict";
+
+
+/**
+ * Update the task status "#task-status" on the page.
+ *
+ * @param {Object} status - The status pushed from the server is an object
+ *                          containing the "running" and "finished" items.
+ */
+var updateTaskStatus = function (status) {
+  var running = status.running;
+  var finished = status.finished;
+  var ts = null;
+  if (!running && !finished) {
+    ts = "Not started";
+    $("#task-status").removeClass("label-success label-warning label-danger")
+      .addClass("label-default");
+    $("#task-status .icon").removeClass("fa-check-circle fa-question-circle")
+      .removeClass("fa-spin fa-spinner")
+      .addClass("fa-coffee");
+  }
+  else if (!running && finished) {
+    ts = "Finished";
+    $("#task-status").removeClass("label-default label-warning label-danger")
+      .addClass("label-success");
+    $("#task-status .icon").removeClass("fa-coffee fa-question-circle")
+      .removeClass("fa-spin fa-spinner")
+      .addClass("fa-check-circle");
+  }
+  else if (running && !finished) {
+    ts = "Running";
+    $("#task-status").removeClass("label-default label-success label-danger")
+      .addClass("label-warning");
+    $("#task-status .icon").removeClass("fa-coffee fa-check-circle")
+      .removeClass("fa-question-circle")
+      .addClass("fa-spin fa-spinner");
+  }
+  else {
+    // Unknown status: ERROR ??
+    ts = "ERROR?";
+    $("#task-status").removeClass("label-default label-success label-warning")
+      .addClass("label-danger");
+    $("#task-status .icon").removeClass("fa-coffee fa-check-circle")
+      .removeClass("fa-spin fa-spinner")
+      .addClass("fa-question-circle");
+  }
+  console.log("Task status:", ts);
+  $("#task-status .text").text(ts);
+};
+
+
+/**
+ * Get the task status from the server
+ *
+ * @param {Object} ws - The opened WebSocket object through which to send
+ *                      the request.
+ */
+var getServerTaskStatus = function (ws) {
+  var msg = {type: "console", action: "get_status"};
+  ws.send(JSON.stringify(msg));
+};
+
+
+/**
+ * Request to start the task on the server.
+ */
+var startServerTask = function (ws, time) {
+  time = typeof time !== "undefined" ? time : 5;
+  var msg = {type: "console", action: "start", time: time};
+  ws.send(JSON.stringify(msg));
+};
+
+
+/**
+ * Handle the received message of type "console"
+ */
+var handleMsgConsole = function (msg) {
+  if (msg.action === "log") {
+    // TODO: show the logging messages
+  }
+  else if (msg.action === "push") {
+    // Update the task status
+    updateTaskStatus(msg.status);
+  }
+  else if (msg.success) {
+    setFormConfigs(msg.data, msg.errors);
+  }
+  else {
+    console.error("WebSocket 'console' request failed:", msg.error);
+    // TODO: add error code support and handle each specific error ...
+  }
+};
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 0c566c6..8f726b8 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -135,8 +135,7 @@ var connectWebSocket = function (url) {
       handleMsgConfigs(msg);
     }
     else if (msg.type === "console") {
-      console.error("NotImplementedError");
-      // handleMsgConsole(msg);
+      handleMsgConsole(msg);
     }
     else if (msg.type === "results") {
       console.error("NotImplementedError");
@@ -173,6 +172,18 @@ $(document).ready(function () {
       connectWebSocket(ws_url);
     });
 
+    /**********************************************************************
+     * Configuration form
+     */
+
+    // Re-check/validate the whole form configurations
+    $("#conf-recheck").on("click", function () {
+      // TODO:
+      // * collect all current form configurations
+      // * sync to the server and validate
+      // * update the form errors
+    });
+
     // Reset the configurations to the defaults
     $("#reset-defaults").on("click", function () {
       // TODO:
@@ -212,6 +223,17 @@ $(document).ready(function () {
       setServerConfigs(g_ws, {[name]: value});
     });
 
+    /**********************************************************************
+     * Console operations
+     */
+
+    // Start the task on the server
+    $("#task-start").on("click", function () {
+      updateTaskStatus({running: true, finished: false});
+      startServerTask(g_ws);
+      getServerTaskStatus(g_ws);
+    });
+
   } else {
     // WebSocket NOT supported
     console.error("Oops, WebSocket is NOT supported!");
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
index 5236a6e..e7853c9 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -11,7 +11,10 @@
   <p class="status"><strong>
     <span class="fa fa-dashboard" aria-hidden="true"></span>
     Simulation status:
-    <span id="task-status" class="label label-default">N/A</span>
+    <span id="task-status" class="label label-default">
+      <span class="icon fa fa-coffee" aria-hidden="true"></span>
+      <span class="text">Not started</span>
+    </span>
   </strong></p>
 
   <p class="button-group">