From 7d0882723c8d1d536f7b4b18612d810bbbc0fa4d Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 10:33:37 +0200 Subject: [PATCH 01/28] Add exact searching using modified regex for query type, domain, and client. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 6d6ec97d..3640e48a 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -427,7 +427,7 @@ $(document).ready(function() { // Query type IPv4 / IPv6 api.$("td:eq(1)").click(function() { if (autofilter()) { - api.search(this.textContent).draw(); + api.search("\\s"+this.textContent+"\\s", true, true).draw(); $("#resetButton").show(); } }); @@ -450,7 +450,7 @@ $(document).ready(function() { api.$("td:eq(2)").click(function() { if (autofilter()) { var domain = this.textContent.split("\n")[0]; - api.search(domain).draw(); + api.search("\\s"+domain+"\\s", true, true).draw(); $("#resetButton").show(); } }); @@ -473,7 +473,8 @@ $(document).ready(function() { // Client api.$("td:eq(3)").click(function() { if (autofilter()) { - api.search(this.textContent).draw(); + api.search("\\s"+this.textContent+"\\s", true, true).draw(); + $("#resetButton").show(); } }); @@ -495,6 +496,7 @@ $(document).ready(function() { } }); + $("#all-queries tbody").on("click", "button", function() { var data = tableApi.row($(this).parents("tr")).data(); if (data[4] === "2" || data[4] === "3") { @@ -505,7 +507,7 @@ $(document).ready(function() { }); $("#resetButton").click(function() { - tableApi.search("").draw(); + tableApi.search("", true, true).draw(); $("#resetButton").hide(); }); From 6fa9d036b4d9e546127df33e7439ac1c377aaa5a Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 10:39:40 +0200 Subject: [PATCH 02/28] Initialize regex filter mode and clear search field (if set previously) Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 3640e48a..82e08a72 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -496,6 +496,8 @@ $(document).ready(function() { } }); + // Initialize regex filter mode and clear search field (if set previously) + tableApi.search("", true, true).draw(); $("#all-queries tbody").on("click", "button", function() { var data = tableApi.row($(this).parents("tr")).data(); From e9ba5e440a79768c86fa5958749d083e8b5f409c Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 10:53:49 +0200 Subject: [PATCH 03/28] Add [Ctrl] key action to combine filters. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 82e08a72..ca0854e5 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -425,9 +425,13 @@ $(document).ready(function() { initComplete: function() { var api = this.api(); // Query type IPv4 / IPv6 - api.$("td:eq(1)").click(function() { + api.$("td:eq(1)").click(function(event) { if (autofilter()) { - api.search("\\s"+this.textContent+"\\s", true, true).draw(); + if(!event.ctrlKey) { + resetColumnsFilters(); + } + console.log(event.ctrlKey); + api.column(1).search("^"+this.textContent+"$", true, true).draw(); $("#resetButton").show(); } }); @@ -447,10 +451,13 @@ $(document).ready(function() { ); api.$("td:eq(1)").css("cursor", "pointer"); // Domain - api.$("td:eq(2)").click(function() { + api.$("td:eq(2)").click(function(event) { if (autofilter()) { + if(!event.ctrlKey) { + resetColumnsFilters(); + } var domain = this.textContent.split("\n")[0]; - api.search("\\s"+domain+"\\s", true, true).draw(); + api.column(2).search("^"+domain+"$", true, true).draw(); $("#resetButton").show(); } }); @@ -471,10 +478,12 @@ $(document).ready(function() { ); api.$("td:eq(2)").css("cursor", "pointer"); // Client - api.$("td:eq(3)").click(function() { + api.$("td:eq(3)").click(function(event) { if (autofilter()) { - api.search("\\s"+this.textContent+"\\s", true, true).draw(); - + if(!event.ctrlKey) { + resetColumnsFilters(); + } + api.column(3).search("^"+this.textContent+"$", true, true).draw(); $("#resetButton").show(); } }); @@ -497,6 +506,7 @@ $(document).ready(function() { }); // Initialize regex filter mode and clear search field (if set previously) + resetColumnsFilters(); tableApi.search("", true, true).draw(); $("#all-queries tbody").on("click", "button", function() { @@ -509,7 +519,8 @@ $(document).ready(function() { }); $("#resetButton").click(function() { - tableApi.search("", true, true).draw(); + resetColumnsFilters(); + tableApi.draw(); $("#resetButton").hide(); }); @@ -527,3 +538,10 @@ $(document).ready(function() { localStorage.setItem("query_log_filter_chkbox", $("#autofilter").prop("checked")); }); }); + +function resetColumnsFilters(add_filters) { + tableApi.columns()[0].forEach(index => { + tableApi.column(index).search("", true, true); + }); + tableApi.draw(); +} From 8c1503cac585f88cc4c65ed75193d2696dcad052 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 11:20:17 +0200 Subject: [PATCH 04/28] Show filtering details on clear button. Signed-off-by: DL6ER --- queries.php | 2 +- scripts/pi-hole/js/queries.js | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/queries.php b/queries.php index 20c65305..2a601e02 100644 --- a/queries.php +++ b/queries.php @@ -156,7 +156,7 @@ if(strlen($showing) > 0)
- + diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index ca0854e5..87450a7a 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -432,7 +432,7 @@ $(document).ready(function() { } console.log(event.ctrlKey); api.column(1).search("^"+this.textContent+"$", true, true).draw(); - $("#resetButton").show(); + showResetButton("query type", this.textContent); } }); api.$("td:eq(1)").hover( @@ -458,7 +458,7 @@ $(document).ready(function() { } var domain = this.textContent.split("\n")[0]; api.column(2).search("^"+domain+"$", true, true).draw(); - $("#resetButton").show(); + showResetButton("domain", domain); } }); api.$("td:eq(2)").hover( @@ -484,7 +484,7 @@ $(document).ready(function() { resetColumnsFilters(); } api.column(3).search("^"+this.textContent+"$", true, true).draw(); - $("#resetButton").show(); + showResetButton("client", this.textContent); } }); api.$("td:eq(3)").hover( @@ -521,6 +521,7 @@ $(document).ready(function() { $("#resetButton").click(function() { resetColumnsFilters(); tableApi.draw(); + $("#resetButton").text(""); $("#resetButton").hide(); }); @@ -543,5 +544,16 @@ function resetColumnsFilters(add_filters) { tableApi.columns()[0].forEach(index => { tableApi.column(index).search("", true, true); }); - tableApi.draw(); + $("#resetButton").text(""); + tableApi.draw(); +} + +function showResetButton(type, param) { + let button = $("#resetButton"); + if(button.text().length === 0) { + button.text("Clear filtering on "+type+" \""+param+"\""); + } else { + button.text(button.text() + "and "+type+" \""+param+"\""); + } + button.show(); } From 8c82872f4a5fd2f32b2eafb35785412ae4a4cc94 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 11:24:56 +0200 Subject: [PATCH 05/28] Add missing space in front of and on the dynamically generated button text. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 87450a7a..b62e2811 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -430,7 +430,6 @@ $(document).ready(function() { if(!event.ctrlKey) { resetColumnsFilters(); } - console.log(event.ctrlKey); api.column(1).search("^"+this.textContent+"$", true, true).draw(); showResetButton("query type", this.textContent); } @@ -540,8 +539,8 @@ $(document).ready(function() { }); }); -function resetColumnsFilters(add_filters) { - tableApi.columns()[0].forEach(index => { +function resetColumnsFilters() { + tableApi.columns()[0].forEach(function(index) { tableApi.column(index).search("", true, true); }); $("#resetButton").text(""); @@ -553,7 +552,7 @@ function showResetButton(type, param) { if(button.text().length === 0) { button.text("Clear filtering on "+type+" \""+param+"\""); } else { - button.text(button.text() + "and "+type+" \""+param+"\""); + button.text(button.text() + " and "+type+" \""+param+"\""); } button.show(); } From 0aecefcbc8697e4da30c328bbb45029f7417ea03 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 11:41:16 +0200 Subject: [PATCH 06/28] Add comments and simplify code Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index b62e2811..ef0d9209 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -519,9 +519,9 @@ $(document).ready(function() { $("#resetButton").click(function() { resetColumnsFilters(); + hideResetButton(); + // Trigger table update tableApi.draw(); - $("#resetButton").text(""); - $("#resetButton").hide(); }); var chkbox_data = localStorage.getItem("query_log_filter_chkbox"); @@ -543,7 +543,9 @@ function resetColumnsFilters() { tableApi.columns()[0].forEach(function(index) { tableApi.column(index).search("", true, true); }); - $("#resetButton").text(""); + // Clear filter reset button + hideResetButton(); + // Trigger table update tableApi.draw(); } @@ -556,3 +558,9 @@ function showResetButton(type, param) { } button.show(); } + +function hideResetButton() { + let button = $("#resetButton"); + button.text(""); + button.hide(); +} From 2439c3c76a02235ca3fd88c56d784a8acf0eff38 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 21 Apr 2020 11:45:18 +0200 Subject: [PATCH 07/28] Add comment that holding down [Ctrl] can do something magical Signed-off-by: DL6ER --- queries.php | 2 +- scripts/pi-hole/js/queries.js | 39 +++++++++++++++++++++++------------ 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/queries.php b/queries.php index 2a601e02..73185051 100644 --- a/queries.php +++ b/queries.php @@ -155,7 +155,7 @@ if(strlen($showing) > 0) -
+
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index ef0d9209..c4b728ca 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -427,10 +427,14 @@ $(document).ready(function() { // Query type IPv4 / IPv6 api.$("td:eq(1)").click(function(event) { if (autofilter()) { - if(!event.ctrlKey) { + if (!event.ctrlKey) { resetColumnsFilters(); } - api.column(1).search("^"+this.textContent+"$", true, true).draw(); + + api + .column(1) + .search("^" + this.textContent + "$", true, true) + .draw(); showResetButton("query type", this.textContent); } }); @@ -452,11 +456,15 @@ $(document).ready(function() { // Domain api.$("td:eq(2)").click(function(event) { if (autofilter()) { - if(!event.ctrlKey) { + if (!event.ctrlKey) { resetColumnsFilters(); } + var domain = this.textContent.split("\n")[0]; - api.column(2).search("^"+domain+"$", true, true).draw(); + api + .column(2) + .search("^" + domain + "$", true, true) + .draw(); showResetButton("domain", domain); } }); @@ -479,10 +487,14 @@ $(document).ready(function() { // Client api.$("td:eq(3)").click(function(event) { if (autofilter()) { - if(!event.ctrlKey) { + if (!event.ctrlKey) { resetColumnsFilters(); } - api.column(3).search("^"+this.textContent+"$", true, true).draw(); + + api + .column(3) + .search("^" + this.textContent + "$", true, true) + .draw(); showResetButton("client", this.textContent); } }); @@ -541,8 +553,8 @@ $(document).ready(function() { function resetColumnsFilters() { tableApi.columns()[0].forEach(function(index) { - tableApi.column(index).search("", true, true); - }); + tableApi.column(index).search("", true, true); + }); // Clear filter reset button hideResetButton(); // Trigger table update @@ -550,17 +562,18 @@ function resetColumnsFilters() { } function showResetButton(type, param) { - let button = $("#resetButton"); - if(button.text().length === 0) { - button.text("Clear filtering on "+type+" \""+param+"\""); + var button = $("#resetButton"); + if (button.text().length === 0) { + button.text("Clear filtering on " + type + ' "' + param + '"'); } else { - button.text(button.text() + " and "+type+" \""+param+"\""); + button.text(button.text() + " and " + type + ' "' + param + '"'); } + button.show(); } function hideResetButton() { - let button = $("#resetButton"); + var button = $("#resetButton"); button.text(""); button.hide(); } From b74816d8f6b2b18c48669d4e21d13681ce8839b4 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 23 Apr 2020 08:41:37 +0200 Subject: [PATCH 08/28] Improve wording Signed-off-by: DL6ER --- queries.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/queries.php b/queries.php index 73185051..6b25d703 100644 --- a/queries.php +++ b/queries.php @@ -155,7 +155,7 @@ if(strlen($showing) > 0) -
+
From 728d9077803676bde31ddb4019d6dbc86b1b0843 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 23 Apr 2020 09:17:10 +0200 Subject: [PATCH 09/28] Add meta key modifier and highlight filtering columns Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 69 +++++++++++++++-------------------- 1 file changed, 30 insertions(+), 39 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index c4b728ca..2b91d810 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -8,6 +8,7 @@ /* global moment:false */ var tableApi; +var colHighlightColor = "#ffefad"; function add(domain, list) { var token = $("#token").text(); @@ -426,17 +427,7 @@ $(document).ready(function() { var api = this.api(); // Query type IPv4 / IPv6 api.$("td:eq(1)").click(function(event) { - if (autofilter()) { - if (!event.ctrlKey) { - resetColumnsFilters(); - } - - api - .column(1) - .search("^" + this.textContent + "$", true, true) - .draw(); - showResetButton("query type", this.textContent); - } + addColumnFilter(event, 1, "query type", this.textContent); }); api.$("td:eq(1)").hover( function() { @@ -455,18 +446,7 @@ $(document).ready(function() { api.$("td:eq(1)").css("cursor", "pointer"); // Domain api.$("td:eq(2)").click(function(event) { - if (autofilter()) { - if (!event.ctrlKey) { - resetColumnsFilters(); - } - - var domain = this.textContent.split("\n")[0]; - api - .column(2) - .search("^" + domain + "$", true, true) - .draw(); - showResetButton("domain", domain); - } + addColumnFilter(event, 2, "domain", this.textContent.split("\n")[0]); }); api.$("td:eq(2)").hover( function() { @@ -486,17 +466,7 @@ $(document).ready(function() { api.$("td:eq(2)").css("cursor", "pointer"); // Client api.$("td:eq(3)").click(function(event) { - if (autofilter()) { - if (!event.ctrlKey) { - resetColumnsFilters(); - } - - api - .column(3) - .search("^" + this.textContent + "$", true, true) - .draw(); - showResetButton("client", this.textContent); - } + addColumnFilter(event, 3, "client", this.textContent); }); api.$("td:eq(3)").hover( function() { @@ -516,9 +486,7 @@ $(document).ready(function() { } }); - // Initialize regex filter mode and clear search field (if set previously) resetColumnsFilters(); - tableApi.search("", true, true).draw(); $("#all-queries tbody").on("click", "button", function() { var data = tableApi.row($(this).parents("tr")).data(); @@ -531,9 +499,6 @@ $(document).ready(function() { $("#resetButton").click(function() { resetColumnsFilters(); - hideResetButton(); - // Trigger table update - tableApi.draw(); }); var chkbox_data = localStorage.getItem("query_log_filter_chkbox"); @@ -551,10 +516,36 @@ $(document).ready(function() { }); }); +function addColumnFilter(event, colID, colType, filterstring) { + if (!autofilter()) { + return; + } + // Do nothing in case of a requested multi-selection + if (!event.ctrlKey && !event.metaKey) { + resetColumnsFilters(); + } + + // Apply filtering + tableApi + .column(colID) + .search("^" + filterstring + "$", true, true) + .draw(); + + // Apply background color + tableApi + .$("td:eq(" + colID + ")") + .css("background-color", colHighlightColor); + showResetButton(colType, filterstring); +} + function resetColumnsFilters() { tableApi.columns()[0].forEach(function(index) { tableApi.column(index).search("", true, true); + tableApi + .$("td:eq(" + index + ")") + .css("background-color", "#fff"); }); + // Clear filter reset button hideResetButton(); // Trigger table update From c24900ddffa9e7b627ac9191d3b98e9f410944f5 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 23 Apr 2020 09:30:18 +0200 Subject: [PATCH 10/28] Reduce code duplication Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 47 ++++++++++++++++------------------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 2b91d810..97717785 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -425,58 +425,42 @@ $(document).ready(function() { ], initComplete: function() { var api = this.api(); + // Query type IPv4 / IPv6 api.$("td:eq(1)").click(function(event) { addColumnFilter(event, 1, "query type", this.textContent); }); api.$("td:eq(1)").hover( function() { - if (autofilter()) { - this.title = "Click to show only " + this.textContent + " queries"; - this.style.color = "#72afd2"; - } else { - this.title = ""; - this.style.color = ""; - } + addFilteringHint(this, "with query type " + this.textContent); }, function() { this.style.color = ""; } ); api.$("td:eq(1)").css("cursor", "pointer"); + // Domain api.$("td:eq(2)").click(function(event) { addColumnFilter(event, 2, "domain", this.textContent.split("\n")[0]); }); api.$("td:eq(2)").hover( function() { - if (autofilter()) { - var domain = this.textContent.split("\n")[0]; - this.title = "Click to show only queries with domain " + domain; - this.style.color = "#72afd2"; - } else { - this.title = ""; - this.style.color = ""; - } + addFilteringHint(this, "with domain " + this.textContent); }, function() { this.style.color = ""; } ); api.$("td:eq(2)").css("cursor", "pointer"); + // Client api.$("td:eq(3)").click(function(event) { addColumnFilter(event, 3, "client", this.textContent); }); api.$("td:eq(3)").hover( function() { - if (autofilter()) { - this.title = "Click to show only queries made by " + this.textContent; - this.style.color = "#72afd2"; - } else { - this.title = ""; - this.style.color = ""; - } + addFilteringHint(this, "made by client " + this.textContent); }, function() { this.style.color = ""; @@ -516,10 +500,23 @@ $(document).ready(function() { }); }); +function addFilteringHint(obj, text) +{ + if (autofilter()) { + obj.title = "Click to show only queries " + text; + obj.style.color = "#72afd2"; + } else { + obj.title = ""; + obj.style.color = ""; + } +} + function addColumnFilter(event, colID, colType, filterstring) { + // Do not filter anything when the checkbox is unticked if (!autofilter()) { return; } + // Do nothing in case of a requested multi-selection if (!event.ctrlKey && !event.metaKey) { resetColumnsFilters(); @@ -532,8 +529,7 @@ function addColumnFilter(event, colID, colType, filterstring) { .draw(); // Apply background color - tableApi - .$("td:eq(" + colID + ")") + tableApi.$("td:eq(" + colID + ")") .css("background-color", colHighlightColor); showResetButton(colType, filterstring); } @@ -541,8 +537,7 @@ function addColumnFilter(event, colID, colType, filterstring) { function resetColumnsFilters() { tableApi.columns()[0].forEach(function(index) { tableApi.column(index).search("", true, true); - tableApi - .$("td:eq(" + index + ")") + tableApi.$("td:eq(" + index + ")") .css("background-color", "#fff"); }); From 51064df4fd228392a494990260e8d66194e4b183 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 23 Apr 2020 09:34:06 +0200 Subject: [PATCH 11/28] Remove pointer cursor when auto-filtering is disabled. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 97717785..644656d5 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -436,9 +436,9 @@ $(document).ready(function() { }, function() { this.style.color = ""; + this.style.cursor = ""; } ); - api.$("td:eq(1)").css("cursor", "pointer"); // Domain api.$("td:eq(2)").click(function(event) { @@ -450,9 +450,9 @@ $(document).ready(function() { }, function() { this.style.color = ""; + this.style.cursor = ""; } ); - api.$("td:eq(2)").css("cursor", "pointer"); // Client api.$("td:eq(3)").click(function(event) { @@ -464,9 +464,9 @@ $(document).ready(function() { }, function() { this.style.color = ""; + this.style.cursor = ""; } ); - api.$("td:eq(3)").css("cursor", "pointer"); } }); @@ -505,9 +505,11 @@ function addFilteringHint(obj, text) if (autofilter()) { obj.title = "Click to show only queries " + text; obj.style.color = "#72afd2"; + obj.style.cursor = "pointer"; } else { obj.title = ""; obj.style.color = ""; + obj.style.cursor = ""; } } From f8ca9d4173c6b35fc4fa0b2d19710d0973ded1d4 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 23 Apr 2020 16:21:04 +0200 Subject: [PATCH 12/28] Replace / by "or". Signed-off-by: DL6ER --- queries.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/queries.php b/queries.php index 6b25d703..d7ea8cca 100644 --- a/queries.php +++ b/queries.php @@ -155,7 +155,7 @@ if(strlen($showing) > 0) -
+
From 6f2a878371d3154bad417d8dc808feb89df1f962 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Fri, 24 Apr 2020 11:50:55 +0200 Subject: [PATCH 13/28] Store filtering columns in array instead of in a string. This makes adding a column multiple times impossible. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 53 ++++++++++++++++++++++++----------- 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 644656d5..d4328708 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -9,6 +9,7 @@ var tableApi; var colHighlightColor = "#ffefad"; +var tableFilters = []; function add(domain, list) { var token = $("#token").text(); @@ -397,6 +398,17 @@ $(document).ready(function() { ], stateSave: true, stateSaveCallback: function(settings, data) { + // Clear possible filtering settings + data.columns.forEach(function(value, index) { + data.columns[index].search.search = ""; + }); + + // Always start on the first page to show most recent queries + data.start = 0; + + // Always start with empty search field + data.search.search = ""; + // Store current state in client's local storage area localStorage.setItem("query_log_table", JSON.stringify(data)); }, @@ -409,10 +421,6 @@ $(document).ready(function() { } data = JSON.parse(data); - // Always start on the first page to show most recent queries - data.start = 0; - // Always start with empty search field - data.search.search = ""; // Apply loaded state to table return data; }, @@ -428,7 +436,7 @@ $(document).ready(function() { // Query type IPv4 / IPv6 api.$("td:eq(1)").click(function(event) { - addColumnFilter(event, 1, "query type", this.textContent); + addColumnFilter(event, 1, this.textContent); }); api.$("td:eq(1)").hover( function() { @@ -442,7 +450,7 @@ $(document).ready(function() { // Domain api.$("td:eq(2)").click(function(event) { - addColumnFilter(event, 2, "domain", this.textContent.split("\n")[0]); + addColumnFilter(event, 2, this.textContent.split("\n")[0]); }); api.$("td:eq(2)").hover( function() { @@ -456,7 +464,7 @@ $(document).ready(function() { // Client api.$("td:eq(3)").click(function(event) { - addColumnFilter(event, 3, "client", this.textContent); + addColumnFilter(event, 3, this.textContent); }); api.$("td:eq(3)").hover( function() { @@ -513,7 +521,7 @@ function addFilteringHint(obj, text) } } -function addColumnFilter(event, colID, colType, filterstring) { +function addColumnFilter(event, colID, filterstring) { // Do not filter anything when the checkbox is unticked if (!autofilter()) { return; @@ -524,6 +532,8 @@ function addColumnFilter(event, colID, colType, filterstring) { resetColumnsFilters(); } + tableFilters[colID] = filterstring; + // Apply filtering tableApi .column(colID) @@ -533,11 +543,12 @@ function addColumnFilter(event, colID, colType, filterstring) { // Apply background color tableApi.$("td:eq(" + colID + ")") .css("background-color", colHighlightColor); - showResetButton(colType, filterstring); + showResetButton(); } function resetColumnsFilters() { - tableApi.columns()[0].forEach(function(index) { + tableFilters.forEach(function(value, index) { + tableFilters[index] = ""; tableApi.column(index).search("", true, true); tableApi.$("td:eq(" + index + ")") .css("background-color", "#fff"); @@ -549,14 +560,22 @@ function resetColumnsFilters() { tableApi.draw(); } -function showResetButton(type, param) { - var button = $("#resetButton"); - if (button.text().length === 0) { - button.text("Clear filtering on " + type + ' "' + param + '"'); - } else { - button.text(button.text() + " and " + type + ' "' + param + '"'); - } +var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; +function showResetButton() { + var button = $("#resetButton"); + var text = ""; + tableFilters.forEach(function(value, index) { + if (value.length > 0) { + if (text.length === 0) { + text = 'Clear filtering on ' + colTypes[index] + ' "' + value + '"'; + } else { + text += ' and ' + colTypes[index] + ' "' + value + '"'; + } + } + }); + + button.text(text); button.show(); } From fcd4751cb7ee29fdc2892f22b03a083e4b0247b3 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Fri, 24 Apr 2020 12:01:56 +0200 Subject: [PATCH 14/28] Implement selective undoing using the Shift key. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 67 ++++++++++++++++++++++------------- 1 file changed, 43 insertions(+), 24 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index d4328708..9bf65f94 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -508,8 +508,7 @@ $(document).ready(function() { }); }); -function addFilteringHint(obj, text) -{ +function addFilteringHint(obj, text) { if (autofilter()) { obj.title = "Click to show only queries " + text; obj.style.color = "#72afd2"; @@ -527,35 +526,57 @@ function addColumnFilter(event, colID, filterstring) { return; } - // Do nothing in case of a requested multi-selection - if (!event.ctrlKey && !event.metaKey) { + // Reset other columns when NOT requesting multi-selection functions + if (!event.ctrlKey && !event.metaKey && !event.shiftKey) { resetColumnsFilters(); } + if (event.shiftKey) { + filterstring = ""; + } + tableFilters[colID] = filterstring; - // Apply filtering - tableApi - .column(colID) - .search("^" + filterstring + "$", true, true) - .draw(); - - // Apply background color - tableApi.$("td:eq(" + colID + ")") - .css("background-color", colHighlightColor); - showResetButton(); + applyColumnFiltering(); } function resetColumnsFilters() { tableFilters.forEach(function(value, index) { tableFilters[index] = ""; - tableApi.column(index).search("", true, true); - tableApi.$("td:eq(" + index + ")") - .css("background-color", "#fff"); }); // Clear filter reset button - hideResetButton(); + applyColumnFiltering(); +} + +function applyColumnFiltering() { + var showReset = false; + tableFilters.forEach(function(value, index) { + // Prepare regex filter string + var regex = ""; + if (value.length > 0) { + regex = "^" + value + "$"; + + // Add background color + tableApi.$("td:eq(" + index + ")").css("background-color", colHighlightColor); + + // Remember to show reset button + showReset = true; + } else { + // Clear background color + tableApi.$("td:eq(" + index + ")").css("background-color", "#fff"); + } + + // Apply filtering on this column (regex may be empty -> no filtering) + tableApi.column(index).search(regex, true, true); + }); + + if (showReset) { + showResetButton(); + } else { + hideResetButton(); + } + // Trigger table update tableApi.draw(); } @@ -566,12 +587,10 @@ function showResetButton() { var button = $("#resetButton"); var text = ""; tableFilters.forEach(function(value, index) { - if (value.length > 0) { - if (text.length === 0) { - text = 'Clear filtering on ' + colTypes[index] + ' "' + value + '"'; - } else { - text += ' and ' + colTypes[index] + ' "' + value + '"'; - } + if (value.length > 0 && text.length === 0) { + text = "Clear filtering on " + colTypes[index] + ' "' + value + '"'; + } else if (value.length > 0) { + text += " and " + colTypes[index] + ' "' + value + '"'; } }); From 82f4549219cd0686e8bf660dd62d9fedd3426a88 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sat, 25 Apr 2020 06:22:17 +0200 Subject: [PATCH 15/28] Add filtering on status column. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 59 +++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 9bf65f94..e96da742 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -270,6 +270,8 @@ $(document).ready(function() { buttontext = ""; } + fieldtext += ''; + $(row).addClass(colorClass); $("td:eq(4)", row).html(fieldtext); $("td:eq(6)", row).html(buttontext); @@ -302,7 +304,8 @@ $(document).ready(function() { } // Check for existence of sixth column and display only if not Pi-holed - var replytext; + var replytext, + replyid = -1; if (data.length > 6 && !blocked) { switch (data[6]) { case "0": @@ -341,10 +344,14 @@ $(document).ready(function() { default: replytext = "? (" + parseInt(data[6]) + ")"; } + + replyid = parseInt(data[6]); } else { replytext = "-"; } + replytext += ''; + $("td:eq(5)", row).addClass("text-black"); $("td:eq(5)", row).html(replytext); @@ -475,6 +482,39 @@ $(document).ready(function() { this.style.cursor = ""; } ); + + // Status + api.$("td:eq(4)").click(function(event) { + var id = this.children.id.value; + var text = this.textContent; + addColumnFilter(event, 4, id + "#" + text); + }); + api.$("td:eq(4)").hover( + function() { + addFilteringHint(this, "with status " + this.textContent); + }, + function() { + this.style.color = ""; + this.style.cursor = ""; + } + ); + /* + // Reply type + api.$("td:eq(5)").click(function(event) { + var id = this.children.id.value; + var text = this.textContent.split(" ")[0]; + // Column 5 is DNSSEC status data + addColumnFilter(event, 6, id + "#" + text); + }); + api.$("td:eq(5)").hover( + function() { + addFilteringHint(this, "with reply type " + this.textContent); + }, + function() { + this.style.color = ""; + this.style.cursor = ""; + } + );*/ } }); @@ -554,7 +594,15 @@ function applyColumnFiltering() { tableFilters.forEach(function(value, index) { // Prepare regex filter string var regex = ""; + + // Split filter string if we received a combined ID#Name column + var valArr = value.split("#"); + if (valArr.length > 0) { + value = valArr[0]; + } + if (value.length > 0) { + // Exact matching regex = "^" + value + "$"; // Add background color @@ -581,12 +629,19 @@ function applyColumnFiltering() { tableApi.draw(); } -var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; +var colTypes = ["time", "query type", "domain", "client", "status", "DNSSEC reply", "reply type"]; function showResetButton() { var button = $("#resetButton"); var text = ""; tableFilters.forEach(function(value, index) { + // Split filter string if we received a combined ID#Name column + var valArr = value.split("#"); + if (valArr.length > 1) { + value = valArr[1]; + } + + // Create or add to button text if (value.length > 0 && text.length === 0) { text = "Clear filtering on " + colTypes[index] + ' "' + value + '"'; } else if (value.length > 0) { From 1466ecd486c18afe32a4a4329906151676f4c89f Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sat, 25 Apr 2020 15:04:09 +0200 Subject: [PATCH 16/28] Add reply type filtering. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index e96da742..d646f5d8 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -146,7 +146,7 @@ $(document).ready(function() { rowCallback: function(row, data) { // DNSSEC status var dnssec_status; - switch (data[5]) { + switch (data[6]) { case "1": dnssec_status = '
SECURE'; break; @@ -306,8 +306,8 @@ $(document).ready(function() { // Check for existence of sixth column and display only if not Pi-holed var replytext, replyid = -1; - if (data.length > 6 && !blocked) { - switch (data[6]) { + if (!blocked) { + switch (data[5]) { case "0": replytext = "N/A"; break; @@ -345,7 +345,7 @@ $(document).ready(function() { replytext = "? (" + parseInt(data[6]) + ")"; } - replyid = parseInt(data[6]); + replyid = parseInt(data[5]); } else { replytext = "-"; } @@ -372,6 +372,10 @@ $(document).ready(function() { var dataIndex = 0; return data.data.map(function(x) { x[0] = x[0] * 1e6 + dataIndex++; + var dnssec = x[5]; + var reply = x[6]; + x[5] = reply; + x[6] = dnssec; return x; }); } @@ -498,13 +502,12 @@ $(document).ready(function() { this.style.cursor = ""; } ); - /* + // Reply type api.$("td:eq(5)").click(function(event) { var id = this.children.id.value; var text = this.textContent.split(" ")[0]; - // Column 5 is DNSSEC status data - addColumnFilter(event, 6, id + "#" + text); + addColumnFilter(event, 5, id + "#" + text); }); api.$("td:eq(5)").hover( function() { @@ -514,7 +517,7 @@ $(document).ready(function() { this.style.color = ""; this.style.cursor = ""; } - );*/ + ); } }); From 4d9409e7082bb50f69254ea98b9101bc5c828974 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sat, 25 Apr 2020 15:05:47 +0200 Subject: [PATCH 17/28] Apply filtering events only on Ctrl/Command/Shift + Click. Signed-off-by: DL6ER --- queries.php | 2 +- scripts/pi-hole/js/queries.js | 166 ++++++++-------------------------- 2 files changed, 41 insertions(+), 127 deletions(-) diff --git a/queries.php b/queries.php index d7ea8cca..c123fb5b 100644 --- a/queries.php +++ b/queries.php @@ -155,7 +155,7 @@ if(strlen($showing) > 0) -
+
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index d646f5d8..93e7344b 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -109,10 +109,6 @@ function handleAjaxError(xhr, textStatus) { tableApi.draw(); } -function autofilter() { - return $("#autofilter").prop("checked"); -} - $(document).ready(function() { // Do we want to filter queries? var GETDict = {}; @@ -305,49 +301,43 @@ $(document).ready(function() { // Check for existence of sixth column and display only if not Pi-holed var replytext, - replyid = -1; - if (!blocked) { - switch (data[5]) { - case "0": - replytext = "N/A"; - break; - case "1": - replytext = "NODATA"; - break; - case "2": - replytext = "NXDOMAIN"; - break; - case "3": - replytext = "CNAME"; - break; - case "4": - replytext = "IP"; - break; - case "5": - replytext = "DOMAIN"; - break; - case "6": - replytext = "RRNAME"; - break; - case "7": - replytext = "SERVFAIL"; - break; - case "8": - replytext = "REFUSED"; - break; - case "9": - replytext = "NOTIMP"; - break; - case "10": - replytext = "upstream error"; - break; - default: - replytext = "? (" + parseInt(data[6]) + ")"; - } - - replyid = parseInt(data[5]); - } else { - replytext = "-"; + replyid = parseInt(data[5]);; + switch (replyid) { + case 0: + replytext = "N/A"; + break; + case 1: + replytext = "NODATA"; + break; + case 2: + replytext = "NXDOMAIN"; + break; + case 3: + replytext = "CNAME"; + break; + case 4: + replytext = "IP"; + break; + case 5: + replytext = "DOMAIN"; + break; + case 6: + replytext = "RRNAME"; + break; + case 7: + replytext = "SERVFAIL"; + break; + case 8: + replytext = "REFUSED"; + break; + case 9: + replytext = "NOTIMP"; + break; + case 10: + replytext = "upstream error"; + break; + default: + replytext = "? (" +data[5] + ")"; } replytext += ''; @@ -449,43 +439,16 @@ $(document).ready(function() { api.$("td:eq(1)").click(function(event) { addColumnFilter(event, 1, this.textContent); }); - api.$("td:eq(1)").hover( - function() { - addFilteringHint(this, "with query type " + this.textContent); - }, - function() { - this.style.color = ""; - this.style.cursor = ""; - } - ); // Domain api.$("td:eq(2)").click(function(event) { addColumnFilter(event, 2, this.textContent.split("\n")[0]); }); - api.$("td:eq(2)").hover( - function() { - addFilteringHint(this, "with domain " + this.textContent); - }, - function() { - this.style.color = ""; - this.style.cursor = ""; - } - ); // Client api.$("td:eq(3)").click(function(event) { addColumnFilter(event, 3, this.textContent); }); - api.$("td:eq(3)").hover( - function() { - addFilteringHint(this, "made by client " + this.textContent); - }, - function() { - this.style.color = ""; - this.style.cursor = ""; - } - ); // Status api.$("td:eq(4)").click(function(event) { @@ -493,15 +456,6 @@ $(document).ready(function() { var text = this.textContent; addColumnFilter(event, 4, id + "#" + text); }); - api.$("td:eq(4)").hover( - function() { - addFilteringHint(this, "with status " + this.textContent); - }, - function() { - this.style.color = ""; - this.style.cursor = ""; - } - ); // Reply type api.$("td:eq(5)").click(function(event) { @@ -509,15 +463,6 @@ $(document).ready(function() { var text = this.textContent.split(" ")[0]; addColumnFilter(event, 5, id + "#" + text); }); - api.$("td:eq(5)").hover( - function() { - addFilteringHint(this, "with reply type " + this.textContent); - }, - function() { - this.style.color = ""; - this.style.cursor = ""; - } - ); } }); @@ -535,43 +480,12 @@ $(document).ready(function() { $("#resetButton").click(function() { resetColumnsFilters(); }); - - var chkbox_data = localStorage.getItem("query_log_filter_chkbox"); - if (chkbox_data !== null) { - // Restore checkbox state - $("#autofilter").prop("checked", chkbox_data === "true"); - } else { - // Initialize checkbox - $("#autofilter").prop("checked", true); - localStorage.setItem("query_log_filter_chkbox", true); - } - - $("#autofilter").click(function() { - localStorage.setItem("query_log_filter_chkbox", $("#autofilter").prop("checked")); - }); }); -function addFilteringHint(obj, text) { - if (autofilter()) { - obj.title = "Click to show only queries " + text; - obj.style.color = "#72afd2"; - obj.style.cursor = "pointer"; - } else { - obj.title = ""; - obj.style.color = ""; - obj.style.cursor = ""; - } -} - function addColumnFilter(event, colID, filterstring) { - // Do not filter anything when the checkbox is unticked - if (!autofilter()) { - return; - } - - // Reset other columns when NOT requesting multi-selection functions + // Don't do anything when NOT explicitly requesting multi-selection functions if (!event.ctrlKey && !event.metaKey && !event.shiftKey) { - resetColumnsFilters(); + return; } if (event.shiftKey) { @@ -632,7 +546,7 @@ function applyColumnFiltering() { tableApi.draw(); } -var colTypes = ["time", "query type", "domain", "client", "status", "DNSSEC reply", "reply type"]; +var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; function showResetButton() { var button = $("#resetButton"); From cb3be64a23a993f5286a505e045f7161bcb044a7 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 26 Apr 2020 09:50:56 +0200 Subject: [PATCH 18/28] Simply reply type code. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 75 ++++++++++------------------------- 1 file changed, 22 insertions(+), 53 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 93e7344b..bfdea4e8 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -11,6 +11,21 @@ var tableApi; var colHighlightColor = "#ffefad"; var tableFilters = []; +var replyTypes = [ + "N/A", + "NODATA", + "NXDOMAIN", + "CNAME", + "IP", + "DOMAIN", + "RRNAME", + "SERVFAIL", + "REFUSED", + "NOTIMP", + "upstream error" +]; +var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; + function add(domain, list) { var token = $("#token").text(); var alertModal = $("#alertModal"); @@ -164,8 +179,7 @@ $(document).ready(function() { } // Query status - var blocked, - fieldtext, + var fieldtext, buttontext, colorClass, isCNAME = false, @@ -173,28 +187,24 @@ $(document).ready(function() { switch (data[4]) { case "1": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (gravity)"; buttontext = ''; break; case "2": - blocked = false; colorClass = "text-green"; fieldtext = "OK (forwarded)" + dnssec_status; buttontext = ''; break; case "3": - blocked = false; colorClass = "text-green"; fieldtext = "OK (cached)" + dnssec_status; buttontext = ''; break; case "4": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (regex blacklist)"; @@ -206,32 +216,27 @@ $(document).ready(function() { ''; break; case "5": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (exact blacklist)"; buttontext = ''; break; case "6": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (external, IP)"; buttontext = ""; break; case "7": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (external, NULL)"; buttontext = ""; break; case "8": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (external, NXRA)"; buttontext = ""; break; case "9": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (gravity, CNAME)"; buttontext = @@ -239,7 +244,6 @@ $(document).ready(function() { isCNAME = true; break; case "10": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (regex blacklist, CNAME)"; @@ -252,7 +256,6 @@ $(document).ready(function() { isCNAME = true; break; case "11": - blocked = true; colorClass = "text-red"; fieldtext = "Blocked (exact blacklist, CNAME)"; buttontext = @@ -260,7 +263,6 @@ $(document).ready(function() { isCNAME = true; break; default: - blocked = false; colorClass = "text-black"; fieldtext = "Unknown (" + parseInt(data[4]) + ")"; buttontext = ""; @@ -301,43 +303,12 @@ $(document).ready(function() { // Check for existence of sixth column and display only if not Pi-holed var replytext, - replyid = parseInt(data[5]);; - switch (replyid) { - case 0: - replytext = "N/A"; - break; - case 1: - replytext = "NODATA"; - break; - case 2: - replytext = "NXDOMAIN"; - break; - case 3: - replytext = "CNAME"; - break; - case 4: - replytext = "IP"; - break; - case 5: - replytext = "DOMAIN"; - break; - case 6: - replytext = "RRNAME"; - break; - case 7: - replytext = "SERVFAIL"; - break; - case 8: - replytext = "REFUSED"; - break; - case 9: - replytext = "NOTIMP"; - break; - case 10: - replytext = "upstream error"; - break; - default: - replytext = "? (" +data[5] + ")"; + replyid = parseInt(data[5]); + + if (replyid >= 0 && replyid < replyTypes.length) { + replytext = replyTypes[replyid]; + } else { + replytext = "? (" + replyid + ")"; } replytext += ''; @@ -546,8 +517,6 @@ function applyColumnFiltering() { tableApi.draw(); } -var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; - function showResetButton() { var button = $("#resetButton"); var text = ""; From 6c2685229564b01fb598ff6da35f49889e171d6e Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 26 Apr 2020 21:37:51 +0000 Subject: [PATCH 19/28] Use classes for highlighting to ensure the alternate row colors are not lost when removing a column from the selection. Signed-off-by: DL6ER --- queries.php | 7 +++++-- scripts/pi-hole/js/queries.js | 5 ++--- style/pi-hole.css | 6 +++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/queries.php b/queries.php index c123fb5b..e73daf4e 100644 --- a/queries.php +++ b/queries.php @@ -155,8 +155,11 @@ if(strlen($showing) > 0) -
- + +
    +
  • Use Ctrl or ⌘ + to add columns to the current filter
    • +
  • Use Shift + to remove columns to the current filter
    • +

diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index bfdea4e8..e48eeee3 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -8,7 +8,6 @@ /* global moment:false */ var tableApi; -var colHighlightColor = "#ffefad"; var tableFilters = []; var replyTypes = [ @@ -494,13 +493,13 @@ function applyColumnFiltering() { regex = "^" + value + "$"; // Add background color - tableApi.$("td:eq(" + index + ")").css("background-color", colHighlightColor); + tableApi.$("td:eq(" + index + ")").addClass("filter-highlight"); // Remember to show reset button showReset = true; } else { // Clear background color - tableApi.$("td:eq(" + index + ")").css("background-color", "#fff"); + tableApi.$("td:eq(" + index + ")").removeClass("filter-highlight"); } // Apply filtering on this column (regex may be empty -> no filtering) diff --git a/style/pi-hole.css b/style/pi-hole.css index 08ee7abb..67de6bcd 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -265,4 +265,8 @@ code.breakall .bootstrap-select.bs-container.align-right { left: unset !important; right: 10px; -} \ No newline at end of file +} + +.filter-highlight { + background-color: #ffcc0050; +} From c463e15ba6d72b24e2b6da3b65674580564d63c9 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 28 Apr 2020 17:55:41 +0000 Subject: [PATCH 20/28] Fix wording Signed-off-by: DL6ER --- queries.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/queries.php b/queries.php index e73daf4e..6623c1fc 100644 --- a/queries.php +++ b/queries.php @@ -158,7 +158,7 @@ if(strlen($showing) > 0)
  • Use Ctrl or ⌘ + to add columns to the current filter
    • -
  • Use Shift + to remove columns to the current filter
    • +
  • Use Shift + to remove columns from the current filter

From 55ab4f179f4ffde7f0325cc4373f5b9a8a53c312 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Wed, 3 Jun 2020 15:36:06 +0200 Subject: [PATCH 21/28] Minor style changes for the dark theme. Signed-off-by: DL6ER --- queries.php | 2 +- scripts/pi-hole/js/queries.js | 5 ++--- style/pi-hole.css | 9 --------- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/queries.php b/queries.php index 37820e43..8915514e 100644 --- a/queries.php +++ b/queries.php @@ -142,7 +142,7 @@ if(strlen($showing) > 0)
  • Use Ctrl or ⌘ + to add columns to the current filter
  • Use Shift + to remove columns from the current filter
    • -

+
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 9e1b118b..76126c6f 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -318,7 +318,6 @@ $(function () { replytext += ''; - $("td:eq(5)", row).addClass("text-black"); $("td:eq(5)", row).html(replytext); if (data.length > 7) { @@ -488,13 +487,13 @@ function applyColumnFiltering() { regex = "^" + value + "$"; // Add background color - tableApi.$("td:eq(" + index + ")").addClass("filter-highlight"); + tableApi.$("td:eq(" + index + ")").addClass("highlight"); // Remember to show reset button showReset = true; } else { // Clear background color - tableApi.$("td:eq(" + index + ")").removeClass("filter-highlight"); + tableApi.$("td:eq(" + index + ")").removeClass("highlight"); } // Apply filtering on this column (regex may be empty -> no filtering) diff --git a/style/pi-hole.css b/style/pi-hole.css index 2588c5b5..36a9d4e5 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -295,15 +295,6 @@ font-family: inherit; } -.bootstrap-select.bs-container.align-right { - left: unset !important; - right: 10px; -} - -.filter-highlight { - background-color: #ffcc0050; -} - .form-inline .form-control { display: inline-block; width: 100%; From 68e03df011b6b5924dc45f1d7ded78e1b824c699 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 09:44:22 +0200 Subject: [PATCH 22/28] Simplify button by removing the description of what we are filtering. Signed-off-by: DL6ER --- queries.php | 2 +- scripts/pi-hole/js/queries.js | 36 +++-------------------------------- 2 files changed, 4 insertions(+), 34 deletions(-) diff --git a/queries.php b/queries.php index 8915514e..be203c49 100644 --- a/queries.php +++ b/queries.php @@ -142,7 +142,7 @@ if(strlen($showing) > 0)
  • Use Ctrl or ⌘ + to add columns to the current filter
  • Use Shift + to remove columns from the current filter
    • -

+
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 76126c6f..a45e2fec 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -23,7 +23,6 @@ var replyTypes = [ "NOTIMP", "upstream error" ]; -var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; function add(domain, list) { var token = $("#token").text(); @@ -176,7 +175,7 @@ $(function () { // Query status var fieldtext, buttontext, - colorClass, + colorClass = false, isCNAME = false, regexLink = false; @@ -258,7 +257,6 @@ $(function () { isCNAME = true; break; default: - colorClass = false; fieldtext = "Unknown (" + parseInt(data[4]) + ")"; buttontext = ""; } @@ -501,39 +499,11 @@ function applyColumnFiltering() { }); if (showReset) { - showResetButton(); + $("#resetButton").removeClass("hidden"); } else { - hideResetButton(); + $("#resetButton").addClass("hidden"); } // Trigger table update tableApi.draw(); } - -function showResetButton() { - var button = $("#resetButton"); - var text = ""; - tableFilters.forEach(function (value, index) { - // Split filter string if we received a combined ID#Name column - var valArr = value.split("#"); - if (valArr.length > 1) { - value = valArr[1]; - } - - // Create or add to button text - if (value.length > 0 && text.length === 0) { - text = "Clear filtering on " + colTypes[index] + ' "' + value + '"'; - } else if (value.length > 0) { - text += " and " + colTypes[index] + ' "' + value + '"'; - } - }); - - button.text(text); - button.removeClass("hidden"); -} - -function hideResetButton() { - var button = $("#resetButton"); - button.text(""); - button.addClass("hidden"); -} From e357a925b5aacf771e88d11b71b9951b3c65e229 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 10:08:13 +0200 Subject: [PATCH 23/28] Add tooltip and click cursor to enhance accessibility of the click filtering feature. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 102 +++++++++++++++++++++++++++------- 1 file changed, 83 insertions(+), 19 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index a45e2fec..4e0a292b 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -23,6 +23,7 @@ var replyTypes = [ "NOTIMP", "upstream error" ]; +var colTypes = ["time", "query type", "domain", "client", "status", "reply type"]; function add(domain, list) { var token = $("#token").text(); @@ -388,33 +389,83 @@ $(function () { var api = this.api(); // Query type IPv4 / IPv6 - api.$("td:eq(1)").click(function (event) { - addColumnFilter(event, 1, this.textContent); - }); + api + .$("td:eq(1)") + .click(function (event) { + addColumnFilter(event, 1, this.textContent); + }) + .hover( + function () { + $(this).css("cursor", "pointer").attr("title", tooltipText(1, this.textContent)); + }, + function () { + $(this).css("cursor", "auto"); + } + ); // Domain - api.$("td:eq(2)").click(function (event) { - addColumnFilter(event, 2, this.textContent.split("\n")[0]); - }); + api + .$("td:eq(2)") + .click(function (event) { + addColumnFilter(event, 2, this.textContent.split("\n")[0]); + }) + .hover( + function () { + $(this).css("cursor", "pointer").attr("title", tooltipText(2, this.textContent)); + }, + function () { + $(this).css("cursor", "auto"); + } + ); // Client - api.$("td:eq(3)").click(function (event) { - addColumnFilter(event, 3, this.textContent); - }); + api + .$("td:eq(3)") + .click(function (event) { + addColumnFilter(event, 3, this.textContent); + }) + .hover( + function () { + $(this).css("cursor", "pointer").attr("title", tooltipText(3, this.textContent)); + }, + function () { + $(this).css("cursor", "auto"); + } + ); // Status - api.$("td:eq(4)").click(function (event) { - var id = this.children.id.value; - var text = this.textContent; - addColumnFilter(event, 4, id + "#" + text); - }); + api + .$("td:eq(4)") + .click(function (event) { + var id = this.children.id.value; + var text = this.textContent; + addColumnFilter(event, 4, id + "#" + text); + }) + .hover( + function () { + $(this).css("cursor", "pointer").attr("title", tooltipText(4, this.textContent)); + }, + function () { + $(this).css("cursor", "auto"); + } + ); // Reply type - api.$("td:eq(5)").click(function (event) { - var id = this.children.id.value; - var text = this.textContent.split(" ")[0]; - addColumnFilter(event, 5, id + "#" + text); - }); + api + .$("td:eq(5)") + .click(function (event) { + var id = this.children.id.value; + var text = this.textContent.split(" ")[0]; + addColumnFilter(event, 5, id + "#" + text); + }) + .hover( + function () { + $(this).css("cursor", "pointer").attr("title", tooltipText(5, this.textContent)); + }, + function () { + $(this).css("cursor", "auto"); + } + ); } }); @@ -444,6 +495,19 @@ $(function () { } }); +function tooltipText(index, text) { + if (index === 5) { + // Strip reply time from tooltip text + text = text.split(" ")[0]; + } + + if (index in tableFilters && tableFilters[index].length > 0) { + return "Clear filter on " + colTypes[index] + ' "' + text + '" using Shift + Click.'; + } + + return "Add filter on " + colTypes[index] + ' "' + text + '" using Ctrl + Click.'; +} + function addColumnFilter(event, colID, filterstring) { // Don't do anything when NOT explicitly requesting multi-selection functions if (!event.ctrlKey && !event.metaKey && !event.shiftKey) { From c90fbc28cc02f15be0f7c933900f58910cae53fb Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 10:11:18 +0200 Subject: [PATCH 24/28] Reduce agressiveness of highlight color. Signed-off-by: DL6ER --- queries.php | 2 +- style/themes/default-dark.css | 2 +- style/themes/default-light.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/queries.php b/queries.php index be203c49..cd5978bd 100644 --- a/queries.php +++ b/queries.php @@ -138,7 +138,7 @@ if(strlen($showing) > 0) - +

Filtering options:

  • Use Ctrl or ⌘ + to add columns to the current filter
  • Use Shift + to remove columns from the current filter
    • diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css index 1d63c1f4..62321bd5 100644 --- a/style/themes/default-dark.css +++ b/style/themes/default-dark.css @@ -385,7 +385,7 @@ pre { color: #007997 !important; } td.highlight { - background-color: yellow; + background-color: #ffcc0050; } .btn-default { box-shadow: none; diff --git a/style/themes/default-light.css b/style/themes/default-light.css index 859af1c3..1ed7cf73 100644 --- a/style/themes/default-light.css +++ b/style/themes/default-light.css @@ -192,7 +192,7 @@ } td.highlight { - background-color: #ff0 !important; + background-color: #ffcc0050; } .network-never { From 3d423ede5f3691ded9d9432965bfaafd0c9c78b2 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 10:26:54 +0200 Subject: [PATCH 25/28] Use classes instead of manipulating CSS directly for getting the pointer. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 4e0a292b..775efb53 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -396,10 +396,10 @@ $(function () { }) .hover( function () { - $(this).css("cursor", "pointer").attr("title", tooltipText(1, this.textContent)); + $(this).addClass("pointer").attr("title", tooltipText(1, this.textContent)); }, function () { - $(this).css("cursor", "auto"); + $(this).removeClass("pointer"); } ); @@ -411,10 +411,10 @@ $(function () { }) .hover( function () { - $(this).css("cursor", "pointer").attr("title", tooltipText(2, this.textContent)); + $(this).addClass("pointer").attr("title", tooltipText(2, this.textContent)); }, function () { - $(this).css("cursor", "auto"); + $(this).removeClass("pointer"); } ); @@ -426,10 +426,10 @@ $(function () { }) .hover( function () { - $(this).css("cursor", "pointer").attr("title", tooltipText(3, this.textContent)); + $(this).addClass("pointer").attr("title", tooltipText(3, this.textContent)); }, function () { - $(this).css("cursor", "auto"); + $(this).removeClass("pointer"); } ); @@ -443,10 +443,10 @@ $(function () { }) .hover( function () { - $(this).css("cursor", "pointer").attr("title", tooltipText(4, this.textContent)); + $(this).addClass("pointer").attr("title", tooltipText(4, this.textContent)); }, function () { - $(this).css("cursor", "auto"); + $(this).removeClass("pointer"); } ); @@ -460,10 +460,10 @@ $(function () { }) .hover( function () { - $(this).css("cursor", "pointer").attr("title", tooltipText(5, this.textContent)); + $(this).addClass("pointer").attr("title", tooltipText(5, this.textContent)); }, function () { - $(this).css("cursor", "auto"); + $(this).removeClass("pointer"); } ); } From fafdf375334c21b56897900b0007847ca63de712 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 10:38:51 +0200 Subject: [PATCH 26/28] Remove parseInt() from values guaranteed to be int from the API. Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 775efb53..df47aaed 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -258,11 +258,11 @@ $(function () { isCNAME = true; break; default: - fieldtext = "Unknown (" + parseInt(data[4]) + ")"; + fieldtext = "Unknown (" + data[4] + ")"; buttontext = ""; } - fieldtext += ''; + fieldtext += ''; if (colorClass !== false) { $(row).addClass(colorClass); @@ -307,7 +307,7 @@ $(function () { // Check for existence of sixth column and display only if not Pi-holed var replytext, - replyid = parseInt(data[5]); + replyid = data[5]; if (replyid >= 0 && replyid < replyTypes.length) { replytext = replyTypes[replyid]; From f4fe04dd16659fd4e33877de21b5984cab5999be Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 4 Jun 2020 10:52:35 +0200 Subject: [PATCH 27/28] Add placeholder to the search field to highlight what can be searched for Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index df47aaed..817267bf 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -466,6 +466,16 @@ $(function () { $(this).removeClass("pointer"); } ); + + // Disable autocorrect in the search box + var input = $("input[type=search]"); + if (input !== null) { + input.attr("autocomplete", "off"); + input.attr("autocorrect", "off"); + input.attr("autocapitalize", "off"); + input.attr("spellcheck", false); + input.attr("placeholder", "Type / Domain / Client"); + } } }); @@ -484,15 +494,6 @@ $(function () { tableApi.search(""); resetColumnsFilters(); }); - - // Disable autocorrect in the search box - var input = document.querySelector("input[type=search]"); - if (input !== null) { - input.setAttribute("autocomplete", "off"); - input.setAttribute("autocorrect", "off"); - input.setAttribute("autocapitalize", "off"); - input.setAttribute("spellcheck", false); - } }); function tooltipText(index, text) { From f06a2b6ed1551ffa6173c9a25da74a0b12138ccb Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 21 Jun 2020 21:42:16 +0200 Subject: [PATCH 28/28] CSS: Use rgba() instead of hex-color. Signed-off-by: DL6ER --- style/themes/default-dark.css | 2 +- style/themes/default-light.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css index 62321bd5..c1f44a33 100644 --- a/style/themes/default-dark.css +++ b/style/themes/default-dark.css @@ -385,7 +385,7 @@ pre { color: #007997 !important; } td.highlight { - background-color: #ffcc0050; + background-color: rgba(255, 204, 0, 0.333); } .btn-default { box-shadow: none; diff --git a/style/themes/default-light.css b/style/themes/default-light.css index 1ed7cf73..ac3b852e 100644 --- a/style/themes/default-light.css +++ b/style/themes/default-light.css @@ -192,7 +192,7 @@ } td.highlight { - background-color: #ffcc0050; + background-color: rgba(255, 204, 0, 0.333); } .network-never {