diff --git a/groups-lists.lp b/groups-lists.lp index 7671a5db..8aee83ba 100644 --- a/groups-lists.lp +++ b/groups-lists.lp @@ -73,6 +73,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
| Type of this list: | ' + + setTypeIcon(data.type) + data.type + 'list |
| Health status of this list: | ' +
statusText +
@@ -99,6 +100,46 @@ function format(data) {
);
}
+// Define the status icon element
+function setStatusIcon(statusCode) {
+ var statusIcon;
+
+ switch (statusCode) {
+ case 1:
+ statusIcon = "fa-check-circle";
+ break;
+ case 2:
+ statusIcon = "fa-history";
+ break;
+ case 3:
+ statusIcon = "fa-exclamation-circle";
+ break;
+ case 4:
+ statusIcon = "fa-times-circle";
+ break;
+ default:
+ statusIcon = "fa-question-circle";
+ break;
+ }
+
+ return "";
+}
+
+// Define the status icon element
+function setTypeIcon(type) {
+ //Add red ban icon if data["type"] is "block"
+ //Add green check icon if data["type"] is "allow"
+ let typeIcon =
+ " ";
+ if (type === "block") {
+ typeIcon = " ";
+ } else if (type === "allow") {
+ typeIcon = " ";
+ }
+
+ return typeIcon;
+}
+
// eslint-disable-next-line no-unused-vars
function initTable() {
table = $("#listsTable").DataTable({
@@ -113,6 +154,7 @@ function initTable() {
{ data: "id", visible: false },
{ data: null, visible: true, orderable: false, width: "15px" },
{ data: "status", searchable: false, class: "details-control" },
+ { data: "type", searchable: false, class: "details-control" },
{ data: "address" },
{ data: "enabled", searchable: false },
{ data: "comment" },
@@ -146,54 +188,23 @@ function initTable() {
$(row).attr("data-id", dataId);
$(row).attr("data-type", data.type);
- var statusCode = 0,
- statusIcon;
+ var statusCode = 0;
// If there is no status or the list is disabled, we keep
// status 0 (== unknown)
if (data.status !== null && data.enabled) {
statusCode = parseInt(data.status, 10);
}
- switch (statusCode) {
- case 1:
- statusIcon = "fa-check";
- break;
- case 2:
- statusIcon = "fa-history";
- break;
- case 3:
- statusIcon = "fa-exclamation-circle";
- break;
- case 4:
- statusIcon = "fa-times";
- break;
- default:
- statusIcon = "fa-question-circle";
- break;
- }
-
- // Add red minus sign icon if data["type"] is "block"
- // Add green plus sign icon if data["type"] is "allow"
- let status =
- "";
- if (data.type === "block") {
- status = "";
- } else if (data.type === "allow") {
- status = "";
- }
-
$("td:eq(1)", row).addClass("list-status-" + statusCode);
- $("td:eq(1)", row).html(
- "" +
- status
- );
+ $("td:eq(1)", row).html(setStatusIcon(statusCode));
+
+ $("td:eq(2)", row).addClass("list-type-" + statusCode);
+ $("td:eq(2)", row).html(setTypeIcon(data.type));
if (data.address.startsWith("file://")) {
// Local files cannot be downloaded from a distant client so don't show
// a link to such a list here
- $("td:eq(2)", row).html(
+ $("td:eq(3)", row).html(
'' +
@@ -201,7 +212,7 @@ function initTable() {
""
);
} else {
- $("td:eq(2)", row).html(
+ $("td:eq(3)", row).html(
'');
+ $("td:eq(5)", row).html('');
var commentEl = $("#comment_" + dataId, row);
commentEl.val(data.comment);
commentEl.on("change", editList);
- $("td:eq(5)", row).empty();
- $("td:eq(5)", row).append(
+ $("td:eq(6)", row).empty();
+ $("td:eq(6)", row).append(
''
);
var selectEl = $("#multiselect_" + dataId, row);
@@ -312,7 +323,7 @@ function initTable() {
'">' +
'' +
"";
- $("td:eq(6)", row).html(button);
+ $("td:eq(7)", row).html(button);
},
dom:
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 1dceed62..e2e134ec 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -516,6 +516,7 @@ tfoot.add-new-item > tr > th {
td.details-control {
cursor: pointer;
+ text-align: center;
}
.dataTables-child td {
|