diff --git a/templates/index.html b/templates/index.html index 53da748..a6edf76 100644 --- a/templates/index.html +++ b/templates/index.html @@ -238,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}`; } @@ -248,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} @@ -302,6 +346,20 @@ 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; + } + const resultsDiv = document.getElementById('results'); const loadingDiv = document.getElementById('loading'); loadingDiv.style.display = 'block'; @@ -334,13 +392,56 @@ 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: ${createCustomerLink(customer.Nummer)}
- Name: ${customer.Name}
- Fachrichtung: ${customer.Fachrichtung}
- Adresse: ${createAddressLink(customer.Strasse, customer.PLZ, customer.Ort)}
- Telefon: ${createPhoneLink(customer.Telefon)} + Kundennummer: ${customerLink}
+ Name: ${highlightText(`${customer.Vorname || ''} ${customer.Nachname || ''}`, searchTerms)}
+ Fachrichtung: ${highlightText(customer.Fachrichtung || '', searchTerms)}
+ Adresse: ${highlightedAddress}
+ Telefon: ${highlightedPhone}
+ Firma: ${highlightedCompanyPhone}
+ Mobil: ${highlightedMobilePhone}