Merge pull request '6_dev_type_bug' (#12) from 6_dev_type_bug into main

Reviewed-on: #12

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-type-edit-form.js

@@ -0,0 +1,88 @@
+(() => {
+    function addPortRow() {
+        const body = document.getElementById('port-definition-body');
+        if (!body) {
+            return;
+        }
+
+        const emptyRow = body.querySelector('tr td em');
+        if (emptyRow) {
+            const emptyTableRow = emptyRow.closest('tr');
+            if (emptyTableRow) {
+                emptyTableRow.remove();
+            }
+        }
+
+        const rowCount = body.querySelectorAll('tr').length;
+        const index = rowCount;
+        const number = rowCount + 1;
+
+        const optionsTemplate = document.getElementById('port-type-options-template');
+        const portTypeOptions = optionsTemplate
+            ? optionsTemplate.innerHTML
+            : '<option value="">- Kein Typ -</option>';
+
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${number}</td>
+            <td>
+                <input type="hidden" name="port_rows[${index}][id]" value="">
+                <input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
+            </td>
+            <td>
+                <select name="port_rows[${index}][port_type_id]">
+                    ${portTypeOptions}
+                </select>
+            </td>
+            <td>
+                <label class="inline-checkbox">
+                    <input type="checkbox" name="port_rows[${index}][delete]" value="1">
+                    entfernen
+                </label>
+            </td>
+        `;
+
+        body.appendChild(row);
+    }
+
+    function bindAddPortRowButton() {
+        const addButton = document.getElementById('add-port-row');
+        if (!addButton || addButton.dataset.portRowBound === '1') {
+            return;
+        }
+        addButton.addEventListener('click', addPortRow);
+        addButton.dataset.portRowBound = '1';
+    }
+
+    function bindDeleteButton() {
+        const deleteButton = document.getElementById('device-type-delete');
+        if (!deleteButton || deleteButton.dataset.deleteBound === '1') {
+            return;
+        }
+
+        deleteButton.addEventListener('click', () => {
+            const id = Number(deleteButton.dataset.deviceTypeId || '0');
+            if (id <= 0) {
+                return;
+            }
+
+            if (window.confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
+                // TODO: Delete-Endpoint/Flow ist noch nicht implementiert.
+                window.alert('Löschen noch nicht implementiert');
+            }
+        });
+
+        deleteButton.dataset.deleteBound = '1';
+    }
+
+    function init() {
+        bindAddPortRowButton();
+        bindDeleteButton();
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

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/edit.php

@@ -304,6 +304,12 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                     </tbody>
                 </table>
                 <input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>">
+                <template id="port-type-options-template">
+                    <option value="">- Kein Typ -</option>
+                    <?php foreach ($portTypes as $pt): ?>
+                    <option value="<?php echo (int)$pt['id']; ?>"><?php echo htmlspecialchars($pt['name']); ?></option>
+                    <?php endforeach; ?>
+                </template>
 
                 <div class="port-actions">
                     <button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>
@@ -319,73 +325,17 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
             <button type="submit" class="button button-primary">Speichern</button>
             <a href="?module=device_types&action=list" class="button">Abbrechen</a>
             <?php if ($isEdit): ?>
-                <a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $deviceTypeId; ?>)">Löschen</a>
+                <button
+                    type="button"
+                    class="button button-danger"
+                    id="device-type-delete"
+                    data-device-type-id="<?php echo (int)$deviceTypeId; ?>">
+                    Löschen
+                </button>
             <?php endif; ?>
         </fieldset>
 
     </form>
 </div>
-
-
-<script>
-function addPortRow() {
-    const body = document.getElementById('port-definition-body');
-    if (!body) {
-        return;
-    }
-
-    const emptyRow = body.querySelector('tr td em');
-    if (emptyRow) {
-        emptyRow.closest('tr').remove();
-    }
-
-    const rowCount = body.querySelectorAll('tr').length;
-    const index = rowCount;
-    const number = rowCount + 1;
-
-    const portTypeOptions = `<?php
-        $optionHtml = '<option value="">- Kein Typ -</option>';
-        foreach ($portTypes as $pt) {
-            $optionHtml .= '<option value="' . (int)$pt['id'] . '">' . htmlspecialchars($pt['name'], ENT_QUOTES) . '</option>';
-        }
-        echo str_replace('`', '\`', $optionHtml);
-    ?>`;
-
-    const row = document.createElement('tr');
-    row.innerHTML = `
-        <td>${number}</td>
-        <td>
-            <input type="hidden" name="port_rows[${index}][id]" value="">
-            <input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
-        </td>
-        <td>
-            <select name="port_rows[${index}][port_type_id]">
-                ${portTypeOptions}
-            </select>
-        </td>
-        <td>
-            <label class="inline-checkbox">
-                <input type="checkbox" name="port_rows[${index}][delete]" value="1">
-                entfernen
-            </label>
-        </td>
-    `;
-    body.appendChild(row);
-}
-
-function confirmDelete(id) {
-    if (confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
-        // TODO: AJAX-Delete implementieren
-        alert('Löschen noch nicht implementiert');
-    }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const addButton = document.getElementById('add-port-row');
-    if (addButton) {
-        addButton.addEventListener('click', addPortRow);
-    }
-});
-</script>
-
 <script src="/assets/js/device-type-shape-editor.js" defer></script>
+<script src="/assets/js/device-type-edit-form.js" defer></script>

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>
-.device-types-container {
-    padding: 20px;
-}
+<link rel="stylesheet" href="/assets/css/device-types-list.css">
+<script src="/assets/js/device-types-list.js" defer></script>
 
-.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>