Indicate failed searches by background color.

Reviewed-on: #5

static/c4.css

@@ -7,6 +7,16 @@ h1, h1 a  {
     color: #dfaa37; /* C4 Yellow */
 }
 
+#search.failed {
+    color: #200;
+    background-color: #ec6d5f;
+}
+
+#itemcount {
+    display: inline-block;
+    margin-right: 1ch;
+}
+
 #map {
   border: 1px solid #202020;
   background: #4d4d4d;
@@ -36,6 +46,21 @@ h1, h1 a  {
     font-size: smaller;
 }
 
+#knowntypes button {
+    color: #220;
+    background-color: #dfaa37;
+    border: 1px solid #220;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
+    font-weight: bolder;
+    cursor: pointer;
+}
+
+#knowntypes button:hover, #knowntypes button:focus {
+    background-color: #f5c251;
+}
+
 .btn {
   box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
 }

static/form.js

@@ -65,8 +65,22 @@ function knownTypes() {
       map[i.type] = true;
     }
   }
-  let types = Object.keys(map).sort().join(', ')
+
-  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
+  // Get location in document.
+  const known_types = document.getElementById('knowntypes');
+  known_types.textContent = `Known types: `;
+
+  // Create a button for every known type.
+  for (let label of Object.keys(map).sort()) {
+    btn = document.createElement('button');
+    btn.setAttribute('type', 'button');
+    btn.textContent = label;
+    btn.addEventListener('click', function() {
+      document.getElementById('type').value = label;
+    });
+
+    known_types.appendChild(btn);
+  }
 }
 
 function save() {

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);
@@ -32,10 +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(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();
-}
+}