diff options
| -rw-r--r-- | fg21sim/webui/static/js/console.js | 100 | ||||
| -rw-r--r-- | fg21sim/webui/static/js/websocket.js | 26 | ||||
| -rw-r--r-- | fg21sim/webui/templates/console.html | 5 |
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"> |