diff --git a/footer.php b/footer.php index ff146bd5..8dd6fe96 100644 --- a/footer.php +++ b/footer.php @@ -13,11 +13,11 @@ - - + + - - + + diff --git a/index.php b/index.php index 0ee052b7..01ddf0e8 100644 --- a/index.php +++ b/index.php @@ -1,15 +1,6 @@ - -
- - -

Javascript Is Disabled

Javascript seems to be disabled. This will break some site features.

-

To enable Javascript click here

- -
-
@@ -194,195 +185,17 @@
+ +
+ + +

Javascript Is Disabled

Javascript seems to be disabled. This will break some site features.

+

To enable Javascript click here

+
+ - + diff --git a/js/pihole/index.js b/js/pihole/index.js new file mode 100644 index 00000000..6c251ccb --- /dev/null +++ b/js/pihole/index.js @@ -0,0 +1,189 @@ +// Remove JS warning +var jswarn = document.getElementById("js-warn-exit"); +jswarn.parentNode.removeChild(jswarn); + +$(document).ready(function() { + // Pull in data via AJAX + + updateSummaryData(); + + updateQueriesOverTime(); + + updateQueryTypes(); + + updateTopClientsChart(); + + updateForwardDestinations(); + + updateTopLists(); + + // Create charts + var chartData = { + labels: [], + datasets: [ + { + label: "All Queries", + fillColor: "rgba(220,220,220,0.5)", + strokeColor: "rgba(0, 166, 90,.8)", + pointColor: "rgba(0, 166, 90,.8)" + }, + { + label: "Ad Queries", + fillColor: "rgba(0,192,239,0.5)", + strokeColor: "rgba(0,192,239,1)", + pointColor: "rgba(0,192,239,1)" + } + ] + }; + var isMobile = { + Windows: function() { + return /IEMobile/i.test(navigator.userAgent); + }, + Android: function() { + return /Android/i.test(navigator.userAgent); + }, + BlackBerry: function() { + return /BlackBerry/i.test(navigator.userAgent); + }, + iOS: function() { + return /iPhone|iPad|iPod/i.test(navigator.userAgent); + }, + any: function() { + return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); + } + }; + var animate = false; + var ctx = document.getElementById("queryOverTimeChart").getContext("2d"); + timeLineChart = new Chart(ctx).Line(chartData, + { + pointDot : false, + legendTemplate : "", + animation : animate + } + ); + + ctx = document.getElementById("queryTypeChart").getContext("2d"); + queryTypeChart = new Chart(ctx).Doughnut([], + { + legendTemplate : "", + animation : animate + } + ); + + ctx = document.getElementById("forwardDestinationChart").getContext("2d"); + forwardDestinationChart = new Chart(ctx).Doughnut([], + { + legendTemplate : "", + animation : animate + } + ); +}); + +// Functions to oupdate data in page + +function updateSummaryData(runOnce) { + $.getJSON("api.php?summary", function LoadSummaryData(data) { + //$("h3.statistic").addClass("glow"); + if ($("h3#ads_blocked_today").text() != data.ads_blocked_today) { + $("h3#ads_blocked_today").addClass("glow"); + } + if ($("h3#dns_queries_today").text() != data.dns_queries_today) { + $("h3#dns_queries_today").addClass("glow"); + } + if ($("h3#ads_percentage_today").text() != data.ads_percentage_today) { + $("h3#ads_percentage_today").addClass("glow"); + } + + window.setTimeout(function(){ + $("h3#ads_blocked_today").text(data.ads_blocked_today); + $("h3#dns_queries_today").text(data.dns_queries_today); + $("h3#domains_being_blocked").text(data.domains_being_blocked); + $("h3#ads_percentage_today").text(data.ads_percentage_today + "%"); + $("h3.statistic.glow").removeClass("glow") + }, 500); + }).done(function() { + if (runOnce !== true) { + setTimeout(updateSummaryData, 10000); + } + }).fail(function() { + if (runOnce !== true) { + setTimeout(updateSummaryData, (1000 * 60 * 5)); + } + });; +} + +function updateQueriesOverTime() { + $.getJSON("api.php?overTimeData", function(data) { + for (hour in data.ads_over_time) { + timeLineChart.addData([data.domains_over_time[hour], data.ads_over_time[hour]], hour + ":00"); + } + $('#queries-over-time .overlay').remove(); + //$('#queries-over-time').append(timeLineChart.generateLegend()); + }); +} + +function updateTopClientsChart() { + $.getJSON("api.php?summaryRaw&getQuerySources", function(data) { + var clienttable = $('#client-frequency').find('tbody:last'); + for (domain in data.top_sources) { + clienttable.append(' ' + domain + + ' ' + data.top_sources[domain] + '
'); + } + + $('#client-frequency .overlay').remove(); + }); +} + +function updateQueryTypes() { + $.getJSON("api.php?getQueryTypes", function(data) { + var colors = []; + $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); }); + $.each(data, function(key , value) { + queryTypeChart.addData({ + value: value, + color: colors.shift(), + label: key.substr(6,key.length - 7) + }); + }); + $('#query-types .overlay').remove(); + //$('#query-types').append(queryTypeChart.generateLegend()); + }); +} + +function updateForwardDestinations() { + $.getJSON("api.php?getForwardDestinations", function(data) { + var colors = []; + $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); }); + $.each(data, function(key , value) { + forwardDestinationChart.addData({ + value: value, + color: colors.shift(), + label: key + }); + }); + $('#forward-destinations .overlay').remove(); + //$('#forward-destinations').append(forwardDestinationChart.generateLegend()); + }); +} + +function updateTopLists() { + $.getJSON("api.php?summaryRaw&topItems", function(data) { + var domaintable = $('#domain-frequency').find('tbody:last'); + var adtable = $('#ad-frequency').find('tbody:last'); + + for (domain in data.top_queries) { + domaintable.append(' ' + domain + + ' ' + data.top_queries[domain] + '
'); + } + for (domain in data.top_ads) { + adtable.append(' ' + domain + + ' ' + data.top_ads[domain] + '
'); + } + + $('#domain-frequency .overlay').remove(); + $('#ad-frequency .overlay').remove(); + }); +} \ No newline at end of file diff --git a/js/pihole/queries.js b/js/pihole/queries.js new file mode 100644 index 00000000..d13008dc --- /dev/null +++ b/js/pihole/queries.js @@ -0,0 +1,27 @@ +$(document).ready(function() { + tableApi = $('#all-queries').DataTable( { + "rowCallback": function( row, data, index ){ + if (data[4] == "Pi-holed") { + $(row).css('color','red') + } + else{ + $(row).css('color','green') + } + + }, + "ajax": "api.php?getAllQueries", + "autoWidth" : false, + "order" : [[0, "desc"]], + "columns": [ + { "width" : "20%", "type": "date" }, + { "width" : "10%" }, + { "width" : "40%" }, + { "width" : "15%" }, + { "width" : "15%" } + ] + }) +} ); + +function refreshData() { + tableApi.ajax.url("api.php?getAllQueries").load(); +} \ No newline at end of file diff --git a/queries.php b/queries.php index 83891daa..af951eb5 100644 --- a/queries.php +++ b/queries.php @@ -49,32 +49,4 @@ require "footer.php"; ?> - +