Add color support

netbox/project-static/src/netbox.ts

@@ -2,7 +2,7 @@ import { initForms } from './forms';
 import { initBootstrap } from './bs';
 import { initQuickSearch } from './search';
 // import { initSelect } from './select';
-import { initTomSelect } from './tomSelect';
+import { initSelects } from './tomSelect';
 import { initButtons } from './buttons';
 import { initColorMode } from './colorMode';
 import { initMessages } from './messages';
@@ -24,7 +24,7 @@ function initDocument(): void {
     initForms,
     initQuickSearch,
     // initSelect,
-    initTomSelect,
+    initSelects,
     initDateSelector,
     initButtons,
     initClipboard,

netbox/project-static/src/tomSelect.ts

@@ -1,15 +1,18 @@
 import { getElements } from './util';
+import { TomOption } from 'tom-select/src/types';
 import TomSelect from 'tom-select';
 
-export function initTomSelect(): void {
+function initStaticSelects(): void {
 
-  // Static selects
+  for (const select of getElements<HTMLSelectElement>('select:not(.api-select):not(.color-select)')) {
-  for (const select of getElements<HTMLSelectElement>('select:not(.api-select)')) {
     new TomSelect(select, {});
   }
 
-  // API selects
+}
-  for (const select of getElements<HTMLSelectElement>('.api-select')) {
+
+function initDynamicSelects(): void {
+
+  for (const select of getElements<HTMLSelectElement>('select.api-select')) {
     const api_url = select.getAttribute('data-url') as string;
     new TomSelect(select, {
       valueField: 'id',
@@ -19,9 +22,8 @@ export function initTomSelect(): void {
       dropdownParent: 'body',
       controlInput: '<input>',
       preload: 'focus',
-      load: function(query, callback) {
+      load: function(query: string, callback: Function) {
-        var url = api_url + '?brief=True&q=' + encodeURIComponent(query);
+        let url = api_url + '?brief=True&q=' + encodeURIComponent(query);
-        console.log(url);
         fetch(url)
             .then(response => response.json())
             .then(json => {
@@ -34,3 +36,23 @@ export function initTomSelect(): void {
   }
 
 }
+
+function initColorSelects(): void {
+
+  for (const select of getElements<HTMLSelectElement>('select.color-select')) {
+    new TomSelect(select, {
+      render: {
+        option: function(item: TomOption, escape: Function) {
+          return `<div style="background-color: #${escape(item.value)}">${escape(item.text)}</div>`;
+        }
+      }
+    });
+  }
+
+}
+
+export function initSelects(): void {
+  initStaticSelects();
+  initDynamicSelects();
+  initColorSelects();
+}

netbox/utilities/forms/widgets/select.py

@@ -36,7 +36,7 @@ class ColorSelect(forms.Select):
     def __init__(self, *args, **kwargs):
         kwargs['choices'] = add_blank_choice(ColorChoices)
         super().__init__(*args, **kwargs)
-        self.attrs['class'] = 'netbox-color-select'
+        self.attrs['class'] = 'color-select'
 
 
 class HTMXSelect(forms.Select):