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

Crear TablaObserver para reemplazar la forma en la que se resaltan celdas en la tabla

Browse Source
This commit is contained in:
Araozu 2021-03-26 19:19:09 -05:00
parent f325f08fc8
commit cc36f070b7
10 changed files with 199 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -10,6 +10,9 @@
<link rel="stylesheet" href="css/phosphor.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

2
src/App.tsx
View File

@ -9,7 +9,7 @@ import { Creditos } from "./Creditos"
function App() {
/// @ts-ignore
const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
const mostrarMensajeBackdropFilterRaw = localStorage.getItem("mensaje-backdrop-filter-oculto") !== undefined
const mostrarMensajeBackdropFilterRaw = localStorage.getItem("mensaje-backdrop-filter-oculto") === undefined
const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw)

8
src/BarraSuperior.tsx
View File

@ -2,7 +2,7 @@ import { estilosGlobales } from "./Estilos"
import { StyleSheet, css } from "aphrodite"
import { numWallpaper, setNumWallpaper } from "./Store"
const totalWallpapers = 5
const ultimoIndiceWallpaper = 5
const e = StyleSheet.create({
contCambiador: {
@ -36,14 +36,14 @@ const retrocederWallpaper = () => {
setNumWallpaper(num - 1)
localStorage.setItem("num-img", (num - 1).toString())
} else {
setNumWallpaper(totalWallpapers)
localStorage.setItem("num-img", (totalWallpapers).toString())
setNumWallpaper(ultimoIndiceWallpaper)
localStorage.setItem("num-img", (ultimoIndiceWallpaper).toString())
}
}
const avanzarWallpaper = () => {
const num = numWallpaper()
if (num < totalWallpapers) {
if (num < ultimoIndiceWallpaper) {
setNumWallpaper(num + 1)
localStorage.setItem("num-img", (num + 1).toString())
} else {

33
src/ContenedorHorarios/CursosElem.tsx
View File

@ -1,7 +1,8 @@
import { Cursos, CursoRaw, DatosGrupo, ListaCursosUsuario, Curso } from "../types/DatosHorario"
import { createEffect, createMemo, For, SetStateFunction } from "solid-js"
import { Cursos, DatosGrupo, ListaCursosUsuario, Curso } from "../types/DatosHorario"
import { createMemo, For, SetStateFunction } from "solid-js"
import { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../Estilos"
import { TablaObserver } from "./TablaObserver"
const e = StyleSheet.create({
inline: {
@ -29,14 +30,14 @@ const e = StyleSheet.create({
})
interface Props {
version: number,
dataAnio: Cursos,
anioActual: () => string,
fnAgregarCurso: (c: Curso) => void,
listaCursosUsuario: ListaCursosUsuario,
idHover: () => string,
setIdHover: (v: string) => string,
esCursoMiHorario: boolean,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>,
tablaObserver: TablaObserver,
}
type FnSetCursosUsuarios = SetStateFunction<ListaCursosUsuario>;
@ -45,7 +46,7 @@ interface PropsIndicadorGrupo {
nombre: string,
esLab: boolean,
idParcial: string,
setIdHover: (v: string) => string,
tablaObserver: TablaObserver,
onClick: () => void
}
@ -54,8 +55,8 @@ function IndicadorGrupo(props: PropsIndicadorGrupo) {
return (
<span className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}
onMouseEnter={() => props.setIdHover(id)}
onMouseLeave={() => props.setIdHover("")}
onMouseEnter={() => props.tablaObserver.resaltar(id)}
onMouseLeave={() => props.tablaObserver.quitarResaltado()}
onClick={props.onClick}
>
{props.esLab ? "L" : ""}{props.nombre}
@ -114,7 +115,7 @@ export function CursosElem(props: Props) {
<For each={Object.entries(props.dataAnio)}>
{([indiceCurso, datosCurso]) => {
const idCurso = `${anio()}_${datosCurso.abreviado}`
const idCurso = `${props.version}_${anio()}_${datosCurso.abreviado}`
const cursoAgregadoMemo = createMemo(
() => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined,
@ -152,8 +153,8 @@ export function CursosElem(props: Props) {
<div className={claseMemo()}>
<div
className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
onMouseEnter={() => props.setIdHover(idCurso)}
onMouseLeave={() => props.setIdHover("")}
onMouseEnter={() => props.tablaObserver.resaltar(idCurso)}
onMouseLeave={() => props.tablaObserver.quitarResaltado()}
>
{datosCurso.abreviado} - {datosCurso.nombre}
</div>
@ -168,10 +169,11 @@ export function CursosElem(props: Props) {
</span>
<For each={grupos}>
{([x, fnOnClick]) => (
<IndicadorGrupo nombre={x}
<IndicadorGrupo
nombre={x}
esLab={false}
idParcial={idCurso}
setIdHover={props.setIdHover}
tablaObserver={props.tablaObserver}
onClick={fnOnClick}
/>
)
@ -190,10 +192,11 @@ export function CursosElem(props: Props) {
</span>
<For each={grupos}>
{([x, fnOnClick]) => (
<IndicadorGrupo nombre={x}
<IndicadorGrupo
nombre={x}
esLab
idParcial={idCurso}
setIdHover={props.setIdHover}
tablaObserver={props.tablaObserver}
onClick={fnOnClick}
/>
)

12
src/ContenedorHorarios/Horarios.tsx
View File

@ -7,6 +7,7 @@ import { CursosElem } from "./CursosElem"
import { EstadoLayout } from "./ContenedorHorarios"
import { BotonMaxMin } from "./BotonMaxMin"
import { useListaCursos } from "./useListaCursos"
import { TablaObserver } from "./TablaObserver"
interface HorariosProps {
data: DatosHorario,
@ -25,8 +26,8 @@ const {
export function Horarios(props: HorariosProps) {
const [anioActual, setAnioActual] = createSignal("1er año")
// ID que indica cuales celdas resaltar.
const [idHover, setIdHover] = createSignal("")
const tablaObserver = new TablaObserver()
const elAnios = (
<For each={Object.entries(props.data.años)}>
@ -102,21 +103,20 @@ export function Horarios(props: HorariosProps) {
data={dataTabla()}
version={props.data.version}
anio={anioActual()}
idHover={idHover}
setIdHover={setIdHover}
setCursosUsuarios={setListaCursos}
tablaObserver={tablaObserver}
/>
</div>
<div>
<CursosElem
version={props.data.version}
dataAnio={dataTabla()}
anioActual={anioActual}
fnAgregarCurso={props.fnAgregarCurso}
listaCursosUsuario={props.listaCursosUsuario}
idHover={idHover}
setIdHover={setIdHover}
esCursoMiHorario={false}
setCursosUsuarios={setListaCursos}
tablaObserver={tablaObserver}
/>
</div>
</Match>

15
src/ContenedorHorarios/MiHorario.tsx
View File

@ -1,13 +1,13 @@
import { estilosGlobales } from "../Estilos"
import { StyleSheet, css } from "aphrodite"
import { Tabla } from "./Tabla"
import { mostrarDescansos } from "../Store"
import { EstadoLayout } from "./ContenedorHorarios"
import { Switch, Match, For, createMemo, createSignal, SetStateFunction } from "solid-js"
import { Switch, Match, createMemo, SetStateFunction } from "solid-js"
import { BotonMaxMin } from "./BotonMaxMin"
import { BotonIcono } from "./BotonIcono"
import { Curso, Cursos, ListaCursosUsuario } from "../types/DatosHorario"
import { CursosElem } from "./CursosElem"
import { TablaObserver } from "./TablaObserver"
interface MiHorarioProps {
estadoLayout: EstadoLayout,
@ -31,7 +31,7 @@ const e = StyleSheet.create({
})
export function MiHorario(props: MiHorarioProps) {
const [idHover, setIdHover] = createSignal("")
const tablaObserver = new TablaObserver()
const datosMiHorario = createMemo(() => {
const obj: Cursos = {}
@ -48,7 +48,7 @@ export function MiHorario(props: MiHorarioProps) {
/* TODO: En barra superior colocar todos los horarios. En barra inferior el horario
actual.
Al hacer click en un horario de la barra superior, llevarlo al inicio de la lista.
*/
*/
return (
<div>
<Switch>
@ -110,21 +110,20 @@ export function MiHorario(props: MiHorarioProps) {
data={datosMiHorario()}
anio={"Mi horario"}
version={1}
idHover={idHover}
setIdHover={setIdHover}
setCursosUsuarios={props.setCursosUsuarios}
tablaObserver={tablaObserver}
/>
</div>
<CursosElem
version={Number(Math.random() * 1_000_000)}
anioActual={() => "Mi horario"}
dataAnio={datosMiHorario()}
fnAgregarCurso={props.fnAgregarCurso}
listaCursosUsuario={props.cursosUsuario}
idHover={idHover}
setIdHover={setIdHover}
esCursoMiHorario
setCursosUsuarios={props.setCursosUsuarios}
tablaObserver={tablaObserver}
/>
</Match>
<Match when={props.estadoLayout === "MaxHorarios"}>

11
src/ContenedorHorarios/Tabla.tsx
View File

@ -4,6 +4,7 @@ import { estilosGlobales } from "../Estilos"
import { Cursos, ListaCursosUsuario, DataProcesada } from "../types/DatosHorario"
import { Dia, dias, horas } from "../Store"
import { FilaTabla } from "./Tabla/FilaTabla"
import { TablaObserver } from "./TablaObserver"
export const coloresBorde = Object.freeze([
"rgba(33,150,243,1)",
@ -160,16 +161,13 @@ interface Props {
data: Cursos,
anio: string,
version: number,
idHover: () => string,
setIdHover: (v: string) => string,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>,
tablaObserver: TablaObserver,
}
export function Tabla(props: Props) {
const anio = () => props.anio.substring(0, props.anio.indexOf(" "))
const data = createMemo(() => procesarAnio(props.data, anio(), props.version, props.setCursosUsuarios))
const idHover = props.idHover
const setIdHover = props.setIdHover
const celdas = createMemo(() => {
// Hace reaccionar a la reactividad de Solid
@ -180,8 +178,7 @@ export function Tabla(props: Props) {
<FilaTabla
data={data()}
hora={hora}
idHover={idHover}
setIdHover={setIdHover}
tablaObserver={props.tablaObserver}
/>
)}
</For>

90
src/ContenedorHorarios/Tabla/CeldaFila.tsx
View File

@ -1,8 +1,9 @@
import { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../../Estilos"
import { For, createSignal, createMemo, createEffect, SetStateFunction } from "solid-js"
import { For, createSignal, createMemo } from "solid-js"
import { Dia } from "../../Store"
import { DatosGrupo, ListaCursosUsuario } from "../../types/DatosHorario"
import { DatosGrupo } from "../../types/DatosHorario"
import { TablaObserver } from "../TablaObserver"
const e = StyleSheet.create({
celdaComun: {
@ -19,7 +20,7 @@ const e = StyleSheet.create({
borderRadius: "5px",
// transition: "background-color 100ms, color 100ms"
},
celdaCursoActiva: {
celdaResaltado: {
// color: "#151515"
},
celdaCursoTeoria: {
@ -28,7 +29,7 @@ const e = StyleSheet.create({
celdaCursoLab: {
fontStyle: "italic",
},
celdaSeleccionada: {
celdaSeleccionado: {
textDecoration: "underline",
},
})
@ -78,22 +79,16 @@ interface Props {
datosGrupo: DatosGrupo,
fnSeleccionar: () => void
}[],
idHover: () => string,
setIdHover: (v: string) => string,
fnResaltarFila: () => void,
fnDesresaltarFila: () => void,
dia: Dia,
tablaObserver: TablaObserver,
}
const claseSeldaSeleccionada = css(e.celdaSeleccionada)
const claseSeldaSeleccionada = css(e.celdaSeleccionado)
export function CeldaFila(props: Props) {
const datos = props.datos
const idHover = props.idHover
const setIdHover = props.setIdHover
const fnOnMouseEnter = (id: string) => setIdHover(id)
const fnOnMouseLeave = () => setIdHover("")
return (
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
@ -104,6 +99,8 @@ export function CeldaFila(props: Props) {
const esLab = datos.esLab
const fnSeleccionar = datos.fnSeleccionar
const estadoCeldaMemo = props.tablaObserver.registrarConId(id)
const [estabaResaltado, setEstabaResaltado] = createSignal(false)
const estaSeleccionado = createMemo(() => datos.datosGrupo.seleccionado)
@ -113,20 +110,59 @@ export function CeldaFila(props: Props) {
const clases = [
e.celdaCurso,
esLab ? e.celdaCursoLab : e.celdaCursoTeoria,
estaSeleccionado() && e.celdaSeleccionada,
estaSeleccionado() && e.celdaSeleccionado,
]
let adicional = ""
const idHoverS = idHover()
if (idHoverS !== "" && id.search(idHoverS) !== -1) {
props.fnResaltarFila()
clases.push(e.celdaCursoActiva)
adicional = clasesColores[props.dia]
setEstabaResaltado(true)
} else if (estabaResaltado()) {
props.fnDesresaltarFila()
setEstabaResaltado(false)
const estadoCelda = estadoCeldaMemo()
switch (estadoCelda) {
case "Normal": {
if (estabaResaltado()) {
props.fnDesresaltarFila()
setEstabaResaltado(false)
}
break
}
case "Oculto": {
if (estabaResaltado()) {
props.fnDesresaltarFila()
setEstabaResaltado(false)
}
// TODO
break
}
case "Resaltado": {
props.fnResaltarFila()
setEstabaResaltado(true)
clases.push(e.celdaResaltado)
adicional = clasesColores[props.dia]
break
}
case "Seleccionado": {
if (estabaResaltado()) {
props.fnDesresaltarFila()
setEstabaResaltado(false)
}
break
}
case "ResaltadoOculto": {
props.fnResaltarFila()
setEstabaResaltado(true)
break
}
case "ResaltadoSeleccionado": {
props.fnResaltarFila()
setEstabaResaltado(true)
break
}
}
return `${css(...clases)} ${adicional}`
},
undefined,
@ -135,9 +171,13 @@ export function CeldaFila(props: Props) {
return (
<span className={clases()}
onMouseEnter={() => fnOnMouseEnter(id)}
onMouseLeave={fnOnMouseLeave}
onClick={fnSeleccionar}
onMouseEnter={() => {
props.tablaObserver.resaltar(id)
}}
onMouseLeave={() => {
props.tablaObserver.quitarResaltado()
}}
onClick={fnSeleccionar}
>
{txt}
</span>

13
src/ContenedorHorarios/Tabla/FilaTabla.tsx
View File

@ -1,10 +1,11 @@
import { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../../Estilos"
import { For, createSignal, createMemo, createState, createEffect, State, SetStateFunction } from "solid-js"
import { For, createMemo, createState, State } from "solid-js"
import { Dia, dias } from "../../Store"
import { CeldaFila } from "./CeldaFila"
import { DataProcesada, ListaCursosUsuario } from "../../types/DatosHorario"
import { DataProcesada } from "../../types/DatosHorario"
import { coloresBorde, diaANum } from "../Tabla"
import { TablaObserver } from "../TablaObserver"
const e = StyleSheet.create({
celdaHora: {
@ -61,8 +62,7 @@ const [diasResaltados, setDiasResaltados] = createState({
interface Props {
hora: string,
data: DataProcesada,
idHover: () => string,
setIdHover: (v: string) => string
tablaObserver: TablaObserver,
}
const diasFilter = createMemo(() => Object.entries(diasResaltados)
@ -140,16 +140,15 @@ export function FilaTabla(props: Props) {
return (
<CeldaFila
datos={datos}
idHover={props.idHover}
setIdHover={props.setIdHover}
fnResaltarFila={() => fnResaltar(dia)}
fnDesresaltarFila={() => fnDesresaltar(dia)}
dia={dia}
tablaObserver={props.tablaObserver}
/>
)
}}
</For>
<div className={css(e.filaBorde)} />
<div className={css(e.filaBorde)}/>
</div>
</div>
)

112
src/ContenedorHorarios/TablaObserver.ts
View File

@ -1,18 +1,18 @@
import { createMemo, createState, SetStateFunction, State } from "solid-js"
/**
* - Normal
* - Oculto - Otro grupo seleccionado
* - Seleccionado - Cursor ensima
* - Resaltado - Grupo seleccionado
* - ResaltadoSeleccionado - Grupo seleccionado y cursor encima
* - ResaltadoOculto - Otro grupo seleccionado y cursor encima
* - Resaltado - Cursor encima
* - Seleccionado - Grupo escogido
* - ResaltadoSeleccionado - Grupo escogido y cursor encima
* - ResaltadoOculto - Otro grupo escogido y cursor encima
*/
import { createMemo, createState, SetStateFunction, State } from "solid-js";
type EstadoCelda =
| "Normal"
| "Oculto"
| "Seleccionado"
| "Resaltado"
| "Seleccionado"
| "ResaltadoSeleccionado"
| "ResaltadoOculto"
@ -20,7 +20,7 @@ interface Datos {
anio?: string,
curso?: string,
esLab?: boolean,
grupo?: string
grupo?: string,
}
export class TablaObserver {
@ -28,35 +28,93 @@ export class TablaObserver {
private readonly resaltado: State<Datos>
private readonly setResaltado: SetStateFunction<Datos>
private gruposSeleccionados = {}
private memos: {[id: string]: () => EstadoCelda} = {};
constructor() {
const [resaltado, setResaltado] = createState<Datos>({
anio: undefined,
curso: undefined,
esLab: undefined,
grupo: undefined
});
this.resaltado = resaltado;
this.setResaltado = setResaltado;
grupo: undefined,
})
this.resaltado = resaltado
this.setResaltado = setResaltado
}
// Cada celda se registra dando estos datos
// Devuelve un memo con un valor de EstadoCelda,
// el cual cada celda sabra como manejar
registrar(anio: string, cursoAbreviado: string, esLab: boolean, grupo: string) {
const fn = () => {
};
const memo = createMemo(
fn,
/**
* Crea un memo que indica el estado de la celda
* @param anio El año
* @param curso Curso abreviado
* @param esLab Si es laboratorio
* @param grupo Una única letra
*/
private registrar(anio: string, curso: string, esLab: boolean, grupo: string): () => EstadoCelda {
const resaltado = this.resaltado
const resaltadoMemo = createMemo(
() => {
if (resaltado.anio === anio && resaltado.curso === curso) {
if (resaltado.esLab === undefined) {
return true
} else if (resaltado.esLab !== esLab) {
return false
} else {
if (resaltado.grupo === undefined) {
return true
} else return resaltado.grupo === grupo;
}
} else {
return false
}
},
undefined,
(x, y) => x === y
);
(x, y) => x === y,
)
return createMemo(
(): EstadoCelda => {
if (resaltadoMemo()) {
return "Resaltado"
} else {
return "Normal"
}
},
undefined,
(x, y) => x === y,
)
}
resaltar(id: string) {
/**
* Crea un memo que indica el estado de la celda a partir de un id
* @param id Id a registrar - YYYYMMDD_Año_Curso[\_Lab[_Grupo]]
*/
registrarConId(id: string): () => EstadoCelda {
if (this.memos[id]) {
return this.memos[id]
}
const [, anio, curso, lab, grupo] = id.split("_")
const memo = this.registrar(anio, curso, lab === "L", grupo)
this.memos[id] = memo;
return memo;
}
/**
* Parsea el id y hace que las celdas registradas se actualizen adecuadamente
* @param id Id a resaltar - YYYYMMDD_Año_Curso[\_Lab[_Grupo]]
*/
resaltar(id: string) {
const [, anio, curso, lab, grupo] = id.split("_")
if (anio === undefined || curso === undefined) {
console.error("Error al intentar resaltar celda: anio o curso son undefined:", anio, curso)
return
}
this.setResaltado({
anio,
curso,
esLab: lab === "L",
grupo,
})
}
quitarResaltado() {
@ -64,7 +122,7 @@ export class TablaObserver {
anio: undefined,
curso: undefined,
esLab: undefined,
grupo: undefined
});
grupo: undefined,
})
}
}