From bfbf70cf1a23b975191a0467294f6fcb7151e7f8 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Mon, 14 Jul 2025 15:24:38 +1000 Subject: [PATCH] colored relationships #724 --- front/css/app.css | 37 +++++++++--- front/js/settings_utils.js | 4 +- front/js/ui_components.js | 68 +++++++++++++++++++++++ front/network.php | 21 ++----- front/plugins/newdev_template/config.json | 8 ++- 5 files changed, 111 insertions(+), 27 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index c7201642..785c660f 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1414,10 +1414,12 @@ input[readonly] { background-color:#606060 !important; } -.select2-container--default .select2-selection--multiple +.select2-container--default .select2-selection--multiple, +.select2-container--default .select2-selection--single { border-radius: 0px !important; border-color: #3d444b !important; + min-height: 42px; } .helpIconSmallTopRight{ @@ -1560,6 +1562,10 @@ input[readonly] { #deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice { height: 20px; +} + +#deviceDetailsEdit .select2-container--disabled +{ background-color: #606060; } @@ -1574,21 +1580,38 @@ input[readonly] { display: inline-block; } -#deviceDetailsEdit .form-control +#deviceDetailsEdit .form-control { min-height: 42px; } -#deviceDetailsEdit .select2-selection +.select2-selection--single .custom-chip { - background-color: rgb(96, 96, 96); -} -#deviceDetailsEdit .select2-container + margin-top: 11px; + display: flex; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered, +.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single +{ + padding: 0px 0px; + min-height: 42px; +} + +/* .select2-container--default .select2-selection--single .select2-selection__rendered, */ +.select2-container--default .select2-selection--single +{ + /* color:initial !important; */ + background-color:initial !important; +} + + +#deviceDetailsEdit .select2-container { width: 100% !important; } -#deviceDetailsEdit .select2-container .selection +#deviceDetailsEdit .select2-container .selection { width: 100% !important; display: inline-grid; diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js index 06eb89d2..353878a1 100755 --- a/front/js/settings_utils.js +++ b/front/js/settings_utils.js @@ -829,8 +829,7 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh resultArray = [] selectedArray = [] - cssClass = "" - + cssClass = "" // determine if options or values are used in the listing if (valuesArray.length > 0 && options.length > 0){ @@ -849,7 +848,6 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh // dropdown -> options only (value == 1 STRING not ARRAY) resultArray = options; } - // Create a map to track the index of each item in valuesArray const orderMap = new Map(valuesArray.map((item, index) => [item, index])); diff --git a/front/js/ui_components.js b/front/js/ui_components.js index d86535d2..a73860f9 100755 --- a/front/js/ui_components.js +++ b/front/js/ui_components.js @@ -619,6 +619,7 @@ function getColumnNameFromLangString(headStringKey) { return columnNameMap[headStringKey] || ""; } +//-------------------------------------------------------------- // Generating the device status chip function getStatusBadgeParts(tmp_devPresentLastScan, tmp_devAlertDown, macAddress, statusText = '') { let css = 'bg-gray text-white statusUnknown'; @@ -652,6 +653,49 @@ function getStatusBadgeParts(tmp_devPresentLastScan, tmp_devAlertDown, macAddres }; } +//-------------------------------------------------------------- +// Getting the color and css class for device relationships +function getRelationshipConf(relType) { + let cssClass = ''; + let color = ''; + + + // --color-aqua: #00c0ef; + // --color-blue: #0060df; + // --color-green: #00a65a; + // --color-yellow: #f39c12; + // --color-red: #dd4b39; + + switch (relType) { + + case "child": + color = "#f39c12"; // yellow + cssClass = "text-yellow"; + break; + case "nic": + color = "#dd4b39"; // red + cssClass = "text-red"; + break; + case "virtual": + color = "#0060df"; // blue + cssClass = "text-blue"; + break; + case "logical": + color = "#00a65a"; // green + cssClass = "text-green"; + break; + default: + color = "#5B5B66"; // grey + cssClass = "text-grey"; + break; + } + + return { + cssClass: cssClass, + color: color + }; +} + // ----------------------------------------------------------------------------- // initialize @@ -709,6 +753,30 @@ function initSelect2() { } }); + } else if($(this).attr("my-transformers") == "deviceRelType") + { + var selectEl = $(this).select2({ + 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 = $(` + + ${data.text} + + `); + + return html; + }, + escapeMarkup: function (m) { + return m; // Allow HTML + } + }); + } else // default handling - default template { var selectEl = $(this).select2(); diff --git a/front/network.php b/front/network.php index 3a165c35..ae5d5301 100755 --- a/front/network.php +++ b/front/network.php @@ -583,9 +583,9 @@ function getChildren(node, list, path, visited = []) icon: node.devIcon, type: node.devType, status: node.devStatus, - hasChildren: children.length > 0 || hiddenMacs.includes(node.mac), + hasChildren: children.length > 0 || hiddenMacs.includes(node.devMac), relType: node.devParentRelType, - hiddenChildren: hiddenMacs.includes(node.mac), + hiddenChildren: hiddenMacs.includes(node.devMac), qty: children.length, children: children }; @@ -775,20 +775,11 @@ function initTree(myHierarchy) hasFlatData: false, relationnalField: "children", linkWidth: (nodeData) => 3, - linkColor: (nodeData) => { + linkColor: (nodeData) => { - switch (nodeData.data.relType) { - case "default": - return "#ffcc80"; // yellow - break; - case "nic": - return "#dd4b39"; // red - break; - - default: - return "#ffcc80"; - break; - } + relConf = getRelationshipConf(nodeData.data.relType) + + return relConf.color; } // onNodeClick: (nodeData) => handleNodeClick(nodeData), }); diff --git a/front/plugins/newdev_template/config.json b/front/plugins/newdev_template/config.json index ce35aafb..e024ef30 100755 --- a/front/plugins/newdev_template/config.json +++ b/front/plugins/newdev_template/config.json @@ -1387,9 +1387,13 @@ { "function": "devParentRelType", "type": { - "dataType": "string", + "dataType": "array", "elements": [ - { "elementType": "select", "elementOptions": [], "transformers": [] } + { + "elementType": "select", + "elementOptions": [{ "ordeable": "true"}], + "transformers": ["deviceRelType"] + } ] }, "default_value": "default",