From 3d91fe8f3a085f0b68c9cce2efe27ab850dd7ec1 Mon Sep 17 00:00:00 2001
From: Shy <shy@posteo.de>
Date: Sat, 4 May 2024 20:38:32 +0200
Subject: [PATCH] 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 7805a9b..687ad87 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
+}