diff --git a/app/assets/css/app.css b/app/assets/css/app.css index 23fdcb0..d1fe7c9 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -76,6 +76,108 @@ main { padding: 24px 32px 48px; } +/* Shared components -------------------------------------------------- */ +.filter-form { + margin: 20px 0; +} + +.filter-form form { + display: flex; + gap: 10px; + flex-wrap: wrap; + align-items: center; +} + +.filter-form input, +.filter-form select { + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + background: #fff; +} + +.search-input { + flex: 1; + min-width: 250px; +} + +.connections-container { + padding: 20px; + max-width: 1200px; + margin: 0 auto; + background: #fff; + border: 1px solid #e0e6ef; + border-radius: 12px; + box-shadow: 0 12px 40px rgba(15, 26, 45, 0.08); +} + +.connections-list { + width: 100%; + border-collapse: collapse; + margin: 15px 0; +} + +.connections-list th { + background: #f5f5f5; + padding: 12px; + text-align: left; + border-bottom: 2px solid #ddd; + font-weight: 600; + font-size: 0.9rem; + letter-spacing: 0.02em; +} + +.connections-list td { + padding: 12px; + border-bottom: 1px solid #ddd; + font-size: 0.95rem; +} + +.connections-list tr:hover { + background: #fafafa; +} + +.status-cell { + width: 140px; +} + +.status-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 999px; + font-size: 0.8rem; + font-weight: 600; +} + +.status-badge-warning { + background: #fff4e5; + color: #bb4c26; + border: 1px solid #f9c8a3; +} + +.status-badge-ok { + background: #e6f4ea; + color: #1b7333; + border: 1px solid #a6d4b8; +} + +.empty-state { + text-align: center; + padding: 40px 20px; + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 8px; +} + +@media (max-width: 900px) { + .connections-list th, + .connections-list td { + font-size: 0.85rem; + } +} + @media (max-width: 900px) { .app-header { flex-direction: column; diff --git a/app/assets/js/app.js b/app/assets/js/app.js index 0d2b9ef..001bc7f 100644 --- a/app/assets/js/app.js +++ b/app/assets/js/app.js @@ -92,7 +92,17 @@ function initEventHandlers() { }); } - // TODO: Weitere Event-Handler (Löschen, Import, Export, Filter) + // TODO: Weitere Event-Handler (Import, Export, Filter) + + document.querySelectorAll('[data-confirm-delete]').forEach((btn) => { + btn.addEventListener('click', (event) => { + event.preventDefault(); + const message = btn.getAttribute('data-confirm-message') || 'Aktion ausführen?'; + if (confirm(message)) { + alert(btn.getAttribute('data-confirm-feedback') || 'Diese Funktion ist noch nicht verfügbar.'); + } + }); + }); } // ========================= diff --git a/app/modules/connections/list.php b/app/modules/connections/list.php index a412541..2f84393 100644 --- a/app/modules/connections/list.php +++ b/app/modules/connections/list.php @@ -111,11 +111,20 @@ $devices = $sql->get("SELECT id, name FROM devices ORDER BY name", "", []);