paad/ts/consultar_horarios.ts

// 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);
        }
    });
});