Renderizar los cursos en la tabla
This commit is contained in:
Araozu
parent
218c0dc430
commit
aa9d09cc9c
@ -1,5 +1,9 @@
|
||||
:root {
|
||||
--color-texto: white;
|
||||
}
|
||||
|
||||
body {
|
||||
color: white
|
||||
color: var(--color-texto);
|
||||
}
|
||||
|
||||
[class^="ph-"], [class*=" ph-"] ::before {
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ export function MiHorario() {
|
||||
e.horario,
|
||||
estilosGlobales.contenedor
|
||||
)}>
|
||||
<Tabla data={{}}/>
|
||||
<Tabla data={{}} anio={"Mi horario"} version={1}/>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
@ -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 <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 =>
|
||||
<div style={{position: "relative"}}>
|
||||
{hora => {
|
||||
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}>
|
||||
{() =>
|
||||
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
|
||||
{dia => {
|
||||
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>
|
||||
}
|
||||
@ -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",
|
||||
|
||||
31
src/Store.ts
31
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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user