From 9f95e704b9b95e59f335f082e9ee54160baa2f85 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 18:28:09 +0200 Subject: [PATCH 01/12] Added buttons for known types. --- static/c4.css | 15 +++++++++++++++ static/form.js | 18 ++++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/static/c4.css b/static/c4.css index 7805a9b..c0ca189 100644 --- a/static/c4.css +++ b/static/c4.css @@ -36,6 +36,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); } diff --git a/static/form.js b/static/form.js index a82d2a5..d5ab745 100644 --- a/static/form.js +++ b/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. + let 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() { From 3d91fe8f3a085f0b68c9cce2efe27ab850dd7ec1 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 20:38:32 +0200 Subject: [PATCH 02/12] 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 +} From d5f63d5e2c395fedada265fc35d390204d80430b Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 22:32:03 +0200 Subject: [PATCH 03/12] Added missing p-element. --- static/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/static/index.html b/static/index.html index c656402..13f0ef7 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,7 @@
+

From fbef8e043557ab80bbc9eb2d2a970515d472afe0 Mon Sep 17 00:00:00 2001 From: Shy Date: Sun, 5 May 2024 07:42:20 +0200 Subject: [PATCH 04/12] Replaced unnecessary template strings. --- static/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/index.js b/static/index.js index 150c666..dfcb014 100644 --- a/static/index.js +++ b/static/index.js @@ -104,10 +104,10 @@ function updateCounter(){ switch(count) { case 0: - document.getElementById('itemcount').textContent = `No items found.`; + document.getElementById('itemcount').textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = `${count} item found.`; + document.getElementById('itemcount').textContent = '1 item found.'; break; default: document.getElementById('itemcount').textContent = `${count} items found.`; From ccc243376d739dad2119c6d8f4a381de5f8eea36 Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 14:29:30 +0200 Subject: [PATCH 05/12] Outsource counting to other functions --- static/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/static/index.js b/static/index.js index dfcb014..a79b6dd 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); @@ -32,11 +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(); + updateCounter(count); } function getLocString(items, item) { @@ -68,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)]; @@ -86,31 +90,26 @@ function search(e) { if (found) { elem.classList.remove('filtered'); + count++; } else { elem.classList.add('filtered'); } } - updateCounter(); + updateCounter(count); } -function updateCounter(){ - let count = 0; - - for (const elem of document.getElementsByClassName('result')) { - if (!elem.matches('.filtered')) { - count++; - } - } +function updateCounter(count){ + const itemcount = document.getElementById('itemcount'); switch(count) { case 0: - document.getElementById('itemcount').textContent = 'No items found.'; + itemcount.textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = '1 item found.'; + itemcount.textContent = '1 item found.'; break; default: - document.getElementById('itemcount').textContent = `${count} items found.`; + itemcount.textContent = `${count} items found.`; break; } } From c9cda14f38631eb717593c0ceab9234fb005394c Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 14:42:21 +0200 Subject: [PATCH 06/12] Fix indentation and use const where preferable --- static/form.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/static/form.js b/static/form.js index d5ab745..d1affc1 100644 --- a/static/form.js +++ b/static/form.js @@ -67,19 +67,19 @@ function knownTypes() { } // Get location in document. - let known_types = document.getElementById('knowntypes'); + 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; - }); + btn = document.createElement('button'); + btn.setAttribute('type', 'button'); + btn.textContent = label; + btn.addEventListener('click', function() { + document.getElementById('type').value = label; + }); - known_types.appendChild(btn); + known_types.appendChild(btn); } } From 612b626557ed68d5d9e756a66da52a2022d16e2a Mon Sep 17 00:00:00 2001 From: Shy Date: Tue, 7 May 2024 15:00:04 +0200 Subject: [PATCH 07/12] Indicate failed searches by background color. --- static/c4.css | 5 +++++ static/index.js | 8 ++++++++ 2 files changed, 13 insertions(+) diff --git a/static/c4.css b/static/c4.css index 687ad87..8b46887 100644 --- a/static/c4.css +++ b/static/c4.css @@ -7,6 +7,11 @@ h1, h1 a { color: #dfaa37; /* C4 Yellow */ } +#search.failed { + color: #200; + background-color: #ec6d5f; +} + #itemcount { display: inline-block; margin-right: 1ch; diff --git a/static/index.js b/static/index.js index a79b6dd..3be7022 100644 --- a/static/index.js +++ b/static/index.js @@ -95,6 +95,14 @@ function search(e) { elem.classList.add('filtered'); } } + + // Indicate failed search. + if (count) { + e.target.classList.remove('failed'); + } else { + e.target.classList.add('failed'); + } + updateCounter(count); } From 5028b289529d250613a822eabefa646aef2fa105 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 20:38:32 +0200 Subject: [PATCH 08/12] 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 c0ca189..7d5a573 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 +} From 44ced92ef535b463a27ecf20f590cba504a7d099 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 22:32:03 +0200 Subject: [PATCH 09/12] Added missing p-element. --- static/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/static/index.html b/static/index.html index c656402..13f0ef7 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,7 @@
+

From 4deb81600eb303e72ea0a948966929b7519f7d15 Mon Sep 17 00:00:00 2001 From: Shy Date: Sun, 5 May 2024 07:42:20 +0200 Subject: [PATCH 10/12] Replaced unnecessary template strings. --- static/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/index.js b/static/index.js index 150c666..dfcb014 100644 --- a/static/index.js +++ b/static/index.js @@ -104,10 +104,10 @@ function updateCounter(){ switch(count) { case 0: - document.getElementById('itemcount').textContent = `No items found.`; + document.getElementById('itemcount').textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = `${count} item found.`; + document.getElementById('itemcount').textContent = '1 item found.'; break; default: document.getElementById('itemcount').textContent = `${count} items found.`; From 0dcace1bab7527cc2e745d22bd834803cf7c8d5c Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 14:29:30 +0200 Subject: [PATCH 11/12] Outsource counting to other functions --- static/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/static/index.js b/static/index.js index dfcb014..a79b6dd 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); @@ -32,11 +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(); + updateCounter(count); } function getLocString(items, item) { @@ -68,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)]; @@ -86,31 +90,26 @@ function search(e) { if (found) { elem.classList.remove('filtered'); + count++; } else { elem.classList.add('filtered'); } } - updateCounter(); + updateCounter(count); } -function updateCounter(){ - let count = 0; - - for (const elem of document.getElementsByClassName('result')) { - if (!elem.matches('.filtered')) { - count++; - } - } +function updateCounter(count){ + const itemcount = document.getElementById('itemcount'); switch(count) { case 0: - document.getElementById('itemcount').textContent = 'No items found.'; + itemcount.textContent = 'No items found.'; break; case 1: - document.getElementById('itemcount').textContent = '1 item found.'; + itemcount.textContent = '1 item found.'; break; default: - document.getElementById('itemcount').textContent = `${count} items found.`; + itemcount.textContent = `${count} items found.`; break; } } From 7406efc2fa4c8566f1b1e877d4da51c927d958e2 Mon Sep 17 00:00:00 2001 From: Shy Date: Tue, 7 May 2024 15:00:04 +0200 Subject: [PATCH 12/12] Indicate failed searches by background color. --- static/c4.css | 5 +++++ static/index.js | 8 ++++++++ 2 files changed, 13 insertions(+) diff --git a/static/c4.css b/static/c4.css index 7d5a573..3c2e3eb 100644 --- a/static/c4.css +++ b/static/c4.css @@ -7,6 +7,11 @@ h1, h1 a { color: #dfaa37; /* C4 Yellow */ } +#search.failed { + color: #200; + background-color: #ec6d5f; +} + #itemcount { display: inline-block; margin-right: 1ch; diff --git a/static/index.js b/static/index.js index a79b6dd..3be7022 100644 --- a/static/index.js +++ b/static/index.js @@ -95,6 +95,14 @@ function search(e) { elem.classList.add('filtered'); } } + + // Indicate failed search. + if (count) { + e.target.classList.remove('failed'); + } else { + e.target.classList.add('failed'); + } + updateCounter(count); }