Merge branch 'develop' into feature

netbox/project-static/src/buttons/connectionToggle.ts

@@ -7,10 +7,10 @@ import { isTruthy, apiPatch, hasError, getElements } from '../util';
  *
  * @param element Connection Toggle Button Element
  */
-function toggleConnection(element: HTMLButtonElement): void {
+function setConnectionStatus(element: HTMLButtonElement, status: string): void {
+  // Get the button's row to change its data-cable-status attribute
+  const row = element.parentElement?.parentElement as HTMLTableRowElement;
   const url = element.getAttribute('data-url');
-  const connected = element.classList.contains('connected');
-  const status = connected ? 'planned' : 'connected';
 
   if (isTruthy(url)) {
     apiPatch(url, { status }).then(res => {
@@ -19,34 +19,18 @@ function toggleConnection(element: HTMLButtonElement): void {
         createToast('danger', 'Error', res.error).show();
         return;
       } else {
-        // Get the button's row to change its styles.
-        const row = element.parentElement?.parentElement as HTMLTableRowElement;
-        // Get the button's icon to change its CSS class.
-        const icon = element.querySelector('i.mdi, span.mdi') as HTMLSpanElement;
-        if (connected) {
-          row.classList.remove('success');
-          row.classList.add('info');
-          element.classList.remove('connected', 'btn-warning');
-          element.classList.add('btn-info');
-          element.title = 'Mark Installed';
-          icon.classList.remove('mdi-lan-disconnect');
-          icon.classList.add('mdi-lan-connect');
-        } else {
-          row.classList.remove('info');
-          row.classList.add('success');
-          element.classList.remove('btn-success');
-          element.classList.add('connected', 'btn-warning');
-          element.title = 'Mark Installed';
-          icon.classList.remove('mdi-lan-connect');
-          icon.classList.add('mdi-lan-disconnect');
-        }
+        // Update cable status in DOM
+        row.setAttribute('data-cable-status', status);
       }
     });
   }
 }
 
 export function initConnectionToggle(): void {
-  for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) {
-    element.addEventListener('click', () => toggleConnection(element));
+  for (const element of getElements<HTMLButtonElement>('button.mark-planned')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'planned'));
+  }
+  for (const element of getElements<HTMLButtonElement>('button.mark-installed')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'connected'));
   }
 }

netbox/project-static/styles/custom/_interfaces.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+
+// Interface row coloring
+tr[data-cable-status=connected] {
+  background-color: rgba(map.get($theme-colors, "green"), 0.15);
+}
+tr[data-cable-status=planned] {
+  background-color: rgba(map.get($theme-colors, "blue"), 0.15);
+}
+tr[data-cable-status=decommissioning] {
+  background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
+}
+tr[data-mark-connected=true] {
+  background-color: rgba(map.get($theme-colors, "success"), 0.15);
+}
+tr[data-virtual=true] {
+  background-color: rgba(map.get($theme-colors, "primary"), 0.15);
+}
+tr[data-enabled=disabled] {
+  background-color: rgba(map.get($theme-colors, "danger"), 0.15);
+}
+
+// Only show the correct button depending on the cable status
+tr[data-cable-status=connected] button.mark-installed {
+  display: none;
+}
+tr:not([data-cable-status=connected]) button.mark-planned {
+  display: none;
+}

netbox/project-static/styles/netbox.scss

@@ -20,5 +20,6 @@
 
 // Custom styling
 @import 'custom/code';
+@import 'custom/interfaces';
 @import 'custom/markdown';
 @import 'custom/misc';