1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

migrate connection toggle to typescript

This commit is contained in:
checktheroads
2021-04-19 20:48:03 -07:00
parent 8737e9824f
commit 7d07631f12
13 changed files with 75 additions and 47 deletions

View File

@ -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();
}
}

View File

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