Refactor connection toggle to use API URLs

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

@@ -8,12 +8,12 @@ import { isTruthy, apiPatch, hasError, getElements } from '../util';
  * @param element Connection Toggle Button Element
  */
 function toggleConnection(element: HTMLButtonElement): void {
-  const id = element.getAttribute('data');
+  const url = element.getAttribute('data-url');
   const connected = element.classList.contains('connected');
   const status = connected ? 'planned' : 'connected';
 
-  if (isTruthy(id)) {
-    apiPatch(`/api/dcim/cables/${id}/`, { status }).then(res => {
+  if (isTruthy(url)) {
+    apiPatch(url, { status }).then(res => {
       if (hasError(res)) {
         // If the API responds with an error, show it to the user.
         createToast('danger', 'Error', res.error).show();

netbox/templates/dcim/inc/cable_toggle_buttons.html

@@ -1,10 +1,10 @@
 {% if perms.dcim.change_cable %}
     {% if cable.status == 'connected' %}
-        <button type="button" 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-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
             <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
         </button>
     {% else %}
-        <button type="button" class="btn btn-info btn-sm cable-toggle" title="Mark Installed" data="{{ cable.pk }}">
+        <button type="button" class="btn btn-info btn-sm cable-toggle" title="Mark Installed" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
             <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
         </button>
     {% endif %}