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/form.html

@@ -22,7 +22,7 @@
       <b>Coordinates</b> (click on map)
 
       <div id="map" title="Map for reference only. Not to scale!">
-        <img src="80x80.svg" onclick="mapClick(event)">
+        <img src="map.svg" onclick="mapClick(event)">
         <div id="mapgrid"></div>
       </div>
 

static/index.html

@@ -12,12 +12,13 @@
     <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>
       <div id="mapcontainer">
         <div id="map">
-          <img src="80x80.svg" title="Map for reference only. Not to scale!">
+          <img src="map.svg" title="Map for reference only. Not to scale!">
           <div id="mapgrid"></div>
         </div>
         <p id="mapnote"></p>

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();
-}
+}

static/map.svg

@@ -34,10 +34,17 @@
          id="use1"
          style="stroke-width:0.395906;stroke-linecap:square;paint-order:stroke markers fill;stop-color:#000000"
          d="M 0,0 H 13.9194 V 13.919 H 0 Z M 28.4189,0.696 H 40.9464 V 13.223 H 28.4189 Z M 56.8377,1.392 H 67.9733 V 12.527 H 56.8377 Z m 28.4189,0.696 h 9.7436 v 9.743 h -9.7436 z m 28.4188,0.696 h 8.3517 v 8.351 h -8.3517 z m 28.4189,0.696 h 6.9597 v 6.959 h -6.9597 z m 28.4189,0.696 h 5.5677 v 5.567 h -5.5677 z m 28.4188,0.696 h 4.1758 v 4.175 h -4.1758 z m 28.4189,0.696 h 2.7839 v 2.783 h -2.7839 z m 28.4188,0.695 h 1.392 v 1.392 h -1.392 z m 28.4189,0.696 z m -270.3272,6.96 h 13.9195 v 13.92 H 13.8614 Z m 28.4189,0.696 H 54.8078 V 27.143 H 42.2803 Z m 28.4189,0.696 H 81.8347 V 26.447 H 70.6992 Z m 28.4188,0.696 h 9.7436 v 9.744 H 99.118 Z m 28.4189,0.696 h 8.3516 v 8.352 h -8.3516 z m 28.4188,0.696 h 6.9598 v 6.96 h -6.9598 z m 28.4189,0.696 h 5.5678 v 5.568 h -5.5678 z m 28.4189,0.696 h 4.1758 v 4.176 h -4.1758 z m 28.4188,0.696 h 2.7839 v 2.784 h -2.7839 z m 28.4189,0.696 h 1.3919 v 1.392 h -1.3919 z m 28.4188,0.696 z" /></pattern></defs><g
-     id="layer6"><path
+     id="layer6"><rect
+       style="display:none;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:6.35;stroke-miterlimit:6"
+       id="rect1"
+       width="381"
+       height="190.49998"
+       x="-1.0583357"
+       y="20.10833"
+       transform="translate(1.0583357,-20.10833)" /><path
        id="path1"
        style="display:inline;fill:#f9f9f9;fill-rule:evenodd;stroke:none;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="M 9.524998 30.691664 L 9.524998 94.191666 L 73.025001 94.191666 L 73.025001 83.608332 L 83.608334 83.608332 L 83.608334 94.191666 L 147.10834 94.191666 L 147.10834 178.85834 L 205.31667 178.85834 L 215.90001 178.85834 L 252.94167 178.85834 L 252.94167 168.275 L 263.52501 178.85834 L 295.27501 178.85834 L 295.27501 200.025 L 369.35835 200.025 L 369.35835 147.10833 L 327.02501 147.10833 L 327.02501 104.775 L 305.85834 104.775 L 305.85834 94.191666 L 231.77501 94.191666 L 231.77501 30.691664 L 83.608334 30.691664 L 83.608334 41.274997 L 73.025001 41.274997 L 73.025001 30.691664 L 9.524998 30.691664 z M 295.27501 147.10833 L 305.85834 147.10833 L 305.85834 157.69167 L 295.27501 157.69167 L 295.27501 147.10833 z "
+       d="M 9.524998 30.691664 L 9.524998 94.191666 L 73.025001 94.191666 L 73.025001 83.608332 L 83.608334 83.608332 L 83.608334 94.191666 L 147.10834 94.191666 L 147.10834 178.85834 L 205.31667 178.85834 L 215.90001 178.85834 L 252.94167 178.85834 L 252.94167 168.275 L 263.52501 178.85834 L 295.27501 178.85834 L 295.27501 200.025 L 369.35835 200.025 L 369.35835 147.10833 L 327.02501 147.10833 L 327.02501 104.775 L 305.85834 104.775 L 305.85834 94.191666 L 231.77501 94.191666 L 231.77501 30.691664 L 83.608334 30.691664 L 83.608334 41.274997 L 73.025001 41.274997 L 73.025001 30.691664 L 9.524998 30.691664 z M 231.77501 147.10833 L 242.35834 147.10833 L 242.35834 157.69167 L 231.77501 157.69167 L 231.77501 147.10833 z M 295.27501 147.10833 L 305.85834 147.10833 L 305.85834 157.69167 L 295.27501 157.69167 L 295.27501 147.10833 z "
        transform="translate(1.0583357,-20.10833)" /><path
        style="display:inline;fill:#f9f9f9;fill-rule:evenodd;stroke:none;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
        d="M 9.5249992,115.35833 H 51.858329 v 10.58333 h 74.083331 v 63.49999 H 62.441661 v -10.58333 l -10.583332,1e-5 v 21.16666 H 9.5250192 Z"
