Display item counter next to search form. #6

Merged
snoopy merged 5 commits from item-counter into main 2024-05-07 22:36:49 +02:00
Showing only changes of commit 0dcace1bab - Show all commits

View file

@ -17,6 +17,7 @@ function renderItems() {
const container = document.getElementById('results'); const container = document.getElementById('results');
const template = document.getElementById('item'); const template = document.getElementById('item');
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
let count = 0;
for (const [id, item] of Object.entries(items)) { for (const [id, item] of Object.entries(items)) {
const clone = template.content.cloneNode(true); const clone = template.content.cloneNode(true);
@ -32,11 +33,13 @@ function renderItems() {
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`; clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
if (item.hidden) { if (item.hidden) {
clone.querySelector(".result").classList.add('hidden') clone.querySelector(".result").classList.add('hidden')
}; } else {
count++;
}
container.appendChild(clone); container.appendChild(clone);
}; };
loading.remove(); loading.remove();
updateCounter(); updateCounter(count);
} }
function getLocString(items, item) { function getLocString(items, item) {
@ -68,6 +71,7 @@ function search(e) {
const searchAttrs = ['id', 'name', 'type', 'note', 'content']; const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
const query = e.target.value; const query = e.target.value;
const regex = new RegExp(query, 'i') const regex = new RegExp(query, 'i')
let count = 0;
for (const elem of document.getElementsByClassName('result')) { for (const elem of document.getElementsByClassName('result')) {
const item = items[elem.id.slice(5)]; const item = items[elem.id.slice(5)];
@ -86,31 +90,26 @@ function search(e) {
if (found) { if (found) {
elem.classList.remove('filtered'); elem.classList.remove('filtered');
count++;
} else { } else {
elem.classList.add('filtered'); elem.classList.add('filtered');
} }
} }
updateCounter(); updateCounter(count);
} }
function updateCounter(){ function updateCounter(count){
let count = 0; const itemcount = document.getElementById('itemcount');
for (const elem of document.getElementsByClassName('result')) {
if (!elem.matches('.filtered')) {
count++;
}
}
switch(count) { switch(count) {
case 0: case 0:
document.getElementById('itemcount').textContent = 'No items found.'; itemcount.textContent = 'No items found.';
break; break;
case 1: case 1:
document.getElementById('itemcount').textContent = '1 item found.'; itemcount.textContent = '1 item found.';
break; break;
default: default:
document.getElementById('itemcount').textContent = `${count} items found.`; itemcount.textContent = `${count} items found.`;
break; break;
} }
} }