fernando/horarios-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separar Tabla.tsx en varios componentes

Browse Source
This commit is contained in:
Araozu 2021-02-26 09:17:36 -05:00
parent 19a09b82bb
commit e94a7faaed
5 changed files with 140 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/ContenedorHorarios/Tabla.tsx
View File

@ -3,6 +3,8 @@ import { createEffect, createMemo, createSignal, createState, For } from "solid-
import { estilosGlobales } from "../Estilos";
import { AnioData } from "../types/DatosHorario";
import { dias, horas, horasDescanso } from "../Store";
import { DataProcesada } from "../types/DatosHorario";
import { FilaTabla } from "./Tabla/FilaTabla";
const e = StyleSheet.create({
fila: {
@ -12,7 +14,7 @@ const e = StyleSheet.create({
marginLeft: "4rem",
display: "flex",
alignItems: "center",
minHeight: "1rem",
minHeight: "1.5rem",
":hover": {
// backgroundColor: "rgba(200, 200, 200, 0.25)"
}
@ -56,16 +58,6 @@ const e = StyleSheet.create({
}
});
interface DataProcesada {
[hora: string]: {
[dia: string]: {
id: string,
txt: string,
esLab: boolean
}[]
}
}
const procesarAnio = (data: AnioData, anio: string, version: number) => {
const obj: DataProcesada = {};
@ -137,39 +129,7 @@ export function Tabla(props: { data: AnioData, anio: string, version: number })
console.log("Renderizar tabla", props.anio);
return <For each={horas}>
{hora => {
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 => {
const diaStr = dia.substring(0, 2);
const horaStr = hora.substring(0, 5);
const datos = data()?.[horaStr]?.[diaStr] ?? [];
return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
<For each={datos}>
{({id, txt, esLab}) => {
const clases = () => {
const clases = [e.celdaCurso, !esLab && e.celdaCursoTeoria];
if (id === idHover()) clases.push(e.celdaCursoActiva);
return css(...clases);
};
return <span className={clases()} onMouseEnter={() => setIdHover(id)}>
{txt}
</span>;
}}
</For>
</div>;
}}
</For>
<div className={css(e.filaBorde)}/>
</div>
</div>;
return <FilaTabla data={data} hora={hora} idHover={idHover} setIdHover={setIdHover}/>
}}
</For>
});

58
src/ContenedorHorarios/Tabla/CeldaFila.tsx Normal file
View File

@ -0,0 +1,58 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
import { For } from "solid-js";
const e = StyleSheet.create({
celdaComun: {
width: "20%",
textAlign: "center",
padding: "0 0.5rem",
boxSizing: "border-box"
},
celdaCurso: {
display: "inline-block",
padding: "0.25rem 0.35rem",
cursor: "pointer",
borderRadius: "5px",
transition: "background-color 100ms"
},
celdaCursoActiva: {
backgroundColor: "rgba(200, 200, 200, 0.25)"
},
celdaCursoTeoria: {
fontWeight: "bold"
}
});
interface Props {
datos: {id: string, txt: string, esLab: boolean}[],
idHover: () => string,
setIdHover: (v: string) => string
}
export function CeldaFila(props: Props) {
const datos = props.datos;
const idHover = props.idHover;
const setIdHover = props.setIdHover;
return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
<For each={datos}>
{({id, txt, esLab}) => {
const clases = () => {
const clases = [e.celdaCurso, !esLab && e.celdaCursoTeoria];
if (id === idHover()) clases.push(e.celdaCursoActiva);
return css(...clases);
};
return <span className={clases()}
onMouseEnter={() => setIdHover(id)}
onMouseLeave={() => setIdHover("")}
>
{txt}
</span>;
}}
</For>
</div>
}

68
src/ContenedorHorarios/Tabla/FilaTabla.tsx Normal file
View File

@ -0,0 +1,68 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
import { For } from "solid-js";
import { dias } from "../../Store";
import {CeldaFila} from "./CeldaFila";
import { DataProcesada } from "../../types/DatosHorario";
const e = StyleSheet.create({
celdaHora: {
textAlign: "center",
width: "4rem",
padding: "0.25rem 0",
position: "absolute",
top: "-0.75rem"
},
fila: {
position: "relative",
zIndex: 2,
transition: "background-color 250ms",
marginLeft: "4rem",
display: "flex",
alignItems: "center",
minHeight: "1.5rem",
":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
},
});
interface Props {
hora: string,
data: () => DataProcesada,
idHover: () => string,
setIdHover: (v: string) => string
}
export function FilaTabla(props: Props) {
const hora = props.hora;
const data = props.data;
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 => {
const diaStr = dia.substring(0, 2);
const horaStr = hora.substring(0, 5);
const datos = data()?.[horaStr]?.[diaStr] ?? [];
return <CeldaFila datos={datos} idHover={props.idHover} setIdHover={props.setIdHover}/>
}}
</For>
<div className={css(e.filaBorde)}/>
</div>
</div>;
}

2
src/ContenedorHorarios/index.tsx
View File

@ -7,7 +7,7 @@ import { estilosGlobales } from "../Estilos";
import { Show, createSignal, createEffect, batch } from "solid-js";
const datosPromise = (async () => {
const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
const file = await fetch("/horarios/2020_1_fps_ingenieriadesistemas.yaml");
const text = await file.text();
return YAML.parse(text) as DatosHorario;
})();

9
src/types/DatosHorario.ts
View File

@ -30,3 +30,12 @@ export interface DatosHorario {
años: Anio
}
export interface DataProcesada {
[hora: string]: {
[dia: string]: {
id: string,
txt: string,
esLab: boolean
}[]
}
}