diff --git a/app/assets/css/device-types-list.css b/app/assets/css/device-types-list.css new file mode 100644 index 0000000..84c43e9 --- /dev/null +++ b/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; +} diff --git a/app/assets/js/device-type-edit-form.js b/app/assets/js/device-type-edit-form.js new file mode 100644 index 0000000..57a785d --- /dev/null +++ b/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 + : ''; + + const row = document.createElement('tr'); + row.innerHTML = ` + ${number} + + + + + + + + + + + `; + + 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(); + } +})(); diff --git a/app/assets/js/device-types-list.js b/app/assets/js/device-types-list.js new file mode 100644 index 0000000..b79b61b --- /dev/null +++ b/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(); + } +})(); diff --git a/app/modules/device_types/edit.php b/app/modules/device_types/edit.php index fa4373a..981b826 100644 --- a/app/modules/device_types/edit.php +++ b/app/modules/device_types/edit.php @@ -304,6 +304,12 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[ +
@@ -319,73 +325,17 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[ Abbrechen - Löschen +
- - - - + diff --git a/app/modules/device_types/list.php b/app/modules/device_types/list.php index 35c0e38..ec30abb 100644 --- a/app/modules/device_types/list.php +++ b/app/modules/device_types/list.php @@ -123,7 +123,12 @@ $deviceTypes = $sql->get( Bearbeiten Ports - Löschen + @@ -141,116 +146,6 @@ $deviceTypes = $sql->get( - - -