diff --git a/srv/poe_manager/templates/devices.html b/srv/poe_manager/templates/devices.html index 9476f01..8bcd7a9 100644 --- a/srv/poe_manager/templates/devices.html +++ b/srv/poe_manager/templates/devices.html @@ -239,12 +239,13 @@ document.addEventListener("input", function(e) { if (e.target.name === "mac") validateMAC(e.target); }); +// Aktivieren/Deaktivieren function toggleDevice(mac, btn) { fetch(`/devices/toggle/${mac}`, { method: 'POST' }) .then(resp => resp.json()) .then(data => { if (data.success) { - // Button-Styling und Text aktualisieren + // Button aktualisieren if (data.new_status === 1) { btn.classList.remove('btn-secondary'); btn.classList.add('btn-success'); @@ -255,10 +256,35 @@ function toggleDevice(mac, btn) { btn.innerText = 'Aktivieren'; } - // Optional: Flash-Nachricht anzeigen - alert(data.msg); + // Flash-Nachricht im Frontend aktualisieren + let flashContainer = document.getElementById('flash-messages'); + if (!flashContainer) { + flashContainer = document.createElement('div'); + flashContainer.id = 'flash-messages'; + flashContainer.style.position = 'fixed'; + flashContainer.style.top = '10px'; + flashContainer.style.right = '10px'; + flashContainer.style.zIndex = 1050; + document.body.appendChild(flashContainer); + } + + const flash = document.createElement('div'); + flash.className = 'alert alert-success alert-dismissible fade show'; + flash.role = 'alert'; + flash.innerHTML = ` + ${data.msg} + + `; + flashContainer.appendChild(flash); + + // Automatisch nach 3 Sekunden ausblenden + setTimeout(() => { + flash.classList.remove('show'); + flash.classList.add('hide'); + flash.addEventListener('transitionend', () => flash.remove()); + }, 3000); } else { - alert(data.msg); + console.error(data.msg); } }) .catch(err => console.error(err));