NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-28 03:16:25 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Simplify mark connected/installed implementation

Browse Source 
Fixes: #13712 and #13806.
This commit is contained in:
Per von Zweigbergk 2023-09-23 23:45:08 +02:00
parent 95b705dac2
commit 32035d2f28
5 changed files with 24 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox.js vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox.js.map vendored
View File

Binary file not shown.

36
netbox/project-static/src/buttons/connectionToggle.ts
View File

@ -7,10 +7,10 @@ import { isTruthy, apiPatch, hasError, getElements } from '../util';
* *
* @param element Connection Toggle Button Element * @param element Connection Toggle Button Element
*/ */
function toggleConnection(element: HTMLButtonElement): void { function setConnectionStatus(element: HTMLButtonElement, status: string): void {
// Get the button's row to change its data-cable-status attribute
const row = element.parentElement?.parentElement as HTMLTableRowElement;
const url = element.getAttribute('data-url'); const url = element.getAttribute('data-url');
const connected = element.classList.contains('connected');
const status = connected ? 'planned' : 'connected';
if (isTruthy(url)) { if (isTruthy(url)) {
apiPatch(url, { status }).then(res => { apiPatch(url, { status }).then(res => {
@ -19,34 +19,18 @@ function toggleConnection(element: HTMLButtonElement): void {
createToast('danger', 'Error', res.error).show(); createToast('danger', 'Error', res.error).show();
return; return;
} else { } else {
// Get the button's row to change its styles. // Update cable status in DOM
const row = element.parentElement?.parentElement as HTMLTableRowElement; row.setAttribute('data-cable-status', status);
// 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.classList.add('btn-info');
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');
}
} }
}); });
} }
} }
export function initConnectionToggle(): void { export function initConnectionToggle(): void {
for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) { for (const element of getElements<HTMLButtonElement>('button.mark-planned')) {
element.addEventListener('click', () => toggleConnection(element)); element.addEventListener('click', () => setConnectionStatus(element, 'planned'));
}
for (const element of getElements<HTMLButtonElement>('button.mark-installed')) {
element.addEventListener('click', () => setConnectionStatus(element, 'connected'));
} }
} }

9
netbox/templates/dcim/device/interfaces.html
View File

@ -48,5 +48,12 @@
tr[data-enabled=disabled] { tr[data-enabled=disabled] {
background-color: var(--nbx-color-danger-a15); background-color: var(--nbx-color-danger-a15);
} }
</style> tr[data-cable-status=connected] button.mark-installed {
display: none;
}
tr:not([data-cable-status=connected]) button.mark-planned {
display: none;
}
</style>
{% endblock %} {% endblock %}

15
netbox/templates/dcim/inc/cable_toggle_buttons.html
View File

@ -1,12 +1,9 @@
{% load i18n %} {% load i18n %}
{% if perms.dcim.change_cable %} {% if perms.dcim.change_cable %}
{% if cable.status == 'connected' %} <button type="button" class="btn btn-warning btn-sm mark-planned" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
<button type="button" class="btn btn-warning btn-sm cable-toggle connected" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}"> <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
<i class="mdi mdi-lan-disconnect" aria-hidden="true"></i> </button>
</button> <button type="button" class="btn btn-info btn-sm mark-installed" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
{% else %} <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
<button type="button" class="btn btn-info btn-sm cable-toggle" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}"> </button>
<i class="mdi mdi-lan-connect" aria-hidden="true"></i>
</button>
{% endif %}
{% endif %} {% endif %}