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

Reset-Icons für alle Suchfelder hinzugefügt

Browse Source
This commit is contained in:
elpatron
2025-03-17 20:37:10 +01:00
parent 5eaa79ed62
commit ff4f322ca4
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
templates/index.html
View File

@@ -43,12 +43,23 @@
.phone-link:hover, .email-link:hover, .address-link:hover, .customer-link:hover { .phone-link:hover, .email-link:hover, .address-link:hover, .customer-link:hover {
text-decoration: underline; text-decoration: underline;
} }
.search-icon { .search-icon, .reset-icon {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #6c757d; color: #6c757d;
cursor: pointer;
display: none;
}
.reset-icon {
right: 35px;
}
.reset-icon.visible {
display: block;
}
.search-icon.visible {
display: block;
} }
.customer-number { .customer-number {
color: #6c757d; color: #6c757d;
@@ -129,21 +140,25 @@
<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...">
<i class="fa-solid fa-xmark reset-icon" id="nameReset"></i>
<span id="nameCount" class="result-count"></span> <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...">
<i class="fa-solid fa-xmark reset-icon" id="ortReset"></i>
<span id="ortCount" class="result-count"></span> <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...">
<i class="fa-solid fa-xmark reset-icon" id="kundennummerReset"></i>
<span id="kundennummerCount" class="result-count"></span> <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...">
<i class="fa-solid fa-xmark reset-icon" id="fachrichtungReset"></i>
<span id="fachrichtungCount" class="result-count"></span> <span id="fachrichtungCount" class="result-count"></span>
</div> </div>
</div> </div>
@@ -151,6 +166,7 @@
<div class="input-group mb-4 position-relative"> <div class="input-group mb-4 position-relative">
<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...">
<i class="fa-solid fa-xmark reset-icon" id="searchReset"></i>
<span class="search-icon">🔍</span> <span class="search-icon">🔍</span>
<span id="generalCount" class="result-count"></span> <span id="generalCount" class="result-count"></span>
</div> </div>
@@ -366,10 +382,27 @@
document.getElementById('searchInput') document.getElementById('searchInput')
]; ];
searchInputs.forEach(input => { const resetIcons = [
document.getElementById('nameReset'),
document.getElementById('ortReset'),
document.getElementById('kundennummerReset'),
document.getElementById('fachrichtungReset'),
document.getElementById('searchReset')
];
searchInputs.forEach((input, index) => {
input.addEventListener('input', function() { input.addEventListener('input', function() {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
searchTimeout = setTimeout(searchCustomers, 300); searchTimeout = setTimeout(searchCustomers, 300);
// Reset-Icon anzeigen/verstecken
resetIcons[index].classList.toggle('visible', this.value.length > 0);
});
// Reset-Funktionalität
resetIcons[index].addEventListener('click', function() {
searchInputs[index].value = '';
searchCustomers();
}); });
}); });