diff --git a/static/c4.css b/static/c4.css index b9a0d3a..abeae82 100644 --- a/static/c4.css +++ b/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; diff --git a/static/index.html b/static/index.html index b1d8ceb..07dceb7 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,7 @@
+

diff --git a/static/index.js b/static/index.js index 2d7b1aa..f7bb046 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); @@ -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(); -} \ No newline at end of file +} diff --git a/static/map.svg b/static/map.svg index 66e3ac3..4210fd9 100644 --- a/static/map.svg +++ b/static/map.svg @@ -7,58 +7,17 @@ viewBox="0 0 381.00001 190.50001" version="1.1" id="svg1" - inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" - sodipodi:docname="chaoslabor.svg" xml:space="preserve" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" - xmlns:svg="http://www.w3.org/2000/svg">ABCDEFGHIJKLMNOP12345678910111213141516171819202122232425262728293031323334PlenarsaalKücheWohnzimmerWC++WCBällebadServer-raumFnordcenterKeller