add inputs to filter by name and/or author

1 files changed, 50 insertions, 10 deletions

diff --git a/script.js b/script.js
index b8edbb4..b10c6c7 100644
--- a/script.js
+++ b/script.js
@@ -9,7 +9,33 @@ function newEl(tagname, content) {
 	return cell;
 }
 
+const updateUrl = debounce(params => {
+	if (Object.keys(params).length == 0)
+		window.history.pushState({}, '', '/');
+	else
+		window.history.pushState({}, '', '?' + new URLSearchParams(params).toString());
+}, 500);
+
 function display(proposals) {
+	const params = {};
+	if (nameInput.value) {
+		proposals = proposals.filter(p => (p.name || p.page_title).toLowerCase().includes(nameInput.value.toLowerCase()));
+		params.q = nameInput.value;
+	}
+
+	if (authorsInput.value) {
+		// The first letter of MediaWiki usernames is case-insensitive.
+		const firstChar = authorsInput.value.charAt(0);
+		const rest = authorsInput.value.slice(1);
+		const lowercase = firstChar.toLowerCase() + rest;
+		const uppercase = firstChar.toUpperCase() + rest;
+		proposals = proposals.filter(p => p.authors && (p.authors.includes(lowercase) || p.authors.includes(uppercase)));
+		params.author = authorsInput.value;
+	}
+
+	updateUrl(params);
+
+	tbody.innerHTML = '';
 	proposals.forEach(proposal => {
 		const row = document.createElement('tr');
 
@@ -36,18 +62,32 @@ function display(proposals) {
 	});
 }
 
+const nameInput = document.getElementById('name');
+const authorsInput = document.getElementById('authors');
+
+function debounce(callback, wait) {
+	let timeoutId = null;
+	return (...args) => {
+		window.clearTimeout(timeoutId);
+		timeoutId = window.setTimeout(() => {
+			callback.apply(null, args);
+		}, wait);
+	};
+}
+
 (async function() {
 	const proposals = await (await fetch('proposals.json')).json();
 
-	const authorFilter = new URLSearchParams(location.search).get('author');
-	if (authorFilter) {
-		// The first letter of MediaWiki usernames is case-insensitive.
-		const firstChar = authorFilter.charAt(0);
-		const rest = authorFilter.slice(1);
-		const lowercase = firstChar.toLowerCase() + rest;
-		const uppercase = firstChar.toUpperCase() + rest;
-		display(proposals.filter(p => p.authors && (p.authors.includes(lowercase) || p.authors.includes(uppercase))));
-	} else {
+	const params = new URLSearchParams(location.search);
+	nameInput.value = params.get('q');
+	authorsInput.value = params.get('author');
+
+	display(proposals);
+
+	nameInput.addEventListener('input', debounce(e => {
 		display(proposals);
-	}
+	}, 100));
+	authorsInput.addEventListener('input', debounce(e => {
+		display(proposals);
+	}, 100));
 })();