Posicionamiento de grupos en la tabla

__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,

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 (
         <div style={{position: "relative"}}>
@@ -133,10 +133,10 @@ export function FilaTabla(props: Props) {
                 </div>
                 <For each={dias}>
                     {(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 (
                             <CeldaFila
@@ -146,11 +146,11 @@ export function FilaTabla(props: Props) {
                                 dia={dia}
                                 tablaObserver={props.tablaObserver}
                             />
-                        )
+                        );
                     }}
                 </For>
                 <div className={css(e.filaBorde)} />
             </div>
         </div>
-    )
+    );
 }

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 (
-        <button className={css(ss.button)}>
-            {props.curso}
+        <button className={css(ss.button)} style={`left: calc((43vw / ${props.data.fraccion}) * ${props.data.offset} - 14vw); top: ${props.data.idxHoraInicio * 3}rem; height: ${props.data.nroHoras * 3}rem; width: calc(100% / ${props.data.fraccion})`}>
+            {props.data.curso}
             <br />
-            {props.grupo}
+            {props.data.grupo}
         </button>
     );
 }
 
-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 (
-        <div className={css(ss.celda)}>
-            {props.children}
+        <div className={css(s.columna)}>
+            <div className={css(s.tableIndex)}>{props.dia}</div>
+            <div className={css(ss.contenedorDia)}>
+                <Grupo data={{
+                    curso: "TAIS",
+                    grupo: "LA",
+                    idxHoraInicio: 0,
+                    nroHoras: 3,
+                    offset: 1,
+                    fraccion: 3,
+                }}
+                />
+                <Grupo data={{
+                    curso: "PPP",
+                    grupo: "LB",
+                    idxHoraInicio: 2,
+                    nroHoras: 2,
+                    offset: 2,
+                    fraccion: 3,
+                }}
+                />
+                <Grupo data={{
+                    curso: "FC",
+                    grupo: "LC",
+                    idxHoraInicio: 1,
+                    nroHoras: 4,
+                    offset: 3,
+                    fraccion: 3,
+                }}
+                />
+            </div>
         </div>
     );
 }
@@ -64,27 +105,13 @@ export function Table() {
     return (
         <div className={css(s.container)}>
             <div className={css(s.columna)}>
-                <div className={css(s.tableIndex)} style="border: none">&nbsp;</div>
-            </div>
-            <div className={css(s.columna)}>
-                <div className={css(s.tableIndex)}>{days[currentDay()]}</div>
-                <Celda>
-                    <Grupo curso="TAIS 2" grupo="LA" />
-                    <Grupo curso="ST2" grupo="LB" />
-                </Celda>
-                <Celda>
-                    <Grupo curso="TAIS 2" grupo="LB" />
-                </Celda>
-                <Celda>
-                    <Grupo curso="TAIS" grupo="LC" />
-                    <Grupo curso="PIS 2" grupo="LB" />
-                    <Grupo curso="PPP" grupo="B" />
-                </Celda>
-            </div>
-            <div className={css(s.columna)}>
-                <div className={css(s.tableIndex)}>{days[currentDay() + 1]}</div>
-                <div style="padding: 0 0.25rem" />
+                <div className={css(s.tableIndex)} style="border: none; background: transparent;">&nbsp;</div>
+                <For each={horas}>
+                    {(hora) => <div className={css(s.celdaHora)}>{hora.substring(0, 5)}</div>}
+                </For>
             </div>
+            <Dia dia={days[currentDay()]} />
+            <Dia dia={days[currentDay() + 1]} />
         </div>
     );
 }