webui: console.html: Remove extra modal "#console-invalid-configs"

* Implement "showModalConsole()" based on "showModal()"
* Move binding function from "websocket.js" to "console.js"

3 files changed, 58 insertions, 44 deletions

diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js
index 3dfd8b0..1ee323b 100644
--- a/fg21sim/webui/static/js/console.js
+++ b/fg21sim/webui/static/js/console.js
@@ -10,6 +10,15 @@
 
 
 /**
+ * Show notification contents in the "#modal-console" modal box.
+ */
+var showModalConsole = function (data) {
+  var modalBox = $("#modal-console");
+  showModal(modalBox, data);
+};
+
+
+/**
  * Update the task status "#task-status" on the page.
  *
  * @param {Object} status - The status pushed from the server is an object
@@ -68,7 +77,7 @@ var appendLogMessage = function (msg) {
     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>",
+    critical: "<span class='icon fa fa-times-circle'></span>"
   };
   var level = msg.levelname.toLowerCase();
   var ele = $("<p>").addClass("code log log-" + level);
@@ -180,3 +189,51 @@ var handleMsgConsole = function (msg) {
     // TODO: add error code support and handle each specific error ...
   }
 };
+
+
+$(document).ready(function () {
+  /**
+   * Start the simulation task on the server
+   */
+  $("#task-start").on("click", function () {
+    if ($("#conf-status").data("validity")) {
+      updateTaskStatus({running: true, finished: false});
+      startServerTask(g_ws);
+      getServerTaskStatus(g_ws);
+    } else {
+      $("#console-invalid-configs").modal();
+      var modalData = {};
+      modalData.icon = "times-circle";
+      modalData.message = ("Exist invalid configuration values! " +
+                           "Please correct the configurations " +
+                           "before starting the task");
+      showModalConsole(modalData);
+      console.error("Exist invalid configuration values!");
+    }
+  });
+
+  /**
+   * Logging messages controls
+   */
+  $("#log-toggle-debug").on("click", function () {
+    var status = toggleLogMessages("debug");
+    $(this).fadeTo("fast", status ? 1.0 : 0.5);
+  });
+  $("#log-toggle-info").on("click", function () {
+    var status = toggleLogMessages("info");
+    $(this).fadeTo("fast", status ? 1.0 : 0.5);
+  });
+  $("#log-toggle-warning").on("click", function () {
+    var status = toggleLogMessages("warning");
+    $(this).fadeTo("fast", status ? 1.0 : 0.5);
+  });
+  $("#log-toggle-error").on("click", function () {
+    var status = toggleLogMessages("error");
+    toggleLogMessages("critical");
+    $(this).fadeTo("fast", status ? 1.0 : 0.5);
+  });
+  $("#log-delete").on("click", function () {
+    // TODO: add a confirmation dialog
+    deleteLogMessages();
+  });
+});
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index a8f9085..45d550d 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -172,45 +172,6 @@ $(document).ready(function () {
       connectWebSocket(ws_url);
     });
 
-    /**********************************************************************
-     * Console operations
-     */
-
-    // Start the task on the server
-    $("#task-start").on("click", function () {
-      if ($("#conf-status").data("validity")) {
-        updateTaskStatus({running: true, finished: false});
-        startServerTask(g_ws);
-        getServerTaskStatus(g_ws);
-      } else {
-        $("#console-invalid-configs").modal();
-        console.error("Exist invalid configuration values!");
-      }
-    });
-
-    /* Logging messages controls */
-    $("#log-toggle-debug").on("click", function () {
-      var status = toggleLogMessages("debug");
-      $(this).fadeTo("fast", status ? 1.0 : 0.5);
-    });
-    $("#log-toggle-info").on("click", function () {
-      var status = toggleLogMessages("info");
-      $(this).fadeTo("fast", status ? 1.0 : 0.5);
-    });
-    $("#log-toggle-warning").on("click", function () {
-      var status = toggleLogMessages("warning");
-      $(this).fadeTo("fast", status ? 1.0 : 0.5);
-    });
-    $("#log-toggle-error").on("click", function () {
-      var status = toggleLogMessages("error");
-      toggleLogMessages("critical");
-      $(this).fadeTo("fast", status ? 1.0 : 0.5);
-    });
-    $("#log-delete").on("click", function () {
-      // TODO: add a confirmation dialog
-      deleteLogMessages();
-    });
-
   } 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 9f2d7d6..16209e6 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -20,10 +20,6 @@
         <span class="text">Not started</span>
       </span>
     </strong></p>
-    <div id="console-invalid-configs" class="modal" style="display: none;">
-      <p>There exist some <strong>invalid</strong> configuration values!</p>
-      <p>Please correct the configurations before starting the simulations</p>
-    </div>
 
     <p class="button-group">
       <button type="button" id="task-start"><span class="fa fa-play" aria-hidden="true"></span> Start</button>