colored relationships #724

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]));

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();