From f85e94b1e17b1a063aae98c2b779814bfe438cda Mon Sep 17 00:00:00 2001
From: Mariano Riefolo <rfmariano@protonmail.com>
Date: Thu, 12 Sep 2024 12:41:41 +0200
Subject: [PATCH] feat(frontend): replace direct teacher input with filterable
 select

---
 static/index.js      | 26 +++++++++++++++++++++++++-
 templates/index.html |  8 +++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/static/index.js b/static/index.js
index 10a1377..ff05fc0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -33,6 +33,7 @@ function load_teachers(id) {
       data.forEach((el) => {
         const option = document.createElement("option");
         option.value = el;
+        option.text = el;
         list.appendChild(option);
         i++;
       });
@@ -212,7 +213,7 @@ function load_major() {
 }
 
 function select_teacher() {
-  let teacher = document.getElementById("teacher").value;
+  let teacher = document.getElementById("teachers").value;
   let teachers = JSON.parse(sessionStorage.getItem("teachers"));
   if (!teachers.includes(teacher)) {
     return false;
@@ -243,6 +244,29 @@ function show_error(e, message) {
   document.getElementById("error-dialog").setAttribute("open", "");
 }
 
+function filter_teachers() {
+  let input = document.getElementById("teacher");
+  let filter = input.value.toUpperCase();
+  let select = document.getElementById("teachers");
+  let option = select.getElementsByTagName("option");
+  let found_first = false;
+  for (let i = 0; i < option.length; i++) {
+    let txtValue = option[i].textContent;
+    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+      option[i].style.display = "";
+      if (!found_first) {
+        select.selectedIndex = i;
+        found_first = true;
+      }
+    } else {
+      option[i].style.display = "none";
+      if (option[i].hasAttribute("selected")) {
+        option[i].removeAttribute("selected");
+      }
+    }
+  }
+}
+
 if (Cookies.get("id") && Cookies.get("type")) {
   if (Cookies.get("type") === "teacher" && Cookies.get("teacher")) {
     make_teacher_table(Cookies.get("id"), Cookies.get("teacher"));
diff --git a/templates/index.html b/templates/index.html
index 9aaa6a8..94ebf90 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -68,11 +68,9 @@
         </form>
         <form id="form-teacher" onsubmit="return select_teacher()" hidden>
           <formfield>
-            <label id="teacher-label" aria-busy="true"
-              >Seleziona il tuo cognome</label
-            >
-            <input id="teacher" type="text" list="teachers" />
-            <datalist id="teachers"></datalist>
+            <label id="teacher-label" aria-busy="true">Filtra</label>
+            <input id="teacher" type="text" oninput="filter_teachers()" />
+            <select id="teachers"></select>
           </formfield>
           <input type="submit" value="Continua" />
         </form>