Merge pull request #1140 from pi-hole/tweak/groups_mgmt_disable_controls

Disable form elements while database operation is pending

groups-adlists.php

@@ -72,6 +72,7 @@
     </div>
 </div>
 
+<script src="scripts/pi-hole/js/groups-common.js"></script>
 <script src="scripts/pi-hole/js/groups-adlists.js"></script>
 
 <?php

groups-clients.php

@@ -72,6 +72,7 @@
     </div>
 </div>
 
+<script src="scripts/pi-hole/js/groups-common.js"></script>
 <script src="scripts/pi-hole/js/groups-clients.js"></script>
 
 <?php

groups-domains.php

@@ -82,6 +82,7 @@
     </div>
 </div>
 
+<script src="scripts/pi-hole/js/groups-common.js"></script>
 <script src="scripts/pi-hole/js/groups-domains.js"></script>
 
 <?php

groups.php

@@ -71,6 +71,7 @@
     </div>
 </div>
 
+<script src="scripts/pi-hole/js/groups-common.js"></script>
 <script src="scripts/pi-hole/js/groups.js"></script>
 
 <?php

scripts/pi-hole/js/groups-adlists.js

@@ -5,71 +5,11 @@
  *  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 utils: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 +23,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);
 
@@ -120,9 +56,9 @@ function initTable() {
     rowCallback: function(row, data) {
       var tooltip =
         "Added: " +
-        datetime(data.date_added) +
+        utils.datetime(data.date_added) +
         "\nLast modified: " +
-        datetime(data.date_modified) +
+        utils.datetime(data.date_modified) +
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
@@ -234,10 +170,11 @@ function addAdlist() {
   var address = $("#new_address").val();
   var comment = $("#new_comment").val();
 
-  showAlert("info", "", "Adding adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Adding adlist...", address);
 
   if (address.length === 0) {
-    showAlert("warning", "", "Warning", "Please specify an adlist address");
+    utils.showAlert("warning", "", "Warning", "Please specify an adlist address");
     return;
   }
 
@@ -252,17 +189,24 @@ function addAdlist() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-plus", "Successfully added adlist", address);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-plus",
+          "Successfully added adlist",
+          address
+        );
         $("#new_address").val("");
         $("#new_comment").val("");
         table.ajax.reload();
       } else {
-        showAlert("error", "", "Error while adding new adlist: ", response.message);
+        utils.showAlert("error", "", "Error while adding new adlist: ", response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while adding new adlist: ", jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while adding new adlist: ", jqXHR.responseText);
       console.log(exception);
     }
   });
@@ -293,7 +237,8 @@ function editAdlist() {
     not_done = "editing groups of";
   }
 
-  showAlert("info", "", "Editing adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing adlist...", address);
 
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
@@ -308,15 +253,16 @@ function editAdlist() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert(
+        utils.showAlert(
           "success",
           "glyphicon glyphicon-pencil",
           "Successfully " + done + " adlist ",
           address
         );
       } else {
-        showAlert(
+        utils.showAlert(
           "error",
           "",
           "Error while " + not_done + " adlist with ID " + id,
@@ -325,7 +271,8 @@ function editAdlist() {
       }
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " adlist with ID " + id,
@@ -341,23 +288,33 @@ function deleteAdlist() {
   var tr = $(this).closest("tr");
   var address = tr.find("#address").text();
 
-  showAlert("info", "", "Deleting adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Deleting adlist...", address);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_adlist", id: id, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted adlist ", address);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "Successfully deleted adlist ",
+          address
+        );
         table
           .row(tr)
           .remove()
           .draw(false);
-      } else showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
+      } else {
+        utils.showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
+      }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while deleting adlist with ID " + id, jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while deleting adlist with ID " + id, jqXHR.responseText);
       console.log(exception);
     }
   });

scripts/pi-hole/js/groups-clients.js

