colored relationships #724

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;    
 }
 
@@ -1579,10 +1585,27 @@ input[readonly] {
     min-height: 42px;
 }
 
-#deviceDetailsEdit  .select2-selection
+.select2-selection--single .custom-chip
 {
-    background-color: rgb(96, 96, 96);
+    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;

front/js/settings_utils.js

@@ -831,7 +831,6 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
   selectedArray  = []
   cssClass       = ""  
 
-
   // determine if options or values are used in the listing
   if (valuesArray.length > 0 && options.length > 0){
 
@@ -850,7 +849,6 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
     resultArray   = options;
   }
  
- 
   // Create a map to track the index of each item in valuesArray
   const orderMap = new Map(valuesArray.map((item, index) => [item, index]));
 

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 = $(`                  
+                    <span class="custom-chip" >                      
+                      ${data.text}                      
+                    </span>                  
+                `);
+          
+                return html;
+              },
+              escapeMarkup: function (m) {
+                return m; // Allow HTML
+              }
+            });
+            
           } else // default handling - default template
           {
             var selectEl = $(this).select2();

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
     };
@@ -777,18 +777,9 @@ function initTree(myHierarchy)
     linkWidth: (nodeData) => 3,
     linkColor: (nodeData) => {  
       
-      switch (nodeData.data.relType) {
+      relConf = getRelationshipConf(nodeData.data.relType)  
-        case "default":
-          return "#ffcc80"; // yellow
-          break;
-        case "nic":
-          return "#dd4b39"; // red
-          break;
 
-        default:
+      return relConf.color;
-          return "#ffcc80";
-          break;
-      }
     }
     // onNodeClick: (nodeData) => handleNodeClick(nodeData),
   });      

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",