elpatron/medi-customers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Trefferzähler für alle Suchfelder hinzugefügt

Browse Source
This commit is contained in:
elpatron
2025-03-17 20:18:17 +01:00
parent fc6537439f
commit 2eddb3ad20
1 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
templates/index.html
View File

@@ -97,6 +97,21 @@
.search-field { .search-field {
position: relative; position: relative;
} }
.result-count {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background-color: #e9ecef;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8em;
color: #6c757d;
display: none;
}
.result-count.visible {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
@@ -108,18 +123,22 @@
<div class="search-field"> <div class="search-field">
<input type="text" id="nameInput" class="form-control" <input type="text" id="nameInput" class="form-control"
placeholder="Name..."> placeholder="Name...">
<span id="nameCount" class="result-count"></span>
</div> </div>
<div class="search-field"> <div class="search-field">
<input type="text" id="ortInput" class="form-control" <input type="text" id="ortInput" class="form-control"
placeholder="Ort..."> placeholder="Ort...">
<span id="ortCount" class="result-count"></span>
</div> </div>
<div class="search-field"> <div class="search-field">
<input type="text" id="kundennummerInput" class="form-control" <input type="text" id="kundennummerInput" class="form-control"
placeholder="Kundennummer..."> placeholder="Kundennummer...">
<span id="kundennummerCount" class="result-count"></span>
</div> </div>
<div class="search-field"> <div class="search-field">
<input type="text" id="fachrichtungInput" class="form-control" <input type="text" id="fachrichtungInput" class="form-control"
placeholder="Fachrichtung..."> placeholder="Fachrichtung...">
<span id="fachrichtungCount" class="result-count"></span>
</div> </div>
</div> </div>
@@ -127,6 +146,7 @@
<input type="text" id="searchInput" class="form-control form-control-lg" <input type="text" id="searchInput" class="form-control form-control-lg"
placeholder="Allgemeine Suche..."> placeholder="Allgemeine Suche...">
<span class="search-icon">🔍</span> <span class="search-icon">🔍</span>
<span id="generalCount" class="result-count"></span>
</div> </div>
<div id="loading" class="loading"> <div id="loading" class="loading">
@@ -151,6 +171,7 @@
<script> <script>
let searchTimeout; let searchTimeout;
let lastResults = [];
function createPhoneLink(phone) { function createPhoneLink(phone) {
if (!phone) return 'N/A'; if (!phone) return 'N/A';
@@ -205,6 +226,44 @@
} }
} }
function updateResultCounts() {
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 query = document.getElementById('searchInput').value;
// Zähler für spezifische Felder
const nameCount = lastResults.filter(customer =>
(customer.Vorname + ' ' + customer.Nachname).toLowerCase().includes(name.toLowerCase())
).length;
document.getElementById('nameCount').textContent = nameCount;
document.getElementById('nameCount').classList.toggle('visible', nameCount > 0);
const ortCount = lastResults.filter(customer =>
customer.Ort?.toLowerCase().includes(ort.toLowerCase())
).length;
document.getElementById('ortCount').textContent = ortCount;
document.getElementById('ortCount').classList.toggle('visible', ortCount > 0);
const kundennummerCount = lastResults.filter(customer =>
customer.Nummer?.toString().includes(kundennummer)
).length;
document.getElementById('kundennummerCount').textContent = kundennummerCount;
document.getElementById('kundennummerCount').classList.toggle('visible', kundennummerCount > 0);
const fachrichtungCount = lastResults.filter(customer =>
customer.Fachrichtung?.toLowerCase().includes(fachrichtung.toLowerCase())
).length;
document.getElementById('fachrichtungCount').textContent = fachrichtungCount;
document.getElementById('fachrichtungCount').classList.toggle('visible', fachrichtungCount > 0);
// Zähler für allgemeine Suche
const generalCount = lastResults.length;
document.getElementById('generalCount').textContent = generalCount;
document.getElementById('generalCount').classList.toggle('visible', generalCount > 0);
}
function searchCustomers() { function searchCustomers() {
const name = document.getElementById('nameInput').value; const name = document.getElementById('nameInput').value;
const ort = document.getElementById('ortInput').value; const ort = document.getElementById('ortInput').value;
@@ -215,6 +274,8 @@
// Prüfe, ob mindestens ein Suchfeld ausgefüllt ist // Prüfe, ob mindestens ein Suchfeld ausgefüllt ist
if (!name && !ort && !kundennummer && !fachrichtung && !query) { if (!name && !ort && !kundennummer && !fachrichtung && !query) {
document.getElementById('results').innerHTML = ''; document.getElementById('results').innerHTML = '';
lastResults = [];
updateResultCounts();
return; return;
} }
@@ -245,6 +306,8 @@
if (data.length === 0) { if (data.length === 0) {
resultsDiv.innerHTML = '<div class="alert alert-info">Keine Ergebnisse gefunden.</div>'; resultsDiv.innerHTML = '<div class="alert alert-info">Keine Ergebnisse gefunden.</div>';
lastResults = [];
updateResultCounts();
return; return;
} }
@@ -272,11 +335,16 @@
`; `;
resultsDiv.appendChild(card); resultsDiv.appendChild(card);
}); });
lastResults = data;
updateResultCounts();
}) })
.catch(error => { .catch(error => {
console.error('Fehler:', error); console.error('Fehler:', error);
document.getElementById('results').innerHTML = document.getElementById('results').innerHTML =
`<div class="alert alert-danger">${error.message}</div>`; `<div class="alert alert-danger">${error.message}</div>`;
lastResults = [];
updateResultCounts();
}) })
.finally(() => { .finally(() => {
document.getElementById('loading').style.display = 'none'; document.getElementById('loading').style.display = 'none';