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
+                // PCs neu laden
-                this.loadPCs();
+                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');
             }

web/templates/index.html

@@ -64,6 +64,27 @@
                         </h5>
                     </div>
                     <div class="card-body">
+                        <!-- Suchfeld -->
+                        <div class="row mb-3">
+                            <div class="col-md-6">
+                                <div class="input-group">
+                                    <span class="input-group-text">
+                                        <i class="fas fa-search"></i>
+                                    </span>
+                                    <input type="text" class="form-control" id="searchInput" 
+                                           placeholder="PC-Namen suchen..." 
+                                           aria-label="PC-Namen suchen">
+                                    <button class="btn btn-outline-secondary" type="button" id="clearSearchBtn" 
+                                            style="display: none;">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="col-md-6 text-end">
+                                <span class="badge bg-primary" id="resultCount">0 PCs gefunden</span>
+                            </div>
+                        </div>
+
                         <div id="pcList" class="table-responsive">
                             <table class="table table-hover">
                                 <thead>
@@ -83,6 +104,10 @@
                             <i class="fas fa-info-circle fa-2x mb-2"></i>
                             <p>Noch keine PCs hinzugefügt.</p>
                         </div>
+                        <div id="noSearchResults" class="text-center text-muted" style="display: none;">
+                            <i class="fas fa-search fa-2x mb-2"></i>
+                            <p>Keine PCs gefunden, die "<span id="searchTerm"></span>" enthalten.</p>
+                        </div>
                     </div>
                 </div>
             </div>