diff options
| -rw-r--r-- | fg21sim/webui/static/css/main.css | 28 | ||||
| -rw-r--r-- | fg21sim/webui/static/js/console.js | 26 | ||||
| -rw-r--r-- | fg21sim/webui/templates/console.html | 12 |
3 files changed, 62 insertions, 4 deletions
diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css index a574990..de40123 100644 --- a/fg21sim/webui/static/css/main.css +++ b/fg21sim/webui/static/css/main.css @@ -374,12 +374,40 @@ button, font-size: 1.6rem; font-weight: bold; } +.panel-control { + float: right; +} .panel-body { padding: 1.5rem; } /** + * Logging messages styles + */ +p.log { + font-size: 1.3rem; + margin-bottom: 0; +} +p.log span { + margin-right: 0.8rem; +} +p.log.log-debug { + color: inherit; +} +p.log.log-info { + color: #398439; +} +p.log.log-warning { + color: #d58512; +} +p.log.log-error, +p.log.log-critical { + color: #ac2925; +} + + +/** * Horizontal rules */ hr { diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js index 6d5783a..f9e75dc 100644 --- a/fg21sim/webui/static/js/console.js +++ b/fg21sim/webui/static/js/console.js @@ -58,6 +58,30 @@ var updateTaskStatus = function (status) { /** + * Append the logging messages to the "#log-messages" panel box + * + * @param {Object} msg - Server pushed logging message of "action=log" + */ +var appendLogMessage = function (msg) { + var log_icons = { + debug: "<span class='icon fa fa-comment'></span>", + info: "<span class='icon fa fa-info-circle'></span>", + warning: "<span class='icon fa fa-warning'></span>", + error: "<span class='icon fa fa-times-circle'></span>", + critical: "<span class='icon fa fa-times-circle'></span>", + }; + var level = msg.levelname.toLowerCase(); + var ele = $("<p>").addClass("code log log-" + level); + ele.append($(log_icons[level])); + ele.append($("<span>").addClass("asctime").text(msg.asctime)); + ele.append($("<span>").addClass("levelname").text(msg.levelname)); + ele.append($("<span>").addClass("name").text(msg.name)); + ele.append($("<span>").addClass("message").text(msg.message)); + ele.appendTo("#log-messages"); +}; + + +/** * Get the task status from the server * * @param {Object} ws - The opened WebSocket object through which to send @@ -84,7 +108,7 @@ var startServerTask = function (ws, time) { */ var handleMsgConsole = function (msg) { if (msg.action === "log") { - // TODO: show the logging messages + appendLogMessage(msg); } else if (msg.action === "push") { // Update the task status diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html index e7853c9..ca082cc 100644 --- a/fg21sim/webui/templates/console.html +++ b/fg21sim/webui/templates/console.html @@ -22,12 +22,18 @@ <button type="button" class="button button-warning" id="task-stop" disabled="disabled"><span class="fa fa-stop" aria-hidden="true"></span> Stop</button> </p> - <div id="log-messages" class="panel panel-default"> + <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title"><span class="fa fa-comments" aria-hidden="true"></span> Logging Messages</span> + <span class="panel-control"> + <span id="log-toggle-debug" title="Toggle display of DEBUG messages" class="btn fa fa-comment" aria-hidden="true"></span> + <span id="log-toggle-info" title="Toggle display of INFO messages" class="btn fa fa-info-circle" aria-hidden="true"></span> + <span id="log-toggle-warning" title="Toggle display of WARNING messages" class="btn fa fa-warning" aria-hidden="true"></span> + <span id="log-toggle-error" title="Toggle display of ERROR messages" class="btn fa fa-times-circle" aria-hidden="true"></span> + <span id="log-delete" title="Delete all messages" class="btn fa fa-trash" aria-hidden="true"></span> + </span> </div> - <div class="panel-body"> - <p>messages ...</p> + <div id="log-messages" class="panel-body"> </div> </div> </section> |