From 3235056d31b038417b31151f85a29970b9c18918 Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Mon, 5 Sep 2022 19:38:51 -0300 Subject: [PATCH 1/4] Add the ability to filter domains by type Signed-off-by: RD WebDesign --- groups-domains.php | 14 +++++++++ scripts/pi-hole/js/groups-domains.js | 29 ++++++++++++++++++ style/pi-hole.css | 45 ++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+) diff --git a/groups-domains.php b/groups-domains.php index f511f9f7..cd536fd3 100644 --- a/groups-domains.php +++ b/groups-domains.php @@ -116,6 +116,20 @@ require 'scripts/pi-hole/php/header_authenticated.php';
+
+
+
+
+ + +
+
+ + +
+
+
+
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js index 9eaeecd5..29f4c0c8 100644 --- a/scripts/pi-hole/js/groups-domains.js +++ b/scripts/pi-hole/js/groups-domains.js @@ -335,6 +335,7 @@ function initTable() { ], dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + + "<'#filter'>" + "<'row'<'col-sm-3'B><'col-sm-9'p>>" + "<'row'<'col-sm-12'<'table-responsive'tr>>>" + "<'row'<'col-sm-3'B><'col-sm-9'p>>" + @@ -383,6 +384,12 @@ function initTable() { input.setAttribute("spellcheck", false); } + table.on("init", function () { + // Put the type filter div into Datatables "DOM" + $("#filter").append($("#filter_types_group")); + $("#filter_types_group").show(); + }); + table.on("init select deselect", function () { utils.changeBulkDeleteStates(table); }); @@ -402,6 +409,28 @@ function initTable() { }); } +// Enable "filter by type" functionality, using checkboxes +$.fn.dataTable.ext.search.push(function (settings, searchData, index, rowData) { + var types = $(".filter_types input:checkbox:checked") + .map(function () { + return this.value; + }) + .get(); + + if (types.length === 0) { + return true; + } + + if (types.indexOf(rowData.type.toString()) !== -1) { + return true; + } + + return false; +}); +$(".filter_types input:checkbox").on("change", function () { + table.draw(); +}); + // Remove 'bnt-group' class from container, to avoid grouping $.fn.dataTable.Buttons.defaults.dom.container.className = "dt-buttons"; diff --git a/style/pi-hole.css b/style/pi-hole.css index 212278c1..7037bba9 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -728,6 +728,51 @@ li:not(.menu-open) .treeview-menu .warning-count { } } +/* Domains table: filter by type */ +#filter_types_group { + display: none; +} +.filter_types { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.filter_types div { + flex: 0 0 auto; +} +.filter_types span { + display: inline-block; + margin: 10px; + width: 120px; +} + +/* Domains table: filter by type - smaller icheck */ +.filter_types .icheck-primary[class*="icheck-"] > label { + padding-left: 1.5em !important; + line-height: 1.2em; +} +.filter_types + .icheck-primary[class*="icheck-"] + > input:first-child + + input[type="hidden"] + + label::before, +.filter_types .icheck-primary[class*="icheck-"] > input:first-child + label::before { + width: 1.2em; + height: 1.2em; + margin-left: -1.55em; +} +.filter_types + .icheck-primary[class*="icheck-"] + > input:first-child:checked + + input[type="hidden"] + + label::after, +.filter_types .icheck-primary[class*="icheck-"] > input:first-child:checked + label::after { + width: 0.35em; + height: 0.7em; + top: -0.2em; + left: -0.18em; +} + /* reverse side menu collapse arrows when menu is closed */ .sidebar-collapse .sidebar-toggle-svg svg { transform: scaleX(-1); From 3ef30992c56c9fa6a9a75c95f464398d7dbffc09 Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Tue, 6 Sep 2022 19:51:25 -0300 Subject: [PATCH 2/4] Move filter selector to header-box Signed-off-by: RD WebDesign --- groups-domains.php | 24 ++++++++++-------------- scripts/pi-hole/js/groups-domains.js | 7 ------- style/pi-hole.css | 18 +++++++++++++++--- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/groups-domains.php b/groups-domains.php index cd536fd3..545b00e0 100644 --- a/groups-domains.php +++ b/groups-domains.php @@ -113,23 +113,19 @@ require 'scripts/pi-hole/php/header_authenticated.php';

List of domains

+
+
+ + +
+
+ + +
+
-
-
-
-
- - -
-
- - -
-
-
-
diff --git a/scripts/pi-hole/js/groups-domains.js b/scripts/pi-hole/js/groups-domains.js index 29f4c0c8..7864f0b7 100644 --- a/scripts/pi-hole/js/groups-domains.js +++ b/scripts/pi-hole/js/groups-domains.js @@ -335,7 +335,6 @@ function initTable() { ], dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + - "<'#filter'>" + "<'row'<'col-sm-3'B><'col-sm-9'p>>" + "<'row'<'col-sm-12'<'table-responsive'tr>>>" + "<'row'<'col-sm-3'B><'col-sm-9'p>>" + @@ -384,12 +383,6 @@ function initTable() { input.setAttribute("spellcheck", false); } - table.on("init", function () { - // Put the type filter div into Datatables "DOM" - $("#filter").append($("#filter_types_group")); - $("#filter_types_group").show(); - }); - table.on("init select deselect", function () { utils.changeBulkDeleteStates(table); }); diff --git a/style/pi-hole.css b/style/pi-hole.css index 7037bba9..422f4d77 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -729,27 +729,39 @@ li:not(.menu-open) .treeview-menu .warning-count { } /* Domains table: filter by type */ -#filter_types_group { - display: none; +#domains-list .box-header { + display: flex; + flex-wrap: wrap; + padding: 5px 10px; +} +#domains-list .box-header h3 { + flex: 1 1 auto; + margin: 5px 0; + width: auto; + min-width: 130px; } .filter_types { display: flex; flex-wrap: wrap; justify-content: center; + margin: 5px auto; } .filter_types div { flex: 0 0 auto; + margin: 2px 0 0; } .filter_types span { display: inline-block; - margin: 10px; + margin: 0 0 2px 10px !important; width: 120px; + min-height: 1.2em; } /* Domains table: filter by type - smaller icheck */ .filter_types .icheck-primary[class*="icheck-"] > label { padding-left: 1.5em !important; line-height: 1.2em; + min-height: 1.2em; } .filter_types .icheck-primary[class*="icheck-"] From e3b4cd92382e6f7fc6d2bf476854d80d556aaeb4 Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Tue, 6 Sep 2022 21:06:39 -0300 Subject: [PATCH 3/4] Fix LCARS visual and allow user selected checkbox theme Signed-off-by: RD WebDesign --- scripts/pi-hole/php/header_authenticated.php | 2 +- style/pi-hole.css | 16 +++++++++------- style/themes/lcars.css | 11 +++++++++++ 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php index 8e86a2f4..f84ee5ef 100644 --- a/scripts/pi-hole/php/header_authenticated.php +++ b/scripts/pi-hole/php/header_authenticated.php @@ -137,7 +137,7 @@ $piholeFTLConf = piholeFTLConfig(); require 'header.php'; ?> - +