Füge Suchfunktionalität für PC-Namen in der Geräte-Tabelle hinzu

web/static/script.js

@@ -2,6 +2,9 @@
 
 class PCManager {
     constructor() {
+        this.allPCs = []; // Alle PCs im Speicher
+        this.filteredPCs = []; // Gefilterte PCs
+        this.searchTerm = ''; // Aktueller Suchbegriff
         this.init();
     }
 
@@ -26,6 +29,16 @@ class PCManager {
         document.getElementById('editMACAddress')?.addEventListener('input', (e) => {
             this.formatMACAddress(e.target);
         });
+
+        // Suchfeld Event Listener
+        document.getElementById('searchInput').addEventListener('input', (e) => {
+            this.searchPCs(e.target.value);
+        });
+
+        // Suchfeld löschen Button
+        document.getElementById('clearSearchBtn').addEventListener('click', () => {
+            this.clearSearch();
+        });
     }
 
     async loadPCs() {
@@ -34,7 +47,9 @@ class PCManager {
             const data = await response.json();
             
             if (data.success) {
-                this.displayPCs(data.pcs);
+                this.allPCs = data.pcs;
+                this.filteredPCs = [...this.allPCs];
+                this.displayPCs();
             } else {
                 this.showNotification('Fehler', data.message, 'danger');
             }
@@ -43,22 +58,74 @@ class PCManager {
         }
     }
 
-    displayPCs(pcs) {
+    searchPCs(searchTerm) {
+        this.searchTerm = searchTerm.toLowerCase().trim();
+        
+        if (this.searchTerm === '') {
+            // Keine Suche - alle PCs anzeigen
+            this.filteredPCs = [...this.allPCs];
+            this.hideClearSearchButton();
+        } else {
+            // PCs nach Namen filtern
+            this.filteredPCs = this.allPCs.filter(pc => 
+                pc.name.toLowerCase().includes(this.searchTerm)
+            );
+            this.showClearSearchButton();
+        }
+        
+        this.displayPCs();
+    }
+
+    clearSearch() {
+        document.getElementById('searchInput').value = '';
+        this.searchPCs('');
+        this.hideClearSearchButton();
+    }
+
+    showClearSearchButton() {
+        document.getElementById('clearSearchBtn').style.display = 'block';
+    }
+
+    hideClearSearchButton() {
+        document.getElementById('clearSearchBtn').style.display = 'none';
+    }
+
+    displayPCs() {
         const tableBody = document.getElementById('pcTableBody');
         const noPCs = document.getElementById('noPCs');
         const pcList = document.getElementById('pcList');
+        const noSearchResults = document.getElementById('noSearchResults');
+        const searchTerm = document.getElementById('searchTerm');
+        const resultCount = document.getElementById('resultCount');
 
-        if (pcs.length === 0) {
+        // Ergebnis-Zähler aktualisieren
+        resultCount.textContent = `${this.filteredPCs.length} PC${this.filteredPCs.length !== 1 ? 's' : ''} gefunden`;
+
+        if (this.allPCs.length === 0) {
+            // Keine PCs vorhanden
             tableBody.innerHTML = '';
             noPCs.style.display = 'block';
             pcList.style.display = 'none';
+            noSearchResults.style.display = 'none';
             return;
         }
 
+        if (this.filteredPCs.length === 0 && this.searchTerm !== '') {
+            // Keine Suchergebnisse
+            tableBody.innerHTML = '';
+            noPCs.style.display = 'none';
+            pcList.style.display = 'none';
+            noSearchResults.style.display = 'block';
+            searchTerm.textContent = this.searchTerm;
+            return;
+        }
+
+        // PCs anzeigen
         noPCs.style.display = 'none';
+        noSearchResults.style.display = 'none';
         pcList.style.display = 'block';
 
-        tableBody.innerHTML = pcs.map(pc => `
+        tableBody.innerHTML = this.filteredPCs.map(pc => `
             <tr>
                 <td><strong>${this.escapeHtml(pc.name)}</strong></td>
                 <td><code>${this.escapeHtml(pc.mac)}</code></td>
@@ -106,7 +173,7 @@ class PCManager {
             if (data.success) {
                 this.showNotification('Erfolg', 'PC erfolgreich hinzugefügt', 'success');
                 document.getElementById('addPCForm').reset();
-                this.loadPCs();
+                await this.loadPCs(); // PCs neu laden
             } else {
                 this.showNotification('Fehler', data.message, 'danger');
             }
@@ -154,8 +221,8 @@ class PCManager {
                 const editModal = bootstrap.Modal.getInstance(document.getElementById('editPCModal'));
                 editModal.hide();
                 
-                // PC-Liste neu laden
-                this.loadPCs();
+                // PCs neu laden
+                await this.loadPCs();
             } else {
                 this.showNotification('Fehler', data.message, 'danger');
             }
@@ -178,7 +245,7 @@ class PCManager {
             
             if (data.success) {
                 this.showNotification('Erfolg', 'PC erfolgreich gelöscht', 'success');
-                this.loadPCs();
+                await this.loadPCs(); // PCs neu laden
             } else {
                 this.showNotification('Fehler', data.message, 'danger');
             }