hover-box in devices lists

front/css/app.css

@@ -1542,17 +1542,14 @@ input[readonly] {
     display: none;
 }
 
-
-
 #panDetails #NEWDEV_devCustomProps_label
 {
     display: none;
 }
 
-
 #deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice a
 {
-    color: #FFF0E0;
+    color: #bec5cb;
 }
 
 #deviceDetailsEdit .iconPreview svg

front/deviceDetailsEdit.php

@@ -286,6 +286,9 @@
 
         toggleNetworkConfiguration(mac == 'Internet') 
 
+        initSelect2();
+        initHoverNodeInfo();
+
         hideSpinner();
       
       })

front/deviceDetailsTools.php

@@ -295,7 +295,7 @@
         function initCopyFromDevice() {
 
             const devices = getVisibleDevicesList()
-            console.log(devices);
+            // console.log(devices);
 
             const $select = $('#txtCopyFromDevice');
             $select.empty(); // Clear existing options

front/devices.php

@@ -776,17 +776,33 @@ function initializeDatatable (status) {
 
       // Device Name and FQDN
       {targets: [mapIndx(0), mapIndx(27)],
-        'createdCell': function (td, cellData, rowData, row, col) {      
-            
+        'createdCell': function (td, cellData, rowData, row, col) {    
+                      
             // console.log(cellData)      
-            $(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
+            $(td).html (
+              `<b class="anonymizeDev hover-node-info"
+                  data-name="${cellData}"
+                  data-ip="${rowData[mapIndx(8)]}"
+                  data-mac="${rowData[mapIndx(11)]}"
+                  data-vendor="${rowData[mapIndx(17)]}"
+                  data-firstseen="${rowData[mapIndx(6)]}"
+                  data-lastseen="${rowData[mapIndx(7)]}"
+                  data-relationship="${rowData[mapIndx(28)]}"
+                  data-status="${rowData[mapIndx(10)]}"
+                  data-present="${rowData[mapIndx(24)]}"
+                  data-alert="${rowData[mapIndx(25)]}"
+                  data-icon="${rowData[mapIndx(3)]}"
+              >
+                <a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="">
+                ${cellData}
+                </a>
+              </b>`
+            );
       } },
 
       // Connected Devices       
       {targets: [mapIndx(15)],
-        'createdCell': function (td, cellData, rowData, row, col) {   
-
-                
+        'createdCell': function (td, cellData, rowData, row, col) {                   
           // check if this is a network device
           if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`)   )
           {
@@ -965,7 +981,7 @@ function initializeDatatable (status) {
               }, debounceTime);
           });
 
-          
+          initHoverNodeInfo(); 
           hideSpinner();
           
     },

front/js/ui_components.js

@@ -8,64 +8,6 @@
 ----------------------------------------------------------------------------- */
 
 
-// -----------------------------------------------------------------------------
-// Initialize device selectors / pickers fields
-// -----------------------------------------------------------------------------
-function initDeviceSelectors(devicesListAll_JSON) {
-
-  // Check if both device list exists
-  if (devicesListAll_JSON) {
-      // Parse the JSON string to get the device list array
-      var devicesList = JSON.parse(devicesListAll_JSON);
-
-      var selectorFieldsHTML = ''
-
-      // Loop through the devices list
-      devicesList.forEach(function(device) {         
-
-          selectorFieldsHTML += `<option value="${device.devMac}">${device.devName}</option>`;
-      });
-
-      selector = `<div class="db_info_table_row  col-sm-12" > 
-                    <div class="form-group" > 
-                      <div class="input-group col-sm-12 " > 
-                        <select class="form-control select2 select2-hidden-accessible" multiple=""  style="width: 100%;"  tabindex="-1" aria-hidden="true">
-                        ${selectorFieldsHTML}
-                        </select>
-                      </div>
-                    </div>
-                  </div>`
-
-
-      // Find HTML elements with class "deviceSelector" and append selector field
-      $('.deviceSelector').append(selector);
-  }
-
-  // Initialize selected items after a delay so selected macs are available in the context
-  setTimeout(function(){
-        // Retrieve MAC addresses from query string or cache
-        var macs = getQueryString('macs') || getCache('selectedDevices');
-
-        if(macs)
-        {
-          // Split MAC addresses if they are comma-separated
-          macs = macs.split(',');
-  
-          console.log(macs)
-
-          // Loop through macs to be selected list
-          macs.forEach(function(mac) {
-
-            // Create the option and append to Select2
-            var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true);
-
-            $('.deviceSelector select').append(option).trigger('change');
-          });       
-
-        }        
-    
-    }, 10);
-}
 
 // -------------------------------------------------------------------
 // Utility function to generate a random API token in the format t_<random string of specified length>
@@ -718,8 +660,6 @@ function initSelect2() {
   //  check if cache ready
   if(isValidJSON(devicesListAll_JSON))
   {
-    // prepare HTML DOM before initializing the frotend
-    initDeviceSelectors(devicesListAll_JSON)
     
     // --------------------------------------------------------
     //Initialize Select2 Elements and make them sortable
@@ -753,6 +693,7 @@ function initSelect2() {
                           data-mac="${device.devMac}"
                           data-vendor="${device.devVendor}"
                           data-lastseen="${device.devLastConnection}"
+                          data-firstseen="${device.devFirstConnection}"
                           data-relationship="${device.devParentRelType}"
                           data-status="${device.devStatus}"
                           data-present="${device.devPresentLastScan}"
@@ -881,6 +822,7 @@ function initHoverNodeInfo() {
       const mac = $el.data('mac') || 'N/A';
       const vendor = $el.data('vendor') || 'Unknown';
       const lastseen = $el.data('lastseen') || 'Unknown';
+      const firstseen = $el.data('firstseen') || 'Unknown';
       const relationship = $el.data('relationship') || 'Unknown';
       const badge = getStatusBadgeParts( $el.data('present'),  $el.data('alert'), $el.data('mac'))
       const status =`<span class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</span>`
@@ -902,6 +844,9 @@ function initHoverNodeInfo() {
         <div class="line">  
           <b>Vendor:</b> <span>${vendor}</span><br>
         </div>
+        <div class="line">  
+          <b>First seen:</b> <span>${firstseen}</span><br>
+        </div>
         <div class="line">  
           <b>Last seen:</b> <span>${lastseen}</span><br>
         </div>
@@ -947,17 +892,4 @@ function initHoverNodeInfo() {
 }
 
 
-
-
-// init functions after dom loaded
-window.addEventListener("load", function() {
-  // try to initialize 
-  setTimeout(() => {
-    initSelect2();
-    initHoverNodeInfo();
-    // initializeiCheck();
-  }, 500);
-});
-
-
 console.log("init ui_components.js")

front/multiEditCore.php

@@ -17,18 +17,21 @@
         <h3 class="box-title"><?= lang('Gen_Selected_Devices');?></h3>
 
       </div>
-    <div class="deviceSelector col-md-11 col-sm-11" style="z-index:5"></div> 
-
-    <div class="col-md-1"> 
-      <button type="button" class="btn btn-default col-md-12" onclick="markAllSelected()" title="<?= lang('Gen_Add_All');?>"> 
-        <i class="fa-solid fa-circle-check"></i>  
-      </button>
-      <button type="button" class="btn btn-default col-md-12"  onclick="markAllNotSelected()" title="<?= lang('Gen_Remove_All');?>"> 
-        <i class="fa-solid fa-circle-xmark"></i>  
-      </button>
+    <div class="deviceSelector col-md-11 col-sm-11" style="z-index:5">
+      <div class="db_info_table_row  col-sm-12" > 
+        <div class="form-group" > 
+          <div class="input-group col-sm-12 " > 
+            <select class="form-control select2 select2-hidden-accessible" multiple=""  style="width: 100%;"  tabindex="-1" aria-hidden="true">
+            
+            </select>
+          </div>
+        </div>
+      </div>
+    </div> 
+    <div class="col-md-1">       
+        <i class="fa-solid fa-circle-check" onclick="markAllSelected()" title="<?= lang('Gen_Add_All');?>"></i>        
+        <i class="fa-solid fa-circle-xmark" onclick="markAllNotSelected()" title="<?= lang('Gen_Remove_All');?>"></i>        
     </div>
-
-
   </div>
 
 
@@ -208,13 +211,64 @@
 
         generateSimpleForm(relevantColumns);
 
+        initSelect2();
+        initDeviceSelectors();
+
         
     })
       
-    }, 500);
+    }, 100);
     
   }
 
+  // -----------------------------------------------------------------------------
+  // Initialize device selectors / pickers fields
+  function initDeviceSelectors() {
+
+    // Parse device list
+    devicesList = JSON.parse(getCache('devicesListAll_JSON'));
+
+    // Check if the device list exists and is an array
+    if (Array.isArray(devicesList)) {
+        const $select = $(".deviceSelector select");
+
+        $select.append(
+            devicesList
+                .filter(d => d.devMac && d.devName)
+                .map(d => `<option value="${d.devMac}">${d.devName}</option>`)
+                .join('')
+        ).trigger('change');
+    }
+
+
+
+    // Initialize selected items after a delay so selected macs are available in the context
+    setTimeout(function(){
+          // Retrieve MAC addresses from query string or cache
+          var macs = getQueryString('macs') || getCache('selectedDevices');
+
+          if(macs)
+          {
+            // Split MAC addresses if they are comma-separated
+            macs = macs.split(',');
+
+            console.log(macs)
+
+            // Loop through macs to be selected list
+            macs.forEach(function(mac) {
+
+              // Create the option and append to Select2
+              var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true);
+
+              $('.deviceSelector select').append(option).trigger('change');
+            });       
+
+          }        
+      
+      }, 10);
+  }
+
+
 
   // -----------------------------------------------------------------------------
   // Get selected devices Macs

front/network.php

@@ -592,6 +592,7 @@ function getChildren(node, list, path, visited = [])
         type: node.devType,
         vendor: node.devVendor,
         lastseen: node.devLastConnection,
+        firstseen: node.devFirstConnection,
         ip: node.devLastIP,
         status: node.devStatus,
         presentLastScan: node.devPresentLastScan,
@@ -775,6 +776,7 @@ function initTree(myHierarchy)
                             data-mac="${nodeData.data.mac}"
                             data-vendor="${nodeData.data.vendor}"
                             data-lastseen="${nodeData.data.lastseen}"
+                            data-firstseen="${nodeData.data.firstseen}"
                             data-relationship="${nodeData.data.relType}"
                             data-status="${nodeData.data.status}"
                             data-present="${nodeData.data.presentLastScan}"
@@ -782,7 +784,7 @@ function initTree(myHierarchy)
                             data-icon="${nodeData.data.icon}"
                         >
                           <div class="netNodeText">
-                            <strong><span class="${badgeConf.cssText}">${devicePort}  ${deviceIcon}</span>
+                            <strong><span>${devicePort}  <span class="${badgeConf.cssText}">${deviceIcon}</span></span>
                               <span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
                             </strong>                            
                           </div>                          
@@ -941,6 +943,9 @@ initTab();
 // init Assign/Unassign buttons
 initButtons()
 
+// init pop up hover  boxes for device details
+initHoverNodeInfo();
+
 </script>
 
 

front/settings.php

@@ -514,10 +514,11 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
       initListInteractionOptions()  // init remove and edit listitem click gestures
     }, 50);
     
-    setupSmoothScrolling()
+    setupSmoothScrolling();
     // try to initialize select2
-    initSelect2()
-    hideSpinner()
+    initSelect2();
+    initHoverNodeInfo();
+    hideSpinner();
 
   }