luci-app-usteer: Added tooltip while hovering over connected client showing mac,...

Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
(cherry picked from commit 0f794ac76c53b154694b8ee9be4772a501faa76f)

diff --git a/applications/luci-app-usteer/htdocs/luci-static/resources/view/usteer/usteer.js b/applications/luci-app-usteer/htdocs/luci-static/resources/view/usteer/usteer.js
index ccca06203aa43b467054c65f9d775ba192eac6ea..c92febcc0a961c75d275a2543860cd6f37ee7472 100644 (file)
--- a/applications/luci-app-usteer/htdocs/luci-static/resources/view/usteer/usteer.js
+++ b/applications/luci-app-usteer/htdocs/luci-static/resources/view/usteer/usteer.js
@@ -91,25 +91,46 @@ function collectWlanAPInfoEntries(connectioninfo_table_entries, wlanAPInfos) {
        }
 };
 
+function tootltip(mac, IP, hostname) {
+       var body= E([]);
+       body.appendChild(E('div', mac));
+       if (typeof IP !== 'undefined') {
+               for (var IPaddr in IP['ipaddrs']) body.appendChild(E('div', IP['ipaddrs'][IPaddr]));
+               for (var IPaddr in IP['ip6addrs']) body.appendChild(E('div', IP['ip6addrs'][IPaddr]));;
+       }
+       if (hostname !== '') {
+               body.appendChild(E('div', '%h'.format(hostname)));
+       }
+       return body;
+}
 
 function collectWlanAPInfos(compactconnectioninfo_table_entries, wlanAPInfos) {
        for (var wlan in wlanAPInfos) {
-               var hostl = '';
+               var hostl = E([]);
                for (var mac in Clients) {
                        if (typeof Clients[mac] !== 'undefined')
                                if (typeof Clients[mac][wlan] !== 'undefined')
-                                       if (String(Clients[mac][wlan]['connected']).valueOf() == String('true').valueOf()) {
+                                       if (String(Clients[mac][wlan]['connected']).valueOf() === 'true') {
                                                var foundname = mac;
+                                               var IP = '';
+                                               var hostname = '';
                                                var macUp = mac.toUpperCase();
                                                if (typeof Hosts[macUp] !== 'undefined') {
-                                                       if ((String(Hosts[macUp]['ipaddrs'][0]).length > 0) && (typeof Hosts[macUp]['ipaddrs'][0] !== 'undefined')) {
-                                                               foundname = Hosts[macUp]['ipaddrs'][0];
+                                                       if ((typeof Hosts[macUp]['ipaddrs'][0] !== 'undefined') && (String(Hosts[macUp]['ipaddrs'][0]).length > 0)) {
+                                                               IP = Hosts[macUp]['ipaddrs'][0];
+                                                               foundname = IP;
                                                        }
-                                                       if ((String(Hosts[macUp]['name']).length > 0) && (typeof Hosts[macUp]['name'] !== 'undefined')) {
-                                                               foundname = Hosts[macUp]['name'];
+                                                       if ((typeof Hosts[macUp]['name'] !== 'undefined') && (String(Hosts[macUp]['name']).length > 0)) {
+                                                               hostname =  Hosts[macUp]['name'];
+                                                               foundname = hostname;
                                                        }
                                                }
-                                               hostl += '%h\u2003'.format(foundname);
+                                               hostl.appendChild(
+                                                       E('span', { 'class': 'cbi-tooltip-container' }, [
+                                                               '%h\u2003'.format(foundname),
+                                                               E('div', { 'class': 'cbi-tooltip' }, tootltip(mac, Hosts[macUp], hostname))
+                                                       ])
+                                               );
                                        }
                }
                compactconnectioninfo_table_entries.push([