[Staging] 3.1 (#514)

* Remove double click handler * ~Today~ Over Last 24 Hours * Rename Top Advertisers to Top Blocked Domains * percentage should be a float instead of an integer * Define $over_time as array. Fixes #501 * Add hover/hit radius for Forward Destinations over Time graph * Add custom callback for tooltips and disable legend for Forward Destinations over Time graph * Remove legend, add tooltips and increase hit/hover radius for Query Types over Time graph. Fixes #502 * Don't hide detailed graphs on small screens any longer * 🌮 is the new squirrel * revise wording on main page shorter text to fit in one line on smaller screens * Show warning in browser when fopen() failed * open links in new tab * open links in new tab * Update header.php * select 'Login' in Navbar when showing loginpage using the same term as it is already used to show up the loginpage (in line 565) * set the mainbox wider on smaller screens solves issue of overlapping text with loginbutton when using smaller screens * also fix overlapping loginpage on footerbar * remove border on logo * add link feedback (on hover) * sessiontimer in bold letters * use AdminLTE function to toggle dropdown-menu AdminLTE has already an implemented function to toggle the user menu. So there is no need to use an own script in footer.js Benefit: The dropdown-menu closes if you click on a blank Place * align donate-url with url in footerbar * remove function to open user menu AdminLTE has already an implemented function to toggle the user menu. So there is no need to use an own script in footer.js Benefit: The dropdown-menu closes if you click on a blank Place * Update LICENSE of the project to EUPL v1.2 * Major overhaul of update checker - checks only every 30 minutes to reduce number of GitHub API requests * Add version info to dropdown menu (top right) for viewing on small screens. Addresses #333 partially * Fix typo * footer.php: improve and clean up move animation-stylesheet to pi-hole.css (Have you noticed that there is even a text- and text-shadow animation set, but for webkit-browsers only) added  correct continuous hide of version info (AdminLTEs classed widths as `xs` > `sm` > `md` > `lg`) display Donate-text alwas in one line (do not wrap in between when version info string gets very long) * pi-hole.css: pasted animation stylesheet and improved the text-shadow-animation to work correctly with and without -webkit-prefix (for me this wasn't working until now) * header.php: some corrections & improvements pull dropdown-menu always to right side changed  to  (just like it is in footer) hide version infos in dropdown-menu if it gets shown in footer repaired update-urls, they also should open up in new tab & gets underlined on hover `background:none` is needed because AdminLTE adds dark bg on hover to links when using it on smallscreen (xs) * Minor change to make the dashboard's javascript compatible with escaped characters (like apostrophe) in client names * Add the same for the top domains * ... and Top Ads * Minor change to comments * footer.php: edited as discussed * header.php: edited as discussed * Update queryads.js * Update list.js * queryads.js: codacy fixes * list.js: codacy fixes * list.js: small correction * queryads.js: small correction * Be able to interpret status 5 * Sort list entries (black-/whitelist) alphabetically before creating the table * queryads.js: Update* * removed double comment and updated code to center and separate the buttons on small screens, like in my last screenshot. * list.js: update* updated code to center and separate the buttons on small screens, like in my last screenshot.
pi-hole · Jun 20, 2017 · f204b71 · f204b71
1 parent e204cea
commit f204b71
Show file tree

Hide file tree

Showing 16 changed files with 352 additions and 243 deletions.
diff --git a/.pullapprove.yml b/.pullapprove.yml
@@ -10,7 +10,7 @@ group_defaults:
   reset_on_push:
     enabled: true
   reject_value: -2
-  approve_regex: '^(Approved|:shipit:|:\+1:|Engage)'
+  approve_regex: '^(Approved|:shipit:|:\+1:|Engage|:taco:)'
   reject_regex: '^(Rejected|:-1:|Borg)'
   author_approval:
     auto: true

diff --git a/LICENSE b/LICENSE
diff --git a/api_FTL.php b/api_FTL.php
@@ -45,7 +45,7 @@
 		}
 		else
 		{
-			$stats[$tmp[0]] = intval($tmp[1]);
+			$stats[$tmp[0]] = floatval($tmp[1]);
 		}
 	}
 	$data = array_merge($data,$stats);
