Ver matricula realizada

src/API/CargaHorarios.ts

@@ -74,6 +74,10 @@ type GetHorariosFn = (_: InputData) => Promise<ListaCursosCompleto>
 
 export const getHorarios: GetHorariosFn = async(data) => {
     const response = await fetch(`${SERVER_PATH}/horarios`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
         body: JSON.stringify(data),
     });
     return await response.json();

src/API/VerMatricula.ts

@@ -0,0 +1,36 @@
+import {SERVER_PATH} from "../Store";
+
+type Input = {
+    matriculas: Array<number>
+}
+export type InfoMatricula = {
+    nombre_curso: string,
+    grupo: string,
+    docente: string,
+}
+type VerMatriculaFn = (_: Input) => Promise<Array<InfoMatricula>>;
+
+export const getMatricula: VerMatriculaFn = async(input) => {
+    const response = await fetch(`${SERVER_PATH}/recuperacion`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(input),
+    });
+    return await response.json();
+};
+
+export const getMatriculaMock: VerMatriculaFn = async(_) => [
+    {
+        nombre_curso: "Plataformas Emergentes",
+        grupo: "LA",
+        docente: "Diego Iquira",
+    },
+    {
+        nombre_curso: "Gestión de Proyectos de Software",
+        grupo: "LB",
+        docente: "Luis Rocha",
+    },
+];
+

src/App.tsx

@@ -6,6 +6,7 @@ import { Switch, Match, Show } from "solid-js";
 import { Wallpaper } from "./Wallpaper";
 import { SistemasMovil } from "./Views/SistemasMovil";
 import { SeleccionCursos } from "./Views/SeleccionCursos";
+import { VerMatricula } from "./Views/VerMatricula";
 
 function App() {
     const route = useRouter();
@@ -29,6 +30,9 @@ function App() {
                 <Match when={route() === "/sistemas-movil/"}>
                     <SistemasMovil />
                 </Match>
+                <Match when={route() === "/ver-matricula/"}>
+                    <VerMatricula />
+                </Match>
                 <Match when={route() === "/sistemas/"}>
                     <Main />
                 </Match>

src/ContenedorHorarios/Tabla.tsx

@@ -161,6 +161,7 @@ const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsua
                             "cursos",
                             Number(indiceCurso),
                             "Laboratorio",
+                            /// @ts-ignore
                             produce<{ [p: string]: DatosGrupo }>((x) => {
                                 const grupoActualSeleccionado = x[grupoStr].seleccionado;
 

src/Views/MobileIndex.tsx

@@ -1,6 +1,6 @@
 import { css, StyleSheet } from "aphrodite/no-important";
-import { createSignal } from "solid-js";
-import { SERVER_PATH } from "../Store";
+import { batch, createSignal } from "solid-js";
+import { SERVER_PATH, setGruposSeleccionados } from "../Store";
 
 const e = StyleSheet.create({
     contenedorGlobal: {
@@ -91,7 +91,11 @@ export function MobileIndex() {
         } else if (response.matriculas.length === 0) {
             window.location.href = "#/seleccion-cursos/";
         } else if (response.matriculas.length > 0) {
-            alert("TODO");
+            batch(() => {
+                for (const id_lab of response.matriculas) {
+                    setGruposSeleccionados(id_lab, true);
+                }
+            });
         }
     };
 

src/Views/SistemasMovil.tsx

@@ -3,6 +3,8 @@ import { GrupoDia, Table, TableInput } from "./SistemasMovil/Table";
 import { getHorariosMock, ListaCursosCompleto } from "../API/CargaHorarios";
 import { createSignal } from "solid-js";
 import { generarMapaCeldas } from "./SistemasMovil/mapaCeldas";
+import { Button } from "../components/Button";
+import { gruposSeleccionados, SERVER_PATH } from "../Store";
 
 export function SistemasMovil() {
     const [rawData, setRawData] = createSignal<ListaCursosCompleto>([]);
@@ -16,10 +18,36 @@ export function SistemasMovil() {
         setRawData(data);
     })();
 
+    const matricular = async() => {
+        const laboratoriosAMatricular = Object.entries(gruposSeleccionados)
+            .filter((x) => x[1] === true)
+            .map((x) => x[0]);
+
+        const response = await fetch(`${SERVER_PATH}/matricula`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                correo_usuario: localStorage.getItem("correo"),
+                horarios: laboratoriosAMatricular,
+            }),
+        });
+        if (response.ok) {
+            window.location.href = "#/ver-matricula/";
+        } else {
+            alert("No se pudo procesar la matricula");
+        }
+    };
+
     return (
         <div>
             <TopBar tituloBarra="Mi Horario" />
             <Table datos={transformar(rawData())} />
+            <hr />
+            <div style="text-align: center;">
+                <Button texto={"Matricular"} onClick={matricular} />
+            </div>
         </div>
     );
 }

src/Views/VerMatricula.tsx

@@ -0,0 +1,34 @@
+import { TopBar } from "./SistemasMovil/TopBar";
+import { Card } from "../components/Card";
+import { createSignal, For } from "solid-js";
+import { getMatriculaMock, InfoMatricula } from "../API/VerMatricula";
+import { gruposSeleccionados } from "../Store";
+
+export function VerMatricula() {
+    const [infoMatriculas, setInfoMatriculas] = createSignal<Array<InfoMatricula>>([]);
+
+    (async() => {
+        const laboratorios = Object.entries(gruposSeleccionados)
+            .filter((x) => x[1] === true)
+            .map((x) => parseInt(x[0], 10));
+        setInfoMatriculas(await getMatriculaMock({matriculas: laboratorios}));
+    })();
+
+    return (
+        <div>
+            <TopBar tituloBarra={"Ver Matricula"} />
+            <Card>
+                <h2>Tu matrícula</h2>
+                <For each={infoMatriculas()}>
+                    {(matricula) => (
+                        <div>
+                            <h3>{matricula.nombre_curso}</h3>
+                            <p>Grupo: {matricula.grupo}</p>
+                            <p>Docente: {matricula.docente}</p>
+                        </div>
+                    )}
+                </For>
+            </Card>
+        </div>
+    );
+}

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, css } from "aphrodite/no-important";
 
-export function Button(props: {texto: string}) {
+export function Button(props: {texto: string, onClick?: () => void}) {
     const s = StyleSheet.create({
         boton: {
             backgroundColor: "var(--color-primario)",
@@ -13,7 +13,7 @@ export function Button(props: {texto: string}) {
         },
     });
     return (
-        <button type="submit" className={css(s.boton)}>
+        <button type="submit" className={css(s.boton)} onClick={() => props.onClick?.()}>
             {props.texto}
         </button>
     );