Pi-hole web v5.10

api_FTL.php

@@ -41,26 +41,9 @@
 			$tmp = explode(" ",$line);
 
 			if(($tmp[0] === "domains_being_blocked" && !is_numeric($tmp[1])) || $tmp[0] === "status")
-			{
-				$stats[$tmp[0]] = $tmp[1];
-				continue;
-			}
-
-			if(isset($_GET['summary']))
-			{
-				if($tmp[0] !== "ads_percentage_today")
-				{
-					$stats[$tmp[0]] = number_format($tmp[1]);
-				}
-				else
-				{
-					$stats[$tmp[0]] = number_format($tmp[1], 1, '.', '');
-				}
-			}
+				$stats[$tmp[0]] = $tmp[1]; // Expect string response
 			else
-			{
-				$stats[$tmp[0]] = floatval($tmp[1]);
-			}
+				$stats[$tmp[0]] = floatval($tmp[1]); // Expect float response
 		}
 		$stats['gravity_last_updated'] = gravity_last_update(true);
 		$data = array_merge($data,$stats);

db_queries.php

@@ -79,7 +79,7 @@
         <!-- small box -->
         <div class="small-box bg-aqua no-user-select">
             <div class="inner">
-                <h3 class="statistic" id="ads_blocked_exact">---</h3>
+                <h3 class="statistic" id="queries_blocked_exact">---</h3>
                 <p>Queries Blocked</p>
             </div>
             <div class="icon">
@@ -92,7 +92,7 @@
         <!-- small box -->
         <div class="small-box bg-aqua no-user-select">
             <div class="inner">
-                <h3 class="statistic" id="ads_wildcard_blocked">---</h3>
+                <h3 class="statistic" id="queries_wildcard_blocked">---</h3>
                 <p>Queries Blocked (Wildcards)</p>
             </div>
             <div class="icon">
@@ -118,7 +118,7 @@
         <!-- small box -->
         <div class="small-box bg-yellow no-user-select">
             <div class="inner">
-                <h3 class="statistic" id="ads_percentage_today">---</h3>
+                <h3 class="statistic" id="queries_percentage_today">---</h3>
                 <p>Queries Blocked</p>
             </div>
             <div class="icon">

package.json

@@ -24,7 +24,7 @@
     "testpr": "npm run prettier:fix && git diff --ws-error-highlight=all --color=always --exit-code && npm run xo"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.1",
     "eslint-plugin-compat": "^4.0.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",

scripts/pi-hole/js/db_queries.js

@@ -163,16 +163,18 @@ var reloadCallback = function () {
     }
   }
 
-  $("h3#dns_queries").text(statistics[0].toLocaleString());
-  $("h3#ads_blocked_exact").text(statistics[2].toLocaleString());
-  $("h3#ads_wildcard_blocked").text(statistics[3].toLocaleString());
+  var formatter = new Intl.NumberFormat();
+  $("h3#dns_queries").text(formatter.format(statistics[0]));
+  $("h3#queries_blocked_exact").text(formatter.format(statistics[2]));
+  $("h3#queries_wildcard_blocked").text(formatter.format(statistics[3]));
 
   var percent = 0;
   if (statistics[2] + statistics[3] > 0) {
     percent = (100 * (statistics[2] + statistics[3])) / statistics[0];
   }
 
