migrate connection toggle to typescript

netbox/project-static/src/buttons.ts

@@ -1,9 +1,10 @@
-import { isTruthy, getElements } from './util';
+import { createToast } from './toast';
+import { isTruthy, getElements, apiPatch, hasError } from './util';
 
 /**
  * Add onClick callback for toggling rack elevation images.
  */
-export function initRackElevation() {
+function initRackElevation() {
   for (const button of getElements('button.toggle-images')) {
     /**
      * Toggle the visibility of device images and update the toggle button style.
@@ -40,3 +41,58 @@ export function initRackElevation() {
     button.addEventListener('click', handleClick);
   }
 }
+
+/**
+ * When the toggle button is clicked, swap the connection status via the API and toggle CSS
+ * classes to reflect the connection status.
+ *
+ * @param element Connection Toggle Button Element
+ */
+function toggleConnection(element: HTMLButtonElement) {
+  const id = element.getAttribute('data');
+  const connected = element.classList.contains('connected');
+  const status = connected ? 'planned' : 'connected';
+
+  if (isTruthy(id)) {
+    apiPatch(`/api/dcim/cables/${id}/`, { status }).then(res => {
+      if (hasError(res)) {
+        // If the API responds with an error, show it to the user.
+        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.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');
+        }
+      }
+    });
+  }
+}
+
+function initConnectionToggle() {
+  for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) {
+    element.addEventListener('click', () => toggleConnection(element));
+  }
+}
+
+export function initButtons() {
+  for (const func of [initRackElevation, initConnectionToggle]) {
+    func();
+  }
+}

netbox/project-static/src/netbox.ts

@@ -4,10 +4,11 @@ import { initApiSelect, initStaticSelect, initColorSelect } from './select';
 import { initDateSelector } from './dateSelector';
 import { initMessageToasts } from './toast';
 import { initSpeedSelector, initForms } from './forms';
-import { initRackElevation } from './buttons';
+import { initButtons } from './buttons';
 import { initClipboard } from './clipboard';
 import { initSearchBar, initInterfaceFilter } from './search';
 import { initGenerateKeyPair, initLockUnlock, initGetSessionKey } from './secrets';
+import { initTabs } from './tabs';
 import { initTableConfig } from './tableConfig';
 import { getElements } from './util';
 
@@ -20,13 +21,14 @@ const INITIALIZERS = [
   initDateSelector,
   initSpeedSelector,
   initColorSelect,
-  initRackElevation,
+  initButtons,
   initClipboard,
   initGenerateKeyPair,
   initLockUnlock,
   initGetSessionKey,
   initInterfaceFilter,
   initTableConfig,
+  initTabs,
 ] as (() => void)[];
 
 /**