diff --git a/static/c4.css b/static/c4.css
index 7805a9b..3c2e3eb 100644
--- a/static/c4.css
+++ b/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);
}
diff --git a/static/form.js b/static/form.js
index a82d2a5..d1affc1 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.
+ 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() {
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 @@
diff --git a/static/index.js b/static/index.js
index 2d7b1aa..3be7022 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,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();
-}
\ No newline at end of file
+}