@@ -343,14 +350,11 @@
        style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
        d="m 305.85832,157.69165 h -10.58334 v -10.58332 h 10.58334 l 1e-5,31.74999 h -10.58334"
        id="path11" /><path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="m 231.77498,178.85833 v -31.75 h 21.16666"
+       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.175;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 231.77498,178.85833 v -31.75 l 10.58335,-1e-5 0,10.58334"
        id="path12" /><path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="m 252.94165,157.69166 1e-5,10.58333"
-       id="path13" /><path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="M 305.85831,157.69166 H 263.52498 V 147.10832"
+       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.175;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 305.85831,157.69166 H 263.52498"
        id="path14" /><path
        style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
        d="m 62.441662,178.85832 v -31.75"
@@ -364,9 +368,12 @@
        style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
        d="M 9.5249992,115.35833 H 51.858329 v 10.58333 h 74.083331 v 63.49999 H 62.441661 v -10.58333 l -10.583332,1e-5 v 21.16666 H 9.5250192 Z"
        id="path107" /><path
-       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;stroke-miterlimit:2"
        d="m 215.89999,178.85832 h 37.04167 v -10.58333 l 10.58333,10.58333 h 31.75 v 21.16667 l 74.08334,-1e-5 -1e-5,-52.91666 -42.33334,0 10e-6,-42.33333 H 305.85833 V 94.19166 l -74.08334,-2e-6 V 30.691661 l -148.166664,2e-6 4e-6,10.583333 H 73.024997 l -4e-6,-10.583333 -63.4999959,-10e-7 7.4e-6,63.499995 63.4999965,10e-7 -4e-6,-10.583331 H 83.60833 l 4e-6,10.583331 63.499996,-10e-7 -1e-5,84.666673 58.20834,-1e-5"
