From 81afc821900220cc36b9ad74098d1c409df07015 Mon Sep 17 00:00:00 2001
From: Tim Eertmoed <tim@eertmoed.de>
Date: Tue, 7 Oct 2025 18:22:04 +0200
Subject: [PATCH] srv/poe_manager/templates/switche.html aktualisiert

---
 srv/poe_manager/templates/switche.html | 151 +++++++++++++++++--------
 1 file changed, 104 insertions(+), 47 deletions(-)

diff --git a/srv/poe_manager/templates/switche.html b/srv/poe_manager/templates/switche.html
index c084fc1..b3c2096 100644
--- a/srv/poe_manager/templates/switche.html
+++ b/srv/poe_manager/templates/switche.html
@@ -1,55 +1,112 @@
 {% extends "base.html" %}
 {% block content %}
+<h2>Switch Verwaltung</h2>
 
-<h2>Switch-Verwaltung</h2>
+<!-- Button zum Hinzufügen -->
+<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addSwitchModal">Neuen Switch hinzufügen</button>
 
-<!-- Hinzufügen -->
-<form method="post" class="mb-3">
-  <input type="hidden" name="add_switch" value="1">
-  <div class="row g-2">
-    <div class="col"><input class="form-control" name="hostname" placeholder="Hostname" required></div>
-    <div class="col"><input class="form-control" name="ip" placeholder="IP-Adresse" required></div>
-    <div class="col"><input class="form-control" name="username" placeholder="Benutzername" required></div>
-    <div class="col"><input class="form-control" name="password" type="password" placeholder="Passwort" required></div>
-    <div class="col-auto">
-      <button class="btn btn-primary">Hinzufügen</button>
-    </div>
-  </div>
-</form>
+<table class="table table-striped align-middle">
+    <thead>
+        <tr>
+            <th>Hostname</th>
+            <th>IP-Adresse</th>
+            <th>Username</th>
+            <th>Aktionen</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for s in switches %}
+        <tr>
+            <td>{{ s['hostname'] }}</td>
+            <td>{{ s['ip'] }}</td>
+            <td>{{ s['username'] }}</td>
+            <td>
+                <!-- Bearbeiten -->
+                <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>
 
-<!-- Switch-Liste -->
-<table class="table table-striped table-hover align-middle">
-  <thead>
-    <tr>
-      <th>Hostname</th>
-      <th>IP-Adresse</th>
-      <th>Benutzername</th>
-      <th>Aktionen</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for s in switches %}
-    <tr>
-      <form method="post">
-        <input type="hidden" name="edit_switch" value="1">
-        <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
-        <td><input class="form-control form-control-sm" name="hostname" value="{{ s['hostname'] }}"></td>
-        <td><input class="form-control form-control-sm" name="ip" value="{{ s['ip'] }}"></td>
-        <td><input class="form-control form-control-sm" name="username" value="{{ s['username'] }}"></td>
-        <td>
-          <div class="d-flex gap-1">
-            <input type="password" class="form-control form-control-sm" name="password" placeholder="Neues Passwort">
-            <button class="btn btn-sm btn-success">Speichern</button>
-          </div>
-      </form>
-      <form method="post" style="display:inline;">
-        <input type="hidden" name="delete_switch" value="{{ s['hostname'] }}">
-        <button class="btn btn-sm btn-danger ms-1">Löschen</button>
-      </form>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
+                <!-- Löschen -->
+                <form method="post" style="display:inline;">
+                    <input type="hidden" name="delete_switch" value="{{ s['hostname'] }}">
+                    <button class="btn btn-sm btn-danger" type="submit">Löschen</button>
+                </form>
+            </td>
+        </tr>
+
+        <!-- Bearbeiten Modal -->
+        <div class="modal fade" id="editSwitchModal{{ loop.index }}" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title text-dark">Switch bearbeiten</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <form method="post">
+                        <div class="modal-body">
+                            <input type="hidden" name="edit_switch" value="1">
+                            <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
+                            <div class="mb-3">
+                                <label class="form-label">Hostname</label>
+                                <input type="text" name="hostname" class="form-control" value="{{ s['hostname'] }}" required>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">IP-Adresse</label>
+                                <input type="text" name="ip" class="form-control" value="{{ s['ip'] }}" required>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Username</label>
+                                <input type="text" name="username" class="form-control" value="{{ s['username'] }}" required>
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label">Passwort</label>
+                                <input type="password" name="password" class="form-control" placeholder="Neues Passwort eingeben (optional)">
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                            <button class="btn btn-success" type="submit">Speichern</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </tbody>
 </table>
 
+<!-- Hinzufügen Modal -->
+<div class="modal fade" id="addSwitchModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="post">
+                <div class="modal-body">
+                    <input type="hidden" name="add_switch" value="1">
+                    <div class="mb-3">
+                        <label class="form-label">Hostname</label>
+                        <input type="text" name="hostname" class="form-control" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">IP-Adresse</label>
+                        <input type="text" name="ip" class="form-control" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Username</label>
+                        <input type="text" name="username" class="form-control" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Passwort</label>
+                        <input type="password" name="password" class="form-control" required>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                    <button class="btn btn-primary" type="submit">Hinzufügen</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
 {% endblock %}