@@ -233,6 +233,7 @@
 {
 	sendRequestFTL("ForwardedoverTime");
 	$return = getResponseFTL();
+	$over_time = array();
 
 	foreach($return as $line)
 	{
@@ -271,6 +272,7 @@
 {
 	sendRequestFTL("QueryTypesoverTime");
 	$return = getResponseFTL();
+	$over_time = array();
 
 	foreach($return as $line)
 	{

diff --git a/index.php b/index.php
@@ -15,7 +15,7 @@
         <div class="small-box bg-aqua">
             <div class="inner">
                 <h3 class="statistic" id="ads_blocked_today">---</h3>
-                <p>DNS Queries Blocked Today</p>
+                <p>Queries Blocked Last 24 Hours</p>
             </div>
             <div class="icon">
                 <i class="ion ion-android-hand"></i>
@@ -28,7 +28,7 @@
         <div class="small-box bg-green">
             <div class="inner">
                 <h3 class="statistic" id="dns_queries_today">---</h3>
-                <p>DNS Queries Today</p>
+                <p>Queries Last 24 Hours</p>
             </div>
             <div class="icon">
                 <i class="ion ion-earth"></i>
@@ -41,7 +41,7 @@
         <div class="small-box bg-yellow">
             <div class="inner">
                 <h3 class="statistic" id="ads_percentage_today">---</h3>
-                <p>Of Today's Queries Were Blocked</p>
+                <p>Queries Blocked Last 24 Hours</p>
             </div>
             <div class="icon">
                 <i class="ion ion-pie-graph"></i>
@@ -54,7 +54,7 @@
         <div class="small-box bg-red">
             <div class="inner">
                 <h3 class="statistic" id="domains_being_blocked">---</h3>
-                <p>Domains Being Blocked</p>
+                <p>Domains on Blocklists</p>
             </div>
             <div class="icon">
                 <i class="ion ion-ios-list"></i>
@@ -89,7 +89,7 @@
   // a password
   if($auth){ ?>
 <div class="row">
-    <div class="hidden-xs hidden-sm col-md-12 col-lg-6">
+    <div class="col-md-12 col-lg-6">
     <div class="box" id="query-types">
         <div class="box-header with-border">
           <h3 class="box-title">Query Types over Time</h3>
@@ -105,7 +105,7 @@
         <!-- /.box-body -->
       </div>
     </div>
-    <div class="hidden-xs hidden-sm col-md-12 col-lg-6">
+    <div class="col-md-12 col-lg-6">
     <div class="box" id="forward-destinations">
         <div class="box-header with-border">
           <h3 class="box-title">Forward Destinations over Time</h3>
@@ -164,7 +164,7 @@
     <div class="<?php echo $tablelayout; ?>">
       <div class="box" id="ad-frequency">
         <div class="box-header with-border">
-          <h3 class="box-title">Top Advertisers</h3>
+          <h3 class="box-title">Top Blocked Domains</h3>
         </div>
         <!-- /.box-header -->
         <div class="box-body">

diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js
@@ -4,16 +4,6 @@
 *
 *  This file is copyright under the latest version of the EUPL.
 *  Please see LICENSE file for your rights under this license. */
-// User menu toggle
-$("#dropdown-menu a").on("click", function(event) {
-    $(this).parent().toggleClass("open");
-});
-$("body").on("click", function(event) {
-    if(!$("#dropdown-menu").is(event.target) && $("#dropdown-menu").has(event.target).length === 0) {
-        $("#dropdown-menu").removeClass("open");
-    }
-});
-
 //The following functions allow us to display time until pi-hole is enabled after disabling.
 //Works between all pages
 
@@ -141,76 +131,6 @@ $("#pihole-disable-custom").on("click", function(e){
     piholeChange("disable",custVal);
 });
 
-
-var piholeVersion = $("#piholeVersion").html();
-var webVersion = $("#webVersion").html();
-var FTLVersion = $("#FTLVersion").html();
-
-// Credit for following function: https://gist.github.com/alexey-bass/1115557
-// Modified to discard any possible "v" in the string
-function versionCompare(left, right) {
-    if (typeof left + typeof right !== "stringstring")
-    {
-        return false;
-    }
-
-    // If we are on vDev then we assume that it is always
-    // newer than the latest online release, i.e. version
-    // comparison should return 1
-    if(left === "vDev")
-    {
-        return 1;
-    }
-
-    var aa = left.split("v"),
-        bb = right.split("v");
-
-    var a = aa[aa.length-1].split(".")
-        ,   b = bb[bb.length-1].split(".")
-        ,   i = 0, len = Math.max(a.length, b.length);
-
-    for (; i < len; i++) {
-        if ((a[i] && !b[i] && parseInt(a[i]) > 0) || (parseInt(a[i]) > parseInt(b[i]))) {
-            return 1;
-        } else if ((b[i] && !a[i] && parseInt(b[i]) > 0) || (parseInt(a[i]) < parseInt(b[i]))) {
-            return -1;
-        }
-    }
-    return 0;
-}
-
-
-// Update check
-$.getJSON("https://api.github.com/repos/pi-hole/pi-hole/releases/latest", function(json) {
-    if(versionCompare(piholeVersion, json.tag_name.slice(1)) < 0) {
-        // Alert user
-        $("#piholeVersion").html($("#piholeVersion").text() + " <a class=\"alert-link lookatme\" href=\"https://github.com/pi-hole/pi-hole/releases\">(Update available!)</a>");
-        $("#alPiholeUpdate").show();
-    }
-});
-$.getJSON("https://api.github.com/repos/pi-hole/AdminLTE/releases/latest", function(json) {
-    if(versionCompare(webVersion, json.tag_name.slice(1)) < 0) {
-        // Alert user
-        $("#webVersion").html($("#webVersion").text() + " <a class=\"alert-link lookatme\" href=\"https://github.com/pi-hole/adminLTE/releases\">(Update available!)</a>");
-        $("#alWebUpdate").show();
-    }
-});
-$.getJSON("https://api.github.com/repos/pi-hole/FTL/releases/latest", function(json) {
-    if(versionCompare(FTLVersion, json.tag_name.slice(1)) < 0) {
-        // Alert user
-        $("#FTLVersion").html($("#FTLVersion").text() + " <a class=\"alert-link lookatme\" href=\"https://github.com/pi-hole/FTL/releases\">(Update available!)</a>");
-        $("#alFTLUpdate").show();
-    }
-});
-
-/*
- * Make sure that Pi-hole is updated to at least v2.7, since that is needed to use the sudo
- * features of the interface. Skip if on dev
- */
-if(versionCompare(piholeVersion, "v2.7") < 0) {
-    alert("Pi-hole needs to be updated to at least v2.7 before you can use features such as whitelisting/blacklisting from this web interface!");
-}
-
 // Session timer
 var sessionvalidity = parseInt(document.getElementById("sessiontimercounter").textContent);
 var start = new Date;
@@ -255,12 +175,6 @@ else
     document.getElementById("sessiontimer").style.display = "none";
 }
 
-// Hide "exact match" button on queryads.php page if version is 2.9.5 or lower
-if(versionCompare(piholeVersion, "v2.9.5") < 1)
-{
-    $("#btnSearchExact").hide();
-}
-
 // Handle Strg + Enter button on Login page
 $(document).keypress(function(e) {
     if((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey && $("#loginpw").is(":focus")) {

diff --git a/scripts/pi-hole/js/gravity.js b/scripts/pi-hole/js/gravity.js
@@ -45,11 +45,6 @@ $("#gravityBtn").on("click", function(){
     eventsource();
 });
 
-$("#gravityBtn").on("click", () => {
-    $("#gravityBtn").attr("disabled", true);
-    eventsource();
-});
-
 // Handle hiding of alerts
 $(function(){
     $("[data-hide]").on("click", function(){

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -186,11 +186,13 @@ function updateForwardedOverTime() {
         // Collect values and colors, and labels
         forwardDestinationChart.data.datasets[0].backgroundColor = colors[0];
         forwardDestinationChart.data.datasets[0].pointRadius = 0;
+        forwardDestinationChart.data.datasets[0].pointHitRadius = 5;
+        forwardDestinationChart.data.datasets[0].pointHoverRadius = 5;
         forwardDestinationChart.data.datasets[0].label = labels[0];
 
         for (i = forwardDestinationChart.data.datasets.length; i < plotdata[0].length; i++)
         {
-            forwardDestinationChart.data.datasets.push({data: [], backgroundColor: colors[i], pointRadius: 0, label: labels[i]});
+            forwardDestinationChart.data.datasets.push({data: [], backgroundColor: colors[i], pointRadius: 0, pointHitRadius: 5, pointHoverRadius: 5, label: labels[i]});
         }
 
         // Add data for each dataset that is available
@@ -260,6 +262,11 @@ function updateTopClientsChart() {
 
             if ({}.hasOwnProperty.call(data.top_sources, client)){
                 // Sanitize client
+                if(escapeHtml(client) !== client)
+                {
+                    // Make a copy with the escaped index if necessary
+                    data.top_sources[escapeHtml(client)] = data.top_sources[client];
+                }
                 client = escapeHtml(client);
                 if(client.indexOf("|") > -1)
                 {
@@ -305,6 +312,11 @@ function updateTopLists() {
         for (domain in data.top_queries) {
             if ({}.hasOwnProperty.call(data.top_queries,domain)){
                 // Sanitize domain
+                if(escapeHtml(domain) !== domain)
+                {
+                    // Make a copy with the escaped index if necessary
+                    data.top_queries[escapeHtml(domain)] = data.top_queries[domain];
+                }
                 domain = escapeHtml(domain);
                 url = "<a href=\"queries.php?domain="+domain+"\">"+domain+"</a>";
                 percentage = data.top_queries[domain] / data.dns_queries_today * 100;
@@ -323,6 +335,11 @@ function updateTopLists() {
         for (domain in data.top_ads) {
             if ({}.hasOwnProperty.call(data.top_ads,domain)){
                 // Sanitize domain
+                if(escapeHtml(domain) !== domain)
+                {
+                    // Make a copy with the escaped index if necessary
+                    data.top_ads[escapeHtml(domain)] = data.top_ads[domain];
+                }
                 domain = escapeHtml(domain);
                 url = "<a href=\"queries.php?domain="+domain+"\">"+domain+"</a>";
                 percentage = data.top_ads[domain] / data.ads_blocked_today * 100;
@@ -546,6 +563,27 @@ $(document).ready(function() {
                     datasets: [{ data: [] }]
                 },
                 options: {
+                    tooltips: {
+                        enabled: true,
+                        mode: "x-axis",
+                        callbacks: {
+                            title: function(tooltipItem, data) {
+                                var label = tooltipItem[0].xLabel;
+                                var time = label.match(/(\d?\d):?(\d?\d?)/);
+                                var h = parseInt(time[1], 10);
+                                var m = parseInt(time[2], 10) || 0;
+                                var from = padNumber(h)+":"+padNumber(m-5)+":00";
+                                var to = padNumber(h)+":"+padNumber(m+4)+":59";
+                                return "Forward destinations from "+from+" to "+to;
+                            },
+                            label: function(tooltipItems, data) {
+                                return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%";
+                            }
+                        }
+                    },
+                    legend: {
+                        display: false
+                    },
                     scales: {
                         xAxes: [{
                             type: "time",
@@ -589,16 +627,41 @@ $(document).ready(function() {
                         {
                             label: "A: IPv4 queries",
                             pointRadius: 0,
+                            pointHitRadius: 5,
+                            pointHoverRadius: 5,
                             data: []
                         },
                         {
                             label: "AAAA: IPv6 queries",
                             pointRadius: 0,
+                            pointHitRadius: 5,
+                            pointHoverRadius: 5,
                             data: []
                         }
                     ]
                 },
                 options: {
+                    tooltips: {
+                        enabled: true,
+                        mode: "x-axis",
+                        callbacks: {
+                            title: function(tooltipItem, data) {
+                                var label = tooltipItem[0].xLabel;
+                                var time = label.match(/(\d?\d):?(\d?\d?)/);
+                                var h = parseInt(time[1], 10);
+                                var m = parseInt(time[2], 10) || 0;
+                                var from = padNumber(h)+":"+padNumber(m-5)+":00";
+                                var to = padNumber(h)+":"+padNumber(m+4)+":59";
+                                return "Query types from "+from+" to "+to;
+                            },
+                            label: function(tooltipItems, data) {
+                                return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%";
+                            }
+                        }
+                    },
+                    legend: {
+                        display: false
+                    },
                     scales: {
                         xAxes: [{
                             type: "time",

diff --git a/scripts/pi-hole/js/list.js b/scripts/pi-hole/js/list.js
@@ -61,7 +61,7 @@ function refresh(fade) {
             {
                 listw.html("");
             }
-            var data = JSON.parse(response);
+            var data = JSON.parse(response).sort();
 
             if(data.length === 0) {
                 $("h3").hide();
@@ -208,11 +208,19 @@ $(function(){
     });
 });
 
-$(document).ready(function () {
-    if (screen.width < 576) {
-        $(".input-group-btn").css("display", "initial");
+// Wrap form-group's buttons to next line when viewed on a small screen
+$(window).on("resize",function() {
+    if ($(window).width() < 991) {
+        $(".form-group.input-group").removeClass("input-group").addClass("input-group-block");
+        $(".form-group.input-group-block > input").css("margin-bottom", "5px");
+        $(".form-group.input-group-block > .input-group-btn").removeClass("input-group-btn").addClass("btn-block text-center");
     }
     else {
-        $(".input-group-btn").css("display", "table-cell");
+        $(".form-group.input-group-block").removeClass("input-group-block").addClass( "input-group" );
+        $(".form-group.input-group > input").css("margin-bottom","");
+        $(".form-group.input-group > .btn-block.text-center").removeClass("btn-block text-center").addClass("input-group-btn");
     }
 });
+$(document).ready(function() {
+    $(window).trigger("resize");
+});
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
@@ -152,6 +152,12 @@ $(document).ready(function() {
                 $("td:eq(4)", row).html( "Pi-holed (wildcard)" );
                 $("td:eq(5)", row).html( "" );
             }
+            else if (data[4] === "5")
+            {
+                $(row).css("color","red");
+                $("td:eq(4)", row).html( "Pi-holed (blacklist)" );
+                $("td:eq(5)", row).html( "<button style=\"color:green; white-space: nowrap;\"><i class=\"fa fa-pencil-square-o\"></i> Whitelist</button>" );
+            }
             else
             {
                 $("td:eq(4)", row).html( "Unknown" );
@@ -183,7 +189,7 @@ $(document).ready(function() {
     });
     $("#all-queries tbody").on( "click", "button", function () {
         var data = tableApi.row( $(this).parents("tr") ).data();
-        if (data[4] === "1")
+        if (data[4] === "1" || data[4] === "5")
         {
           add(data[2],"white");
         }