-       id="path106" /></g><g
+       id="path106" /><path
+       style="fill:none;fill-rule:evenodd;stroke:#333333;stroke-width:3.17500012;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
+       d="m 231.77499,157.69166 h 21.16667"
+       id="path13" /></g><g
      id="layer4"><path
        d="m 218.56941,120 h 2.66667 v -6.66668 h 2.85334 c 3.78667,0 6.53334,-1.76 6.53334,-5.54667 0,-3.92 -2.69334,-5.25334 -6.53334,-5.25334 h -5.52001 z m 2.66667,-8.82668 v -6.50667 h 2.58667 c 2.77334,0 4.16,0.8 4.16,3.12 0,2.32 -1.33333,3.38667 -4.16,3.38667 z m 21.57337,9.14668 c 1.46667,0 2.34667,-0.26667 3.6,-0.74667 l -0.64,-1.97333 c -0.88,0.37333 -1.62667,0.56 -2.34667,0.56 -1.44,0 -2.45333,-0.74667 -2.45333,-2.56001 v -14.50668 h -7.12001 v 2.10667 h 4.48 v 12.24001 c 0,3.14667 1.57334,4.88001 4.48001,4.88001 z m 13.70669,-11.60001 c 2.02667,0 3.36001,1.2 3.54668,3.57333 h -7.60001 c 0.4,-2.32 2.08,-3.57333 4.05333,-3.57333 z m 0.32,11.60001 c 2.00001,0 3.73334,-0.66667 5.06668,-1.54667 l -0.93334,-1.68 c -1.17333,0.72 -2.34667,1.14667 -3.78667,1.14667 -2.56,0 -4.48,-1.30667 -4.77334,-4.00001 h 9.92001 c 0.0533,-0.34666 0.10667,-0.88 0.10667,-1.44 0,-3.62667 -2.16,-6.16001 -6.00001,-6.16001 -3.46667,0 -6.66667,2.58667 -6.66667,6.82668 0,4.34667 3.12,6.85334 7.06667,6.85334 z m 9.54669,-0.32 h 2.64001 v -8.98668 c 1.33333,-1.38667 2.32,-2.08 3.70667,-2.08 1.97333,0 2.72,1.06667 2.72,3.33334 V 120 h 2.64001 v -8.08001 c 0,-3.38667 -1.38667,-5.28001 -4.42668,-5.28001 -2.02667,0 -3.49333,1.06667 -4.8,2.42667 h -0.10667 l -0.21333,-2.10667 h -2.16001 z m 20.08004,0.32 c 1.78667,0 3.6,-0.93333 4.98667,-2 h 0.08 l 0.21334,1.68 h 2.16 v -7.84001 c 0,-3.44 -1.84,-5.52001 -5.44001,-5.52001 -2.26667,0 -4.42667,0.96 -5.86667,1.84001 l 0.98667,1.78666 c 1.28,-0.74666 2.82667,-1.46666 4.42667,-1.46666 2.32,0 3.17334,1.30666 3.25334,2.90667 -6.56001,0.50666 -9.20002,1.92 -9.20002,4.85334 0,2.29333 1.89334,3.76 4.40001,3.76 z m 0.74667,-2.10667 c -1.41334,0 -2.58667,-0.53333 -2.58667,-1.84 0,-1.57334 1.52,-2.58667 6.64001,-2.98667 V 116.48 c -1.33334,1.09333 -2.66667,1.73333 -4.05334,1.73333 z M 299.71623,120 h 2.64 v -7.41334 c 1.44,-2.61334 3.25334,-3.57334 5.12001,-3.57334 0.98667,0 1.49333,0.13333 2.37334,0.42667 l 0.58666,-2.26667 c -0.8,-0.37334 -1.54667,-0.53334 -2.56,-0.53334 -2.32,0 -4.34667,1.25334 -5.68001,3.36001 h -0.08 l -0.21333,-3.04001 h -2.18667 z m 20.48004,0.32 c 3.84,0 5.97334,-1.78667 5.97334,-3.97334 0,-2.02667 -1.06667,-3.12 -5.33334,-4.05334 -2.53334,-0.53333 -3.57334,-0.96 -3.57334,-1.97333 0,-0.90667 0.72,-1.65334 2.69334,-1.65334 1.6,0 3.09333,0.50667 4.34667,1.33334 l 1.22667,-1.65334 c -1.30667,-0.88 -3.28001,-1.70667 -5.33334,-1.70667 -3.62668,0 -5.57334,1.62667 -5.57334,3.81334 0,1.97334 1.62666,3.14667 5.06667,3.86667 3.28,0.69334 3.81334,1.25334 3.81334,2.18667 0,0.98667 -0.96,1.78667 -2.96001,1.78667 -2.26667,0 -4.02667,-0.64 -5.54667,-1.70667 l -1.17334,1.70667 c 1.57334,1.09334 3.89334,2.02667 6.37335,2.02667 z m 14.26669,0 c 1.78667,0 3.60001,-0.93333 4.98667,-2 h 0.08 l 0.21334,1.68 h 2.16 v -7.84001 c 0,-3.44 -1.84,-5.52001 -5.44001,-5.52001 -2.26667,0 -4.42667,0.96 -5.86667,1.84001 l 0.98667,1.78666 c 1.28,-0.74666 2.82667,-1.46666 4.42667,-1.46666 2.32,0 3.17334,1.30666 3.25334,2.90667 -6.56001,0.50666 -9.20001,1.92 -9.20001,4.85334 0,2.29333 1.89333,3.76 4.4,3.76 z m 0.74667,-2.10667 c -1.41334,0 -2.58667,-0.53333 -2.58667,-1.84 0,-1.57334 1.52,-2.58667 6.64001,-2.98667 V 116.48 c -1.33334,1.09333 -2.66667,1.73333 -4.05334,1.73333 z m 15.25336,2.10667 c 1.78667,0 3.60001,-0.93333 4.98667,-2 h 0.08 L 355.743,120 h 2.16 v -7.84001 c 0,-3.44 -1.84,-5.52001 -5.44001,-5.52001 -2.26667,0 -4.42667,0.96 -5.86667,1.84001 l 0.98667,1.78666 c 1.28,-0.74666 2.82667,-1.46666 4.42667,-1.46666 2.32,0 3.17334,1.30666 3.25334,2.90667 -6.56001,0.50666 -9.20001,1.92 -9.20001,4.85334 0,2.29333 1.89333,3.76 4.4,3.76 z m 0.74667,-2.10667 c -1.41334,0 -2.58667,-0.53333 -2.58667,-1.84 0,-1.57334 1.52,-2.58667 6.64001,-2.98667 V 116.48 c -1.33334,1.09333 -2.66667,1.73333 -4.05334,1.73333 z m 19.60003,2.10667 c 1.46667,0 2.34667,-0.26667 3.60001,-0.74667 l -0.64,-1.97333 c -0.88,0.37333 -1.62667,0.56 -2.34667,0.56 -1.44,0 -2.45334,-0.74667 -2.45334,-2.56001 v -14.50668 h -7.12001 v 2.10667 h 4.48001 v 12.24001 c 0,3.14667 1.57333,4.88001 4.48,4.88001 z"
        id="text76"