Merge branch 'release/v5.0' into devel

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

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").text();
-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: "far fa-clock",
-        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: "fas fa-exclamation-triangle",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "fas fa-times",
-        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");
-}
+var token = $("#token").html();
 
 $(document).ready(function() {
   $("#btnAdd").on("click", addGroup);
@@ -92,51 +28,48 @@ $(document).ready(function() {
       { data: null, width: "60px", orderable: false }
     ],
     drawCallback: function() {
-      $(".deleteGroup").on("click", deleteGroup);
+      $('button[id^="deleteGroup_"]').on("click", deleteGroup);
     },
     rowCallback: function(row, data) {
+      $(row).attr("data-id", data.id);
       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(
-        '<input id="name" title="' +
-          tooltip +
-          '" class="form-control"><input id="id" type="hidden" value="' +
-          data.id +
-          '">'
+        '<input id="name_' + data.id + '" title="' + tooltip + '" class="form-control">'
       );
-      var name = $("#name", row);
-      name.val(data.name);
-      name.on("change", editGroup);
+      var nameEl = $("#name_" + data.id, row);
+      nameEl.val(data.name);
+      nameEl.on("change", editGroup);
 
       var disabled = data.enabled === 0;
       $("td:eq(1)", row).html(
-        '<input type="checkbox" id="status"' + (disabled ? "" : " checked") + ">"
+        '<input type="checkbox" id="status_' + data.id + '"' + (disabled ? "" : " checked") + ">"
       );
-      var status = $("#status", row);
-      status.bootstrapToggle({
+      var statusEl = $("#status_" + data.id, row);
+      statusEl.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
-      status.on("change", editGroup);
+      statusEl.on("change", editGroup);
 
-      $("td:eq(2)", row).html('<input id="desc" class="form-control">');
+      $("td:eq(2)", row).html('<input id="desc_' + data.id + '" class="form-control">');
       var desc = data.description !== null ? data.description : "";
-      $("#desc", row).val(desc);
-      $("#desc", row).on("change", editGroup);
+      var descEl = $("#desc_" + data.id, row);
+      descEl.val(desc);
+      descEl.on("change", editGroup);
 
       $("td:eq(3)", row).empty();
       if (data.id !== 0) {
         var button =
-          " &nbsp;" +
-          '<button class="btn btn-danger btn-xs deleteGroup" type="button" data-id="' +
+          '<button class="btn btn-danger btn-xs" type="button" id="deleteGroup_' +
           data.id +
           '">' +
           '<span class="far fa-trash-alt"></span>' +
@@ -144,6 +77,10 @@ $(document).ready(function() {
         $("td:eq(3)", row).html(button);
       }
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]
@@ -191,10 +128,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;
   }
 
@@ -204,17 +142,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", "fas fa-plus", "Successfully added group", name);
+        utils.showAlert("success", "fas fa-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);
     }
   });
@@ -223,28 +163,39 @@ function addGroup() {
 function editGroup() {
   var elem = $(this).attr("id");
   var tr = $(this).closest("tr");
-  var id = tr.find("#id").val();
-  var name = tr.find("#name").val();
-  var status = tr.find("#status").is(":checked") ? 1 : 0;
-  var desc = tr.find("#desc").val();
+  var id = tr.attr("data-id");
+  var name = tr.find("#name_" + id).val();
+  var status = tr.find("#status_" + id).is(":checked") ? 1 : 0;
+  var desc = tr.find("#desc_" + id).val();
 
   var done = "edited";
   var not_done = "editing";
-  if (elem === "status" && status === 1) {
-    done = "enabled";
-    not_done = "enabling";
-  } else if (elem === "status" && status === 0) {
-    done = "disabled";
-    not_done = "disabling";
-  } else if (elem === "name") {
-    done = "edited name of";
-    not_done = "editing name of";
-  } else if (elem === "desc") {
-    done = "edited description of";
-    not_done = "editing description of";
+  switch (elem) {
+    case "status_" + id:
+      if (status === 0) {
+        done = "disabled";
+        not_done = "disabling";
+      } else if (status === 1) {
+        done = "enabled";
+        not_done = "enabling";
+      }
+
+      break;
+    case "name_" + id:
+      done = "edited name of";
+      not_done = "editing name of";
+      break;
+    case "desc_" + id:
+      done = "edited description of";
+      not_done = "editing description of";
+      break;
+    default:
+      alert("bad element or invalid data-id!");
+      return;
   }
 
-  showAlert("info", "", "Editing group...", name);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing group...", name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
@@ -258,10 +209,11 @@ function editGroup() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "fas fa-pencil-alt", "Successfully " + done + " group", name);
+        utils.showAlert("success", "fas fa-pencil-alt", "Successfully " + done + " group", name);
       } else {
-        showAlert(
+        utils.showAlert(
           "error",
           "",
           "Error while " + not_done + " group with ID " + id,
@@ -270,7 +222,8 @@ function editGroup() {
       }
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " group with ID " + id,
@@ -282,29 +235,32 @@ function editGroup() {
 }
 
 function deleteGroup() {
-  var id = $(this).attr("data-id");
   var tr = $(this).closest("tr");
-  var name = tr.find("#name").val();
+  var id = tr.attr("data-id");
+  var name = tr.find("#name_" + id).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", "far fa-trash-alt", "Successfully deleted group ", name);
+        utils.showAlert("success", "far fa-trash-alt", "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);
     }
   });