From b351f45cb24b15ee436aad0445127fb4c2074164 Mon Sep 17 00:00:00 2001
From: Adam Warner <me@adamwarner.co.uk>
Date: Fri, 15 May 2020 09:25:01 +0100
Subject: [PATCH] Change the names of the info elements without changing the
 property names of the API

Signed-off-by: Adam Warner <me@adamwarner.co.uk>
---
 index.php                   |  4 ++--
 scripts/pi-hole/js/index.js | 35 +++++++++++++++++------------------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/index.php b/index.php
index a111880c6..0e03ff60e 100644
--- a/index.php
+++ b/index.php
@@ -47,7 +47,7 @@ function getinterval()
         <div class="small-box bg-aqua">
             <div class="inner">
                 <p>Queries Blocked</p>
-                <h3 class="statistic"><span id="ads_blocked_today">---</span></h3>
+                <h3 class="statistic"><span id="queries_blocked_today">---</span></h3>
             </div>
             <div class="icon">
                 <i class="fas fa-hand-paper"></i>
@@ -60,7 +60,7 @@ function getinterval()
         <div class="small-box bg-yellow">
             <div class="inner">
                 <p>Percent Blocked</p>
-                <h3 class="statistic"><span id="ads_percentage_today">---</span></h3>
+                <h3 class="statistic"><span id="percentage_blocked_today">---</span></h3>
             </div>
             <div class="icon">
                 <i class="fas fa-chart-pie"></i>
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 2f04622d9..995a3c334 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -777,15 +777,24 @@ function updateSummaryData(runOnce) {
       updateTopLists();
     }
 
-    ["ads_blocked_today", "dns_queries_today", "ads_percentage_today", "unique_clients"].forEach(
-      function (today) {
-        var $todayElement = $("span#" + today);
-
-        if ($todayElement.text() !== data[today] && $todayElement.text() !== data[today] + "%") {
-          $todayElement.addClass("glow");
-        }
+    //Element name might have a different name to the property of the API so we split it at |
+    [
+      "ads_blocked_today|queries_blocked_today",
+      "dns_queries_today",
+      "ads_percentage_today|percentage_blocked_today",
+      "unique_clients",
+      "domains_being_blocked"
+    ].forEach(function (arrayItem, idx) {
+      var apiElName = arrayItem.split("|");
+      var apiName = apiElName[0];
+      var elName = apiElName[1];
+      var $todayElement = elName === null ? $("span#" + apiName) : $("span#" + elName);
+      var textData = idx === 2 && data[apiName] !== "to" ? data[apiName] + "%" : data[apiName];
+      if ($todayElement.text() !== textData && $todayElement.text() !== textData + "%") {
+        $todayElement.addClass("glow");
+        $todayElement.text(textData);
       }
-    );
+    });
 
     if (Object.prototype.hasOwnProperty.call(data, "dns_queries_all_types")) {
       $("#total_queries").prop(
@@ -795,16 +804,6 @@ function updateSummaryData(runOnce) {
     }
 
     window.setTimeout(function () {
-      [
-        "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];
-        $("span#" + header).text(textData);
-      });
       $("span.glow").removeClass("glow");
     }, 500);
   })