From f556ea8a2c4409b170775c7ef46a8a5976980ee8 Mon Sep 17 00:00:00 2001 From: Aaron LI Date: Mon, 28 Nov 2016 14:16:34 +0800 Subject: webui: Use the same "#modal-box" and the "showModal()" function --- fg21sim/webui/static/js/configs.js | 29 ++++++++++----------------- fg21sim/webui/static/js/console.js | 19 +++++------------- fg21sim/webui/static/js/main.js | 9 ++++----- fg21sim/webui/static/js/products.js | 37 +++++++++++++---------------------- fg21sim/webui/static/js/websocket.js | 5 +---- fg21sim/webui/templates/configs.html | 2 -- fg21sim/webui/templates/console.html | 2 -- fg21sim/webui/templates/index.html | 2 ++ fg21sim/webui/templates/products.html | 2 -- 9 files changed, 36 insertions(+), 71 deletions(-) (limited to 'fg21sim') 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 @@ -261,15 +261,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 @@ -9,15 +9,6 @@ "use strict"; -/** - * 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. * @@ -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 = $("

"); 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 @@ -9,15 +9,6 @@ "use strict"; -/** - * Show notification contents in the "#modal-products" modal box. - */ -var showModalProducts = function (data) { - var modalBox = $("#modal-products"); - showModal(modalBox, data); -}; - - /** * Reset the manifest table */ @@ -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 = $("

").addClass("modal").attr("id", "modal-websocket"); - $("body").append(modalBox); - showModal(modalBox, { + showModal({ icon: "warning", title: "WebSocket is NOT supported by the browser!", contents: ("The necessary functionalities 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 @@
- - 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 @@ - - 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" %} + + {% 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 @@ - - -- cgit v1.2.2