From 7d07631f12a10376b1e2f72628048fd661e8010a Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Mon, 19 Apr 2021 20:48:03 -0700
Subject: [PATCH] migrate connection toggle to typescript

---
 netbox/project-static/dist/netbox.js          | Bin 452389 -> 455089 bytes
 netbox/project-static/dist/netbox.js.map      | Bin 1280908 -> 1286338 bytes
 netbox/project-static/src/buttons.ts          |  60 +++++++++++++++++-
 netbox/project-static/src/netbox.ts           |   6 +-
 .../templates/dcim/device/consoleports.html   |   4 --
 .../dcim/device/consoleserverports.html       |   4 --
 netbox/templates/dcim/device/frontports.html  |   4 --
 netbox/templates/dcim/device/interfaces.html  |   6 +-
 .../templates/dcim/device/poweroutlets.html   |   4 --
 netbox/templates/dcim/device/powerports.html  |   4 --
 netbox/templates/dcim/device/rearports.html   |   4 --
 .../dcim/inc/cable_toggle_buttons.html        |   8 +--
 .../virtualmachine/interfaces.html            |   4 --
 13 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index b0c2edb0bcb1a0a6bef2064b040169d1413f7538..f7eed047e8f38f880c5ad7580e5ddcc9ed536802 100644
GIT binary patch
delta 2269
zcmbVNU2GIp6wY*+!;h#TEh5&RWx#d@rnB`2ja|lCXf+ZfhLRAi74FX5?T*aeX=m>2
zcHK7B*e6U>UOX|z2NR773Yr+|g9)Mm<BQ_ogMdO2UX1ZKG0|w^ncZ$%XngTy=Kh>}
z&v(xK&Uaq@wDq0uTc4OzCYvTxlZz(RcVWF;w>g$F5RvU?ODs%tJLDs=7jj**GBRM1
z)C^N%w}k5zfrm=!AZ~Tljf#goW%U+J$8aCseF$E`jlHUd6Qk-~N`%`p>T3M?47B3$
zUbP2{c~z$aXAZ+@`c0Q%75z@W4c?VZH>x$SW@rmMb{typsZr1sj@|FVwaY!7*Y`u4
z<H=Fjph*0C6t=6(3>x-*RdVy=L0EDdvja=$hGDsZ;Mw}Y$n;IebZw!F*!S1iwjSBZ
z$fl8RGkmcM+A_bp6nJjBv&+Yqe^}Ivr>c;?GwP1I1_q6+3@g=q5bCZK=|*;q?%3`E
zFR|@dCFaLG8{<1cswJltJlEwyGsec^wzk-Ed=^F9yhvKib@kcZ@o|Sqr=V{$s;<T9
zH=g$d^Zg1<^SUuUZ$G$nKfrxskj9IT!+mPrEX_;C+S~GWX#v8bSuuyq+`K##XY)|8
z^YuJb8hNP9<snt<F5*8`cz6kc%q1Xj_ZVE8%u2P{#2DO3?{!!}nqE~s0@})aEF9?t
zA|2?W@qYBW{i$XkGI<0xNz#Po1VV5}a+g+_?R9IzKBE;^>zcQf)jLgTdC|@=mW7I;
zhelglZHWzg4<^|&bS*>UjO%#CjKgw1k20D?cT;Zl(9|+?do_|w#!(j=H!NA;LMMoe
zYZ&zqe|aBT7KesGw^AGv>MA_>H9$%;L$p4G)n3B28OktQSi>yjLiYK*NI!buI(LXr
ztdTx;sf|gLvqoYbR{FV5@e-Ld&nmi}nU02;NJg5G^}2ODcNALIMzQ1YC?eFs<-GAk
zKA?4h(?_BC_PO+#T26|NG7E(#h7toydeY~%_5cg_rtcRNz3)?A&8T*=i#&EvsykdS
znz@7yMVEVPSk0OkT{948a4f(#2fYrlKY=xG@p2FUJAxexu>Cju`9V@iQH?d|Nd<kG
z`mD*-#L%kIs6z%rLq6Axx(FmX<=Ob;8_=xQiXGV<sTTZf43^*rzb{&f<0G(iRiI0Q
zd}I^J2xlaNG!?}&>NR-P5m<fKtb3o_CuVioC6?O*%!~%Je3P_%E{0?w%QtK=stMZ%
z_@IGHzX5Y<#W=KXZQ6A&uK2BKFAhJeE{B~g7m=3j*{rrU5or^xR)sEU_^YFK;3u!a
z`jj9A{o^%g$1Ap|SK{%vU?c8+9o8uU{+5T2Ql1&(o>BEC+|^489^?LA^+qb^w|mu<
zH2Y~(?Y!C}IhxBI$5jWwP$^t;bM7!*>>nUO`l|rX(VaIOB#jSn<3YG}LfBMSw&3M-
zPZ+Wa6>wH;3bTSj;{#&Qmh{PnT*jeD^En5zt-<yKs$`NAtH7c{*30X>t&Lm7nsR0y
zePpd<x!u-=bs3}nngMAEw?a;0;!qbGNVYXoBZiam=#<RR8sd%mjSRg#_AS9kGFhpE
zY@>8-<a=W8fXgK7$VIdq(h*y0Z^#NW+qJ=V1E)_yb7x?C3-mUoUR3W0N#N3=C(>iX
ziV8tl$B8ds4gPcjbj&=jswr>hW*m7FN>i_X3>Q`?McnrdTvQVQ$m5<<aGm1To)lYF
zq}D%QZd$5TYJFH4!u@YS`_zM{;ZKDo$6ip4spwmHNVz6w55$%yJlW4#=oB`y(Cjxy
z@ceh+ES_oixZ^D3Zp_!L2%OKi1S0PZQ5hxYXoZM~g=x5XnKXr6N%H36A7|k`m>Z|@
zt8?&@(vP2?h1O+!&JL&Hh*H4q=izB(Wa`v;>gY60U4TvWyXOKt)-<f6*|{il%dk<a
zl%xd8#FIWdmo0DVYtX-(&_CJhvHJ$fgV`S4z@JaRYP|U(99a@kpNMwdd;8Rv7h#9;
EFWzkqUH||9

delta 854
zcmZXS&r1|x7{?iR=gCZyQml20)(vbXhjAl9aC|We5j=QEp&z!??EKiBnw@cXXLlWE
zC5@#^P$a~Yr|?jRh{P~gqz=)oAgDuh^B_|G%tL=bGj3|(>G|<K@B4i|FW>3K;Iq%c
z(IQo>DEf;2B0U4At=dbXbh}Gea-yY~2GMYI8s5+viEt)9eF;bK;5TT%)+}^mFHb+G
zbewubUvWckD;+>}f)2Vl8K)zZSgN0a#}uWZJO?2(M`0gM3_%mVnu9>K#u%)V6VstI
zF>qlBS||k%*wE`UIT4LHSEJv7pdj)Yh83C^lZd>*uq-c|h9Z=2>YT)7xeT!wBdhC8
zgfKesGU8?uG4X{1;VP*!XKHdN(k|iTioXt*9SF7QoqGE~lohPB?Wks&$^2ExlFS|z
zm1OyxsAm;H#c9)5UmH$nvaA?kwop);n^hbecIhrJLZER(5-lmg46=^MD{dH3HAB>O
z+Yxc1;12yBhHjtC<#zZ^o|Q>%kD|>bxi}a5hs)mKN)oxumE7h^?sEC;P8+KWaIMl^
zA?B@sMgfj`Rc@<#P=Ge<n}<eRD8QjglXcQ=-^6?Kz?8<uAlOrS_ywYeDH+!nVX0bI
zE}Dj_#ltM8V&p3v!_Z2_Ih@MT*C`vR*Ki6qEvUisdD>t4z63uh$}YYC0e7i}I2p+D
znxR>JikOxX7sNC-$R+UVGDtQ5SqwicL+p5FYqnpEZA(T4HET$o2SYL3ScPDf#Tg{Y
zFcEK+Rrfc?SKtZkHr`Q#-rR}pR^1xRQhoSw4eswxFlEOmcyksSOGE1blzVn(13KLB
zb^~rz#2Dlv{?;=wR`49*IWy&&K2PF8sw2<qiV?RGLaL>u{8AUm52T_(7sKL>PY}S#
MUocyWZ$c0C2Xvh&E&u=k

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 13b13286e633f9b5dbd9c8b0cb3bc64d73cd857a..a2d489708e30c4343dd0ea80d33616a48b5e1dcf 100644
GIT binary patch
delta 3681
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

delta 398
zcmX?f(648@-v)!|W~=CSt7t|bW&&bnAZ7t#*6mi&Y{8~XB_7i!v@q$*XFEAMI_kJO
zRyn)qctV&!ejtby>R9PKJ)nV2Z2E#2M%L{KXW3>kix)V1>jXPGh5{8k`vVD=P@rb#
zu<3z^*`&BDog7`<Kr%*7(-kMOs%>YQ%J!a_(QCS48>=#xwY9aQbE$<>mh<)lbJ+Cl
zm?~VSf4s$Jusz@b+d~1ad?!mMokYhH50}Y||K+EzU&O>ZJ^mwG=k)oEOhQaX?$aN>
zWHQ^X+snF*nXzj6kFRX`OxaG;GrqBTv1B?qmTo`tjqNTAV@~^`-)un44#XTl%n8I?
zK+FxqJV49~#C$-^55xl77yTAAy2zPX98y$Tl2NHMy}wRabGp-6A^YiGk-{R|`_2kA
zv2JI)EtI=>duWrerXX)nVsf@?PHI_VNoIcD^w!D3FPBf6BFu;;K69#Y({_z%!n3#l
D@)?v9

