Merge pull request 'Reintroduced item counter and fixed text in map.' (#9) from develop into main

Reviewed-on: #9

static/c4.css

@@ -7,8 +7,9 @@ h1, h1 a  {
     color: #dfaa37; /* C4 Yellow */
 }
 
-#search:focus {
-    outline: 2px solid #dfaa37;
+#search.failed {
+    color: #200;
+    background-color: #ec6d5f;
 }
 
 #map {
@@ -34,6 +35,11 @@ h1, h1 a  {
     display: none;
 }
 
+#itemcount {
+    display: inline-block;
+    margin-right: 1ch;
+}
+
 .result {
     background-color: #202020;
     border-color: #4d4d4d;

static/index.html

@@ -12,6 +12,7 @@
     <div id="grid">
       <div id="searchcontainer">
         <input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
+        <p id="itemcount"></p>
         <label for="showhidden">Show hidden items</label>
         <input type="checkbox" id="showhidden">
       </div>

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);
@@ -31,11 +32,14 @@ function renderItems() {
     clone.querySelector(".result").id = `item-${id}`;
     clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
     if (item.hidden) {
-      clone.querySelector(".result").classList.add('hidden')
-    };
+      clone.querySelector(".result").classList.add('hidden');
+    } else {
+      count++;
+    }
     container.appendChild(clone);
-  };
+  }
   loading.remove();
+  updateCounter(count);
 }
 
 function getLocString(items, item) {
@@ -67,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)];
@@ -85,10 +90,36 @@ function search(e) {
 
     if (found) {
       elem.classList.remove('filtered');
+      count++;
     } else {
       elem.classList.add('filtered');
     }
   }
+
+  // Indicate failed search.
+  if (count) {
+    e.target.classList.remove('failed');
+  } else {
+    e.target.classList.add('failed');
+  }
+
+  updateCounter(count);
+}
+
+function updateCounter(count) {
+  const itemcount = document.getElementById('itemcount');
+
+  switch(count) {
+    case 0:
+      itemcount.textContent = 'No items found.';
+      break;
+    case 1:
+      itemcount.textContent = '1 item found.';
+      break;
+    default:
+      itemcount.textContent = `${count} items found.`;
+      break;
+  }
 }
 
 function showhidden(e){
@@ -118,4 +149,4 @@ function showItem(e) {
 
 function hideItem(e) {
   clearMap();
-}
+}