-  $("h3#ads_percentage_today").text(parseFloat(percent).toFixed(1).toLocaleString() + " %");
+  var percentage = formatter.format(Math.round(percent * 10) / 10);
+  $("h3#queries_percentage_today").text(percentage + " %");
 };
 
 function refreshTableData() {

scripts/pi-hole/js/index.js

@@ -731,8 +731,6 @@ function updateSummaryData(runOnce) {
       data.ads_blocked_today = "connection";
       data.ads_percentage_today = "to";
       data.domains_being_blocked = "API";
-      // Adjust text
-      $("#temperature").html('<i class="fa fa-circle text-red"></i> FTL offline');
       // Show spinner
       $("#queries-over-time .overlay").show();
       $("#forward-destinations-pie .overlay").show();
@@ -745,12 +743,12 @@ function updateSummaryData(runOnce) {
     } else if (FTLoffline) {
       // FTL was previously offline
       FTLoffline = false;
-      $("#temperature").text(" ");
       updateQueriesOverTime();
       updateTopClientsChart();
       updateTopLists();
     }
 
+    var formatter = new Intl.NumberFormat();
     //Element name might have a different name to the property of the API so we split it at |
     [
       "ads_blocked_today|queries_blocked_today",
@@ -763,7 +761,9 @@ function updateSummaryData(runOnce) {
       var apiName = apiElName[0];
       var elName = apiElName[1];
       var $todayElement = elName ? $("span#" + elName) : $("span#" + apiName);
-      var textData = idx === 2 && data[apiName] !== "to" ? data[apiName] + "%" : data[apiName];
+      // Round to one decimal place and format locale-aware
+      var text = formatter.format(Math.round(data[apiName] * 10) / 10);
+      var textData = idx === 2 && data[apiName] !== "to" ? text + "%" : text;
       if ($todayElement.text() !== textData && $todayElement.text() !== textData + "%") {
         $todayElement.addClass("glow");
         $todayElement.text(textData);

scripts/pi-hole/js/messages.js

@@ -89,7 +89,11 @@ function renderMessage(data, type, row) {
       );
 
     case "DNSMASQ_WARN":
-      return "Warning in <code>dnsmasq</code> core:<pre>" + row.message + "</pre>";
+      return (
+        "Warning in <code>dnsmasq</code> core:<pre>" +
+        row.message +
+        '</pre> Check out <a href="https://docs.pi-hole.net/ftldns/dnsmasq_warn/" target="_blank">our documentation</a> for further information.'
+      );
 
     case "LOAD":
       return (

scripts/pi-hole/js/settings.js

@@ -227,18 +227,22 @@ var leasetable, staticleasetable;
 $(function () {
   if (document.getElementById("DHCPLeasesTable")) {
     leasetable = $("#DHCPLeasesTable").DataTable({
-      dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-6'i><'col-sm-6'f>>",
+      dom:
+        "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      lengthMenu: [
+        [5, 10, 25, 50, 100, -1],
+        [5, 10, 25, 50, 100, "All"],
+      ],
       columnDefs: [
         { bSortable: false, orderable: false, targets: -1 },
         {
           targets: [0, 1, 2],
           render: $.fn.dataTable.render.text(),
         },
       ],
-      paging: false,
-      scrollCollapse: true,
-      scrollY: "200px",
-      scrollX: true,
+      paging: true,
       order: [[2, "asc"]],
       stateSave: true,
       stateDuration: 0,
@@ -253,18 +257,22 @@ $(function () {
 
   if (document.getElementById("DHCPStaticLeasesTable")) {
     staticleasetable = $("#DHCPStaticLeasesTable").DataTable({
-      dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12'i>>",
+      dom:
+        "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+        "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      lengthMenu: [
+        [5, 10, 25, 50, 100, -1],
+        [5, 10, 25, 50, 100, "All"],
+      ],
       columnDefs: [
         { bSortable: false, orderable: false, targets: -1 },
         {
           targets: [0, 1, 2],
           render: $.fn.dataTable.render.text(),
         },
       ],
-      paging: false,
-      scrollCollapse: true,
-      scrollY: "200px",
-      scrollX: true,
+      paging: true,
       order: [[2, "asc"]],
       stateSave: true,
       stateSaveCallback: function (settings, data) {

scripts/pi-hole/php/api_token.php

@@ -1,26 +1,47 @@
-<html><body>
+<html>
+<head>
+<style>
+body {
+  background: #fff;
+  margin: 10px 0;
+}
+
+.qrcode {
+  text-align: center;
+  margin: 0 0 1em;
+}
+
+.qrcode svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.token {
+  font-size: 14px;
+  word-break: break-word;
+}
+</style>
+</head>
+<body>
 <?php
 require "auth.php";
 require "password.php";
 check_cors();
 
-if($auth)
-{
-  if(strlen($pwhash) > 0)
-  {
+if($auth) {
+  if(strlen($pwhash) > 0) {
+    echo '<div class="qrcode">';
     require_once("../../vendor/qrcode.php");
     $qr = QRCode::getMinimumQRCode($pwhash, QR_ERROR_CORRECT_LEVEL_Q);
-    $qr->printHTML("10px");
-    echo "<br>Raw API Token: <code>" . $pwhash . "</code>";
+    // The size of each block (in pixels) should be an integer
+    $qr->printSVG(10);
+    echo "</div>";
+    echo 'Raw API Token: <code class="token">' . $pwhash . "</code></div>";
+  } else {
+    echo "<p>No password set</p>";
   }
-  else
-  {
-  ?><p>No password set<?php
-  }
-}
-else
-{
-?><p>Not authorized!</p><?php
+} else {
+  echo "<p>Not authorized!</p>";
 }
 ?>
 </body>