From 101189ae7c1b2522a483ebae93940a74f8309719 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Tue, 5 Aug 2025 20:54:28 +1000 Subject: [PATCH] devParentNodeMac chips in devices list --- front/css/app.css | 19 ++++++++- front/devices.php | 82 +++++++++++++++++++++++-------------- front/js/ui_components.js | 82 +++++++++++++++++++------------------ front/systeminfoNetwork.php | 2 - 4 files changed, 113 insertions(+), 72 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index e5bb5dd4..f5e26c52 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1489,7 +1489,7 @@ input[readonly] { } #tableDevicesBox td svg, #tableDevicesBox td i{ - height: 1.5em !important; + height: 1em !important; } #TileCards .tile .inner @@ -1649,6 +1649,23 @@ input[readonly] { pointer-events: none; } +.custom-badge a +{ + color: #fff !important; + font-size: 14px; +} +.custom-badge +{ + border: 1px solid #aaa; + border-radius: 4px; + border-style: solid; + margin-right: 5px; + margin-top: 5px; + padding: 0 5px; + font-size: 14px; + display: inline-block; +} + #deviceDetailsEdit .form-control { min-height: 42px; diff --git a/front/devices.php b/front/devices.php index 68135483..d54b7e11 100755 --- a/front/devices.php +++ b/front/devices.php @@ -503,36 +503,36 @@ function collectFilters() { function mapColumnIndexToFieldName(index, tableColumnVisible) { // the order is important, don't change it! const columnNames = [ - "devName", - "devOwner", - "devType", - "devIcon", - "devFavorite", - "devGroup", - "devFirstConnection", - "devLastConnection", - "devLastIP", - "devIsRandomMac", // resolved on the fly - "devStatus", // resolved on the fly - "devMac", - "devIpLong", //formatIPlong(device.devLastIP) || "", // IP orderable - "rowid", - "devParentMAC", - "devParentChildrenCount", // resolved on the fly - "devLocation", - "devVendor", - "devParentPort", - "devGUID", - "devSyncHubNode", - "devSite", - "devSSID", - "devSourcePlugin", - "devPresentLastScan", - "devAlertDown", - "devCustomProps", - "devFQDN", - "devParentRelType", - "devReqNicsOnline" + "devName", // 0 + "devOwner", // 1 + "devType", // 2 + "devIcon", // 3 + "devFavorite", // 4 + "devGroup", // 5 + "devFirstConnection", // 6 + "devLastConnection", // 7 + "devLastIP", // 8 + "devIsRandomMac", // 9 resolved on the fly + "devStatus", // 10 resolved on the fly + "devMac", // 11 + "devIpLong", // 12 formatIPlong(device.devLastIP) || "", // IP orderable + "rowid", // 13 + "devParentMAC", // 14 + "devParentChildrenCount", // 15 resolved on the fly + "devLocation", // 16 + "devVendor", // 17 + "devParentPort", // 18 + "devGUID", // 19 + "devSyncHubNode", // 20 + "devSite", // 21 + "devSSID", // 22 + "devSourcePlugin", // 23 + "devPresentLastScan", // 24 + "devAlertDown", // 25 + "devCustomProps", // 26 + "devFQDN", // 27 + "devParentRelType", // 28 + "devReqNicsOnline" // 29 ]; // console.log("OrderBy: " + columnNames[tableColumnOrder[index]]); @@ -899,6 +899,28 @@ function initializeDatatable (status) { } } }, + // Parent Mac + {targets: [mapIndx(14)], + 'createdCell': function (td, cellData, rowData, row, col) { + if (!cellData) { + $(td).html(''); + return; + } + + const data = { + id: cellData, // MAC address + text: cellData // Optional display text (you could use a name or something else) + }; + + spanWrap = $(``) + + $(td).html(spanWrap); + + const chipHtml = renderDeviceLink(data, spanWrap, true); // pass the td as container + + $(spanWrap).append(chipHtml); + } + }, // Status color {targets: [mapIndx(10)], 'createdCell': function (td, cellData, rowData, row, col) { diff --git a/front/js/ui_components.js b/front/js/ui_components.js index 116bfd90..795f5e47 100755 --- a/front/js/ui_components.js +++ b/front/js/ui_components.js @@ -715,45 +715,7 @@ function initSelect2() { { var selectEl = $(this).select2({ templateSelection: function (data, container) { - if (!data.id) return data.text; // default for placeholder etc. - - const device = getDevDataByMac(data.id); - - const badge = getStatusBadgeParts( - device.devPresentLastScan, - device.devAlertDown, - device.devMac - ) - - $(container).addClass(badge.cssClass); - - // Custom HTML - const html = $(` - - - ${atob(device.devIcon)} - ${data.text} - - (${badge.iconHtml}) - - - `); - - return html; + return $(renderDeviceLink(data, container)); }, escapeMarkup: function (m) { return m; // Allow HTML @@ -817,6 +779,48 @@ function initSelect2() { } } +// ------------------------------------------ +// Render a device link with hover-over functionality +function renderDeviceLink(data, container, useName=false) { + if (!data.id) return data.text; // default placeholder etc. + + const device = getDevDataByMac(data.id); + + const badge = getStatusBadgeParts( + device.devPresentLastScan, + device.devAlertDown, + device.devMac + ); + + $(container).addClass(badge.cssClass); + + return ` + + + ${atob(device.devIcon)} + ${useName ? device.devName : data.text} + + (${badge.iconHtml}) + + + + `; +} + + // ------------------------------------------ // Display device info on hover (attach only once) function initHoverNodeInfo() { diff --git a/front/systeminfoNetwork.php b/front/systeminfoNetwork.php index 0702bdc8..6056e457 100755 --- a/front/systeminfoNetwork.php +++ b/front/systeminfoNetwork.php @@ -264,8 +264,6 @@ function fetchUsedIps(callback) { function renderAvailableIpsTable(allIps, usedIps) { const availableIps = allIps.filter(row => !usedIps.includes(row.ip)); - console.log(allIps); - console.log(usedIps); console.log(availableIps); $('#availableIpsTable').DataTable({