app/assets/css/device-types-list.css

@@ -0,0 +1,102 @@
+.device-types-container {
+    padding: 20px;
+}
+
+.toolbar {
+    margin: 20px 0;
+}
+
+.filter-form {
+    display: flex;
+    gap: 10px;
+    margin: 20px 0;
+    flex-wrap: wrap;
+}
+
+.filter-form input,
+.filter-form select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.filter-form input {
+    flex: 1;
+    min-width: 200px;
+}
+
+.device-type-list {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+}
+
+.device-type-list th,
+.device-type-list td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+.device-type-list th {
+    background: #f5f5f5;
+    font-weight: bold;
+}
+
+.badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    color: white;
+}
+
+.badge-switch { background: #0066cc; }
+.badge-server { background: #cc0000; }
+.badge-patchpanel { background: #ff9900; }
+.badge-other { background: #999; }
+
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 8px;
+}
+
+.button {
+    display: inline-block;
+    padding: 8px 12px;
+    background: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.button:hover {
+    background: #0056b3;
+}
+
+.button-primary {
+    background: #28a745;
+}
+
+.button-primary:hover {
+    background: #218838;
+}
+
+.button-small {
+    padding: 4px 8px;
+    font-size: 0.85em;
+}
+
+.button-danger {
+    background: #dc3545;
+}
+
+.button-danger:hover {
+    background: #c82333;
+}

app/assets/js/device-types-list.js

@@ -0,0 +1,30 @@
+(() => {
+    function bindDeleteButtons() {
+        const buttons = document.querySelectorAll('.js-device-type-delete');
+        buttons.forEach((button) => {
+            if (button.dataset.deleteBound === '1') {
+                return;
+            }
+
+            button.addEventListener('click', () => {
+                const id = Number(button.dataset.deviceTypeId || '0');
+                if (id <= 0) {
+                    return;
+                }
+
+                if (window.confirm('Diesen Geraetetyp wirklich loeschen?')) {
+                    // TODO: AJAX-Delete implementieren
+                    window.alert('Loeschen noch nicht implementiert');
+                }
+            });
+
+            button.dataset.deleteBound = '1';
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', bindDeleteButtons);
+    } else {
+        bindDeleteButtons();
+    }
+})();

app/modules/device_types/list.php

@@ -123,7 +123,12 @@ $deviceTypes = $sql->get(
                 <td>
                     <a href="?module=device_types&action=edit&id=<?php echo $type['id']; ?>" class="button button-small">Bearbeiten</a>
                     <a href="?module=device_types&action=ports&id=<?php echo $type['id']; ?>" class="button button-small">Ports</a>
-                    <a href="#" class="button button-small button-danger" onclick="confirmDelete(<?php echo $type['id']; ?>)">Löschen</a>
+                    <button
+                        type="button"
+                        class="button button-small button-danger js-device-type-delete"
+                        data-device-type-id="<?php echo (int)$type['id']; ?>">
+                        Löschen
+                    </button>
                 </td>
             </tr>
             <?php endforeach; ?>
@@ -141,116 +146,6 @@ $deviceTypes = $sql->get(
     <?php endif; ?>
 </div>
 
-<style>
+<link rel="stylesheet" href="/assets/css/device-types-list.css">
-.device-types-container {
+<script src="/assets/js/device-types-list.js" defer></script>
-    padding: 20px;
-}
 
-.toolbar {
-    margin: 20px 0;
-}
-
-.filter-form {
-    display: flex;
-    gap: 10px;
-    margin: 20px 0;
-    flex-wrap: wrap;
-}
-
-.filter-form input,
-.filter-form select {
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.filter-form input {
-    flex: 1;
-    min-width: 200px;
-}
-
-.device-type-list {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 20px 0;
-}
-
-.device-type-list th,
-.device-type-list td {
-    padding: 12px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
-}
-
-.device-type-list th {
-    background: #f5f5f5;
-    font-weight: bold;
-}
-
-.badge {
-    display: inline-block;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.9em;
-    color: white;
-}
-
-.badge-switch { background: #0066cc; }
-.badge-server { background: #cc0000; }
-.badge-patchpanel { background: #ff9900; }
-.badge-other { background: #999; }
-
-.empty-state {
-    text-align: center;
-    padding: 40px 20px;
-    background: #f9f9f9;
-    border: 1px solid #eee;
-    border-radius: 8px;
-}
-
-.button {
-    display: inline-block;
-    padding: 8px 12px;
-    background: #007bff;
-    color: white;
-    text-decoration: none;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-size: 0.9em;
-}
-
-.button:hover {
-    background: #0056b3;
-}
-
-.button-primary {
-    background: #28a745;
-}
-
-.button-primary:hover {
-    background: #218838;
-}
-
-.button-small {
-    padding: 4px 8px;
-    font-size: 0.85em;
-}
-
-.button-danger {
-    background: #dc3545;
-}
-
-.button-danger:hover {
-    background: #c82333;
-}
-</style>
-
-<script>
-function confirmDelete(id) {
-    if (confirm('Diesen Gerätetyp wirklich löschen?')) {
-        // TODO: AJAX-Delete implementieren
-        alert('Löschen noch nicht implementiert');
-    }
-}
-</script>