Renderizar los cursos en la tabla

public/css/global.css

@@ -1,5 +1,9 @@
+:root {
+    --color-texto: white;
+}
+
 body {
-    color: white
+    color: var(--color-texto);
 }
 
 [class^="ph-"], [class*=" ph-"] ::before {

src/ContenedorHorarios/Horarios.tsx

@@ -1,12 +1,13 @@
-import { DatosHorario } from "../types/DatosHorario";
+import { AnioData, DatosHorario } from "../types/DatosHorario";
 import { For, createSignal, createMemo } from "solid-js";
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 import { Tabla } from "./Tabla";
+import { horas } from "../Store";
 
 export function Horarios(props: { data: DatosHorario }) {
 
-    const [anioActual, setAnioActual] = createSignal("1er año");
+    const [anioActual, setAnioActual] = createSignal("3er año");
 
     const elAnios = <For each={Object.entries(props.data.años)}>
         {([nombre]) => {
@@ -35,7 +36,7 @@ export function Horarios(props: { data: DatosHorario }) {
         {elAnios}
         <br/>
         <div className={css(estilosGlobales.contenedor)}>
-            <Tabla data={dataTabla()}/>
+            <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
         </div>
     </div>;
 }

src/ContenedorHorarios/MiHorario.tsx

@@ -50,7 +50,7 @@ export function MiHorario() {
             e.horario,
             estilosGlobales.contenedor
         )}>
-            <Tabla data={{}}/>
+            <Tabla data={{}} anio={"Mi horario"} version={1}/>
         </div>
     </div>;
 }

src/ContenedorHorarios/Tabla.tsx

@@ -1,48 +1,17 @@
 import { StyleSheet, css } from "aphrodite";
-import { For} from "solid-js";
+import { createEffect, createMemo, createState, For } from "solid-js";
 import { estilosGlobales } from "../Estilos";
 import { AnioData } from "../types/DatosHorario";
+import { dias, horas, horasDescanso } from "../Store";
 
-const dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
+const e = StyleSheet.create({
-const horas = [
-    "07:00 - 07:50",
-    "07:50 - 08:40",
-    "08:40 - 08:50",
-    "08:50 - 09:40",
-    "09:40 - 10:30",
-    "10:30 - 10:40",
-    "10:40 - 11:30",
-    "11:30 - 12:20",
-    "12:20 - 13:10",
-    "13:10 - 14:00",
-    "14:00 - 14:50",
-    "14:50 - 15:40",
-    "15:40 - 15:50",
-    "15:50 - 16:40",
-    "16:40 - 17:30",
-    "17:30 - 17:40",
-    "17:40 - 18:30",
-    "18:30 - 19:20",
-    "19:20 - 20:10",
-    "20:10 - 21:00",
-    "21:00 - 21:00"
-]
-const horasDescanso = [
-    "08:40 - 08:50",
-    "10:30 - 10:40",
-    "15:40 - 15:50",
-    "17:30 - 17:40"
-]
-
-export function Tabla(props: {data: AnioData}) {
-    const e = StyleSheet.create({
     fila: {
         position: "relative",
         zIndex: 2,
         transition: "background-color 250ms",
         marginLeft: "4rem",
         ":hover": {
-                backgroundColor: "rgba(200, 200, 200, 0.25)"
+            // backgroundColor: "rgba(200, 200, 200, 0.25)"
         }
     },
     filaBorde: {
@@ -65,40 +34,151 @@ export function Tabla(props: {data: AnioData}) {
         textAlign: "center",
         padding: "0 0.5rem",
         boxSizing: "border-box"
+    },
+    celdaDia: {
+        padding: "0.3rem 0"
+    },
+    celdaCurso: {
+        display: "inline-block",
+        padding: "0.25rem 0.35rem",
+        cursor: "pointer",
+        borderRadius: "5px",
+        ":hover": {
+            backgroundColor: "rgba(200, 200, 200, 0.25)"
         }
+    },
+    celdaCursoTeoria: {
+        fontWeight: "bold"
+    }
+});
+
+/*
+TODO: Configurar state.
+      Que el padre pase un objeto state con todos los cursos e info adicional sobre los cursos:
+       Si seleccionado,
+       si solo teoria o lab,
+       cual grupo
+      y aqui resaltar adecuadamente.
+*/
+
+interface DataProcesada {
+    [hora: string]: {
+        [dia: string]: {
+            id: string,
+            txt: string,
+            esLab: boolean
+        }[]
+    }
+}
+
+const procesarAnio = (data: AnioData, anio: string, version: number) => {
+    const obj: DataProcesada = {};
+
+    for (const [, curso] of Object.entries(data)) {
+        const nombreAbreviado = curso.abreviado;
+
+        for (const [grupoStr, grupo] of Object.entries(curso.Teoria)) {
+            for (const hora of grupo.Horas) {
+                const dia = hora.substring(0, 2);
+                const horas = hora.substring(2, 4);
+                const minutos = hora.substr(4);
+
+                const horaCompleta = horas + ":" + minutos;
+
+                const id = `${version}_${anio}_${nombreAbreviado}_T_${grupoStr}`;
+
+                if (!(horaCompleta in obj)) {
+                    obj[horaCompleta] = {};
+                }
+
+                if (!(dia in obj[horaCompleta])) {
+                    obj[horaCompleta][dia] = [];
+                }
+
+                obj[horaCompleta][dia].push({
+                    id,
+                    txt: `${nombreAbreviado} ${grupoStr}`,
+                    esLab: false
                 });
+            }
+        }
+
+        for (const [grupoStr, grupo] of Object.entries(curso.Laboratorio ?? {})) {
+            for (const hora of grupo.Horas) {
+                const dia = hora.substring(0, 2);
+                const horas = hora.substring(2, 4);
+                const minutos = hora.substr(4);
+
+                const horaCompleta = horas + ":" + minutos;
+
+                const id = `${version}_${anio}_${nombreAbreviado}_L_${grupoStr}`;
+
+                if (!(horaCompleta in obj)) {
+                    obj[horaCompleta] = {};
+                }
+
+                if (!(dia in obj[horaCompleta])) {
+                    obj[horaCompleta][dia] = [];
+                }
+
+                obj[horaCompleta][dia].push({
+                    id,
+                    txt: `${nombreAbreviado} L${grupoStr}`,
+                    esLab: true
+                });
+            }
+        }
+    }
+
+    return obj;
+}
+
+export function Tabla(props: { data: AnioData, anio: string, version: number }) {
+
+    const anio = () => props.anio.substring(0, props.anio.indexOf(" "));
+    const data = createMemo(() => procesarAnio(props.data, anio(), props.version));
 
     return <div>
         <div className={css(e.fila)}>
-            <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
-
-            </div>
             <For each={dias}>
                 {dia =>
-                    <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
+                    <div className={css(e.celdaComun, estilosGlobales.inlineBlock, e.celdaDia)}>
                         {dia}
                     </div>
                 }
             </For>
         </div>
         <For each={horas}>
-            {hora =>
+            {hora => {
-                <div style={{position: "relative"}}>
+                const c = anio();
+                console.log(c);
+                return <div style={{position: "relative"}}>
                     <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
                         {hora.substring(0, 5)}
                     </div>
                     <div className={css(e.fila)}>
                         <For each={dias}>
-                            {() =>
+                            {dia => {
-                                <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
+                                const diaStr = dia.substring(0, 2);
+                                const horaStr = hora.substring(0, 5);
 
-                                </div>
+                                const datos = data()?.[horaStr]?.[diaStr] ?? [];
+
+                                return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
+                                    <For each={datos}>
+                                        {({txt, esLab}) =>
+                                            <span className={css(e.celdaCurso, !esLab && e.celdaCursoTeoria)}>
+                                                {txt}
+                                            </span>
                                         }
                                     </For>
+                                </div>;
+                            }}
+                        </For>
                         <div className={css(e.filaBorde)}/>
                     </div>
-                </div>
+                </div>;
-            }
+            }}
         </For>
     </div>
 }

src/Estilos.ts

@@ -7,7 +7,7 @@ export const estilosGlobales = StyleSheet.create({
         borderRadius: "10px",
         backdropFilter: "blur(40px)",
         backgroundColor: "rgba(100, 100, 100, 0.25)",
-        color: "white"
+        color: "var(--color-texto)"
     },
     contenedorCursor: {
         cursor: "pointer",

src/Store.ts

@@ -6,6 +6,37 @@ enum ModoColor {
     Auto
 }
 
+export const dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
+export const horas = [
+    "07:00 - 07:50",
+    "07:50 - 08:40",
+    "08:40 - 08:50",
+    "08:50 - 09:40",
+    "09:40 - 10:30",
+    "10:30 - 10:40",
+    "10:40 - 11:30",
+    "11:30 - 12:20",
+    "12:20 - 13:10",
+    "13:10 - 14:00",
+    "14:00 - 14:50",
+    "14:50 - 15:40",
+    "15:40 - 15:50",
+    "15:50 - 16:40",
+    "16:40 - 17:30",
+    "17:30 - 17:40",
+    "17:40 - 18:30",
+    "18:30 - 19:20",
+    "19:20 - 20:10",
+    "20:10 - 21:00",
+    "21:00 - 21:00"
+];
+export const horasDescanso = [
+    "08:40 - 08:50",
+    "10:30 - 10:40",
+    "15:40 - 15:50",
+    "17:30 - 17:40"
+];
+
 const numImgGuardado = parseInt(localStorage.getItem("num-img") ?? "4");
 
 export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro);