Pagina ver matricula para pc

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.idea
+dist
+
 # dependencies
 /node_modules
 /.pnp

src/App.tsx

@@ -8,6 +8,7 @@ import { SistemasMovil } from "./Views/SistemasMovil";
 import { SeleccionCursos } from "./Views/SeleccionCursos";
 import { VerMatricula } from "./Views/VerMatricula";
 import {SeleccionCursos as SeleccionCursosPC} from "./Views/pc/SeleccionCursos";
+import { VerMatricula as VerMatriculaPC } from "./Views/pc/VerMatricula";
 
 function App() {
     const route = useRouter();
@@ -41,6 +42,9 @@ function App() {
                 <Match when={route() === "/pc/sistemas/"}>
                     <Sistemas />
                 </Match>
+                <Match when={route() === "/pc/ver-matricula/"}>
+                    <VerMatriculaPC />
+                </Match>
             </Switch>
         </div>
     );

src/Views/pc/Sistemas.tsx

@@ -6,6 +6,18 @@ import { createSignal } from "solid-js";
 import { getHorariosMock, ListaCursosCompleto } from "../../API/CargaHorarios";
 import { Cursos, DatosGrupo } from "../../types/DatosHorario";
 import { infoDiaAListaHoras } from "../SistemasMovil";
+import { StyleSheet, css } from "aphrodite/no-important";
+import { estilosGlobales } from "../../Estilos";
+import { gruposSeleccionados, SERVER_PATH } from "../../Store";
+
+const s = StyleSheet.create({
+    botonAccion: {
+        width: "50%",
+        display: "inline-block",
+        textAlign: "center",
+        backgroundColor: "var(--color-primario)",
+    },
+});
 
 export function Sistemas() {
     const [data, setData] = createSignal<Cursos>({});
@@ -19,12 +31,43 @@ export function Sistemas() {
         setData(listaCursosADatos(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 = "#/pc/ver-matricula/";
+        } else {
+            alert("No se pudo procesar la matricula");
+        }
+    };
+
     return (
         <div>
             <BarraSuperior />
             <Separador />
             <Separador />
             <ContenedorHorarios datos={data()} />
+            <Separador />
+            <div style="text-align: center;">
+                <button
+                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, s.botonAccion)}
+                    onclick={matricular}
+                >
+                    Matricular
+                </button>
+            </div>
             <Creditos />
         </div>
     );

src/Views/pc/VerMatricula.tsx

@@ -0,0 +1,91 @@
+import { css, StyleSheet } from "aphrodite/no-important";
+import { estilosGlobales } from "../../Estilos";
+import { createSignal, For } from "solid-js";
+import { getAllListaCursosMock, RespuestaListaCursos } from "../../API/ListaCursos";
+import { getMatriculaMock, InfoMatricula } from "../../API/VerMatricula";
+import { gruposSeleccionados } from "../../Store";
+
+const e = StyleSheet.create({
+    contenedorGlobal: {
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    cont: {
+        width: "30rem",
+    },
+    parrafo: {
+        textAlign: "justify",
+        lineHeight: "1.4rem",
+    },
+    botonAccion: {
+        width: "30rem",
+        display: "inline-block",
+        textAlign: "center",
+    },
+    iconoGitHub: {
+        fontSize: "1.25rem",
+        verticalAlign: "bottom",
+        marginRight: "0.5rem",
+    },
+    inputCorreo: {
+        width: "100%",
+        backgroundColor: "rgba(159,159,159,0.44)",
+        border: "none",
+        borderBottom: "solid 2px var(--color-texto)",
+        padding: "0.5rem 1rem",
+        boxSizing: "border-box",
+        marginTop: "1rem",
+        borderRadius: "5px",
+    },
+    checkbox: {
+        width: "1.25rem",
+        height: "1.25rem",
+        margin: "0 0.5rem",
+    },
+    grid: {
+        display: "grid",
+        gridTemplateColumns: "3rem auto",
+        gridRowGap: "1rem",
+    },
+});
+
+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 className={css(e.contenedorGlobal)}>
+            <div className={css(e.cont)}>
+
+                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
+                    <h1 style={{
+                        "text-align": "center",
+                        "font-size": "1.75rem",
+                    }}
+                    >
+                            Matricula realizada
+                    </h1>
+                    <For each={infoMatriculas()}>
+                        {(matricula) => (
+                            <div>
+                                <h3>{matricula.nombre_curso}</h3>
+                                <p>Grupo: {matricula.grupo}</p>
+                                <p>Docente: {matricula.docente}</p>
+                            </div>
+                        )}
+                    </For>
+
+                </div>
+            </div>
+        </div>
+    );
+}