diff --git a/netbox/project-static/src/buttons.ts b/netbox/project-static/src/buttons.ts
index 311d3cdf9..6fe107a54 100644
--- a/netbox/project-static/src/buttons.ts
+++ b/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();
+  }
+}
diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts
index 94ad562a9..a7468407e 100644
--- a/netbox/project-static/src/netbox.ts
+++ b/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)[];
 
 /**
diff --git a/netbox/templates/dcim/device/consoleports.html b/netbox/templates/dcim/device/consoleports.html
index b74c6a84a..6367246cd 100644
--- a/netbox/templates/dcim/device/consoleports.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/consoleserverports.html b/netbox/templates/dcim/device/consoleserverports.html
index a09b4b1ad..6dafa84f4 100644
--- a/netbox/templates/dcim/device/consoleserverports.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/frontports.html b/netbox/templates/dcim/device/frontports.html
index eed0d1f79..191112afd 100644
--- a/netbox/templates/dcim/device/frontports.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/interfaces.html b/netbox/templates/dcim/device/interfaces.html
index ae4423ce4..a14e42c2b 100644
--- a/netbox/templates/dcim/device/interfaces.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/poweroutlets.html b/netbox/templates/dcim/device/poweroutlets.html
index 6a28513bf..599629d8a 100644
--- a/netbox/templates/dcim/device/poweroutlets.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/powerports.html b/netbox/templates/dcim/device/powerports.html
index 352691dcf..59cc29a71 100644
--- a/netbox/templates/dcim/device/powerports.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device/rearports.html b/netbox/templates/dcim/device/rearports.html
index 35aec0b14..458170d9c 100644
--- a/netbox/templates/dcim/device/rearports.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/inc/cable_toggle_buttons.html b/netbox/templates/dcim/inc/cable_toggle_buttons.html
index 586e60713..cf53cf1bb 100644
--- a/netbox/templates/dcim/inc/cable_toggle_buttons.html
+++ b/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 %}
diff --git a/netbox/templates/virtualization/virtualmachine/interfaces.html b/netbox/templates/virtualization/virtualmachine/interfaces.html
index 269fc32bc..cd4a5884a 100644
--- a/netbox/templates/virtualization/virtualmachine/interfaces.html
+++ b/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 %}