Simplify mark connected/installed implementation
Fixes: #13712 and #13806.
This commit is contained in:
parent
27864ec865
commit
83e2c45e74
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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'));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}">
|
||||
<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>
|
||||
{% 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 %}">
|
||||
<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 %}
|
||||
{% endif %}
|
||||
|
|
Loading…
Reference in New Issue