diff --git a/src/ContenedorHorarios/CursosElem.tsx b/src/ContenedorHorarios/CursosElem.tsx index 1d5ee63..ca4ff20 100755 --- a/src/ContenedorHorarios/CursosElem.tsx +++ b/src/ContenedorHorarios/CursosElem.tsx @@ -34,6 +34,13 @@ const e = StyleSheet.create({ }, }) +const claseCursoNoAgregado = css( + e.contenedorCurso, + estilosGlobales.contenedor, +) + +const claseCursoOculto = css(e.cursoOculto) + interface Props { version: number, dataAnio: Cursos, @@ -101,129 +108,113 @@ const agruparProfesores = ( return profesores } +function CursoE( + indiceCurso: string, + datosCurso: Curso, + anio: () => string, + claseCursoAgregado: string, + props: Props +) { + const idCurso = `${props.version}_${anio()}_${datosCurso.abreviado}` + + const cursoAgregadoMemo = createMemo( + () => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined, + undefined, + (x, y) => x === y, + ) + + const tituloMemo = createMemo(() => (cursoAgregadoMemo() + ? "Remover de mi horario" + : "Agregar a mi horario")) + + const claseMemo = createMemo(() => { + if (props.esCursoMiHorario && datosCurso.oculto) { + return claseCursoOculto + } + return cursoAgregadoMemo() + ? claseCursoAgregado + : claseCursoNoAgregado + }) + + const profesoresTeoria = createMemo(() => agruparProfesores( + datosCurso.Teoria, + Number(indiceCurso), + false, + props.setCursosUsuarios, + )) + const profesoresLab = createMemo(() => agruparProfesores( + datosCurso.Laboratorio ?? {}, + Number(indiceCurso), + true, + props.setCursosUsuarios, + )) + + const IndicadorGrupos = (profesor: string, grupos: [string, () => void][], esLab: boolean) => ( + + + {profesor}  + + + {([x, fnOnClick]) => ( + + ) + } + + + ) + + return ( +
+ + + + + + {([profesor, grupos]) => IndicadorGrupos(profesor, grupos, false)} + + + + + {([profesor, grupos]) => IndicadorGrupos(profesor, grupos, true)} + + + +
+ +
+ ) +} + export function CursosElem(props: Props) { const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" ")) - const claseCursoNoAgregado = css( - e.contenedorCurso, - estilosGlobales.contenedor, - ) - const claseCursoAgregado = css( e.contenedorCurso, estilosGlobales.contenedor, !props.esCursoMiHorario && estilosGlobales.contenedorCursorActivo, ) - const claseCursoOculto = css(e.cursoOculto) - return ( <> - {([indiceCurso, datosCurso]) => { - - const idCurso = `${props.version}_${anio()}_${datosCurso.abreviado}` - - const cursoAgregadoMemo = createMemo( - () => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined, - undefined, - (x, y) => x === y, - ) - - const tituloMemo = createMemo(() => (cursoAgregadoMemo() - ? "Remover de mi horario" - : "Agregar a mi horario")) - - const claseMemo = createMemo(() => { - if (props.esCursoMiHorario && datosCurso.oculto) { - return claseCursoOculto - } - return cursoAgregadoMemo() - ? claseCursoAgregado - : claseCursoNoAgregado - }) - - const profesoresTeoria = createMemo(() => agruparProfesores( - datosCurso.Teoria, - Number(indiceCurso), - false, - props.setCursosUsuarios, - )) - const profesoresLab = createMemo(() => agruparProfesores( - datosCurso.Laboratorio ?? {}, - Number(indiceCurso), - true, - props.setCursosUsuarios, - )) - - return ( -
- - - - - - {([profesor, grupos]) => ( - - )} - - - - - {([profesor, grupos]) => ( - - )} - - - -
- - {profesor}  - - - {([x, fnOnClick]) => ( - - ) - } - -
- - {profesor}  - - - {([x, fnOnClick]) => ( - - ) - } - -
- -
- ) - }} + {([indiceCurso, datosCurso]) => CursoE(indiceCurso, datosCurso, anio, claseCursoAgregado, props)} ) diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx index 5227d90..4c2d72d 100755 --- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx +++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx @@ -72,6 +72,14 @@ const clasesColores = { Viernes: css(eColores.viernes), } +interface DatosProps { + id: string, + txt: string, + esLab: boolean, + datosGrupo: DatosGrupo, + fnSeleccionar: () => void +} + interface Props { /** * Informacion de los cursos a renderizar en la celda @@ -82,13 +90,7 @@ interface Props { * * esLab - Boolean que indica si el grupo es de laboratorio */ - datos: { - id: string, - txt: string, - esLab: boolean, - datosGrupo: DatosGrupo, - fnSeleccionar: () => void - }[], + datos: DatosProps[], fnResaltarFila: () => void, fnDesresaltarFila: () => void, dia: Dia, @@ -97,109 +99,111 @@ interface Props { const claseSeldaSeleccionada = css(e.celdaSeleccionado) +function RenderFila(datos: DatosProps, props: Props) { + const id = datos.id + const txt = datos.txt + const esLab = datos.esLab + const fnSeleccionar = datos.fnSeleccionar + + const estadoCeldaMemo = props.tablaObserver.registrarConId(id, datos.datosGrupo) + + const [estabaResaltado, setEstabaResaltado] = createSignal(false) + + // Limpiar los memos, porque cuando se desmonta la celda esos memos quedan sin efecto + onCleanup(() => { + props.tablaObserver.limpiar(id) + }) + + const clases = createMemo( + () => { + const clases = [ + e.celdaCurso, + esLab ? e.celdaCursoLab : e.celdaCursoTeoria, + ] + let adicional = "" + + const estadoCelda = estadoCeldaMemo() + + switch (estadoCelda) { + case "Normal": { + if (estabaResaltado()) { + props.fnDesresaltarFila() + setEstabaResaltado(false) + } + + break + } + case "Oculto": { + if (estabaResaltado()) { + props.fnDesresaltarFila() + setEstabaResaltado(false) + } + + clases.push(e.celdaOculto) + break + } + case "Resaltado": { + props.fnResaltarFila() + setEstabaResaltado(true) + clases.push(e.celdaResaltado) + adicional = clasesColores[props.dia] + break + } + case "Seleccionado": { + if (estabaResaltado()) { + props.fnDesresaltarFila() + setEstabaResaltado(false) + } + + clases.push(e.celdaSeleccionado) + break + } + case "ResaltadoOculto": { + props.fnResaltarFila() + setEstabaResaltado(true) + + clases.push(e.celdaResaltadoOculto) + adicional = clasesColores[props.dia] + break + } + case "ResaltadoSeleccionado": { + props.fnResaltarFila() + setEstabaResaltado(true) + + clases.push(e.celdaResaltadoSeleccionado) + adicional = clasesColores[props.dia] + break + } + } + + return `${css(...clases)} ${adicional}` + }, + undefined, + (x, y) => x === y, + ) + + return ( + + ) +} + export function CeldaFila(props: Props) { const datos = props.datos return (
- {(datos) => { - const id = datos.id - const txt = datos.txt - const esLab = datos.esLab - const fnSeleccionar = datos.fnSeleccionar - - const estadoCeldaMemo = props.tablaObserver.registrarConId(id, datos.datosGrupo) - - const [estabaResaltado, setEstabaResaltado] = createSignal(false) - - // Limpiar los memos, porque cuando se desmonta la celda esos memos quedan sin efecto - onCleanup(() => { - props.tablaObserver.limpiar(id) - }) - - const clases = createMemo( - () => { - const clases = [ - e.celdaCurso, - esLab ? e.celdaCursoLab : e.celdaCursoTeoria, - ] - let adicional = "" - - const estadoCelda = estadoCeldaMemo() - - switch (estadoCelda) { - case "Normal": { - if (estabaResaltado()) { - props.fnDesresaltarFila() - setEstabaResaltado(false) - } - - break - } - case "Oculto": { - if (estabaResaltado()) { - props.fnDesresaltarFila() - setEstabaResaltado(false) - } - - clases.push(e.celdaOculto) - break - } - case "Resaltado": { - props.fnResaltarFila() - setEstabaResaltado(true) - clases.push(e.celdaResaltado) - adicional = clasesColores[props.dia] - break - } - case "Seleccionado": { - if (estabaResaltado()) { - props.fnDesresaltarFila() - setEstabaResaltado(false) - } - - clases.push(e.celdaSeleccionado) - break - } - case "ResaltadoOculto": { - props.fnResaltarFila() - setEstabaResaltado(true) - - clases.push(e.celdaResaltadoOculto) - adicional = clasesColores[props.dia] - break - } - case "ResaltadoSeleccionado": { - props.fnResaltarFila() - setEstabaResaltado(true) - - clases.push(e.celdaResaltadoSeleccionado) - adicional = clasesColores[props.dia] - break - } - } - - return `${css(...clases)} ${adicional}` - }, - undefined, - (x, y) => x === y, - ) - - return ( - - ) - }} + {(datos) => RenderFila(datos, props)}
) diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx index 6f75c10..4489f9a 100755 --- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx +++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx @@ -132,7 +132,6 @@ export function FilaTabla(props: Props) { {(dia) => { - console.log("Renderizar dias") const diaStr = dia.substring(0, 2) const horaStr = hora.substring(0, 5)