Use bootstrap notify for notifications.

Signed-off-by: DL6ER <dl6er@dl6er.de>

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

@@ -1,34 +1,45 @@
 var table;
 var groups = [];
 const token = $("#token").html();
+var info = null;
 
-function showAlert(type, message) {
-  var alertElement = null;
-  var messageElement = null;
-
+function showAlert(type, icon, message) {
+  var msg = "";
   switch (type) {
     case "info":
-      alertElement = $("#alInfo");
+      info = $.notify({
+        type: "info",
+        icon: "glyphicon glyphicon-time",
+        message: message
+      });
       break;
     case "success":
-      alertElement = $("#alSuccess");
-      break;
-    case "warning":
-      alertElement = $("#alWarning");
-      messageElement = $("#warn");
+      msg = "Successfully " + message;
+      if (info) {
+        info.update({ type: "success", icon: icon, message: msg });
+      } else {
+        $.notify({ type: "success", icon: icon, message: msg });
+      }
       break;
     case "error":
-      alertElement = $("#alFailure");
-      messageElement = $("#err");
+      msg = "Error, something went wrong!<br><pre>" + message + "</pre>";
+      if (info) {
+        info.update({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      } else {
+        $.notify({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      }
       break;
     default:
       return;
   }
-
-  if (messageElement != null) messageElement.html(message);
-
-  alertElement.fadeIn(200);
-  alertElement.delay(8000).fadeOut(2000);
 }
 
 function get_groups() {
@@ -43,12 +54,6 @@ function get_groups() {
   );
 }
 
-$.fn.redraw = function() {
-  return $(this).each(function() {
-    var redraw = this.offsetHeight;
-  });
-};
-
 function datetime(date) {
   return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
 }
@@ -95,7 +100,7 @@ function initTable() {
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<code title="' + tooltip + '">' + data.address + "</code>"
+        '<code id="address" title="' + tooltip + '">' + data.address + "</code>"
       );
 
       const disabled = data.enabled === 0;
@@ -135,7 +140,6 @@ function initTable() {
             .val(groups[i].id)
             .text(groups[i].name + " (" + extra + ")")
         );
-        sel.redraw();
       }
       // Select assigned groups
       sel.val(data.groups);
@@ -184,10 +188,10 @@ function initTable() {
 }
 
 function addAdlist() {
-  var address = $("#address").val();
-  var comment = $("#comment").val();
+  var address = $("#new_address").val();
+  var comment = $("#new_comment").val();
 
-  showAlert("info");
+  showAlert("info", "", "Adding adlist " + address + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -200,15 +204,20 @@ function addAdlist() {
     },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
-        $("#address").empty();
-        $("#comment").empty();
+        showAlert(
+          "success",
+          "glyphicon glyphicon-plus",
+          "added adlist " + address
+        );
+        $("#new_address").val("");
+        $("#new_comment").val("");
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while adding new adlist: " + jqXHR.responseText
       );
       console.log(exception);
@@ -222,6 +231,7 @@ function editAdlist() {
   var status = tr.find("#status").is(":checked") ? 1 : 0;
   var comment = tr.find("#comment").val();
   var groups = tr.find("#multiselect").val();
+  var address = tr.find("#address").text();
 
   showAlert("info");
   $.ajax({
@@ -238,13 +248,18 @@ function editAdlist() {
     },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "edited adlist " + address
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while editing adlist with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);
@@ -254,6 +269,8 @@ function editAdlist() {
 
 function deleteAdlist() {
   var id = $(this).attr("data-id");
+  var tr = $(this).closest("tr");
+  var address = tr.find("#address").text();
 
   showAlert("info");
   $.ajax({
@@ -263,13 +280,18 @@ function deleteAdlist() {
     data: { action: "delete_adlist", id: id, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "deleted adlist " + address
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while deleting adlist with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);

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

@@ -1,34 +1,45 @@
 var table;
 var groups = [];
 const token = $("#token").html();
+var info = null;
 
-function showAlert(type, message) {
-  var alertElement = null;
-  var messageElement = null;
-
+function showAlert(type, icon, message) {
+  var msg = "";
   switch (type) {
     case "info":
-      alertElement = $("#alInfo");
+      info = $.notify({
+        type: "info",
+        icon: "glyphicon glyphicon-time",
+        message: message
+      });
       break;
     case "success":
-      alertElement = $("#alSuccess");
-      break;
-    case "warning":
-      alertElement = $("#alWarning");
-      messageElement = $("#warn");
+      msg = "Successfully " + message;
+      if (info) {
+        info.update({ type: "success", icon: icon, message: msg });
+      } else {
+        $.notify({ type: "success", icon: icon, message: msg });
+      }
       break;
     case "error":
-      alertElement = $("#alFailure");
-      messageElement = $("#err");
+      msg = "Error, something went wrong!<br><pre>" + message + "</pre>";
+      if (info) {
+        info.update({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      } else {
+        $.notify({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      }
       break;
     default:
       return;
   }
-
-  if (messageElement != null) messageElement.html(message);
-
-  alertElement.fadeIn(200);
-  alertElement.delay(8000).fadeOut(2000);
 }
 
 function reload_client_suggestions() {
@@ -67,12 +78,6 @@ function get_groups() {
   );
 }
 
-$.fn.redraw = function() {
-  return $(this).each(function() {
-    var redraw = this.offsetHeight;
-  });
-};
-
 $(document).ready(function() {
   $("#btnAdd").on("click", addClient);
 
@@ -108,7 +113,7 @@ function initTable() {
     rowCallback: function(row, data) {
       const tooltip = "Database ID: " + data.id;
       $("td:eq(0)", row).html(
-        '<code title="' +
+        '<code id="ip" title="' +
           tooltip +
           '">' +
           data.ip +
@@ -133,7 +138,6 @@ function initTable() {
             .val(groups[i].id)
             .text(groups[i].name + " (" + extra + ")")
         );
-        sel.redraw();
       }
       // Select assigned groups
       sel.val(data.groups);
@@ -187,7 +191,7 @@ function addClient() {
     ip = $("#ip-custom").val();
   }
 
-  showAlert("info");
+  showAlert("info", "", "Adding client " + ip + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -195,14 +199,15 @@ function addClient() {
     data: { action: "add_client", ip: ip, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert("success", "glyphicon glyphicon-plus", "added client " + ip);
         reload_client_suggestions();
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while adding new client: " + jqXHR.responseText
       );
       console.log(exception);
@@ -214,8 +219,9 @@ function editClient() {
   var tr = $(this).closest("tr");
   var id = tr.find("#id").val();
   var groups = tr.find("#multiselect").val();
+  var ip = tr.find("#ip").text();
 
-  showAlert("info");
+  showAlert("info", "", "Editing client " + ip + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -223,13 +229,14 @@ function editClient() {
     data: { action: "edit_client", id: id, groups: groups, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert("success", "glyphicon glyphicon-plus", "edited client " + ip);
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while editing client with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);
@@ -239,8 +246,10 @@ function editClient() {
 
 function deleteClient() {
   var id = $(this).attr("data-id");
+  var tr = $(this).closest("tr");
+  var ip = tr.find("#ip").text();
 
-  showAlert("info");
+  showAlert("info", "", "Deleting client " + ip + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -248,14 +257,19 @@ function deleteClient() {
     data: { action: "delete_client", id: id, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "deleted client " + ip
+        );
         reload_client_suggestions();
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while deleting client with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);

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

@@ -1,34 +1,45 @@
 var table;
 var groups = [];
 const token = $("#token").html();
+var info = null;
 
-function showAlert(type, message) {
-  var alertElement = null;
-  var messageElement = null;
-
+function showAlert(type, icon, message) {
+  var msg = "";
   switch (type) {
     case "info":
-      alertElement = $("#alInfo");
+      info = $.notify({
+        type: "info",
+        icon: "glyphicon glyphicon-time",
+        message: message
+      });
       break;
     case "success":
-      alertElement = $("#alSuccess");
-      break;
-    case "warning":
-      alertElement = $("#alWarning");
-      messageElement = $("#warn");
+      msg = "Successfully " + message;
+      if (info) {
+        info.update({ type: "success", icon: icon, message: msg });
+      } else {
+        $.notify({ type: "success", icon: icon, message: msg });
+      }
       break;
     case "error":
-      alertElement = $("#alFailure");
-      messageElement = $("#err");
+      msg = "Error, something went wrong!<br><pre>" + message + "</pre>";
+      if (info) {
+        info.update({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      } else {
+        $.notify({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      }
       break;
     default:
       return;
   }
-
-  if (messageElement != null) messageElement.html(message);
-
-  alertElement.fadeIn(200);
-  alertElement.delay(8000).fadeOut(2000);
 }
 
 function get_groups() {
@@ -43,12 +54,6 @@ function get_groups() {
   );
 }
 
-$.fn.redraw = function() {
-  return $(this).each(function() {
-    var redraw = this.offsetHeight;
-  });
-};
-
 function datetime(date) {
   return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
 }
@@ -96,7 +101,7 @@ function initTable() {
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<code title="' + tooltip + '">' + data.domain + "</code>"
+        '<code id="domain" title="' + tooltip + '">' + data.domain + "</code>"
       );
 
       $("td:eq(1)", row).html(
@@ -153,7 +158,6 @@ function initTable() {
             .val(groups[i].id)
             .text(groups[i].name + " (" + extra + ")")
         );
-        sel.redraw();
       }
       // Select assigned groups
       sel.val(data.groups);
@@ -202,11 +206,11 @@ function initTable() {
 }
 
 function addDomain() {
-  var domain = $("#domain").val();
-  var type = $("#type").val();
-  var comment = $("#comment").val();
+  var domain = $("#new_domain").val();
+  var type = $("#new_type").val();
+  var comment = $("#new_comment").val();
 
-  showAlert("info");
+  showAlert("info", "", "Adding domain " + domain + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -220,15 +224,20 @@ function addDomain() {
     },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
-        $("#domain").empty();
-        $("#comment").empty();
+        showAlert(
+          "success",
+          "glyphicon glyphicon-plus",
+          "added new domain " + domain
+        );
+        $("#new_domain").val("");
+        $("#new_comment").val("");
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while adding new domain: " + jqXHR.responseText
       );
       console.log(exception);
@@ -238,13 +247,14 @@ function addDomain() {
 
 function editDomain() {
   var tr = $(this).closest("tr");
+  var domain = tr.find("#domain").text();
   var id = tr.find("#id").val();
   var type = tr.find("#type").val();
   var status = tr.find("#status").is(":checked") ? 1 : 0;
   var comment = tr.find("#comment").val();
   var groups = tr.find("#multiselect").val();
 
-  showAlert("info");
+  showAlert("info", "", "Editing domain " + name + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -260,13 +270,18 @@ function editDomain() {
     },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "edited domain " + domain
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while editing domain with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);
@@ -276,8 +291,10 @@ function editDomain() {
 
 function deleteDomain() {
   var id = $(this).attr("data-id");
+  var tr = $(this).closest("tr");
+  var domain = tr.find("#domain").text();
 
-  showAlert("info");
+  showAlert("info", "", "Deleting domain " + domain + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -285,13 +302,18 @@ function deleteDomain() {
     data: { action: "delete_domain", id: id, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "deleted domain " + domain
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while deleting domain with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);

scripts/pi-hole/js/groups.js

@@ -1,33 +1,44 @@
 var table;
 const token = $("#token").html();
+var info = null;
 
-function showAlert(type, message) {
-  var alertElement = null;
-  var messageElement = null;
-
+function showAlert(type, icon, message) {
+  var msg = "";
   switch (type) {
     case "info":
-      alertElement = $("#alInfo");
+      info = $.notify({
+        type: "info",
+        icon: "glyphicon glyphicon-time",
+        message: message
+      });
       break;
     case "success":
-      alertElement = $("#alSuccess");
-      break;
-    case "warning":
-      alertElement = $("#alWarning");
-      messageElement = $("#warn");
+      msg = "Successfully " + message;
+      if (info) {
+        info.update({ type: "success", icon: icon, message: msg });
+      } else {
+        $.notify({ type: "success", icon: icon, message: msg });
+      }
       break;
     case "error":
-      alertElement = $("#alFailure");
-      messageElement = $("#err");
+      msg = "Error, something went wrong!<br><pre>" + message + "</pre>";
+      if (info) {
+        info.update({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      } else {
+        $.notify({
+          type: "danger",
+          icon: "glyphicon glyphicon-remove",
+          message: msg
+        });
+      }
       break;
     default:
       return;
   }
-
-  if (messageElement != null) messageElement.html(message);
-
-  alertElement.fadeIn(200);
-  alertElement.delay(8000).fadeOut(2000);
 }
 
 $(document).ready(function() {
@@ -118,10 +129,10 @@ $(document).ready(function() {
 });
 
 function addGroup() {
-  var name = $("#name").val();
-  var desc = $("#desc").val();
+  var name = $("#new_name").val();
+  var desc = $("#new_desc").val();
 
-  showAlert("info");
+  showAlert("info", "", "Adding group " + name + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -129,14 +140,18 @@ function addGroup() {
     data: { action: "add_group", name: name, desc: desc, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
-        $("#name").empty();
-        $("#desc").empty();
+        showAlert("success", "glyphicon glyphicon-plus", "added group " + name);
+        $("#new_name").val("");
+        $("#new_desc").val("");
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "Error while adding new group: " + jqXHR.responseText);
+      showAlert(
+        "error",
+        "",
+        "Error while adding new group: " + jqXHR.responseText
+      );
       console.log(exception);
     }
   });
@@ -149,7 +164,7 @@ function editGroup() {
   var status = tr.find("#status").is(":checked") ? 1 : 0;
   var desc = tr.find("#desc").val();
 
-  showAlert("info");
+  showAlert("info", "", "Editing group " + name + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -164,13 +179,18 @@ function editGroup() {
     },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-pencil",
+          "edited group " + name
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while editing group with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);
@@ -180,8 +200,10 @@ function editGroup() {
 
 function deleteGroup() {
   var id = $(this).attr("data-id");
+  var tr = $(this).closest("tr");
+  var name = tr.find("#name").val();
 
-  showAlert("info");
+  showAlert("info", "", "Deleting group " + name + "...");
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -189,13 +211,18 @@ function deleteGroup() {
     data: { action: "delete_group", id: id, token: token },
     success: function(response) {
       if (response.success) {
-        showAlert("success");
+        showAlert(
+          "success",
+          "glyphicon glyphicon-trash",
+          "deleted group " + name
+        );
         table.ajax.reload();
-      } else showAlert("error", response.message);
+      } else showAlert("error", "", response.message);
     },
     error: function(jqXHR, exception) {
       showAlert(
         "error",
+        "",
         "Error while deleting group with ID " + id + ": " + jqXHR.responseText
       );
       console.log(exception);