diff --git a/web/static/script.js b/web/static/script.js index 9c4d80a..4bfe9a4 100644 --- a/web/static/script.js +++ b/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 => `
${this.escapeHtml(pc.mac)}