feat(frontend): replace direct teacher input with filterable select

This commit is contained in:
Mariano Riefolo 2024-09-12 12:41:41 +02:00
parent a4ae52471a
commit f85e94b1e1
2 changed files with 28 additions and 6 deletions

View File

@ -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"));

View File

@ -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>