Filtern geht schneller

v2_adminpanel/templates/audit_log.html

@@ -68,7 +68,7 @@
     <!-- Filter -->
     <div class="card mb-3">
         <div class="card-body">
-            <form method="get" action="/audit">
+            <form method="get" action="/audit" id="auditFilterForm">
                 <div class="row g-3 align-items-end">
                     <div class="col-md-3">
                         <label for="user" class="form-label">Benutzer</label>
@@ -101,7 +101,6 @@
                         </select>
                     </div>
                     <div class="col-md-3">
-                        <button type="submit" class="btn btn-primary">Filter anwenden</button>
                         <a href="/audit" class="btn btn-outline-secondary">Zurücksetzen</a>
                     </div>
                 </div>
@@ -250,4 +249,36 @@
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// Live Filtering für Audit Log
+document.addEventListener('DOMContentLoaded', function() {
+    const filterForm = document.getElementById('auditFilterForm');
+    const userInput = document.getElementById('user');
+    const actionSelect = document.getElementById('action');
+    const entitySelect = document.getElementById('entity');
+    
+    // Debounce timer für Textfelder
+    let searchTimeout;
+    
+    // Live-Filter für Benutzer-Textfeld (mit 300ms Verzögerung)
+    userInput.addEventListener('input', function() {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            filterForm.submit();
+        }, 300);
+    });
+    
+    // Live-Filter für Dropdowns (sofort)
+    actionSelect.addEventListener('change', function() {
+        filterForm.submit();
+    });
+    
+    entitySelect.addEventListener('change', function() {
+        filterForm.submit();
+    });
+});
+</script>
 {% endblock %}

v2_adminpanel/templates/customers.html

@@ -46,7 +46,7 @@
     <!-- Suchformular -->
     <div class="card mb-3">
         <div class="card-body">
-            <form method="get" action="/customers" class="row g-3 align-items-end">
+            <form method="get" action="/customers" id="customerSearchForm" class="row g-3 align-items-end">
                 <div class="col-md-10">
                     <label for="search" class="form-label">🔍 Suchen</label>
                     <input type="text" class="form-control" id="search" name="search" 
@@ -54,7 +54,7 @@
                            value="{{ search }}" autofocus>
                 </div>
                 <div class="col-md-2">
-                    <button type="submit" class="btn btn-primary w-100">Suchen</button>
+                    <a href="/customers" class="btn btn-outline-secondary w-100">Zurücksetzen</a>
                 </div>
             </form>
             {% if search %}
@@ -161,4 +161,25 @@
         </div>
     </div>
 </div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// Live Search für Kunden
+document.addEventListener('DOMContentLoaded', function() {
+    const searchForm = document.getElementById('customerSearchForm');
+    const searchInput = document.getElementById('search');
+    
+    // Debounce timer für Suchfeld
+    let searchTimeout;
+    
+    // Live-Suche mit 300ms Verzögerung
+    searchInput.addEventListener('input', function() {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            searchForm.submit();
+        }, 300);
+    });
+});
+</script>
 {% endblock %}

v2_adminpanel/templates/licenses.html

@@ -76,7 +76,6 @@
                         </select>
                     </div>
                     <div class="col-md-3">
-                        <button type="submit" class="btn btn-primary">Filter anwenden</button>
                         <a href="/licenses" class="btn btn-outline-secondary">Zurücksetzen</a>
                     </div>
                 </div>
@@ -241,6 +240,34 @@
 
 {% block extra_js %}
 <script>
+// Live Filtering
+document.addEventListener('DOMContentLoaded', function() {
+    const filterForm = document.getElementById('filterForm');
+    const searchInput = document.getElementById('search');
+    const typeSelect = document.getElementById('type');
+    const statusSelect = document.getElementById('status');
+    
+    // Debounce timer für Suchfeld
+    let searchTimeout;
+    
+    // Live-Filter für Suchfeld (mit 300ms Verzögerung)
+    searchInput.addEventListener('input', function() {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            filterForm.submit();
+        }, 300);
+    });
+    
+    // Live-Filter für Dropdowns (sofort)
+    typeSelect.addEventListener('change', function() {
+        filterForm.submit();
+    });
+    
+    statusSelect.addEventListener('change', function() {
+        filterForm.submit();
+    });
+});
+
 // Copy to Clipboard
 function copyToClipboard(text, button) {
     navigator.clipboard.writeText(text).then(function() {