diff --git a/templates/index.html b/templates/index.html index 633aaaa..a6edf76 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; + } @@ -211,8 +238,8 @@ function createPhoneLink(phone) { if (!phone) return 'N/A'; - const cleaned = phone.replace(/\D/g, ''); - const telLink = '0' + cleaned; + const cleaned = phone.replace(/[^\d+\s]/g, ''); + const telLink = cleaned.startsWith('+') ? cleaned : '0' + cleaned.replace(/\s/g, ''); return `${phone}`; } @@ -221,11 +248,55 @@ return `${email}`; } + function highlightText(text, searchTerms) { + // Konvertiere text zu String und prüfe auf null/undefined + const textStr = String(text || ''); + if (!textStr || !searchTerms || searchTerms.length === 0) return textStr; + + // Escapen der Suchbegriffe für reguläre Ausdrücke + const escapedTerms = searchTerms.map(term => + String(term || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ).filter(term => term.length > 0); + + if (escapedTerms.length === 0) return textStr; + + // Erstelle einen temporären div-Element + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = textStr; + + // Funktion zum Hervorheben von Text + function highlightNode(node) { + if (node.nodeType === 3) { // Text node + const text = node.textContent; + let newText = text; + + escapedTerms.forEach(term => { + const regex = new RegExp(`(${term})`, 'gi'); + newText = newText.replace(regex, '$1'); + }); + + if (newText !== text) { + const span = document.createElement('span'); + span.innerHTML = newText; + node.parentNode.replaceChild(span, node); + } + } else if (node.nodeType === 1) { // Element node + // Überspringe mark-Tags und Links + if (node.tagName !== 'MARK' && node.tagName !== 'A') { + Array.from(node.childNodes).forEach(highlightNode); + } + } + } + + highlightNode(tempDiv); + return tempDiv.innerHTML; + } + function createAddressLink(street, plz, city) { if (!street || !plz || !city) return 'N/A'; const address = `${street}, ${plz} ${city}`; const searchQuery = encodeURIComponent(address); - return `${address} + return `${address} @@ -268,85 +339,128 @@ } 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(); + 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() || ''; + + // Sammle alle nicht-leeren Suchbegriffe + const searchTerms = [query, fachrichtung, ort, name, telefon, kundennummer] + .filter(term => term && term.length > 0); + + // Prüfe, ob alle Suchfelder leer sind + if (searchTerms.length === 0) { + const resultsDiv = document.getElementById('results'); + const generalCount = document.getElementById('generalCount'); + resultsDiv.innerHTML = ''; + generalCount.textContent = ''; + generalCount.classList.remove('visible'); 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 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'; + + // Debug-Ausgabe für die Kundendaten + console.log('Kundendaten:', customer); + console.log('Alle verfügbaren Felder:', Object.keys(customer)); + console.log('Telefon-bezogene Felder:', { + Telefon: customer.Telefon, + Telefonnummer: customer.Telefonnummer, + telefon: customer.telefon, + telefonnummer: customer.telefonnummer, + phone: customer.phone, + 'phone.number': customer.phone?.number + }); + + // Erstelle die Adresse mit Hervorhebung + const address = `${customer.Strasse || ''}, ${customer.PLZ || ''} ${customer.Ort || ''}`; + const addressLink = createAddressLink(customer.Strasse, customer.PLZ, customer.Ort); + const highlightedAddress = highlightText(addressLink, searchTerms); + + // Erstelle die Kundennummer mit Hervorhebung + const highlightedNumber = highlightText(customer.Nummer, searchTerms); + const customerLink = createCustomerLink(customer.Nummer); + + // Erstelle die Telefonnummern mit Hervorhebung + let phoneNumber = ''; + let companyPhone = ''; + let mobilePhone = ''; + + if (typeof customer === 'object') { + phoneNumber = customer.Tel || ''; + companyPhone = customer['Tele Firma'] || ''; + mobilePhone = customer.Handy || ''; + } + + const phoneLink = createPhoneLink(phoneNumber); + const companyPhoneLink = createPhoneLink(companyPhone); + const mobilePhoneLink = createPhoneLink(mobilePhone); + + const highlightedPhone = highlightText(phoneLink, searchTerms); + const highlightedCompanyPhone = highlightText(companyPhoneLink, searchTerms); + const highlightedMobilePhone = highlightText(mobilePhoneLink, searchTerms); + + card.innerHTML = ` +
+ Kundennummer: ${customerLink}
+ Name: ${highlightText(`${customer.Vorname || ''} ${customer.Nachname || ''}`, searchTerms)}
+ Fachrichtung: ${highlightText(customer.Fachrichtung || '', searchTerms)}
+ Adresse: ${highlightedAddress}
+ Telefon: ${highlightedPhone}
+ Firma: ${highlightedCompanyPhone}
+ Mobil: ${highlightedMobilePhone} +
+ + `; + 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'; }); }