@@ -5,69 +5,11 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
+/* global utils: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(
@@ -242,10 +184,12 @@ function addClient() {
     ip = $("#ip-custom").val();
   }
 
-  showAlert("info", "", "Adding client...", ip);
+  utils.disableAll();
+  utils.showAlert("info", "", "Adding client...", ip);
 
   if (ip.length === 0) {
-    showAlert("warning", "", "Warning", "Please specify a client IP address");
+    utils.enableAll();
+    utils.showAlert("warning", "", "Warning", "Please specify a client IP address");
     return;
   }
 
@@ -255,16 +199,18 @@ function addClient() {
     dataType: "json",
     data: { action: "add_client", ip: ip, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-plus", "Successfully added client", ip);
+        utils.showAlert("success", "glyphicon glyphicon-plus", "Successfully added client", ip);
         reload_client_suggestions();
         table.ajax.reload();
       } else {
-        showAlert("error", "", "Error while adding new client", response.message);
+        utils.showAlert("error", "", "Error while adding new client", response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while adding new client", jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while adding new client", jqXHR.responseText);
       console.log(exception);
     }
   });
@@ -290,26 +236,33 @@ function editClient() {
     ip_name += " (" + name + ")";
   }
 
-  showAlert("info", "", "Editing client...", ip_name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing client...", ip_name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "edit_client", id: id, groups: groups, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert(
+        utils.showAlert(
           "success",
           "glyphicon glyphicon-plus",
           "Successfully " + done + " client",
           ip_name
         );
       } else {
-        showAlert("error", "Error while " + not_done + " client with ID " + id, response.message);
+        utils.showAlert(
+          "error",
+          "Error while " + not_done + " client with ID " + id,
+          response.message
+        );
       }
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " client with ID " + id,
@@ -331,26 +284,34 @@ function deleteClient() {
     ip_name += " (" + name + ")";
   }
 
-  showAlert("info", "", "Deleting client...", ip_name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Deleting client...", ip_name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_client", id: id, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted client ", ip_name);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "Successfully deleted client ",
+          ip_name
+        );
         table
           .row(tr)
           .remove()
           .draw(false);
         reload_client_suggestions();
       } else {
-        showAlert("error", "", "Error while deleting client with ID " + id, response.message);
+        utils.showAlert("error", "", "Error while deleting client with ID " + id, response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while deleting client with ID " + id, jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while deleting client with ID " + id, jqXHR.responseText);
       console.log(exception);
     }
   });

scripts/pi-hole/js/groups-common.js

@@ -0,0 +1,95 @@
+/* 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 */
+
+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);
+}
+
+window.utils = (function() {
+  return {
+    showAlert: showAlert,
+    datetime: datetime,
+    disableAll: disableAll,
+    enableAll: enableAll
+  };
+})();

scripts/pi-hole/js/groups-domains.js

@@ -5,71 +5,11 @@
  *  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 utils: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 +23,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);
 
@@ -121,9 +57,9 @@ function initTable() {
     rowCallback: function(row, data) {
       var tooltip =
         "Added: " +
-        datetime(data.date_added) +
+        utils.datetime(data.date_added) +
         "\nLast modified: " +
-        datetime(data.date_modified) +
+        utils.datetime(data.date_modified) +
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
@@ -252,10 +188,12 @@ function addDomain() {
   var type = $("#new_type").val();
   var comment = $("#new_comment").val();
 
-  showAlert("info", "", "Adding domain...", domain);
+  utils.disableAll();
+  utils.showAlert("info", "", "Adding domain...", domain);
 
   if (domain.length === 0) {
-    showAlert("warning", "", "Warning", "Please specify a domain");
+    utils.enableAll();
+    utils.showAlert("warning", "", "Warning", "Please specify a domain");
     return;
   }
 
@@ -271,15 +209,17 @@ function addDomain() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-plus", "Successfully added domain", domain);
+        utils.showAlert("success", "glyphicon glyphicon-plus", "Successfully added domain", domain);
         $("#new_domain").val("");
         $("#new_comment").val("");
         table.ajax.reload();
-      } else showAlert("error", "", "Error while adding new domain", response.message);
+      } else utils.showAlert("error", "", "Error while adding new domain", response.message);
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while adding new domain", jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while adding new domain", jqXHR.responseText);
       console.log(exception);
     }
   });
@@ -317,7 +257,8 @@ function editDomain() {
     not_done = "editing groups of";
   }
 
