From 5028b289529d250613a822eabefa646aef2fa105 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 20:38:32 +0200 Subject: [PATCH 1/5] Display item counter next to search form. --- static/c4.css | 5 +++++ static/index.js | 26 +++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/static/c4.css b/static/c4.css index c0ca189..7d5a573 100644 --- a/static/c4.css +++ b/static/c4.css @@ -7,6 +7,11 @@ h1, h1 a { color: #dfaa37; /* C4 Yellow */ } +#itemcount { + display: inline-block; + margin-right: 1ch; +} + #map { border: 1px solid #202020; background: #4d4d4d; diff --git a/static/index.js b/static/index.js index 2d7b1aa..150c666 100644 --- a/static/index.js +++ b/static/index.js @@ -36,6 +36,7 @@ function renderItems() { container.appendChild(clone); }; loading.remove(); + updateCounter(); } function getLocString(items, item) { @@ -89,6 +90,29 @@ function search(e) { elem.classList.add('filtered'); } } + updateCounter(); +} + +function updateCounter(){ + let count = 0; + + for (const elem of document.getElementsByClassName('result')) { + if (!elem.matches('.filtered')) { + count++; + } + } + + switch(count) { + case 0: + document.getElementById('itemcount').textContent = `No items found.`; + break; + case 1: + document.getElementById('itemcount').textContent = `${count} item found.`; + break; + default: + document.getElementById('itemcount').textContent = `${count} items found.`; + break; + } } function showhidden(e){ @@ -118,4 +142,4 @@ function showItem(e) { function hideItem(e) { clearMap(); -} \ No newline at end of file +} -- 2.45.2 From 44ced92ef535b463a27ecf20f590cba504a7d099 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 22:32:03 +0200 Subject: [PATCH 2/5] Added missing p-element. --- static/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/static/index.html b/static/index.html index c656402..13f0ef7 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,7 @@
+

-- 2.45.2 From 4deb81600eb303e72ea0a948966929b7519f7d15 Mon Sep 17 00:00:00 2001 From: Shy Date: Sun, 5 May 2024 07:42:20 +0200 Subject: [PATCH 3/5] Replaced unnecessary template strings. --- static/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/index.js b/static/index.js index 150c666..dfcb014 100644 --- a/static/index.js +++ b/static/index.js @@ -104,10 +104,10 @@ function updateCounter(){ switch(count) { case 0: - document.getElementById('itemcount').textContent = `No items found.`; + document.getElementById('itemcount').textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = `${count} item found.`; + document.getElementById('itemcount').textContent = '1 item found.'; break; default: document.getElementById('itemcount').textContent = `${count} items found.`; -- 2.45.2 From 0dcace1bab7527cc2e745d22bd834803cf7c8d5c Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 14:29:30 +0200 Subject: [PATCH 4/5] Outsource counting to other functions --- static/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/static/index.js b/static/index.js index dfcb014..a79b6dd 100644 --- a/static/index.js +++ b/static/index.js @@ -17,6 +17,7 @@ function renderItems() { const container = document.getElementById('results'); const template = document.getElementById('item'); const loading = document.getElementById('loading'); + let count = 0; for (const [id, item] of Object.entries(items)) { const clone = template.content.cloneNode(true); @@ -32,11 +33,13 @@ function renderItems() { clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`; if (item.hidden) { clone.querySelector(".result").classList.add('hidden') - }; + } else { + count++; + } container.appendChild(clone); }; loading.remove(); - updateCounter(); + updateCounter(count); } function getLocString(items, item) { @@ -68,6 +71,7 @@ function search(e) { const searchAttrs = ['id', 'name', 'type', 'note', 'content']; const query = e.target.value; const regex = new RegExp(query, 'i') + let count = 0; for (const elem of document.getElementsByClassName('result')) { const item = items[elem.id.slice(5)]; @@ -86,31 +90,26 @@ function search(e) { if (found) { elem.classList.remove('filtered'); + count++; } else { elem.classList.add('filtered'); } } - updateCounter(); + updateCounter(count); } -function updateCounter(){ - let count = 0; - - for (const elem of document.getElementsByClassName('result')) { - if (!elem.matches('.filtered')) { - count++; - } - } +function updateCounter(count){ + const itemcount = document.getElementById('itemcount'); switch(count) { case 0: - document.getElementById('itemcount').textContent = 'No items found.'; + itemcount.textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = '1 item found.'; + itemcount.textContent = '1 item found.'; break; default: - document.getElementById('itemcount').textContent = `${count} items found.`; + itemcount.textContent = `${count} items found.`; break; } } -- 2.45.2 From 7406efc2fa4c8566f1b1e877d4da51c927d958e2 Mon Sep 17 00:00:00 2001 From: Shy Date: Tue, 7 May 2024 15:00:04 +0200 Subject: [PATCH 5/5] Indicate failed searches by background color. --- static/c4.css | 5 +++++ static/index.js | 8 ++++++++ 2 files changed, 13 insertions(+) diff --git a/static/c4.css b/static/c4.css index 7d5a573..3c2e3eb 100644 --- a/static/c4.css +++ b/static/c4.css @@ -7,6 +7,11 @@ h1, h1 a { color: #dfaa37; /* C4 Yellow */ } +#search.failed { + color: #200; + background-color: #ec6d5f; +} + #itemcount { display: inline-block; margin-right: 1ch; diff --git a/static/index.js b/static/index.js index a79b6dd..3be7022 100644 --- a/static/index.js +++ b/static/index.js @@ -95,6 +95,14 @@ function search(e) { elem.classList.add('filtered'); } } + + // Indicate failed search. + if (count) { + e.target.classList.remove('failed'); + } else { + e.target.classList.add('failed'); + } + updateCounter(count); } -- 2.45.2