From c3186813d4f28f910cd68402ff21097f30b43d07 Mon Sep 17 00:00:00 2001
From: Tim Eertmoed <tim@eertmoed.de>
Date: Tue, 7 Oct 2025 07:48:10 +0200
Subject: [PATCH] srv/poe_manager/templates/devices.html aktualisiert

---
 srv/poe_manager/templates/devices.html | 215 ++++++++++++++++++-------
 1 file changed, 159 insertions(+), 56 deletions(-)

diff --git a/srv/poe_manager/templates/devices.html b/srv/poe_manager/templates/devices.html
index 0ae9e49..4b87b84 100644
--- a/srv/poe_manager/templates/devices.html
+++ b/srv/poe_manager/templates/devices.html
@@ -4,37 +4,18 @@
 <h2>Devices</h2>
 
 {% if current_user.is_admin %}
-<h4>Neues Gerät hinzufügen</h4>
-<form method="post" class="row g-2 mb-4">
-    <input type="hidden" name="add_device" value="1">
-    <div class="col col-small"><input type="text" name="name" placeholder="Hostname" class="form-control" required></div>
-    <div class="col col-ip"><input type="text" name="rpi_ip" placeholder="IP-Adresse" class="form-control" required></div>
-    <div class="col col-mac"><input type="text" name="mac" placeholder="MAC-Adresse" class="form-control" required></div>
-    <div class="col col-small"><input type="text" name="port" placeholder="Port" class="form-control" required></div>
-    <div class="col">
-        <select name="switch_hostname" class="form-control" required>
-            <option value="">Switch wählen</option>
-            {% for sw in switches %}
-                <option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>
-            {% endfor %}
-        </select>
-    </div>
-    <div class="col d-flex align-items-center">
-        <input type="checkbox" name="is_active" value="0" unchecked id="new_is_active">
-        <label for="new_is_active" class="ms-2 mb-0 text-white">Aktiv</label>
-    </div>
-    <div class="col"><button class="btn btn-success w-100">Hinzufügen</button></div>
-</form>
+<!-- Neues Gerät hinzufügen -->
+<button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#deviceModal" onclick="openDeviceModal()">Neues Gerät</button>
 {% endif %}
 
-<table class="table table-bordered custom-table">
+<table class="table table-bordered">
     <thead>
         <tr>
-            <th class="col-small">Hostname</th>
-            <th class="col-ip">IP-Adresse</th>
-            <th class="col-mac">MAC-Adresse</th>
+            <th>Hostname</th>
+            <th>IP-Adresse</th>
+            <th>MAC-Adresse</th>
+            <th>Port</th>
             <th>Switch</th>
-            <th class="col-small">Port</th>
             <th>Aktiv</th>
             {% if current_user.is_admin %}<th>Aktionen</th>{% endif %}
         </tr>
@@ -42,39 +23,41 @@
     <tbody>
         {% for d in devices %}
         <tr>
-            <td class="col-small"><input name="name" value="{{ d['name'] }}" class="form-control" required disabled></td>
-            <td class="col-ip"><input name="rpi_ip" value="{{ d['rpi_ip'] }}" class="form-control" required disabled></td>
-            <td class="col-mac"><input name="mac" value="{{ d['mac'] }}" class="form-control" required disabled></td>
+            <td>{{ d['name'] }}</td>
+            <td>{{ d['rpi_ip'] }}</td>
+            <td>{{ d['mac'] }}</td>
+            <td>{{ d['port'] }}</td>
+            <td>{{ d['switch_hostname'] or '-' }}</td>
             <td>
-                <select name="switch_hostname" class="form-control" disabled required>
-                    {% for sw in switches %}
-                        <option value="{{ sw['hostname'] }}" {% if sw['hostname']==d['switch_hostname'] %}selected{% endif %}>
-                            {{ sw['hostname'] }}
-                        </option>
-                    {% endfor %}
-                </select>
-            </td>
-            <td class="col-small"><input name="port" value="{{ d['port'] }}" class="form-control" required disabled></td>
-            <td class="custom-checkbox">
-                <input type="checkbox" name="is_active" value="1" {% if d['is_active'] %}checked{% endif %} disabled class="checkbox-visible">
-            </td>
-            {% if current_user.is_admin %}
-            <td class="custom-actions">
-                <!-- Bearbeiten Button -->
-                <button type="button" class="btn btn-warning btn-sm" onclick="enableEdit(this)">Bearbeiten</button>
-
-                <!-- Speichern Button -->
                 <form method="post" style="display:inline;">
                     <input type="hidden" name="edit_device" value="1">
                     <input type="hidden" name="old_mac" value="{{ d['mac'] }}">