-  showAlert("info", "", "Editing domain...", name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing domain...", name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -332,15 +273,16 @@ function editDomain() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert(
+        utils.showAlert(
           "success",
           "glyphicon glyphicon-pencil",
           "Successfully " + done + " domain",
           domain
         );
       } else
-        showAlert(
+        utils.showAlert(
           "error",
           "",
           "Error while " + not_done + " domain with ID " + id,
@@ -348,7 +290,8 @@ function editDomain() {
         );
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " domain with ID " + id,
@@ -364,23 +307,33 @@ function deleteDomain() {
   var tr = $(this).closest("tr");
   var domain = tr.find("#domain").text();
 
-  showAlert("info", "", "Deleting domain...", domain);
+  utils.disableAll();
+  utils.showAlert("info", "", "Deleting domain...", domain);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_domain", id: id, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted domain", domain);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "Successfully deleted domain",
+          domain
+        );
         table
           .row(tr)
           .remove()
           .draw(false);
-      } else showAlert("error", "", "Error while deleting domain with ID " + id, response.message);
+      } else {
+        utils.showAlert("error", "", "Error while deleting domain with ID " + id, response.message);
+      }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while deleting domain with ID " + id, jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while deleting domain with ID " + id, jqXHR.responseText);
       console.log(exception);
     }
   });

scripts/pi-hole/js/groups.js

@@ -5,74 +5,10 @@
  *  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 utils: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);
@@ -97,9 +33,9 @@ $(document).ready(function() {
     rowCallback: function(row, data) {
       var tooltip =
         "Added: " +
-        datetime(data.date_added) +
+        utils.datetime(data.date_added) +
         "\nLast modified: " +
-        datetime(data.date_modified) +
+        utils.datetime(data.date_modified) +
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
@@ -195,10 +131,11 @@ function addGroup() {
   var name = $("#new_name").val();
   var desc = $("#new_desc").val();
 
-  showAlert("info", "", "Adding group...", name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Adding group...", name);
 
   if (name.length === 0) {
-    showAlert("warning", "", "Warning", "Please specify a group name");
+    utils.showAlert("warning", "", "Warning", "Please specify a group name");
     return;
   }
 
@@ -208,17 +145,19 @@ function addGroup() {
     dataType: "json",
     data: { action: "add_group", name: name, desc: desc, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-plus", "Successfully added group", name);
+        utils.showAlert("success", "glyphicon glyphicon-plus", "Successfully added group", name);
         $("#new_name").val("");
         $("#new_desc").val("");
         table.ajax.reload();
       } else {
-        showAlert("error", "", "Error while adding new group", response.message);
+        utils.showAlert("error", "", "Error while adding new group", response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while adding new group", jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while adding new group", jqXHR.responseText);
       console.log(exception);
     }
   });
@@ -248,7 +187,8 @@ function editGroup() {
     not_done = "editing description of";
   }
 
-  showAlert("info", "", "Editing group...", name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing group...", name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -262,10 +202,16 @@ function editGroup() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-pencil", "Successfully " + done + " group", name);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "Successfully " + done + " group",
+          name
+        );
       } else {
-        showAlert(
+        utils.showAlert(
           "error",
           "",
           "Error while " + not_done + " group with ID " + id,
@@ -274,7 +220,8 @@ function editGroup() {
       }
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " group with ID " + id,
@@ -290,25 +237,33 @@ function deleteGroup() {
   var tr = $(this).closest("tr");
   var name = tr.find("#name").val();
 
-  showAlert("info", "", "Deleting group...", name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Deleting group...", name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_group", id: id, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "glyphicon glyphicon-trash", "Successfully deleted group ", name);
+        utils.showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "Successfully deleted group ",
+          name
+        );
         table
           .row(tr)
           .remove()
           .draw(false);
       } else {
-        showAlert("error", "", "Error while deleting group with ID " + id, response.message);
+        utils.showAlert("error", "", "Error while deleting group with ID " + id, response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while deleting group with ID " + id, jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while deleting group with ID " + id, jqXHR.responseText);
       console.log(exception);
     }
   });