generalize our selection component

1 files changed, 8 insertions, 93 deletions

diff --git a/cockpit/js/cockpit.js b/cockpit/js/cockpit.js
index 8041e77..c6524d6 100644
--- a/cockpit/js/cockpit.js
+++ b/cockpit/js/cockpit.js
@@ -11,6 +11,7 @@ import {
 
 import { fetchStudent, fetchStudents } from "./student-ENV.js";
 import { isTeacher as getIsTeacher } from "../../utils-ENV.js";
+import { initSelection } from "./selection.js";
 
 let isTeacher;
 let firstname;
@@ -37,99 +38,13 @@ async function loadStudent(studentToLoad) {
 	updateStudentGraduation();
 }
 
-async function initStudentSelection() {
-	const sel = document.getElementById("student-selection");
-	const list = document.getElementById('student-selection-list');
-	const noResults = document.getElementById('student-selection-noresults');
-	const clearBtn = document.getElementById('student-selection-clear');
-
-	const students = await fetchStudents();
-
-	let items = [];
-
-	let currentFocus = -1;
-	let visibleItems = [];
-	function setActive() {
-		visibleItems.forEach(item => item.classList.remove("active"));
-		if (currentFocus >= 0 && visibleItems[currentFocus]) {
-			visibleItems[currentFocus].classList.add("active");
-		}
-	}
-
-	for (const student of students) {
-		let item = document.createElement("li");
-		item.student = student;
-		item.innerHTML = `${student.name} ${student.group}`;
-		item.style.display = 'none';
-
-		item.addEventListener('click', function() {
-			sel.value = "";
-			sel.dispatchEvent(new Event('keyup'));
-			loadStudent(student);
-		});
-
-		list.appendChild(item);
-		items.push(item);
-	}
-
-	sel.addEventListener('keyup', function(e) {
-		if ((["ArrowDown", "ArrowUp", "Enter"]).includes(e.key))
-			return;
-
-		const filter = sel.value.toLowerCase();
-		visibleItems = [];
-		for (const item of items) {
-			const itemText = item.textContent.trim().toLowerCase();
-
-			if (itemText.indexOf(filter) > -1 && filter !== "") {
-				item.style.display = "";
-				visibleItems.push(item);
-
-				// Highlight matched text
-				const regex = new RegExp(`(${filter})`, 'gi');
-				item.innerHTML = item.textContent.replace(
-					regex,
-					"<u class='student-selection-list-highlight'>$1</u>"
-				);
-			} else {
-				item.style.display = "none";
-			}
-		}
-
-		// Show the clear button if there is an input
-		clearBtn.style.display = sel.value ? "block" : "none";
-
-		// Select the first or none if there are no items visible
-		currentFocus = visibleItems.length ? 0 : -1;
-		setActive(visibleItems);
-		noResults.style.display = visibleItems.length || filter === "" ? "none" : "block";
-	});
-
-	clearBtn.addEventListener('click', function() {
-		sel.value = "";
-		sel.dispatchEvent(new Event('keyup')); // reset list
-		sel.focus();
-	});
-
-	sel.addEventListener('keydown', function(e) {
-		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-			if(e.key === "ArrowDown")
-				currentFocus = (currentFocus + 1) % visibleItems.length;
-			else
-				currentFocus = (currentFocus - 1 + visibleItems.length) % visibleItems.length;
-			setActive();
-			e.preventDefault();
-		} else if (e.key === "Enter") {
-			if (currentFocus > -1 && visibleItems[currentFocus]) {
-				
-				const visibleItem = visibleItems[currentFocus];
-				sel.value = "";
-				sel.dispatchEvent(new Event('keyup'));
-				loadStudent(visibleItem.student);
-			}
-			e.preventDefault();
-		}
-	});
+function initStudentSelection() {
+	initSelection(
+		"student-selection",
+		fetchStudents,
+		(student) => `${student.name} ${student.group}`,
+		loadStudent
+	);
 }
 
 function pointClickHandler(color) {