From eb3c672545fbfd5ccb8cfc374b3b7ef271dd03ce Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Wed, 27 May 2020 19:48:51 +0200
Subject: [PATCH] Show explicitly which hostname belongs to which IP address
 when hovering over the hostnames. Note that the IP addresses and host names
 were already in the same order, before.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 api_db.php                           |  2 ++
 scripts/pi-hole/js/groups-clients.js |  8 ++++++--
 scripts/pi-hole/js/network.js        | 17 +++++++++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/api_db.php b/api_db.php
index d6da3bbb..34d0b8af 100644
--- a/api_db.php
+++ b/api_db.php
@@ -73,6 +73,8 @@ if(isset($_GET["network"]) && $auth)
 			array_push($res["ip"],$network_address["ip"]);
 			if($network_address["name"] !== null)
 				array_push($res["name"],utf8_encode($network_address["name"]));
+			else
+				array_push($res["name"],"");
 		}
 		$network_addresses->finalize();
 
diff --git a/scripts/pi-hole/js/groups-clients.js b/scripts/pi-hole/js/groups-clients.js
index ed5463f4..d1ac337f 100644
--- a/scripts/pi-hole/js/groups-clients.js
+++ b/scripts/pi-hole/js/groups-clients.js
@@ -279,7 +279,6 @@ function addClient() {
     return;
   }
 
-
   // Validate input, can be:
   // - IPv4 address (with and without CIDR)
   // - IPv6 address (with and without CIDR)
@@ -290,7 +289,12 @@ function addClient() {
     ip = ip.toUpperCase();
   } else if (!utils.validateHostname(ip)) {
     utils.enableAll();
-    utils.showAlert("warning", "", "Warning", "Input is neither a valid IP or MAC address nor a valid host name!");
+    utils.showAlert(
+      "warning",
+      "",
+      "Warning",
+      "Input is neither a valid IP or MAC address nor a valid host name!"
+    );
     return;
   }
 
diff --git a/scripts/pi-hole/js/network.js b/scripts/pi-hole/js/network.js
index 82f48f21..6a8aa787 100644
--- a/scripts/pi-hole/js/network.js
+++ b/scripts/pi-hole/js/network.js
@@ -112,10 +112,12 @@ $(document).ready(function () {
         $("td:eq(3)", row).html("<em>unknown</em>");
       } else {
         var names = [];
+        var name = "";
         maxiter = Math.min(data.name.length, MAXIPDISPLAY);
         index = 0;
         for (index = 0; index < maxiter; index++) {
-          var name = data.name[index];
+          name = data.name[index];
+          if (name.length === 0) continue;
           names.push('<a href="queries.php?client=' + name + '">' + name + "</a>");
         }
 
@@ -125,9 +127,20 @@ $(document).ready(function () {
           names.push("...");
         }
 
+        maxiter = Math.min(data.ip.length, data.name.length);
+        var allnames = [];
+        for (index = 0; index < maxiter; index++) {
+          name = data.name[index];
+          if (name.length > 0) {
+            allnames.push(name + " (" + data.ip[index] + ")");
+          } else {
+            allnames.push("No host name for " + data.ip[index] + " known");
+          }
+        }
+
         $("td:eq(3)", row).html(names.join("<br>"));
         $("td:eq(3)", row).hover(function () {
-          this.title = data.name.join("\n");
+          this.title = allnames.join("\n");
         });
       }