diff --git a/templates/index.html b/templates/index.html index 633aaaa..53da748 100644 --- a/templates/index.html +++ b/templates/index.html @@ -18,6 +18,7 @@ .main-content { flex: 1 0 auto; padding: 2rem 0; + margin-bottom: 4rem; /* Platz für die fixierte Fußzeile */ } .search-container { max-width: 800px; @@ -75,6 +76,10 @@ background-color: #f8f9fa; border-top: 1px solid #dee2e6; width: 100%; + position: fixed; + bottom: 0; + left: 0; + z-index: 100; } .share-feedback { position: fixed; @@ -102,6 +107,14 @@ padding: 5px 10px; border-radius: 15px; font-size: 0.9em; + background-color: #0d6efd; + color: white; + border: none; + cursor: pointer; + transition: background-color 0.2s; + } + .share-button:hover { + background-color: #0b5ed7; } .search-fields { display: grid; @@ -139,6 +152,20 @@ margin-left: 4px; font-size: 1.2em; } + .customer-card { + background: white; + border-radius: 8px; + padding: 1.5rem; + margin-bottom: 1.5rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + border-bottom: 1px solid #e9ecef; + } + .customer-card:last-child { + border-bottom: none; + } + .customer-info { + margin-bottom: 1rem; + } @@ -268,85 +295,71 @@ } function searchCustomers() { - const name = document.getElementById('nameInput').value; - const ort = document.getElementById('ortInput').value; - const kundennummer = document.getElementById('kundennummerInput').value; - const fachrichtung = document.getElementById('fachrichtungInput').value; - const telefon = document.getElementById('telefonInput').value; - const query = document.getElementById('searchInput').value; - - // Prüfe, ob mindestens ein Suchfeld ausgefüllt ist - if (!name && !ort && !kundennummer && !fachrichtung && !telefon && !query) { - document.getElementById('results').innerHTML = ''; - lastResults = []; - updateResultCounts(); - return; - } - - // Lade-Animation anzeigen - document.getElementById('loading').style.display = 'block'; - document.getElementById('results').innerHTML = ''; - - // URL-Parameter erstellen - const params = new URLSearchParams(); - if (name) params.append('name', name); - if (ort) params.append('ort', ort); - if (kundennummer) params.append('kundennummer', kundennummer); - if (fachrichtung) params.append('fachrichtung', fachrichtung); - if (telefon) params.append('telefon', telefon); - if (query) params.append('q', query); - - fetch(`/search?${params.toString()}`) + const query = document.getElementById('searchInput').value.trim(); + const fachrichtung = document.getElementById('fachrichtungInput').value.trim(); + const ort = document.getElementById('ortInput').value.trim(); + const name = document.getElementById('nameInput').value.trim(); + const telefon = document.getElementById('telefonInput').value.trim(); + const kundennummer = document.getElementById('kundennummerInput')?.value.trim() || ''; + + const resultsDiv = document.getElementById('results'); + const loadingDiv = document.getElementById('loading'); + loadingDiv.style.display = 'block'; + resultsDiv.innerHTML = ''; + + const searchParams = new URLSearchParams(); + if (query) searchParams.append('q', query); + if (fachrichtung) searchParams.append('fachrichtung', fachrichtung); + if (ort) searchParams.append('ort', ort); + if (name) searchParams.append('name', name); + if (telefon) searchParams.append('telefon', telefon); + if (kundennummer) searchParams.append('kundennummer', kundennummer); + + fetch(`/search?${searchParams.toString()}`) .then(response => response.json()) .then(data => { - if (data.error) { - showError(data.error); + resultsDiv.innerHTML = ''; + + // Prüfe, ob data ein Objekt mit results-Array ist + if (!data || !data.results || !Array.isArray(data.results)) { + console.error('Unerwartetes Datenformat:', data); + resultsDiv.innerHTML = '
Unerwartetes Datenformat vom Server
'; return; } - - const resultsContainer = document.getElementById('results'); - resultsContainer.innerHTML = ''; - - if (data.results && data.results.length > 0) { - data.results.forEach(customer => { - const card = document.createElement('div'); - card.className = 'card mb-3'; - const customerLink = createCustomerLink(customer.Nummer); - console.log('Customer:', customer); // Debug-Ausgabe - console.log('Customer link:', customerLink); // Debug-Ausgabe - card.innerHTML = ` -
-
${customer.Vorname} ${customer.Nachname}
-

- Kundennummer: ${customerLink}
- Fachrichtung: ${customer.Fachrichtung || 'N/A'}
- Adresse: ${createAddressLink(customer.Strasse, customer.PLZ, customer.Ort)}
- Telefon: ${createPhoneLink(customer.Tel)}
- E-Mail: ${createEmailLink(customer.mail)} -

-
- `; - resultsContainer.appendChild(card); - }); - - // Zeige die Anzahl der Treffer an - const totalResults = document.getElementById('total-results'); - if (totalResults) { - totalResults.textContent = `${data.total} Treffer gefunden`; - } + + const results = data.results; + if (results.length === 0) { + resultsDiv.innerHTML = '
Keine Ergebnisse gefunden
'; } else { - resultsContainer.innerHTML = '
Keine Ergebnisse gefunden.
'; + results.forEach(customer => { + const card = document.createElement('div'); + card.className = 'customer-card'; + card.innerHTML = ` +
+ Kundennummer: ${createCustomerLink(customer.Nummer)}
+ Name: ${customer.Name}
+ Fachrichtung: ${customer.Fachrichtung}
+ Adresse: ${createAddressLink(customer.Strasse, customer.PLZ, customer.Ort)}
+ Telefon: ${createPhoneLink(customer.Telefon)} +
+ + `; + resultsDiv.appendChild(card); + }); } + // Aktualisiere die Anzahl der Treffer + const generalCount = document.getElementById('generalCount'); + generalCount.textContent = results.length > 0 ? `${results.length} Treffer gefunden` : ''; + generalCount.classList.toggle('visible', results.length > 0); }) .catch(error => { - console.error('Fehler:', error); - document.getElementById('results').innerHTML = - `
${error.message}
`; - lastResults = []; - updateResultCounts(); + console.error('Fehler bei der Suche:', error); + resultsDiv.innerHTML = '
Ein Fehler ist aufgetreten
'; }) .finally(() => { - document.getElementById('loading').style.display = 'none'; + loadingDiv.style.display = 'none'; }); }