107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
// get this script tag
|
|
const script = document.currentScript as HTMLScriptElement;
|
|
// get data-facultad attribute from script tag
|
|
const dataFacultad = script.getAttribute("data-facultad") as string;
|
|
|
|
|
|
const table = document.querySelector("table") as HTMLTableElement;
|
|
// hide the table
|
|
table.style.display = "none";
|
|
|
|
disableDatalist("#filter_grupo");
|
|
|
|
const buscarGrupo = async () => {
|
|
|
|
// Add loading animation in the button
|
|
const btn = document.querySelector("#btn-buscar") as HTMLButtonElement;
|
|
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Cargando...';
|
|
btn.disabled = true;
|
|
|
|
|
|
const carrera = document.querySelector("#filter_carrera") as HTMLInputElement;
|
|
const grupo = document.querySelector("#filter_grupo") as HTMLInputElement;
|
|
const periodo = document.querySelector("#periodo") as HTMLInputElement;
|
|
console.log(`Carrera: ${carrera}, Grupo: ${grupo}`);
|
|
|
|
if (carrera.value == "" || grupo.value == "") {
|
|
triggerMessage("El nombre del grupo y la carrera son requeridos", "Faltan campos");
|
|
|
|
// Remove loading animation in the button
|
|
btn.innerHTML = '<i class="ing-buscar ing"></i> Buscar';
|
|
btn.disabled = false;
|
|
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
|
|
formData.append("carrera", carrera.value);
|
|
formData.append("grupo", grupo.value);
|
|
formData.append("periodo", periodo.value);
|
|
formData.append('facultad', dataFacultad);
|
|
|
|
try {
|
|
const response = await fetch("api/horario.php", {
|
|
method: "POST",
|
|
body: formData
|
|
}).then(res => res.json());
|
|
|
|
} catch (error) {
|
|
triggerMessage("Error al cargar el horario", "Error");
|
|
}
|
|
|
|
// Remove loading animation in the button
|
|
btn.innerHTML = '<i class="ing-buscar ing"></i> Buscar';
|
|
btn.disabled = false;
|
|
}
|
|
|
|
// on click the li element, inside datalist #dlcarera
|
|
const dlcarreras = document.querySelectorAll("#dlcarrera li");
|
|
|
|
dlcarreras.forEach(li => {
|
|
li.addEventListener("click", async () => {
|
|
// get the data-id from the li element
|
|
const carrera= li.getAttribute("data-id") as string;
|
|
const facultad = dataFacultad;
|
|
const periodo = document.querySelector("#periodo") as HTMLSelectElement;
|
|
|
|
|
|
const formData = new FormData();
|
|
formData.append("carrera", carrera);
|
|
formData.append("facultad", facultad);
|
|
formData.append("periodo", periodo.value);
|
|
|
|
try {
|
|
const {
|
|
status,
|
|
grupos
|
|
} = await fetch("action/action_grupo.php", {
|
|
method: "POST",
|
|
body: formData
|
|
}).then(res => res.json());
|
|
|
|
if (status != "success") {
|
|
throw new Error("Error al cargar los grupos");
|
|
}
|
|
|
|
const dlgrupo = document.querySelector("#dlgrupo ul") as HTMLUListElement;
|
|
const prompt = document.querySelector("#dlgrupo .datalist-input") as HTMLInputElement;
|
|
dlgrupo.innerHTML = "";
|
|
|
|
grupos.forEach(grupo => {
|
|
const li = document.createElement("li");
|
|
// data-id is the id of the group
|
|
li.setAttribute("data-id", grupo);
|
|
li.textContent = grupo;
|
|
dlgrupo.appendChild(li);
|
|
});
|
|
|
|
// write Seleccionar grupo
|
|
prompt.textContent = "Seleccionar grupo";
|
|
|
|
disableDatalist("#filter_grupo", false);
|
|
} catch (error) {
|
|
triggerMessage("Error al cargar los grupos", "Error");
|
|
console.log(error);
|
|
}
|
|
});
|
|
}); |