diff --git a/__tests__/celdas.ts b/__tests__/celdas.ts index f189b11..ecf4066 100644 --- a/__tests__/celdas.ts +++ b/__tests__/celdas.ts @@ -1,32 +1,4 @@ -interface Curso { - // Nombre completo del curso - nombre: string, - // Nombre del curso abreviado - abreviado: string, - // InformaciĆ³n de las horas de teoria - Teoria: { - // grupo es una letra: A, B, C, D - [grupo: string]: DatosGrupo, - }, - // InformaciĆ³n de las horas de laboratorio - Laboratorio?: { - // grupo es una letra: A, B, C, D - [grupo: string]: DatosGrupo, - }, -} - -interface DatosGrupo { - // Nombre del docente de este grupo - Docente: string, - /* - Las horas del curso en el siguiente formato: DD_HHMM - DD puede ser Lu, Ma, Mi, Ju, Vi - Ejm: Ma0850, Vi1640, Ju1550 - */ - Horas: string[] -} - // Exclusivo de un unico dia type Input = { horaInicio: number, diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx index 0b9994c..ef2d762 100755 --- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx +++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx @@ -1,12 +1,12 @@ -import { StyleSheet, css } from "aphrodite" -import { estilosGlobales } from "../../Estilos" -import { For, createMemo } from "solid-js" -import {createStore, Store} from "solid-js/store" -import { Dia, dias } from "../../Store" -import { CeldaFila } from "./CeldaFila" -import { DataProcesada } from "../../types/DatosHorario" -import { coloresBorde, diaANum } from "../Tabla" -import { TablaObserver } from "../TablaObserver" +import { StyleSheet, css } from "aphrodite"; +import { estilosGlobales } from "../../Estilos"; +import { For, createMemo } from "solid-js"; +import {createStore, Store} from "solid-js/store"; +import { Dia, dias } from "../../Store"; +import { CeldaFila } from "./CeldaFila"; +import { DataProcesada } from "../../types/DatosHorario"; +import { coloresBorde, diaANum } from "../Tabla"; +import { TablaObserver } from "../TablaObserver"; const e = StyleSheet.create({ celdaHora: { @@ -50,7 +50,7 @@ const e = StyleSheet.create({ celdaResaltadoTransparente: { backgroundColor: "transparent", }, -}) +}); const [diasResaltados, setDiasResaltados] = createStore({ Lunes: 0, @@ -58,7 +58,7 @@ const [diasResaltados, setDiasResaltados] = createStore({ Miercoles: 0, Jueves: 0, Viernes: 0, -} as { [k: string]: number }) +} as { [k: string]: number }); interface Props { hora: string, @@ -69,7 +69,7 @@ interface Props { const diasFilter = createMemo(() => Object.entries(diasResaltados) .filter((x) => x[1] > 0) .map((x) => x[0] as Dia) - .sort((x, y) => (diaANum(x) > diaANum(y) ? 1 : -1))) + .sort((x, y) => (diaANum(x) > diaANum(y) ? 1 : -1))); const useDiasResaltados: () => [ Store<{ [k: string]: boolean }>, @@ -82,26 +82,26 @@ const useDiasResaltados: () => [ Miercoles: false, Jueves: false, Viernes: false, - } as { [k: string]: boolean }) + } as { [k: string]: boolean }); const fnResaltar = (d: Dia) => { - setDiasResaltadosLocal(d, true) - setDiasResaltados(d, (v) => v + 1) - } + setDiasResaltadosLocal(d, true); + setDiasResaltados(d, (v) => v + 1); + }; const fnDesresaltar = (d: Dia) => { - setDiasResaltadosLocal(d, false) - setDiasResaltados(d, (v) => v - 1) - } + setDiasResaltadosLocal(d, false); + setDiasResaltados(d, (v) => v - 1); + }; - return [diasResaltadosLocal, fnResaltar, fnDesresaltar] -} + return [diasResaltadosLocal, fnResaltar, fnDesresaltar]; +}; export function FilaTabla(props: Props) { - const [diasResaltadosLocal, fnResaltar, fnDesresaltar] = useDiasResaltados() + const [diasResaltadosLocal, fnResaltar, fnDesresaltar] = useDiasResaltados(); - const hora = props.hora - const data = props.data + const hora = props.hora; + const data = props.data; return (
@@ -133,10 +133,10 @@ export function FilaTabla(props: Props) {
{(dia) => { - const diaStr = dia.substring(0, 2) - const horaStr = hora.substring(0, 5) + const diaStr = dia.substring(0, 2); + const horaStr = hora.substring(0, 5); - const datos = data?.[horaStr]?.[diaStr] ?? [] + const datos = data?.[horaStr]?.[diaStr] ?? []; return ( - ) + ); }}
- ) + ); } diff --git a/src/Views/SistemasMovil/Table.tsx b/src/Views/SistemasMovil/Table.tsx index d7b9209..b13bf9f 100644 --- a/src/Views/SistemasMovil/Table.tsx +++ b/src/Views/SistemasMovil/Table.tsx @@ -1,10 +1,11 @@ import {StyleSheet, css} from "aphrodite/no-important"; -import { createSignal, JSX } from "solid-js"; +import { createSignal, For, JSX } from "solid-js"; +import { horas } from "../../Store"; const s = StyleSheet.create({ container: { display: "grid", - gridTemplateColumns: "3.5rem 1fr 1fr", + gridTemplateColumns: "14vw 1fr 1fr", textAlign: "center", fontSize: "0.9rem", }, @@ -15,45 +16,85 @@ const s = StyleSheet.create({ textAlign: "center", }, columna: { - textAlign: "left", borderRight: "solid 2px var(--color-borde)", }, + celdaHora: { + position: "relative", + top: "-0.75rem", + height: "3rem", + }, }); type DayIndex = 0 | 1 | 2 | 3; const days = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]; -function Grupo(props: {curso: string, grupo: string}) { +type Output = { + curso: string, + grupo: string, + idxHoraInicio: number, + nroHoras: number, + offset: number, // 0, 1, 2 + fraccion: number, // por cuanto dividir la celda. 1, 2, 3, ... +} + +function Grupo(props: {data: Output}) { const ss = StyleSheet.create({ button: { display: "inline-block", - padding: "0.25rem 0.35rem", + padding: "0.2rem 0.2rem", textAlign: "left", borderRadius: "10px", border: "solid 2px red", - flexGrow: 1, - margin: "1px", + position: "absolute", }, }); return ( - ); } -export function Celda(props: {children: JSX.Element}) { +function Dia(props: {dia: string}) { const ss = StyleSheet.create({ - celda: { - padding: "0 0.25rem", - display: "flex", + contenedorDia: { + position: "relative", }, }); return ( -
- {props.children} +
+
{props.dia}
+
+ + + +
); } @@ -64,27 +105,13 @@ export function Table() { return (
-
 
-
-
-
{days[currentDay()]}
- - - - - - - - - - - - -
-
-
{days[currentDay() + 1]}
-
+
 
+ + {(hora) =>
{hora.substring(0, 5)}
} +
+ +
); }