Disable form elements while database operation is pending.

Signed-off-by: DL6ER <dl6er@dl6er.de>
2025-12-24 12:48:29 +00:00 · 2020-01-22 19:10:21 +01:00
parent 3cac308e72
commit 43a861a6a9
9 changed files with 148 additions and 255 deletions
--- a/scripts/pi-hole/js/groups-adlists.js
+++ b/scripts/pi-hole/js/groups-adlists.js
@@ -5,71 +5,14 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */

-/* global moment:false */
+/* global showAlert:false */
+/* global datetime:false */
+/* global disableAll:false */
+/* global enableAll:false */

 var table;
 var groups = [];
 var token = $("#token").html();
-var info = null;
-
-function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
-  switch (type) {
-    case "info":
-      opts = {
-        type: "info",
-        icon: "glyphicon glyphicon-time",
-        title: title,
-        message: message
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "warning":
-      opts = {
-        type: "warning",
-        icon: "glyphicon glyphicon-warning-sign",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "glyphicon glyphicon-remove",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    default:
-  }
-}

 function get_groups() {
  $.post(
@@ -83,10 +26,6 @@ function get_groups() {
  );
 }

-function datetime(date) {
-  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
-}
-
 $(document).ready(function() {
  $("#btnAdd").on("click", addAdlist);

@@ -230,6 +169,7 @@ function addAdlist() {
  var address = $("#new_address").val();
  var comment = $("#new_comment").val();

+  disableAll();
  showAlert("info", "", "Adding adlist...", address);

  if (address.length === 0) {
@@ -248,6 +188,7 @@ function addAdlist() {
      token: token
    },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-plus", "Successfully added adlist", address);
        $("#new_address").val("");
@@ -258,6 +199,7 @@ function addAdlist() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while adding new adlist: ", jqXHR.responseText);
      console.log(exception);
    }
@@ -289,6 +231,7 @@ function editAdlist() {
    not_done = "editing groups of";
  }

+  disableAll();
  showAlert("info", "", "Editing adlist...", address);

  $.ajax({
@@ -304,6 +247,7 @@ function editAdlist() {
      token: token
    },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert(
          "success",
@@ -321,6 +265,7 @@ function editAdlist() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert(
        "error",
        "",
@@ -337,6 +282,7 @@ function deleteAdlist() {
  var tr = $(this).closest("tr");
  var address = tr.find("#address").text();

+  disableAll();
  showAlert("info", "", "Deleting adlist...", address);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -344,6 +290,7 @@ function deleteAdlist() {
    dataType: "json",
    data: { action: "delete_adlist", id: id, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted adlist ", address);
        table
@@ -353,6 +300,7 @@ function deleteAdlist() {
      } else showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while deleting adlist with ID " + id, jqXHR.responseText);
      console.log(exception);
    }
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -5,69 +5,13 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */

+/* global showAlert:false */
+/* global disableAll:false */
+/* global enableAll:false */
+
 var table;
 var groups = [];
 var token = $("#token").html();
-var info = null;
-
-function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
-  switch (type) {
-    case "info":
-      opts = {
-        type: "info",
-        icon: "glyphicon glyphicon-time",
-        title: title,
-        message: message
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "warning":
-      opts = {
-        type: "warning",
-        icon: "glyphicon glyphicon-warning-sign",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "glyphicon glyphicon-remove",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    default:
-  }
-}

 function reload_client_suggestions() {
  $.post(
@@ -238,9 +182,11 @@ function addClient() {
    ip = $("#ip-custom").val();
  }

+  disableAll();
  showAlert("info", "", "Adding client...", ip);

  if (ip.length === 0) {
+    enableAll();
    showAlert("warning", "", "Warning", "Please specify a client IP address");
    return;
  }
@@ -251,6 +197,7 @@ function addClient() {
    dataType: "json",
    data: { action: "add_client", ip: ip, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-plus", "Successfully added client", ip);
        reload_client_suggestions();
@@ -260,6 +207,7 @@ function addClient() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while adding new client", jqXHR.responseText);
      console.log(exception);
    }
@@ -286,6 +234,7 @@ function editClient() {
    ip_name += " (" + name + ")";
  }

+  disableAll();
  showAlert("info", "", "Editing client...", ip_name);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -293,6 +242,7 @@ function editClient() {
    dataType: "json",
    data: { action: "edit_client", id: id, groups: groups, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert(
          "success",
@@ -305,6 +255,7 @@ function editClient() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert(
        "error",
        "",
@@ -327,6 +278,7 @@ function deleteClient() {
    ip_name += " (" + name + ")";
  }

+  disableAll();
  showAlert("info", "", "Deleting client...", ip_name);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -334,6 +286,7 @@ function deleteClient() {
    dataType: "json",
    data: { action: "delete_client", id: id, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted client ", ip_name);
        table
@@ -346,6 +299,7 @@ function deleteClient() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while deleting client with ID " + id, jqXHR.responseText);
      console.log(exception);
    }
--- a/scripts/pi-hole/js/groups-common.js
+++ b/scripts/pi-hole/js/groups-common.js
@@ -0,0 +1,90 @@
+/* Pi-hole: A black hole for Internet advertisements
+ *  (c) 2020 Pi-hole, LLC (https://pi-hole.net)
+ *  Network-wide ad blocking via your own hardware.
+ *
+ *  This file is copyright under the latest version of the EUPL.
+ *  Please see LICENSE file for your rights under this license. */
+
+/* global moment:false */
+/* global showAlert:false */
+/* global datetime:false */
+/* global disableAll:false */
+/* global enableAll:false */
+
+var info = null;
+function showAlert(type, icon, title, message) {
+  var opts = {};
+  title = "&nbsp;<strong>" + title + "</strong><br>";
+  switch (type) {
+    case "info":
+      opts = {
+        type: "info",
+        icon: "glyphicon glyphicon-time",
+        title: title,
+        message: message
+      };
+      info = $.notify(opts);
+      break;
+    case "success":
+      opts = {
+        type: "success",
+        icon: icon,
+        title: title,
+        message: message
+      };
+      if (info) {
+        info.update(opts);
+      } else {
+        $.notify(opts);
+      }
+
+      break;
+    case "warning":
+      opts = {
+        type: "warning",
+        icon: "glyphicon glyphicon-warning-sign",
+        title: title,
+        message: message
+      };
+      if (info) {
+        info.update(opts);
+      } else {
+        $.notify(opts);
+      }
+
+      break;
+    case "error":
+      opts = {
+        type: "danger",
+        icon: "glyphicon glyphicon-remove",
+        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
+        message: message
+      };
+      if (info) {
+        info.update(opts);
+      } else {
+        $.notify(opts);
+      }
+
+      break;
+    default:
+  }
+}
+
+function datetime(date) {
+  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
+}
+
+function disableAll() {
+  $("input").attr("disabled", true);
+  $("select").attr("disabled", true);
+  $("button").attr("disabled", true);
+  $("textarea").attr("disabled", true);
+}
+
+function enableAll() {
+  $("input").attr("disabled", false);
+  $("select").attr("disabled", false);
+  $("button").attr("disabled", false);
+  $("textarea").attr("disabled", false);
+}
--- a/scripts/pi-hole/js/groups-domains.js
+++ b/scripts/pi-hole/js/groups-domains.js
@@ -5,71 +5,14 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */

-/* global moment:false */
+/* global showAlert:false */
+/* global datetime:false */
+/* global disableAll:false */
+/* global enableAll:false */

 var table;
 var groups = [];
 var token = $("#token").html();
-var info = null;
-
-function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
-  switch (type) {
-    case "info":
-      opts = {
-        type: "info",
-        icon: "glyphicon glyphicon-time",
-        title: title,
-        message: message
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "warning":
-      opts = {
-        type: "warning",
-        icon: "glyphicon glyphicon-warning-sign",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "glyphicon glyphicon-remove",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    default:
-  }
-}

 function get_groups() {
  $.post(
@@ -83,10 +26,6 @@ function get_groups() {
  );
 }

-function datetime(date) {
-  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
-}
-
 $(document).ready(function() {
  $("#btnAdd").on("click", addDomain);

@@ -248,9 +187,11 @@ function addDomain() {
  var type = $("#new_type").val();
  var comment = $("#new_comment").val();

+  disableAll();
  showAlert("info", "", "Adding domain...", domain);

  if (domain.length === 0) {
+    enableAll();
    showAlert("warning", "", "Warning", "Please specify a domain");
    return;
  }
@@ -267,6 +208,7 @@ function addDomain() {
      token: token
    },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-plus", "Successfully added domain", domain);
        $("#new_domain").val("");
@@ -275,6 +217,7 @@ function addDomain() {
      } else showAlert("error", "", "Error while adding new domain", response.message);
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while adding new domain", jqXHR.responseText);
      console.log(exception);
    }
@@ -313,6 +256,7 @@ function editDomain() {
    not_done = "editing groups of";
  }

+  disableAll();
  showAlert("info", "", "Editing domain...", name);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -328,6 +272,7 @@ function editDomain() {
      token: token
    },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert(
          "success",
@@ -344,6 +289,7 @@ function editDomain() {
        );
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert(
        "error",
        "",
@@ -360,6 +306,7 @@ function deleteDomain() {
  var tr = $(this).closest("tr");
  var domain = tr.find("#domain").text();

+  disableAll();
  showAlert("info", "", "Deleting domain...", domain);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -367,6 +314,7 @@ function deleteDomain() {
    dataType: "json",
    data: { action: "delete_domain", id: id, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted domain", domain);
        table
@@ -376,6 +324,7 @@ function deleteDomain() {
      } else showAlert("error", "", "Error while deleting domain with ID " + id, response.message);
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while deleting domain with ID " + id, jqXHR.responseText);
      console.log(exception);
    }
--- a/scripts/pi-hole/js/groups.js
+++ b/scripts/pi-hole/js/groups.js
@@ -5,74 +5,13 @@
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */

-/* global moment:false */
+/* global showAlert:false */
+/* global datetime:false */
+/* global disableAll:false */
+/* global enableAll:false */

 var table;
 var token = $("#token").html();
-var info = null;
-
-function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
-  switch (type) {
-    case "info":
-      opts = {
-        type: "info",
-        icon: "glyphicon glyphicon-time",
-        title: title,
-        message: message
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "warning":
-      opts = {
-        type: "warning",
-        icon: "glyphicon glyphicon-warning-sign",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "glyphicon glyphicon-remove",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    default:
-  }
-}
-
-function datetime(date) {
-  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
-}

 $(document).ready(function() {
  $("#btnAdd").on("click", addGroup);
@@ -191,6 +130,7 @@ function addGroup() {
  var name = $("#new_name").val();
  var desc = $("#new_desc").val();

+  disableAll();
  showAlert("info", "", "Adding group...", name);

  if (name.length === 0) {
@@ -204,6 +144,7 @@ function addGroup() {
    dataType: "json",
    data: { action: "add_group", name: name, desc: desc, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-plus", "Successfully added group", name);
        $("#new_name").val("");
@@ -214,6 +155,7 @@ function addGroup() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while adding new group", jqXHR.responseText);
      console.log(exception);
    }
@@ -244,6 +186,7 @@ function editGroup() {
    not_done = "editing description of";
  }

+  disableAll();
  showAlert("info", "", "Editing group...", name);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -258,6 +201,7 @@ function editGroup() {
      token: token
    },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-pencil", "Successfully " + done + " group", name);
      } else {
@@ -270,6 +214,7 @@ function editGroup() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert(
        "error",
        "",
@@ -286,6 +231,7 @@ function deleteGroup() {
  var tr = $(this).closest("tr");
  var name = tr.find("#name").val();

+  disableAll();
  showAlert("info", "", "Deleting group...", name);
  $.ajax({
    url: "scripts/pi-hole/php/groups.php",
@@ -293,6 +239,7 @@ function deleteGroup() {
    dataType: "json",
    data: { action: "delete_group", id: id, token: token },
    success: function(response) {
+      enableAll();
      if (response.success) {
        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted group ", name);
        table
@@ -304,6 +251,7 @@ function deleteGroup() {
      }
    },
    error: function(jqXHR, exception) {
+      enableAll();
      showAlert("error", "", "Error while deleting group with ID " + id, jqXHR.responseText);
      console.log(exception);
    }