From f83fb57d387ea192c6fa44c52b2ca65dbdc8f63e Mon Sep 17 00:00:00 2001 From: checktheroads Date: Mon, 19 Apr 2021 21:30:50 -0700 Subject: [PATCH] migrate vlan group scope selector to typescript --- netbox/project-static/dist/netbox.js | Bin 455089 -> 457058 bytes netbox/project-static/dist/netbox.js.map | Bin 1286338 -> 1291578 bytes netbox/project-static/src/forms.ts | 111 +++++++++++++++++++++- netbox/templates/ipam/vlangroup_edit.html | 75 --------------- 4 files changed, 110 insertions(+), 76 deletions(-) diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index f7eed047e8f38f880c5ad7580e5ddcc9ed536802..d0552b34ff31c1ea295ee2d7243bd87a64983196 100644 GIT binary patch delta 3486 zcmb_eO^6&t6lUB^A?Al9o6XN|0<#lcyR*IRBt+D7N{C4WF=}*IJgno;+g&qLNl$gB zx@I<$-Ek7wgEwOY%RfX#1;HQ@F#!(}h%!&t?-7$Z5KI zs^9m$?|oJ8ow+h{`LB`V3z>zx76ulUEo8q$^G+s|EeDMZIR-fz_*{f0WmG)w^IC`l zdHf90$2k#o&T>>E`usf8h#}zDPJX$jx5{VSR4cn^|-53?~^W5|Z ztBC3-#zMDLK;3FNws5LisLxRa;Nwv48PBelS41|qj_RVy{n?z~Y9;)6OaA^7+O~r9 z`18Ei+%Bo$~F^(1WjApWY*XIGNogpSp@ZL7oa6%5P4ijq>}~vR1~EPd|{| z1frd6pkY|yQ&|mGf9%T+L74MzW%aWkpUS?Jc{l{M<{CE7aY&z$*_@JepDjQ)-JsE% z=bt+;No?*^58B+Wg@%oNjmdxB$&OJE3y>ko-`JrWA@-&VMZtLwYPJUWl2=>>6>O5TvH<;oNSTW$xEB zszX6^ODh<}3?1%!-juI{6%AnqoHT&oK2o;p9vHjTQZ@kJLwUJ*q%J@DZP{u$%h3Ju z@HMnrW-g=AwX|DEu(Jmuh4L4M*2|rj(1sf+sMVFn%0AZ=fWRqw#PkDoB7qRc+vS>V z%ZAzvi)mi8m>GhEjvy`+jF_C%{07-urJk!X9kQV;BwRd3ATH4uyhtKV^NH<69cXrS zFW(xxh>vc&ICiXmbqP>| z0cFK`FutN1*SqfB0FB727t!XGKqzq<7)jZFo%}mMgDb$e-5N$GX2sUL>G%w64Nj1` zZ_yYWpAWu6#@(tWV17%Mu7UT%uJ?nutbzRc2--9XD|Hfro&|YyS`~_8xSewe%vQ?v z98B`iF`(DLPC~DV8!39tm|oQ=bv}H9qYaxYiw_dP)%bg>p~z0O6RyfaB@?*9om|Bw z6HaV=8(VrMoj|Fdaw(z=>c*!Va&r4OxbX&+R1?o}QUOQqnyXTm?3&I~x6}@)AQkS{ zgS?^EY8gLyKE#CG@rv8d;rPk%>Y*S!^-c07Uo^t1KO4u5k@Cfskyjye@%A)wyrX?* zVSCvCvRb4Om&&NElD@5!x-z8{h*Sf_4ni9B=E}7rF_)6=hB(n59VDf&LP#UtPC6<5 z7w6ND6Ro0LR813z83^L>eR}kz1K`OzopIu}Ta+x7iqY;_wht%Tle|$H zyKyVI6QJqPl>@z_*F{T?Q4!jA_oA{ zNM5&y7m{2jf_JkB-u%2Lw_HFQR`o?_$w$tiT)Uf8Dc!wb$}ycfSDdDz0SAUQ-s^nb zmiYv8$*_yQGbzK!?0MjfPgOm%u zzN+Qpjy0)TR#`XlDoVaPbj<2=b-24{d;O^1?MDsORsdHOvWMI07Y$sJd;IKRyRjHb zAyoh=GC&$hwUHE3+(u?Nu@6U+Qee~ouW2T(UzBex$v42YzI=M>&2#N}?GMdGR8;HzVZd3=MCp+N=V-tJKYt#T}kSv+l+K cf^`Np0wxi7+BF(RMOr7&eP`bf(VCb41KEPW8vp7%Q6qXauNGU`lO48D#BsR3^PP1N|qE>>}#32eWSs>oe%7N2(#==9Iqw z3qF$PhB7&+ORlO?u<;0dWUnF+ZVai!D98zbnHv{VE9~HXL3tjZ~G8!6HgrtpC)2#|ed4b3U zt*+Y+D(J0S_{0H00S5tCT#s+!oPOji>esU?=#;*`iH~Na{%jLZ=)s@x&ECND^`{(7 z=r>B}*^IA0D51lk#6}5?!tVDg$bj7+B{YH(YBRU-G32-UWxmD7^?SFW{y#tC_tV35 z50B`h=g_onUPS|gKupYVTTD$6IWHEd(r^BNA3v=~Jr-1$k_x_(i$yLm6-#Nd*2(Ly zy)ws{be7ID$tscQ(ZG=UxfML=`IH;NT4sKgnr0IHs`F;(yu0fh@2X}>xj06}r1r7A}yLebXxP%XZVzW2!XuszgqU!r# z7!c62ce5kg9 zpn^03s;w*c@K~=jh~B=3a|b)-0@9XPU6=|!9(Y;O_LcO4pgffYRJFLzD_p3^Zr_5W zLTVG)6Ore*>JnCOTtWx*S3cGmrq5UKN2^hy8wj~qH;|zS8ZayJuBIg&DlNe(y!?{l z72}MQtY*0~s2GfZJH$4Mrm`YO2EKnGAdqj9TcPC3fUv|}R`nJ5(Tu@)rVm~V>vC1! z+{zB<6@iZrdepasL5Nij1h)Z}{#@W3;Cyih=X>^RH{GFJg+$feKpJsnPP=d^D+uG+ zi3nIdtzRwnj_CD|ao=hL!a0hU!60QxUI~`@*(J{}8mohZ;!r>w^*x5I3zKQFl+m;t$F+ zN(ZV&%U#TC3G<2>w(ET;@u4G25A&>~Jj?&Zb2W}gn`fBfsL-$*$5J=Xa4)m4#SHxG w2;uI%;3gM3k*vW((H;gxixVcN^R8K5u+>aEhPHy2x(?II=hc^`Iv&6FFAIHnOaK4? diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index a2d489708e30c4343dd0ea80d33616a48b5e1dcf..d6dcdbad5f7466b7dea911764758a7cc9cfab959 100644 GIT binary patch delta 4579 zcmb_eO>7&-6^0#)QYHT|Tswb8k!hNkV!a?E8*Up3NjtlwBwChbmXd8%Hlo#XNUpiu zrFU0N~rDU+jyMrl)n1wB`Y$(pn=_(kL)KtUADMWnhZ^W5#1v8M-GRAc6aW-yH{gn=Mpf3W< zXyFpmurzwjKyZsxr;u>?E#ME*8;w9!%nOs!=?pDjM{>(pKC2r3nL0)FH7u(9H+5Lh zU(tE#*NNvwV4{u4x!LsW`azij;hlI)ITq*P<58-Egft@fq;XXXz8v% z3${T_6n06y3sf>JV2YwqwF7AjSi^HN?*O`R@u2GHf7S(iMX77jD;9t7qk)&^XQ&Yr zISyOvw$+5{=)}O z|0{9snOVAcQ<4beU`+u{z~3aNJaKlUsnI;(fvp-p@_AyEC;yfhR^VL0HAO8=Rtw-< zLF_Lco1wEU{_<|(Ju`_4DCYr_)frg624RLCEqWWhn;ca2cG5BmTpfFAEdi;vNeJ7OO5u@?f+5-^=|F`?vvEpXLxc^84AIB z3tSMlN_^7=SdP(TJ_%f6c%HH8eu*^D50(V{f5H^@0o9FLZc13V+7HebqauuP zA*twc9p@0e_psD<+Yizq(h)++I!RpxCHy<8?G9QEuOCf;-6=ETPZuTpVU zU+bEIySBRONV&kR)odm=uUmfBTCr>^*c=ru+K(k%_(FP|r19*f$@fSapN2FaD=V3V zkj?N@ca&!b#6I7B@A$Jr1sTG(_y>PXDg3pDGI#a1D5wPJ(vlY4{D@E^Z-{A5?u zX(&(cllseVQeU2)h8M?X#H<@mO}@7HzLmuTJde$Rc-q=8NhdlG2Q?w43sv6wS?V;O zTvn1i|F&|L|NPTr60Ve7F0zGBE^ux+4)f;OMnG)WZNS^>Hd#=|XWzCOj4bE%;w*VB zdWx3OEs0()L?i&c+D>8CZDB_Ir6{FY`H-_p(W$VF+ga=DZD-lQz2dGjPd9uvn!&~c z>{cO(qtf`2XgJiUm*CqkBu|IPcl2ClGVM1J!YNkwbpV7p(0_=hU$h1-W?Dd6MfMud zABaLAR^UtfM5IX+17zQHy$XgOxU#~*gRpWD+~=?q$eLlVGG9V3CR}dcFZY zhg{0=(w6enb&)V^mSj^RT8&Ns_^|J*%ywZefAz(CLS<_is!3EKQiU3XZ1LZ}sVL!o z+ep&kZHrQl*={?*VhP+9fm2qsJZM>(Mqt*X$O&2T_(xMiBmBdcMo#g`H%J0xYzlIjZ7N!>F7M2#)Eo_hKnRC5TrcZ2P(wko8z$!jntAUMQJjdHb$J5c# zQO6ZT1cHcA$87KEfsfe4wtpyKJ;yjbL4=Wg`-EiHMa)cwUfb`tviWf_=Q`y~Ph8BV z%aQG*B~?KJ&^Jd3EPtD|#?3(zPRcd&WZ){f4WF4HHpFzL4+oX!Ts>_E%`#GF9P z1;pGy%mc){K+Ffk{6H)K#Dd!oP8SkTn{GQ@m}7h7KA}d@>3bdsg-wrpFC;hp?j&K( Q>1U@2YiuuhD0J*H05|_wjQ{`u diff --git a/netbox/project-static/src/forms.ts b/netbox/project-static/src/forms.ts index c87cc6e49..b1bbb17a2 100644 --- a/netbox/project-static/src/forms.ts +++ b/netbox/project-static/src/forms.ts @@ -1,5 +1,10 @@ import { getElements, scrollTo } from './util'; +type ShowHideMap = { + default: { hide: string[]; show: string[] }; + [k: string]: { hide: string[]; show: string[] }; +}; + /** * Get form data from a form element and transform it into a body usable by fetch. * @@ -156,8 +161,112 @@ function initMoveButtons() { } } +/** + * Mapping of scope names to arrays of object types whose fields should be hidden or shown when + * the scope type (key) is selected. + * + * For example, if `region` is the scope type, the fields with IDs listed in + * showHideMap.region.hide should be hidden, and the fields with IDs listed in + * showHideMap.region.show should be shown. + */ +const showHideMap: ShowHideMap = { + region: { + hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region'], + }, + 'site group': { + hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_sitegroup'], + }, + site: { + hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site'], + }, + location: { + hide: ['id_rack', 'id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'], + }, + rack: { + hide: ['id_clustergroup', 'id_cluster'], + show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], + }, + 'cluster group': { + hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'], + show: ['id_clustergroup'], + }, + cluster: { + hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'], + show: ['id_clustergroup', 'id_cluster'], + }, + default: { + hide: [ + 'id_region', + 'id_sitegroup', + 'id_site', + 'id_location', + 'id_rack', + 'id_clustergroup', + 'id_cluster', + ], + show: [], + }, +}; + +/** + * Toggle visibility of a given element's parent. + * @param query CSS Query. + * @param action Show or Hide the Parent. + */ +function toggleParentVisibility(query: string, action: 'show' | 'hide') { + for (const element of getElements(query)) { + if (action === 'show') { + element.parentElement?.classList.remove('d-none', 'invisible'); + } else { + element.parentElement?.classList.add('d-none', 'invisible'); + } + } +} + +/** + * Handle changes to the Scope Type field. + */ +function handleScopeChange(event: Event) { + const element = event.currentTarget as HTMLSelectElement; + // Scope type's innerText looks something like `DCIM > region`. + const scopeType = element.options[element.selectedIndex].innerText.toLowerCase(); + + for (const [scope, fields] of Object.entries(showHideMap)) { + // If the scope type ends with the specified scope, toggle its field visibility according to + // the show/hide values. + if (scopeType.endsWith(scope)) { + for (const field of fields.hide) { + toggleParentVisibility(`#${field}`, 'hide'); + } + for (const field of fields.show) { + toggleParentVisibility(`#${field}`, 'show'); + } + // Stop on first match. + break; + } else { + // Otherwise, hide all fields. + for (const field of showHideMap.default.hide) { + toggleParentVisibility(`#${field}`, 'hide'); + } + } + } +} + +/** + * Initialize scope type select event listeners. + */ +function initScopeSelector() { + for (const element of getElements('#id_scope_type')) { + element.addEventListener('change', handleScopeChange); + } +} + export function initForms() { - for (const func of [initFormElements, initMoveButtons]) { + for (const func of [initFormElements, initMoveButtons, initScopeSelector]) { func(); } } diff --git a/netbox/templates/ipam/vlangroup_edit.html b/netbox/templates/ipam/vlangroup_edit.html index ef8019ffe..65a5e7a03 100644 --- a/netbox/templates/ipam/vlangroup_edit.html +++ b/netbox/templates/ipam/vlangroup_edit.html @@ -28,78 +28,3 @@ {% endif %} {% endblock %} -{% block javascript %} - -{% endblock %}