-                    <button class="btn btn-primary btn-sm d-none" type="submit">Speichern</button>
+                    <input type="hidden" name="is_active" value="{{ 1 if not d['is_active'] else 0 }}">
+                    <button class="btn btn-sm {% if d['is_active'] %}btn-success{% else %}btn-secondary{% endif %}" type="submit">
+                        {% if d['is_active'] %}Aktiv{% else %}Inaktiv{% endif %}
+                    </button>
                 </form>
+            </td>
+            {% if current_user.is_admin %}
+            <td>
+                <!-- Bearbeiten Modal -->
+                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editDeviceModal"
+                        onclick="openEditDeviceModal('{{ d['mac'] }}','{{ d['name'] }}','{{ d['rpi_ip'] }}','{{ d['port'] }}')">
+                    Bearbeiten
+                </button>
 
-                <!-- Löschen Button in eigenem Formular -->
+                <!-- Switch ändern Modal -->
+                <button class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#switchModal"
+                        onclick="openSwitchModal('{{ d['mac'] }}','{{ d['switch_hostname'] }}')">
+                    Switch ändern
+                </button>
+
+                <!-- Löschen -->
                 <form method="post" style="display:inline;">
                     <input type="hidden" name="delete_device" value="{{ d['mac'] }}">
-                    <button class="btn btn-danger btn-sm"
-                        onclick="return confirm('Willst du das Gerät wirklich löschen?');">Löschen</button>
+                    <button class="btn btn-danger btn-sm" onclick="return confirm('Willst du das Gerät wirklich löschen?');">
+                        Löschen
+                    </button>
                 </form>
             </td>
             {% endif %}
@@ -83,12 +66,132 @@
     </tbody>
 </table>
 
+<!-- Modal: Neues Gerät -->
+<div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <form method="post">
+        <div class="modal-header">
+          <h5 class="modal-title black">Neues Gerät hinzufügen</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+            <input type="hidden" name="add_device" value="1">
+            <div class="mb-3">
+                <label>Hostname</label>
+                <input type="text" name="name" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>IP-Adresse</label>
+                <input type="text" name="rpi_ip" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>MAC-Adresse</label>
+                <input type="text" name="mac" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>Port</label>
+                <input type="text" name="port" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>Switch</label>
+                <select name="switch_hostname" class="form-control" required>
+                    {% for sw in switches %}
+                        <option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-success" type="submit">Hinzufügen</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Modal: Bearbeiten -->
+<div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <form method="post">
+        <input type="hidden" name="edit_device" value="1">
+        <input type="hidden" name="old_mac" id="edit_old_mac">
+        <div class="modal-header">
+          <h5 class="modal-title black">Gerät bearbeiten</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+            <div class="mb-3">
+                <label>Hostname</label>
+                <input type="text" name="name" id="edit_name" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>IP-Adresse</label>
+                <input type="text" name="rpi_ip" id="edit_ip" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>MAC-Adresse</label>
+                <input type="text" name="mac" id="edit_mac" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label>Port</label>
+                <input type="text" name="port" id="edit_port" class="form-control" required>
+            </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary" type="submit">Speichern</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Modal: Switch ändern -->
+<div class="modal fade" id="switchModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <form method="post">
+        <input type="hidden" name="edit_device" value="1">
+        <input type="hidden" name="old_mac" id="switch_mac">
+        <div class="modal-header">
+          <h5 class="modal-title black">Switch ändern</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+            <select name="switch_hostname" id="switch_select" class="form-control" required>
+                {% for sw in switches %}
+                    <option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary" type="submit">Speichern</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
 <script>
-function enableEdit(btn) {
-    const row = btn.closest('tr');
-    row.querySelectorAll('input, select').forEach(el => el.disabled = false); // Inputs aktivieren
-    btn.classList.add('d-none'); // Bearbeiten ausblenden
-    row.querySelector('button.btn-primary').classList.remove('d-none'); // Speichern sichtbar
+function openDeviceModal() {
+    document.querySelector("#deviceModal form").reset();
+}
+
+function openEditDeviceModal(mac, name, ip, port) {
+    document.getElementById("edit_old_mac").value = mac;
+    document.getElementById("edit_name").value = name;
+    document.getElementById("edit_ip").value = ip;
+    document.getElementById("edit_mac").value = mac;
+    document.getElementById("edit_port").value = port;
+}
+
+function openSwitchModal(mac, switch_hostname) {
+    document.getElementById("switch_mac").value = mac;
+    document.getElementById("switch_select").value = switch_hostname;
 }
 </script>