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)[];
 
 /**

netbox/templates/dcim/device/consoleports.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=consoleport_table.paginator page=consoleport_table.page %}
     {% table_config_form consoleport_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/consoleserverports.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=consoleserverport_table.paginator page=consoleserverport_table.page %}
     {% table_config_form consoleserverport_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/frontports.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=frontport_table.paginator page=frontport_table.page %}
     {% table_config_form frontport_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/interfaces.html

@@ -8,7 +8,7 @@
         {% csrf_token %}
         <div class="card">
             <div class="card-header">
-                <h5>Interfaces</h5>
+                <h5 class="d-inline">Interfaces</h5>
                 <div class="float-end col-md-2 noprint">
                     <div class="input-group input-group-sm">
                         <input type="text" class="form-control interface-filter" placeholder="Filter" title="Filter text (regular expressions supported)" />
@@ -52,7 +52,3 @@
     {% include 'inc/paginator.html' with paginator=interface_table.paginator page=interface_table.page %}
     {% table_config_form interface_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/poweroutlets.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=poweroutlet_table.paginator page=poweroutlet_table.page %}
     {% table_config_form poweroutlet_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/powerports.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=powerport_table.paginator page=powerport_table.page %}
     {% table_config_form powerport_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/device/rearports.html

@@ -49,7 +49,3 @@
     {% include 'inc/paginator.html' with paginator=rearport_table.paginator page=rearport_table.page %}
     {% table_config_form rearport_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/dcim/inc/cable_toggle_buttons.html

@@ -1,11 +1,11 @@
 {% if perms.dcim.change_cable %}
     {% if cable.status == 'connected' %}
-        <a href="#" class="btn btn-warning btn-sm cable-toggle connected" title="Mark Planned" data="{{ cable.pk }}">
+        <button type="button" class="btn btn-warning btn-sm cable-toggle connected" title="Mark Planned" data="{{ cable.pk }}">
             <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
-        </a>
+        </button>
     {% else %}
-        <a href="#" class="btn btn-success btn-sm cable-toggle" title="Mark Installed" data="{{ cable.pk }}">
+        <button type="button" class="btn btn-success btn-sm cable-toggle" title="Mark Installed" data="{{ cable.pk }}">
             <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
-        </a>
+        </button>
     {% endif %}
 {% endif %}

netbox/templates/virtualization/virtualmachine/interfaces.html

@@ -48,7 +48,3 @@
     </form>
     {% table_config_form interface_table %}
 {% endblock %}
-
-{% block javascript %}
-  <script src="{% static 'js/connection_toggles.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}