Posicionamiento de grupos en la tabla
This commit is contained in:
Araozu
parent
10749c5900
commit
16f2e71430
@ -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,
|
||||
|
||||
@ -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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -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"> </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;"> </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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user