srv/poe_manager/templates/devices.html aktualisiert

srv/poe_manager/templates/devices.html

@@ -29,11 +29,10 @@
             <td>{{ d['port'] }}</td>
             <td>{{ d['switch_hostname'] or '-' }}</td>
             <td>
-                <form method="post" action="{{ url_for('toggle_device', mac=d['mac']) }}" style="display:inline;">
+                <button class="btn btn-sm {% if d['is_active'] %}btn-success{% else %}btn-secondary{% endif %}" 
-                    <button class="btn btn-sm {% if d['is_active'] %}btn-success{% else %}btn-secondary{% endif %}" type="submit">
+                        onclick="toggleDevice('{{ d['mac'] }}', this)">
-                        {% if d['is_active'] %}Deaktivieren{% else %}Aktivieren{% endif %}
+                    {% if d['is_active'] %}Deaktivieren{% else %}Aktivieren{% endif %}
-                    </button>
+                </button>
-                </form>
             </td>
             {% if current_user.is_admin %}
             <td>
@@ -239,6 +238,31 @@ document.addEventListener("input", function(e) {
     if (e.target.name === "rpi_ip") validateIP(e.target);
     if (e.target.name === "mac") validateMAC(e.target);
 });
+
+function toggleDevice(mac, btn) {
+    fetch(`/devices/toggle/${mac}`, { method: 'POST' })
+        .then(resp => resp.json())
+        .then(data => {
+            if (data.success) {
+                // Button-Styling und Text aktualisieren
+                if (data.new_status === 1) {
+                    btn.classList.remove('btn-secondary');
+                    btn.classList.add('btn-success');
+                    btn.innerText = 'Deaktivieren';
+                } else {
+                    btn.classList.remove('btn-success');
+                    btn.classList.add('btn-secondary');
+                    btn.innerText = 'Aktivieren';
+                }
+
+                // Optional: Flash-Nachricht anzeigen
+                alert(data.msg);
+            } else {
+                alert(data.msg);
+            }
+        })
+        .catch(err => console.error(err));
+}
 </script>
 
 {% endblock %}