From 86f91c978f163e24e970501e80effe760116128e Mon Sep 17 00:00:00 2001
From: ofirgalcon <ofir@gal.co.uk>
Date: Sun, 2 Feb 2025 02:55:28 +0000
Subject: [PATCH] listing and report buttons, optimisation

add listing and report buttons
optimised for speed via claude 3.5
---
 views/network_tab.php | 480 ++++++++++++++++--------------------------
 1 file changed, 177 insertions(+), 303 deletions(-)

diff --git a/views/network_tab.php b/views/network_tab.php
index e874b85..7c53b9d 100644
--- a/views/network_tab.php
+++ b/views/network_tab.php
@@ -1,4 +1,15 @@
 <div id="network-tab"></div>
+
+<div id="lister" style="font-size: large; float: right;">
+    <a href="/show/listing/network/network" title="List">
+        <i class="btn btn-default tab-btn fa fa-list"></i>
+    </a>
+</div>
+<div id="report_btn" style="font-size: large; float: right;">
+    <a href="/show/report/network/network_report" title="Report">
+        <i class="btn btn-default tab-btn fa fa-th"></i>
+    </a>
+</div>
 <h2 data-i18n="network.network"></h2>
 
 <div id="network-msg" data-i18n="listing.loading" class="col-lg-12 text-center"></div>
