Initial state

ts/consultar_horarios.ts

@@ -0,0 +1,107 @@
+// 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);
+        }
+    });
+});