From a604037d339a03db8f83ff78ecc20e0524a2b23b Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 20 Jun 2017 13:01:30 +0200
Subject: [PATCH] Add unique clients to summary

---
 index.php                   | 40 ++++++++++++++++++-------------------
 scripts/pi-hole/js/index.js | 10 +++++-----
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/index.php b/index.php
index 6c161299..bf901652 100644
--- a/index.php
+++ b/index.php
@@ -10,25 +10,12 @@
 ?>
 <!-- Small boxes (Stat box) -->
 <div class="row">
-    <div class="col-lg-3 col-xs-12">
-        <!-- small box -->
-        <div class="small-box bg-aqua">
-            <div class="inner">
-                <h3 class="statistic" id="ads_blocked_today">---</h3>
-                <p>Queries Blocked Last 24 Hours</p>
-            </div>
-            <div class="icon">
-                <i class="ion ion-android-hand"></i>
-            </div>
-        </div>
-    </div>
-    <!-- ./col -->
     <div class="col-lg-3 col-xs-12">
         <!-- small box -->
         <div class="small-box bg-green">
             <div class="inner">
-                <h3 class="statistic" id="dns_queries_today">---</h3>
-                <p>Queries Last 24 Hours</p>
+                <p>Total queries</p>
+                <h3 class="statistic"><span id="dns_queries_today">---</span></h3>
             </div>
             <div class="icon">
                 <i class="ion ion-earth"></i>
@@ -38,13 +25,26 @@
     <!-- ./col -->
     <div class="col-lg-3 col-xs-12">
         <!-- small box -->
-        <div class="small-box bg-yellow">
+        <div class="small-box bg-aqua">
             <div class="inner">
-                <h3 class="statistic" id="ads_percentage_today">---</h3>
-                <p>Queries Blocked Last 24 Hours</p>
+                <p>Queries Blocked</p>
+                <h3 class="statistic"><span id="ads_blocked_today">---</span> (<span id="ads_percentage_today">---</span>)</h3>
             </div>
             <div class="icon">
-                <i class="ion ion-pie-graph"></i>
+                <i class="ion ion-android-hand"></i>
+            </div>
+        </div>
+    </div>
+    <!-- ./col -->
+    <div class="col-lg-3 col-xs-12">
+        <!-- small box -->
+        <div class="small-box bg-yellow">
+            <div class="inner">
+                <p>Unique Clients</p>
+                <h3 class="statistic"><span id="unique_clients">---</span></h3>
+            </div>
+            <div class="icon">
+                <i class="ion ion-person-stalker"></i>
             </div>
         </div>
     </div>
@@ -53,8 +53,8 @@
         <!-- small box -->
         <div class="small-box bg-red">
             <div class="inner">
-                <h3 class="statistic" id="domains_being_blocked">---</h3>
                 <p>Domains on Blocklists</p>
+                <h3 class="statistic"><span id="domains_being_blocked">---</span></h3>
             </div>
             <div class="icon">
                 <i class="ion ion-ios-list"></i>
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index ecb005af..6b0530f6 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -406,17 +406,17 @@ function updateSummaryData(runOnce) {
             }
         }
 
-        ["ads_blocked_today", "dns_queries_today", "ads_percentage_today"].forEach(function(today) {
-            var todayElement = $("h3#" + today);
+        ["ads_blocked_today", "dns_queries_today", "ads_percentage_today", "unique_clients"].forEach(function(today) {
+            var todayElement = $("span#" + today);
             todayElement.text() !== data[today] &&
             todayElement.text() !== data[today] + "%" &&
-            todayElement.addClass("glow");
+            $("h3#" + today).addClass("glow");
         });
 
         window.setTimeout(function() {
-            ["ads_blocked_today", "dns_queries_today", "domains_being_blocked", "ads_percentage_today"].forEach(function(header, idx) {
+            ["ads_blocked_today", "dns_queries_today", "domains_being_blocked", "ads_percentage_today", "unique_clients"].forEach(function(header, idx) {
                 var textData = (idx === 3 && data[header] !== "to") ? data[header] + "%" : data[header];
-                $("h3#" + header).text(textData);
+                $("span#" + header).text(textData);
             });
             $("h3.statistic.glow").removeClass("glow");
         }, 500);