webui: Use the same "#modal-box" and the "showModal()" function

9 files changed, 36 insertions, 71 deletions

diff --git a/fg21sim/webui/static/js/configs.js b/fg21sim/webui/static/js/configs.js
index 5dcd026..192f4fa 100644
--- a/fg21sim/webui/static/js/configs.js
+++ b/fg21sim/webui/static/js/configs.js
@@ -262,15 +262,6 @@ var updateFormConfigStatus = function () {
 
 
 /**
- * Show notification contents in the "#modal-configs" modal box.
- */
-var showModalConfigs = function (data) {
-  var modalBox = $("#modal-configs");
-  showModal(modalBox, data);
-};
-
-
-/**
  * Get the configurations from the server and update the client form
  * to the newly received values.
  *
@@ -322,14 +313,14 @@ var resetConfigs = function (url) {
           // Update the configuration status label
           updateFormConfigStatus();
           // Popup a modal notification
-          showModalConfigs({
+          showModal({
             icon: "check-circle",
             contents: "Reset and synchronized the configurations."
           });
         });
     })
     .fail(function (jqxhr) {
-      showModalConfigs({
+      showModal({
         icon: "times-circle",
         contents: "Failed to reset the configurations!",
         code: jqxhr.status,
@@ -359,7 +350,7 @@ var setServerConfigs = function (url, data) {
       setFormConfigs(response.data, response.errors);
     })
     .fail(function (jqxhr) {
-      showModalConfigs({
+      showModal({
         icon: "times-circle",
         contents: "Failed to update/set the configuration data!",
         code: jqxhr.status,
@@ -383,7 +374,7 @@ var loadServerConfigFile = function (url, userconfig) {
   }
   return $.postJSON(url, {action: "load", userconfig: userconfig})
     .fail(function (jqxhr) {
-      showModalConfigs({
+      showModal({
         icon: "times-circle",
         contents: "Failed to load the user configuration file!",
         code: jqxhr.status,
@@ -420,10 +411,10 @@ var saveServerConfigFile = function (url, clobber) {
         modalData.contents = ("Configurations saved to file. " +
                               "But there exist some invalid values!");
       }
-      showModalConfigs(modalData);
+      showModal(modalData);
     })
     .fail(function (jqxhr) {
-      showModalConfigs({
+      showModal({
         icon: "times-circle",
         contents: "Failed to save the configurations!",
         code: jqxhr.status,
@@ -443,7 +434,7 @@ var existsServerFile = function (url, filepath, callback) {
   };
   return $.getJSONUncached(url, data, callback)
     .fail(function (jqxhr) {
-      showModalConfigs({
+      showModal({
         icon: "times-circle",
         contents: ("Failed to check the existence " +
                    "of the user configuration file!"),
@@ -482,7 +473,7 @@ $(document).ready(function () {
 
   // Reset both server-side and client-side configurations to the defaults
   $("#reset-defaults").on("click", function () {
-    showModalConfigs({
+    showModal({
       icon: "warning",
       contents: "Are you sure to reset the configurations?",
       buttons: [
@@ -513,7 +504,7 @@ $(document).ready(function () {
         // Update the configuration status label
         updateFormConfigStatus();
         // Popup a modal notification
-        showModalConfigs({
+        showModal({
           icon: "check-circle",
           contents: "Loaded the configurations from file."
         });
@@ -527,7 +518,7 @@ $(document).ready(function () {
       if (response.data.exists) {
         // The specified configuration file already exists
         // Confirm to overwrite
-        showModalConfigs({
+        showModal({
           icon: "warning",
           contents: "Configuration file already exists! Overwrite?",
           buttons: [
diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js
index 1e2a638..2fc021c 100644
--- a/fg21sim/webui/static/js/console.js
+++ b/fg21sim/webui/static/js/console.js
@@ -10,15 +10,6 @@
 
 
 /**
- * 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
@@ -147,7 +138,7 @@ var deleteLogMessages = function () {
 var getServerTaskStatus = function (url) {
   return $.getJSONUncached(url)
     .fail(function (jqxhr) {
-      showModalConsole({
+      showModal({
         icon: "times-circle",
         contents: "Failed to get the task status!",
         code: jqxhr.status,
@@ -170,7 +161,7 @@ var startServerTask = function (url, task, kwargs) {
   var data = {action: "start", task: task, kwargs: kwargs};
   return $.postJSON(url, data)
     .fail(function (jqxhr) {
-      showModalConsole({
+      showModal({
         icon: "times-circle",
         contents: "Failed to start the task!",
         code: jqxhr.status,
@@ -212,14 +203,14 @@ $(document).ready(function () {
           getServerTaskStatus(ajax_url)
             .done(function (response) {
               updateTaskStatus(response.status);
-              showModalConsole({
+              showModal({
                 icon: "check-circle",
                 contents: "Simulation task successfully finished."
               });
             });
         });
     } else {
-      showModalConsole({
+      showModal({
         icon: "times-circle",
         contents: ("Exist invalid configuration values! " +
                    "Please correct the configurations " +
@@ -250,7 +241,7 @@ $(document).ready(function () {
     $(this).fadeTo("fast", status ? 1.0 : 0.5);
   });
   $("#log-delete").on("click", function () {
-    showModalConsole({
+    showModal({
       icon: "warning",
       contents: "Are you sure to delete all logging messages?",
       buttons: [
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index 58e6040..71310e4 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -188,9 +188,6 @@ var toggleBlock = function (toggle, targetBlock) {
 /**
  * Compose the notification contents and shown them in the modal box.
  *
- * The input `modalBox` may be a jQuery object or a jQuery selector of the
- * target modal box.
- *
  * The input `data` may have the following attributes:
  *   - `icon` : FontAwesome icon (specified without the beginning `fa-`)
  *   - `title` : Notification title/summary
@@ -203,9 +200,11 @@ var toggleBlock = function (toggle, targetBlock) {
  *                 + `click` : {Function} Function called on click.
  *                             To close the modal, use `$.modal.close()`
  */
-var showModal = function (modalBox, data) {
+var showModal = function (data, box) {
+  var modalBox = typeof box !== "undefined"
+        ? $(modalBox)
+        : $("#modal-box");
   var p;
-  modalBox = $(modalBox);
   // Empty previous contents
   modalBox.html("");
   p = $("<p>");
diff --git a/fg21sim/webui/static/js/products.js b/fg21sim/webui/static/js/products.js
index 16303c7..f485087 100644
--- a/fg21sim/webui/static/js/products.js
+++ b/fg21sim/webui/static/js/products.js
@@ -10,15 +10,6 @@
 
 
 /**
- * Show notification contents in the "#modal-products" modal box.
- */
-var showModalProducts = function (data) {
-  var modalBox = $("#modal-products");
-  showModal(modalBox, data);
-};
-
-
-/**
  * Reset the manifest table
  */
 var resetManifestTable = function () {
@@ -139,7 +130,7 @@ var loadServerManifest = function (url, manifestfile) {
   var data = {action: "load", manifestfile: manifestfile};
   return $.postJSON(url, data)
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to load the products manifest!",
         code: jqxhr.status,
@@ -164,13 +155,13 @@ var saveServerManifest = function (url, clobber) {
   };
   return $.postJSON(url, data)
     .done(function () {
-      showModalProducts({
+      showModal({
         icon: "check-circle",
         contents: "Current products manifest saved."
       });
     })
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to save current products manifest!",
         code: jqxhr.status,
@@ -186,7 +177,7 @@ var saveServerManifest = function (url, clobber) {
 var getServerManifest = function (url) {
   return $.getJSONUncached(url)
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to load the products manifest!",
         code: jqxhr.status,
@@ -214,13 +205,13 @@ var resetManifest = function (url) {
   return $.postJSON(url, {action: "reset"})
     .done(function () {
       resetManifestTable();
-      showModalProducts({
+      showModal({
         icon: "check-circle",
         contents: "Reset the products manifest."
       });
     })
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to reset the products manifest on server!",
         code: jqxhr.status,
@@ -239,7 +230,7 @@ var resetManifest = function (url) {
 var convertProductHPX = function (url, compID, freqID) {
   return $.postJSON(url, {action: "convert", compID: compID, freqID: freqID})
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to convert the HEALPix map to HPX image!",
         code: jqxhr.status,
@@ -265,7 +256,7 @@ var openProductHPX = function (url, compID, freqID, viewer) {
   };
   return $.getJSONUncached(url, data)
     .fail(function (jqxhr) {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Failed to open the HPX image!",
         code: jqxhr.status,
@@ -312,13 +303,13 @@ $(document).ready(function () {
       .done(function (response) {
         console.log("GET products response:", response);
         if ($.isEmptyObject(response.manifest)) {
-          showModalProducts({
+          showModal({
             icon: "warning",
             contents: "Products manifest not loaded on the server."
           });
         } else {
           loadManifestToTable(response.manifest, response.localhost);
-          showModalProducts({
+          showModal({
             icon: "check-circle",
             contents: "Loaded products manifest to table."
           });
@@ -353,7 +344,7 @@ $(document).ready(function () {
                " MB, MD5: " + product.data("hpx-md5"));
       modalData.contents.push(p);
     }
-    showModalProducts(modalData);
+    showModal(modalData);
   });
 
   // Convert HEALPix map of a product to HPX projected FITS image.
@@ -368,7 +359,7 @@ $(document).ready(function () {
     convertProductHPX(ajax_url, compID, freqID)
       .done(function (response) {
         updateManifestTableCell(cell, response.data);
-        showModalProducts({
+        showModal({
           icon: "check-circle",
           contents: "Generated HPX projected FITS image."
         });
@@ -387,13 +378,13 @@ $(document).ready(function () {
       viewer = input_viewer.val();
       openProductHPX(ajax_url, compID, freqID, viewer)
         .done(function (response) {
-          showModalProducts({
+          showModal({
             icon: "check-circle",
             contents: "Opened HPX FITS image. (PID: " + response.pid + ")"
           });
         });
     } else {
-      showModalProducts({
+      showModal({
         icon: "times-circle",
         contents: "Invalid name/path for the FITS viewer executable!"
       });
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 0480716..12c89a4 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -200,10 +200,7 @@ $(document).ready(function () {
     // WebSocket NOT supported
     console.warn("Oops, WebSocket is NOT supported!");
     updateWSStatus("unsupported");
-    // Create a modal box and show a warning
-    var modalBox = $("<div>").addClass("modal").attr("id", "modal-websocket");
-    $("body").append(modalBox);
-    showModal(modalBox, {
+    showModal({
       icon: "warning",
       title: "WebSocket is NOT supported by the browser!",
       contents: ("The <strong>necessary functionalities</strong> do NOT " +
diff --git a/fg21sim/webui/templates/configs.html b/fg21sim/webui/templates/configs.html
index bf3bfed..52af9a9 100644
--- a/fg21sim/webui/templates/configs.html
+++ b/fg21sim/webui/templates/configs.html
@@ -562,6 +562,4 @@
       </fieldset>  <!-- id="conf-eg" -->
     </form>
   </div>  <!-- h2: body -->
-
-  <div id="modal-configs" class="modal" style="display: none;"></div>
 </section>
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
index 16209e6..c8cb698 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -47,6 +47,4 @@
       </div>
     </div>  <!-- panel -->
   </div>  <!-- body -->
-
-  <div id="modal-console" class="modal" style="display: none;"></div>
 </section>
diff --git a/fg21sim/webui/templates/index.html b/fg21sim/webui/templates/index.html
index c107b96..86c2862 100644
--- a/fg21sim/webui/templates/index.html
+++ b/fg21sim/webui/templates/index.html
@@ -25,6 +25,8 @@
   {% include "configs.html" %}
   {% include "console.html" %}
   {% include "products.html" %}
+
+  <div id="modal-box" class="modal" style="display: none;"></div>
 {% end %}
 
 {% block extra_script %}
diff --git a/fg21sim/webui/templates/products.html b/fg21sim/webui/templates/products.html
index 6ef7e1f..9d483e1 100644
--- a/fg21sim/webui/templates/products.html
+++ b/fg21sim/webui/templates/products.html
@@ -43,6 +43,4 @@
       <tbody></tbody>
     </table>
   </div>  <!-- h2: body -->
-
-  <div id="modal-products" class="modal" style="display: none;"></div>
 </section>