diff --git a/public/css/global.css b/public/css/global.css index dce06c6..f60e534 100644 --- a/public/css/global.css +++ b/public/css/global.css @@ -1,5 +1,9 @@ +:root { + --color-texto: white; +} + body { - color: white + color: var(--color-texto); } [class^="ph-"], [class*=" ph-"] ::before { diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx index 586052b..3c2c76a 100644 --- a/src/ContenedorHorarios/Horarios.tsx +++ b/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 = {([nombre]) => { @@ -35,7 +36,7 @@ export function Horarios(props: { data: DatosHorario }) { {elAnios}
- +
; } diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx index 033f29c..f73246a 100644 --- a/src/ContenedorHorarios/MiHorario.tsx +++ b/src/ContenedorHorarios/MiHorario.tsx @@ -50,7 +50,7 @@ export function MiHorario() { e.horario, estilosGlobales.contenedor )}> - + ; } diff --git a/src/ContenedorHorarios/Tabla.tsx b/src/ContenedorHorarios/Tabla.tsx index d2d99c3..a0cfb27 100644 --- a/src/ContenedorHorarios/Tabla.tsx +++ b/src/ContenedorHorarios/Tabla.tsx @@ -1,104 +1,184 @@ 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 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)" - } - }, - filaBorde: { - position: "absolute", - top: 0, - height: "1px", - width: "100%", - backgroundColor: "rgba(200, 200, 200, 0.25)", - zIndex: 1 - }, - celdaHora: { - textAlign: "center", - width: "4rem", - padding: "0.25rem 0", - position: "absolute", - top: "-0.75rem" - }, - celdaComun: { - width: "20%", - textAlign: "center", - padding: "0 0.5rem", - boxSizing: "border-box" +const e = StyleSheet.create({ + fila: { + position: "relative", + zIndex: 2, + transition: "background-color 250ms", + marginLeft: "4rem", + ":hover": { + // backgroundColor: "rgba(200, 200, 200, 0.25)" } - }); + }, + filaBorde: { + position: "absolute", + top: 0, + height: "1px", + width: "100%", + backgroundColor: "rgba(200, 200, 200, 0.25)", + zIndex: 1 + }, + celdaHora: { + textAlign: "center", + width: "4rem", + padding: "0.25rem 0", + position: "absolute", + top: "-0.75rem" + }, + celdaComun: { + width: "20%", + 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
-
- -
{dia => -
+
{dia}
}
- {hora => -
+ {hora => { + const c = anio(); + console.log(c); + return
{hora.substring(0, 5)}
- {() => -
+ {dia => { + const diaStr = dia.substring(0, 2); + const horaStr = hora.substring(0, 5); -
- } + const datos = data()?.[horaStr]?.[diaStr] ?? []; + + return
+ + {({txt, esLab}) => + + {txt} + + } + +
; + }}
-
- } +
; + }}
} \ No newline at end of file diff --git a/src/Estilos.ts b/src/Estilos.ts index 7c34bb5..1bf5717 100644 --- a/src/Estilos.ts +++ b/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", diff --git a/src/Store.ts b/src/Store.ts index 3fac4de..f41aad2 100644 --- a/src/Store.ts +++ b/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);