pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add the ability to filter domains by type (whitelist, blacklist, regex) (#2334)

Browse Source
This commit is contained in:
RD WebDesign
2022-09-09 21:19:41 -03:00
committed by GitHub
parent 9485353ab7 4d8b19f4c9
commit 2c1db2ca4c
5 changed files with 99 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups-domains.php
+10
View File
@@ -113,6 +113,16 @@ require 'scripts/pi-hole/php/header_authenticated.php';
<h3 class="box-title">
List of domains
</h3>
<div class="filter_types">
<div class="line">
<span><input type="checkbox" name="typ" value="0" id="typ0" checked><label for="typ0">Exact whitelist</label></span>
<span><input type="checkbox" name="typ" value="2" id="typ2" checked><label for="typ2">Regex whitelist</label></span>
</div>
<div class="line">
<span><input type="checkbox" name="typ" value="1" id="typ1" checked><label for="typ1">Exact blacklist</label></span>
<span><input type="checkbox" name="typ" value="3" id="typ3" checked><label for="typ3">Regex blacklist</label></span>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
scripts/pi-hole/js/groups-domains.js
+18
View File
@@ -402,6 +402,24 @@ 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.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";
scripts/pi-hole/php/header_authenticated.php
+1 -1
View File
@@ -137,7 +137,7 @@ $piholeFTLConf = piholeFTLConfig();
require 'header.php';
?>
<body class="hold-transition sidebar-mini<?php if ($boxedlayout) { ?> layout-boxed<?php } ?><?php if ($auth) { ?> logged-in<?php } ?>">
<body class="<?php echo $theme; ?> hold-transition sidebar-mini<?php if ($boxedlayout) { ?> layout-boxed<?php } ?><?php if ($auth) { ?> logged-in<?php } ?>">
<noscript>
<!-- JS Warning -->
<div>
style/pi-hole.css
+59
View File
@@ -728,6 +728,65 @@ li:not(.menu-open) .treeview-menu .warning-count {
}
}
/* Domains table: filter by type */
#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: 0 0 2px 10px !important;
width: 120px;
min-height: 1.2em;
}
/* Domains table: filter by type - smaller icheck */
body:not(.lcars) .filter_types [class*="icheck-"] > label {
padding-left: 1.5em !important;
line-height: 1.2em;
min-height: 1.2em;
}
body:not(.lcars)
.filter_types
[class*="icheck-"]
> input:first-child
+ input[type="hidden"]
+ label::before,
body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child + label::before {
width: 1.2em;
height: 1.2em;
margin-left: -1.55em;
}
body:not(.lcars)
.filter_types
[class*="icheck-"]
> input:first-child:checked
+ input[type="hidden"]
+ label::after,
body:not(.lcars) .filter_types [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);
style/themes/lcars.css
+11
View File
@@ -1743,6 +1743,17 @@ table.dataTable {
}
}
/* Domains table: filter by type */
.filter_types span {
width: 132px;
}
[class*="icheck-"] > label {
color: var(--text-color);
}
[class*="icheck-"] > label:hover {
color: #cde !important;
}
/*** Used by the long-term pages ***/
.daterangepicker {
background-color: #345;