From a39010582cf76b7b946472932fdba95d0eed2c75 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 27 Dec 2020 20:49:00 +0100 Subject: [PATCH] Add additional information children to adlist table Signed-off-by: DL6ER --- groups-adlists.php | 2 + scripts/pi-hole/js/groups-adlists.js | 109 +++++++++++++++++++++------ style/pi-hole.css | 24 ++++++ 3 files changed, 113 insertions(+), 22 deletions(-) diff --git a/groups-adlists.php b/groups-adlists.php index 94c26a7e..bf2a3b41 100644 --- a/groups-adlists.php +++ b/groups-adlists.php @@ -41,6 +41,7 @@
  1. Please run pihole -g or update your gravity list online after modifying your adlists.
  2. Multiple adlists can be added by separating each unique URL with a space
    3. +
  3. Click on to get additional information about your lists. The color of the icon corresponds to the health of the list.
@@ -61,6 +62,7 @@ ID + Address Status Comment diff --git a/scripts/pi-hole/js/groups-adlists.js b/scripts/pi-hole/js/groups-adlists.js index 1f206874..3d958833 100644 --- a/scripts/pi-hole/js/groups-adlists.js +++ b/scripts/pi-hole/js/groups-adlists.js @@ -30,6 +30,52 @@ $(function () { getGroups(); }); +function format(data) { + // Generate human-friendly status string + var statusText = "Unknown"; + if (data.status !== null) { + switch (parseInt(data.status, 10)) { + case 1: + statusText = "List download was successful (OK)"; + break; + case 2: + statusText = "List unchanged upstream, Pi-hole used a local copy (OK)"; + break; + case 3: + statusText = "List unavailable, Pi-hole used a local copy"; + break; + case 4: + statusText = + "List unavailable, there is no local copy of this list available on your Pi-hole"; + break; + + default: + statusText = "Unknown (" + parseInt(data.status, 10) + ")"; + break; + } + } + + // Compile extra info for displaying + return ( + '' + + "
Health status of this list:" + + statusText + + "
This list was added to Pi-hole on  " + + utils.datetime(data.date_added, false) + + "
Database entry was last modified on  " + + utils.datetime(data.date_modified, false) + + "
The list contents were last updated on  " + + (data.date_updated !== null ? utils.datetime(data.date_updated, false) : "N/A") + + "
Number of valid domains on this list:  " + + (data.number !== null ? data.number : "N/A") + + "
Number of invalid domains on this list:  " + + (data.invalid_domains !== null ? data.invalid_domains : "N/A") + + "
Database ID of this list:" + + data.id + + "
" + ); +} + function initTable() { table = $("#adlistsTable").DataTable({ ajax: { @@ -40,6 +86,7 @@ function initTable() { order: [[0, "asc"]], columns: [ { data: "id", visible: false }, + { data: null, orderable: false, searchable: false, class: "details-control" }, { data: "address" }, { data: "enabled", searchable: false }, { data: "comment" }, @@ -53,27 +100,29 @@ function initTable() { }, rowCallback: function (row, data) { $(row).attr("data-id", data.id); - var tooltip = - "Added: " + - utils.datetime(data.date_added, false) + - "\nLast modified (database entry): " + - utils.datetime(data.date_modified, false) + - "\nLast updated (list content): " + - (data.date_updated !== null ? utils.datetime(data.date_updated, false) : "N/A") + - "\nDatabase ID: " + - data.id; - $("td:eq(0)", row).html( - '' + - data.address + - "" - ); var disabled = data.enabled === 0; + var statusCode = 0; + // If there is no status or the list is disabled, we keep + // status 0 (== unknown) + if (data.status !== null && disabled !== true) { + statusCode = parseInt(data.status, 10); + } + + $("td:eq(0)", row).addClass("list-status-" + statusCode); + $("td:eq(0)", row).html(""); + $("td:eq(1)", row).html( + '' + + data.address + + "" + ); + + $("td:eq(2)", row).html( '" ); var statusEl = $("#status_" + data.id, row); @@ -86,13 +135,13 @@ function initTable() { }); statusEl.on("change", editAdlist); - $("td:eq(2)", row).html(''); + $("td:eq(3)", row).html(''); var commentEl = $("#comment_" + data.id, row); commentEl.val(utils.unescapeHtml(data.comment)); commentEl.on("change", editAdlist); - $("td:eq(3)", row).empty(); - $("td:eq(3)", row).append( + $("td:eq(4)", row).empty(); + $("td:eq(4)", row).append( '' ); var selectEl = $("#multiselect_" + data.id, row); @@ -162,7 +211,7 @@ function initTable() { '">' + '' + ""; - $("td:eq(4)", row).html(button); + $("td:eq(5)", row).html(button); }, dom: "<'row'<'col-sm-4'l><'col-sm-8'f>>" + @@ -204,6 +253,22 @@ function initTable() { $("#resetButton").addClass("hidden"); }); + // Add event listener for opening and closing details + $("#adlistsTable tbody").on("click", "td.details-control", function () { + var tr = $(this).closest("tr"); + var row = table.row(tr); + + if (row.child.isShown()) { + // This row is already open - close it + row.child.hide(); + tr.removeClass("shown"); + } else { + // Open this row + row.child(format(row.data())).show(); + tr.addClass("shown"); + } + }); + // Disable autocorrect in the search box var input = document.querySelector("input[type=search]"); if (input !== null) { diff --git a/style/pi-hole.css b/style/pi-hole.css index 63500631..d60da7fb 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -330,3 +330,27 @@ .small-box { border-radius: 10px; } + +.list-status-0 { + color: #7D7D7D; +} + +.list-status-1 { + color: #74c700; +} + +.list-status-2 { + color: #98ca52; +} + +.list-status-3 { + color: #ff8c00; +} + +.list-status-4 { + color: #cc0000; +} + +td.details-control { + cursor: pointer; +}