Mascali
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify mark connected/installed implementation 

Fixes: #13712 and #13806.
This commit is contained in:
Per von Zweigbergk 2023-09-23 23:45:08 +02:00
parent 27864ec865
commit 83e2c45e74
5 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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
*/
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 connected = element.classList.contains('connected');
const status = connected ? 'planned' : 'connected';
if (isTruthy(url)) {
apiPatch(url, { status }).then(res => {
@ -19,34 +19,18 @@ function toggleConnection(element: HTMLButtonElement): void {
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.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');
}
// Update cable status in DOM
row.setAttribute('data-cable-status', status);
}
});
}
}
export function initConnectionToggle(): void {
for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) {
element.addEventListener('click', () => toggleConnection(element));
for (const element of getElements<HTMLButtonElement>('button.mark-planned')) {
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] {
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 %}

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

@ -1,12 +1,9 @@
{% load i18n %}
{% if perms.dcim.change_cable %}
{% if cable.status == 'connected' %}
<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>
</button>
{% else %}
<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 %}">
<i class="mdi mdi-lan-connect" aria-hidden="true"></i>
</button>
{% endif %}
<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 %}">
<i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
</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 %}">
<i class="mdi mdi-lan-connect" aria-hidden="true"></i>
</button>
{% endif %}