css hover box #724

front/css/app.css

@@ -1418,10 +1418,11 @@ input[readonly] {
 .select2-container--default .select2-selection--single
 {
     border-radius: 0px !important;
-    border-color: #3d444b !important;
+    border-color: #d2d6de !important;
     min-height: 42px;
 }
 
+
 .helpIconSmallTopRight{
     position: absolute;
     font-size: x-small;
@@ -1578,8 +1579,26 @@ input[readonly] {
 {
     width: initial;
     display: inline-block;
+    min-height: 42px;
 }
 
+/* Remove the default Select2 chevron (the down arrow) */
+.select2-container .select2-selection__arrow b {
+    display: none !important;
+  }
+
+/* Add custom icon */
+.select2-container .select2-selection__arrow::after {
+    font-family: 'Font Awesome 6 Free';
+    content: "\f078"; /* fa-chevron-down */
+    font-weight: 700;
+    position: absolute;
+    top: 75%;
+    left: 30%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
 #deviceDetailsEdit .form-control
 {
     min-height: 42px;
@@ -1697,6 +1716,10 @@ input[readonly] {
     width: auto;
 }
 
+#hover-box
+{
+  background-color: #ffffff;;
+}
 
 #networkTree .netCollapse
 {
@@ -1707,7 +1730,7 @@ input[readonly] {
 #networkTree .highlightedNode
 {
     /* border: solid; */
-    border-color:cyan;
+    border-color:#3c8dbc;
 }
 #networkTree .netStatus-Off-line i,
 #networkTree .netStatus-Off-line svg

front/css/system-dark-patch.css

@@ -734,6 +734,35 @@
     background-color: #000 !important;
   }
 
+  .select2-container--default .select2-selection--single {
+    color: initial !important;
+    background-color: #353c42 !important;
+  }
+
+  /* Chevron color */
+  .select2-container .select2-selection__arrow::after {
+    color: #bec5cb;
+  }
+
+  /* Chevron color */
+  .select2-selection .select2-selection--single {
+    color: #bec5cb;
+  }
+
+  .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
+    border-color: #3d444b !important;
+  }
+
+  .select2-container--default .select2-selection--single .select2-selection__rendered  .custom-chip
+  {
+    color: #bec5cb;
+  }
+
+  #hover-box
+  {
+    background-color: #353c42 !important;
+  }
+
 }
 
 .callout code {

front/js/settings_utils.js

@@ -689,6 +689,9 @@ function reverseTransformers(val, transformers) {
         mac = val  // value is mac   
         val =  `${getDevDataByMac(mac, "devName")}`
         break;
+      case "deviceRelType":        
+        val =  val; // nothing to do
+        break;
       default:
         console.warn(`Unknown transformer: ${transformer}`);
     }

front/js/ui_components.js

@@ -659,7 +659,6 @@ function getRelationshipConf(relType) {
   let cssClass = '';
   let color = '';
 
-
   // --color-aqua: #00c0ef;
   // --color-blue: #0060df;
   // --color-green: #00a65a;
@@ -686,7 +685,7 @@ function getRelationshipConf(relType) {
       break;      
     default:
       color = "#5B5B66"; // grey
-      cssClass = "text-grey";
+      cssClass = "text-light-grey";
       break;
   }
 
@@ -753,19 +752,18 @@ function initSelect2() {
               }
             });
             
-          } else if($(this).attr("my-transformers") == "deviceRelType")
+          } else if($(this).attr("my-transformers") == "deviceRelType") // handling dropdown for relationships
           {
             var selectEl = $(this).select2({
+              minimumResultsForSearch: Infinity,
               templateSelection: function (data, container) {
                 if (!data.id) return data.text; // default for placeholder etc.
 
                 const relConf = getRelationshipConf(data.text);
-                // remove all bg- classes and add latest one
-                $(container).removeClass(function(i, c) { return (c.match(/\btext-[^\s]+/g) || []).join(' '); }).addClass(relConf.cssClass);
-                
+                                
                 // Custom HTML
                 const html = $(`                  
-                    <span class="custom-chip" >                      
+                    <span class="custom-chip ${relConf.cssClass}" >                      
                       ${data.text}                      
                     </span>                  
                 `);
@@ -811,11 +809,99 @@ function initSelect2() {
   }  
 }
 
+// ------------------------------------------
+// Display device info on hover (attach only once)
+function initHoverNodeInfo() {
+  if ($('#hover-box').length === 0) {
+    $('<div id="hover-box"></div>').appendTo('body').hide().css({
+      position: 'absolute',
+      zIndex: 9999,
+      border: '1px solid #ccc',
+      borderRadius: '8px',
+      padding: '10px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      minWidth: '200px',
+      maxWidth: '300px',
+      fontSize: '14px',
+      pointerEvents: 'none',
+      backgroundColor: '#fff'
+    });
+  }
+
+  if (initHoverNodeInfo._handlersAttached) return;
+  initHoverNodeInfo._handlersAttached = true;
+
+  let hoverTimeout = null;
+  let lastTarget = null;
+
+  $(document).on('mouseenter', '.hover-node-info', function (e) {
+    const $el = $(this);
+    lastTarget = this;
+
+    clearTimeout(hoverTimeout);
+
+    hoverTimeout = setTimeout(() => {
+      if (lastTarget !== this) return;
+
+      const name = $el.data('name') || 'Unknown';
+      const ip = $el.data('ip') || 'N/A';
+      const mac = $el.data('mac') || 'N/A';
+      const vendor = $el.data('vendor') || 'Unknown';
+      const relationship = $el.data('relationship') || 'Unknown';
+
+      const html = `
+        <strong>${name}</strong><br>
+        <b>IP:</b> ${ip}<br>
+        <b>MAC:</b> ${mac}<br>
+        <b>Vendor:</b> ${vendor}<br>
+        <b>Relationship:</b> <span class="${getRelationshipConf(relationship).cssClass}">${relationship}</span>
+      `;
+
+      $('#hover-box').html(html).fadeIn(150);
+    }, 300);
+  });
+
+  $(document).on('mousemove', '.hover-node-info', function (e) {
+    const hoverBox = $('#hover-box');
+    const boxWidth = hoverBox.outerWidth();
+    const boxHeight = hoverBox.outerHeight();
+    const padding = 15;
+
+    const winWidth = $(window).width();
+    const winHeight = $(window).height();
+
+    let left = e.pageX + padding;
+    let top = e.pageY + padding;
+
+    // Position leftward if close to right edge
+    if (e.pageX + boxWidth + padding > winWidth) {
+      left = e.pageX - boxWidth - padding;
+    }
+
+    // Position upward if close to bottom edge
+    if (e.pageY + boxHeight + padding > winHeight) {
+      top = e.pageY - boxHeight - padding;
+    }
+
+    hoverBox.css({ top: top + 'px', left: left + 'px' });
+  });
+
+  $(document).on('mouseleave', '.hover-node-info', function () {
+    clearTimeout(hoverTimeout);
+    lastTarget = null;
+    $('#hover-box').fadeOut(100);
+  });
+}
+
+
+
+
 // init functions after dom loaded
 window.addEventListener("load", function() {
   // try to initialize 
   setTimeout(() => {
-    initSelect2()
+    initSelect2();
+    initHoverNodeInfo();
     // initializeiCheck();
   }, 500);
 });

front/network.php

@@ -582,6 +582,8 @@ function getChildren(node, list, path, visited = [])
         parentMac: node.devParentMAC,
         icon: node.devIcon,
         type: node.devType,
+        vendor: node.devVendor,
+        ip: node.devLastIP,
         status: node.devStatus,
         hasChildren: children.length > 0 || hiddenMacs.includes(node.devMac),
         relType: node.devParentRelType,
@@ -749,10 +751,15 @@ function initTree(myHierarchy)
       statusCss = ` netStatus-${nodeData.data.status}`;
 
       return result = `<div 
-                            class="node-inner box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
+                            class="node-inner hover-node-info box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
                             data-mytreemacmain="${nodeData.data.mac}"
                             style="height:${nodeHeightPx}px;font-size:${nodeHeightPx-5}px;"
                             onclick="handleNodeClick(this)"
+                            data-name="${nodeData.data.name}"
+                            data-ip="${nodeData.data.ip}"
+                            data-mac="${nodeData.data.mac}"
+                            data-vendor="${nodeData.data.vendor}"
+                            data-relationship="${nodeData.data.relType}"
                         >
                           <div class="netNodeText">
                             <strong>${devicePort}  ${deviceIcon}
@@ -776,7 +783,7 @@ function initTree(myHierarchy)
     relationnalField: "children",
     linkWidth: (nodeData) => 3,
     linkColor: (nodeData) => {  
-      
+
       relConf = getRelationshipConf(nodeData.data.relType)  
 
       return relConf.color;

front/php/templates/header.php

@@ -136,7 +136,7 @@
 <!-- ----------------------------------------------------------------------- -->
 <!-- Layout Boxed Yellow -->
 
-<body class="hold-transition fixed <?php echo $pia_skin_selected;?> sidebar-mini" onLoad="update_servertime();" >
+<body class="hold-transition fixed <?php echo $pia_skin_selected;?>  theme-<?php echo $UI_THEME;?>  sidebar-mini" onLoad="update_servertime();" >
 <!-- Site wrapper -->
 <div class="wrapper">