From 7927ac18158ef5caa43f686bf5b11309bb48ef24 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sat, 18 Dec 2021 09:15:24 -0300
Subject: [PATCH] Improving code readability for lists (index.js and
 db_lists.js) (#1994)

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/db_lists.js | 48 ++++++++-----------------
 scripts/pi-hole/js/index.js    | 64 +++++++++++-----------------------
 scripts/pi-hole/js/utils.js    | 13 +++++++
 3 files changed, 48 insertions(+), 77 deletions(-)

diff --git a/scripts/pi-hole/js/db_lists.js b/scripts/pi-hole/js/db_lists.js
index 4e21ad6d..aec1e08c 100644
--- a/scripts/pi-hole/js/db_lists.js
+++ b/scripts/pi-hole/js/db_lists.js
@@ -85,17 +85,11 @@ function updateTopClientsChart() {
 
         percentage = (data.top_sources[client] / sum) * 100;
         clienttable.append(
-          "<tr> <td>" +
-            clientname +
-            "</td> <td>" +
-            data.top_sources[client] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            sum +
-            '"> <div class="progress-bar progress-bar-blue" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(clientname) +
+            utils.addTD(data.top_sources[client]) +
+            utils.addTD(utils.colorBar(percentage, sum, "progress-bar-blue")) +
+            "</tr> "
         );
       }
     }
@@ -132,17 +126,11 @@ function updateTopDomainsChart() {
 
         percentage = (data.top_domains[domain] / sum) * 100;
         domaintable.append(
-          "<tr> <td>" +
-            domain +
-            "</td> <td>" +
-            data.top_domains[domain] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            sum +
-            '"> <div class="progress-bar queries-permitted" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(domain) +
+            utils.addTD(data.top_domains[domain]) +
+            utils.addTD(utils.colorBar(percentage, sum, "queries-permitted")) +
+            "</tr> "
         );
       }
     }
@@ -179,17 +167,11 @@ function updateTopAdsChart() {
 
         percentage = (data.top_ads[ad] / sum) * 100;
         adtable.append(
-          "<tr> <td>" +
-            ad +
-            "</td> <td>" +
-            data.top_ads[ad] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            sum +
-            '"> <div class="progress-bar queries-blocked" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(ad) +
+            utils.addTD(data.top_ads[ad]) +
+            utils.addTD(utils.colorBar(percentage, sum, "queries-blocked")) +
+            "</tr> "
         );
       }
     }
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9dc8612e..ba962611 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -548,17 +548,11 @@ function updateTopClientsChart() {
           "</a>";
         percentage = (data.top_sources[client] / data.dns_queries_today) * 100;
         clienttable.append(
-          "<tr> <td>" +
-            url +
-            "</td> <td>" +
-            data.top_sources[client] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            data.dns_queries_today +
-            '"> <div class="progress-bar progress-bar-blue" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(url) +
+            utils.addTD(data.top_sources[client]) +
+            utils.addTD(utils.colorBar(percentage, data.dns_queries_today, "progress-bar-blue")) +
+            "</tr> "
         );
       }
     }
@@ -594,17 +588,11 @@ function updateTopClientsChart() {
           "</a>";
         percentage = (data.top_sources_blocked[client] / data.ads_blocked_today) * 100;
         clientblockedtable.append(
-          "<tr> <td>" +
-            url +
-            "</td> <td>" +
-            data.top_sources_blocked[client] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            data.ads_blocked_today +
-            '"> <div class="progress-bar progress-bar-blue" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(url) +
+            utils.addTD(data.top_sources_blocked[client]) +
+            utils.addTD(utils.colorBar(percentage, data.ads_blocked_today, "progress-bar-blue")) +
+            "</tr> "
         );
       }
     }
@@ -651,17 +639,11 @@ function updateTopLists() {
         url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_queries[domain] / data.dns_queries_today) * 100;
         domaintable.append(
-          "<tr> <td>" +
-            url +
-            "</td> <td>" +
-            data.top_queries[domain] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            data.dns_queries_today +
-            '"> <div class="progress-bar queries-permitted" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(url) +
+            utils.addTD(data.top_queries[domain]) +
+            utils.addTD(utils.colorBar(percentage, data.dns_queries_today, "queries-permitted")) +
+            "</tr> "
         );
       }
     }
@@ -684,17 +666,11 @@ function updateTopLists() {
         url = '<a href="queries.php?domain=' + domain + '">' + urlText + "</a>";
         percentage = (data.top_ads[domain] / data.ads_blocked_today) * 100;
         adtable.append(
-          "<tr> <td>" +
-            url +
-            "</td> <td>" +
-            data.top_ads[domain] +
-            '</td> <td> <div class="progress progress-sm" title="' +
-            percentage.toFixed(1) +
-            "% of " +
-            data.ads_blocked_today +
-            '"> <div class="progress-bar queries-blocked" style="width: ' +
-            percentage +
-            '%"></div> </div> </td> </tr> '
+          "<tr> " +
+            utils.addTD(url) +
+            utils.addTD(data.top_ads[domain]) +
+            utils.addTD(utils.colorBar(percentage, data.ads_blocked_today, "queries-blocked")) +
+            "</tr> "
         );
       }
     }
diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
index dffbb1b2..7229231f 100644
--- a/scripts/pi-hole/js/utils.js
+++ b/scripts/pi-hole/js/utils.js
@@ -337,6 +337,17 @@ function addFromQueryLog(domain, list) {
   });
 }
 
+// Helper functions to format the progress bars used on the Dashboard and Long-term Lists
+function addTD(content) {
+  return "<td>" + content + "</td> ";
+}
+
+function colorBar(percentage, total, cssClass) {
+  var title = percentage.toFixed(1) + "% of " + total;
+  var bar = '<div class="progress-bar ' + cssClass + '" style="width: ' + percentage + '%"></div>';
+  return '<div class="progress progress-sm" title="' + title + '"> ' + bar + " </div>";
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -357,5 +368,7 @@ window.utils = (function () {
     validateMAC: validateMAC,
     validateHostname: validateHostname,
     addFromQueryLog: addFromQueryLog,
+    addTD: addTD,
+    colorBar: colorBar,
   };
 })();