@@ -6,316 +17,179 @@
 <script>
 $(document).on('appReady', function(){
     $.getJSON(appUrl + '/module/network/get_tab_data/' + serialNumber, function(data){
-        if( ! data ){
-            // Change loading message to no data
+        if (!data) {
             $('#network-msg').text(i18n.t('no_data'));
+            return;
+        }
 
-        } else {
-
-            // Hide loading/no data message
-            $('#network-msg').text('');
-
-            // Update the tab badge count
-            $('#network-cnt').text(data.length);
-            var skipThese = ['service'];
-            var clientDetail = "";
-            $.each(data, function(i,d){
-
-                // Generate rows from data
-                var rows = ''
-                for (var prop in d){
-                    // Skip skipThese
-                    if(skipThese.indexOf(prop) == -1){
-                        if (d[prop] == '' || d[prop] == null || d[prop] == "none" || prop == ''){
-                           // Do nothing for empty values to blank them
-                        } else if(prop == 'ipv6prefixlen' && d['ipv6ip'] == 'none'){
-                           // Do nothing for IPv6 prefix length when ipv6ip is none
-                        } else if(prop == 'status' && d[prop] == 1){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td><span class="label label-success">'+i18n.t('connected')+'</span></td></tr>';
-                        } else if(prop == 'status' && d[prop] == 0){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td><span class="label label-danger">'+i18n.t('disconnected')+'</span></td></tr>';
-                        } else if(d[prop] == "manual"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.manual')+'</td></tr>';
-                        } else if(d[prop] == "Automatic"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.automatic')+'</td></tr>';
-                        } else if(d[prop] == "autoselect"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.autoselect')+'</td></tr>';
-                        } else if(d[prop] == "autoselect (half-duplex)"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.autoselecthalf')+'</td></tr>';
-                        } else if(d[prop] == "autoselect (full-duplex)"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.autoselectfull')+'</td></tr>';
-                        } else if(d[prop] == "not set"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('network.notset')+'</td></tr>';
-                        } else if(d[prop] == "dhcp"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>DHCP</td></tr>';
-                        } else if(d[prop] == "bootp"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>BOOTP</td></tr>';
-                        } else if(prop == "wireless_card_type" && d[prop].includes("spairport_wireless_card_type_wifi")){
-                           // Apple Silicon Macs report this differently
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+d[prop].replace("spairport_wireless_card_type_wifi", "Wi-Fi")+'</td></tr>';
-                            
-                        // Boolean Values
-                        } else if((prop == 'overrideprimary' || prop == 'ipv6coverrideprimary' || prop == 'airdrop_supported' || prop == 'wow_supported')&& d[prop] == "1"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('yes')+'</td></tr>';
-                        } else if((prop == 'overrideprimary' || prop == 'ipv6coverrideprimary' || prop == 'airdrop_supported' || prop == 'wow_supported')&& d[prop] == "0"){
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+i18n.t('no')+'</td></tr>';
-
-                        // // Format supported channels
-                        } else if (prop == 'supported_channels'){
-                           d[prop] = d[prop].replace(" 10 (2GHz)", "<br> 10 (2GHz)").replace(" 100 (5GHz)", "<br>100 (5GHz)").replace(" 128 (5GHz)", "<br>128 (5GHz)").replace(" 157 (5GHz)", "<br>157 (5GHz)").replace("36 (5GHz)", "<br><br>36 (5GHz)").replace(" 33 (6GHz)", "<br>33 (6GHz)").replace(" 65 (6GHz)", "<br>65 (6GHz)").replace(" 97 (6GHz)", "<br>97 (6GHz)").replace(" 125 (6GHz)", "<br>125 (6GHz)").replace(" 153 (6GHz)", "<br>153 (6GHz)").replace(" 181 (6GHz)", "<br>181 (6GHz)").replace(" 209 (6GHz)", "<br>209 (6GHz)").replace(" 1 (6GHz)", "<br><br>1 (6GHz)")
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+d[prop]+'</td></tr>';
-
-                        // Format DHCP DNS
-                        } else if (prop == 'dhcp_domain_name_servers'){
-                           d[prop] = d[prop].replace(", ", ",<br>")
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+d[prop]+'</td></tr>';
-
-                        // Append to the client detail, only if it is an active network service and we've not already appeneded the data
-                        } else if(d["status"] == "1" && ((prop == "ipv4ip" || prop == "ipv4dns" || prop == "ipv6ip" || prop == "ipv6dns" || prop == "ethernet"|| prop == "externalip") && ! clientDetail.includes(prop))){
-
-                           // Format DNS lines if more than one DNS server
-                           if (prop == "ipv4dns"){
-                               d[prop] = d[prop].replace(", ", ",<br>")
-                           }
-
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+d[prop]+'</td></tr>';
-
-                           clientDetail = clientDetail + prop
-
-                           // Only show IP address and DNS for first active service
-                           if (prop == "ipv4ip" && d["ipv6ip"] == null){
-                               clientDetail = clientDetail + "ipv6ip"
-                           }
-                           if (prop == "ipv6ip" && d["ipv4ip"] == null){
-                               clientDetail = clientDetail + "ipv4ip"
-                           }
-                           if (prop == "ipv4dns" && d["ipv6ip"] == null){
-                               clientDetail = clientDetail + "ipv6ip"
-                           }
-                           if (prop == "ipv6ip" && d["ipv4dns"] == null){
-                               clientDetail = clientDetail + "ipv4dns"
-                           }
-
-                           // Update the network icon on the client detail
-                           if (prop == "ipv4ip" || prop == "ipv6ip"){
-
-                               if (d["service"].includes("Wi-Fi") || d["service"].includes("AirPort")){
-                                   $('.fa.fa-sitemap')
-                                       .addClass("fa fa-wifi")
-                                   $('.fa.fa-fa-sitemap') // This is the broken reportdata client detail
-                                       .addClass("fa fa-wifi")
-                               } else if (d["service"].includes("Ethernet")){
-                                   $('.fa.fa-sitemap')
-                                       .addClass("fa fa-indent fa-rotate-270")
-                                   $('.fa.fa-fa-sitemap') // This is the broken reportdata client detail
-                                       .addClass("ffa fa-indent fa-rotate-270")
-                               } else if (d["service"].includes("iPhone") || d["service"].includes("phone")){
-                                   $('.fa.fa-sitemap')
-                                       .addClass("fa fa-mobile")
-                                   $('.fa.fa-fa-sitemap') // This is the broken reportdata client detail
-                                       .addClass("fa fa-mobile")
-                               } else{
-                                   $('.fa.fa-fa-sitemap') // This is the broken reportdata client detail
-                                       .addClass("fa fa-sitemap") // We're going to fix it by setting the default here
-                               }
-
-                               // Only include first active service
-                               if (! clientDetail.includes("service")){
-                                   clientDetail = clientDetail + "service"
-
-                                   // Add the active network service to the client detail
-                                   $('.machine-hostname').parent().parent().parent()
-                                   .append($('<tr>')
-                                       .append($('<th>')
-                                           .append(i18n.t('network.active_service')))
-                                       .append($('<td>')
-                                           .append(d["service"])))
-                               }
-                           }
-
-                           $('.machine-hostname').parent().parent().parent()
-                           .append($('<tr>')
-                               .append($('<th>')
-                                   .append(i18n.t('network.'+prop)))
-                               .append($('<td>')
-                                   .append(d[prop])))
-                            
-                        } else {
-                           rows = rows + '<tr><th>'+i18n.t('network.'+prop)+'</th><td>'+d[prop]+'</td></tr>';
-                        }
+        // Hide loading message and update badge
+        $('#network-msg').text('');
+        $('#network-cnt').text(data.length);
+
+        const skipThese = ['service'];
+        let clientDetail = '';
+
+        // Helper functions
+        const formatValue = (prop, value, d) => {
+            if (!value || value === '' || value === null || value === 'none' || prop === '') return '';
+            if (prop === 'ipv6prefixlen' && d.ipv6ip === 'none') return '';
+
+            // Status handling
+            if (prop === 'status') {
+                return value === 1 ? 
+                    '<span class="label label-success">' + i18n.t('connected') + '</span>' :
+                    '<span class="label label-danger">' + i18n.t('disconnected') + '</span>';
+            }
+
+            // Translation mapping
+            const translations = {
+                'manual': 'network.manual',
+                'Automatic': 'network.automatic',
+                'autoselect': 'network.autoselect',
+                'autoselect (half-duplex)': 'network.autoselecthalf',
+                'autoselect (full-duplex)': 'network.autoselectfull',
+                'not set': 'network.notset',
+                'dhcp': 'DHCP',
+                'bootp': 'BOOTP'
+            };
+
+            if (translations[value]) {
+                return translations[value].startsWith('network.') ? 
+                    i18n.t(translations[value]) : value.toUpperCase();
+            }
+
+            // Special formatting
+            if (prop === 'wireless_card_type' && value.includes('spairport_wireless_card_type_wifi')) {
+                return value.replace('spairport_wireless_card_type_wifi', 'Wi-Fi');
+            }
+
+            // Boolean values
+            if (['overrideprimary', 'ipv6coverrideprimary', 'airdrop_supported', 'wow_supported'].includes(prop)) {
+                return i18n.t(value === "1" ? 'yes' : 'no');
+            }
+
+            // Supported channels formatting - preserved exactly as original
+            if (prop === 'supported_channels') {
+                return value.replace(" 10 (2GHz)", "<br> 10 (2GHz)")
+                           .replace(" 100 (5GHz)", "<br>100 (5GHz)")
+                           .replace(" 128 (5GHz)", "<br>128 (5GHz)")
+                           .replace(" 157 (5GHz)", "<br>157 (5GHz)")
+                           .replace("36 (5GHz)", "<br><br>36 (5GHz)")
+                           .replace(" 33 (6GHz)", "<br>33 (6GHz)")
+                           .replace(" 65 (6GHz)", "<br>65 (6GHz)")
+                           .replace(" 97 (6GHz)", "<br>97 (6GHz)")
+                           .replace(" 125 (6GHz)", "<br>125 (6GHz)")
+                           .replace(" 153 (6GHz)", "<br>153 (6GHz)")
+                           .replace(" 181 (6GHz)", "<br>181 (6GHz)")
+                           .replace(" 209 (6GHz)", "<br>209 (6GHz)")
+                           .replace(" 1 (6GHz)", "<br><br>1 (6GHz)");
+            }
+
+            // DNS formatting
+            if (prop === 'dhcp_domain_name_servers' || prop === 'ipv4dns') {
+                return value.replace(/, /g, ',<br>');
+            }
+
+            return value;
+        };
+
+        const getNetworkIcon = service => {
+            const iconMap = {
+                'Wi-Fi': 'fa-wifi',
+                'AirPort': 'fa-wifi',
+                'Ethernet': 'fa-indent fa-rotate-270',
+                'iPhone': 'fa-mobile',
+                'phone': 'fa-mobile',
+                'iPad': 'fa-tablet',
+                'ablet': 'fa-tablet',
+                'utun': 'fa-train',
+                'Serial': 'fa-ellipsis-h',
+                'vmnet': 'fa-clone',
+                'bond': 'fa-pause',
+                'Bluetooth': 'fa-bluetooth-b',
+                'odem': 'fa-tty',
+                'Thunderbolt': 'fa-bolt',
+                'USB': 'fa-usb',
+                'FireWire': 'fa-fire-extinguisher',
+                'VPN': 'fa-building-o'
+            };
+
+            for (const [key, icon] of Object.entries(iconMap)) {
+                if (service.includes(key)) return icon;
+            }
+            return 'fa-globe';
+        };
+
+        const updateClientDetail = (prop, value, d) => {
+            if (d.status !== "1") return;
+            if (!['ipv4ip', 'ipv4dns', 'ipv6ip', 'ipv6dns', 'ethernet', 'externalip'].includes(prop)) return;
+            if (clientDetail.includes(prop)) return;
+
+            const formattedValue = formatValue(prop, value, d);
+            if (!formattedValue) return;
+
+            clientDetail += prop;
+
+            // Handle IP dependencies
+            if ((prop === 'ipv4ip' && !d.ipv6ip) || 
+                (prop === 'ipv6ip' && !d.ipv4ip) || 
+                (prop === 'ipv4dns' && !d.ipv6ip) || 
+                (prop === 'ipv6ip' && !d.ipv4dns)) {
+                clientDetail += prop.startsWith('ipv4') ? 'ipv6ip' : 'ipv4ip';
+            }
+
+            // Update network icon for IP addresses
+            if (prop === 'ipv4ip' || prop === 'ipv6ip') {
+                const icon = getNetworkIcon(d.service);
+                $('.fa.fa-sitemap, .fa.fa-fa-sitemap').addClass(icon);
+
+                if (!clientDetail.includes('service')) {
+                    clientDetail += 'service';
+                    $('.machine-hostname').parent().parent().parent()
+                        .append($('<tr>')
+                            .append($('<th>').append(i18n.t('network.active_service')))
+                            .append($('<td>').append(d.service)));
+                }
+            }
+
+            // Add to client detail
+            $('.machine-hostname').parent().parent().parent()
+                .append($('<tr>')
+                    .append($('<th>').append(i18n.t('network.' + prop)))
+                    .append($('<td>').append(formattedValue)));
+        };
+
+        data.forEach(d => {
+            let rows = '';
+            
+            // Generate rows from data
+            Object.entries(d).forEach(([prop, value]) => {
+                if (!skipThese.includes(prop)) {
+                    const formattedValue = formatValue(prop, value, d);
+                    if (formattedValue) {
+                        rows += `<tr><th>${i18n.t('network.'+prop)}</th><td>${formattedValue}</td></tr>`;
+                        updateClientDetail(prop, value, d);
                     }
                 }
-
-                // Generate table
-                if (d.service.includes("Wi-Fi") || d.service.includes("AirPort")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                        .append($('<a href="#tab_wifi-tab">')
-                            .append($('<i>')
-                                .addClass('fa fa-wifi'))
-                            .append(' '+d.service)))
-                        .append($('<div style="max-width:850px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("Ethernet")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-indent fa-rotate-270'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("iPhone") || d.service.includes("phone")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-mobile'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("iPad") || d.service.includes("ablet")){
-                    $('#network-tab')
+            });
+
+            if (rows) {
+                const icon = getNetworkIcon(d.service);
+                const maxWidth = d.service.includes('Wi-Fi') || d.service.includes('AirPort') ? 850 : 550;
+                
+                $('#network-tab').append(
+                    $('<div>')
                         .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-tablet'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
+                            .append($('<i>').addClass('fa ' + icon))
+                            .append(' ' + d.service))
+                        .append($('<div>')
+                            .css('max-width', maxWidth + 'px')
                             .append($('<table>')
                                 .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("utun")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-train'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("Serial")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-ellipsis-h'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("vmnet")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-clone'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("bond")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-pause'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("Bluetooth")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-bluetooth-b'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("odem")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-tty'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("Thunderbolt")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-bolt'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("USB")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-usb'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("FireWire")){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-fire-extinguisher'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else if (d.service.includes("VPN") || ("vpnservername" in d && d.vpnservername !== null)){
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-building-o'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                } else {
-                    $('#network-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-globe'))
-                            .append(' '+d.service))
-                        .append($('<div style="max-width:550px;">')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
-                }
-            })
-        }
+                                .append($('<tbody>').html(rows))))
+                );
+            }
+        });
     });
 });
 </script>