Limpiar codigo
This commit is contained in:
Fernando
parent
07668ed201
commit
fe98b12130
@ -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) => (
|
||||
<td style={{"padding-bottom": "0.5rem", "padding-right": "0.75rem"}}>
|
||||
<span>
|
||||
{profesor}
|
||||
</span>
|
||||
<For each={grupos}>
|
||||
{([x, fnOnClick]) => (
|
||||
<IndicadorGrupo
|
||||
nombre={x}
|
||||
esLab={esLab}
|
||||
idParcial={idCurso}
|
||||
tablaObserver={props.tablaObserver}
|
||||
onClick={fnOnClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</td>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={claseMemo()}>
|
||||
<button
|
||||
className={css(e.botonCurso, e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
|
||||
onMouseEnter={() => props.tablaObserver.resaltar(idCurso)}
|
||||
onMouseLeave={() => props.tablaObserver.quitarResaltado()}
|
||||
>
|
||||
{datosCurso.abreviado} - {datosCurso.nombre}
|
||||
</button>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<For each={Object.entries(profesoresTeoria())}>
|
||||
{([profesor, grupos]) => IndicadorGrupos(profesor, grupos, false)}
|
||||
</For>
|
||||
</tr>
|
||||
<tr>
|
||||
<For each={Object.entries(profesoresLab())}>
|
||||
{([profesor, grupos]) => IndicadorGrupos(profesor, grupos, true)}
|
||||
</For>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
|
||||
onClick={() => props.fnAgregarCurso(datosCurso)}
|
||||
>
|
||||
{tituloMemo}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<For each={Object.entries(props.dataAnio)}>
|
||||
{([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 (
|
||||
<div className={claseMemo()}>
|
||||
<button
|
||||
className={css(e.botonCurso, e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
|
||||
onMouseEnter={() => props.tablaObserver.resaltar(idCurso)}
|
||||
onMouseLeave={() => props.tablaObserver.quitarResaltado()}
|
||||
>
|
||||
{datosCurso.abreviado} - {datosCurso.nombre}
|
||||
</button>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<For each={Object.entries(profesoresTeoria())}>
|
||||
{([profesor, grupos]) => (
|
||||
<td style={{"padding-bottom": "0.5rem", "padding-right": "0.75rem"}}>
|
||||
<span>
|
||||
{profesor}
|
||||
</span>
|
||||
<For each={grupos}>
|
||||
{([x, fnOnClick]) => (
|
||||
<IndicadorGrupo
|
||||
nombre={x}
|
||||
esLab={false}
|
||||
idParcial={idCurso}
|
||||
tablaObserver={props.tablaObserver}
|
||||
onClick={fnOnClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
<tr>
|
||||
<For each={Object.entries(profesoresLab())}>
|
||||
{([profesor, grupos]) => (
|
||||
<td style={{"padding-bottom": "0.5rem", "padding-right": "0.75rem"}}>
|
||||
<span>
|
||||
{profesor}
|
||||
</span>
|
||||
<For each={grupos}>
|
||||
{([x, fnOnClick]) => (
|
||||
<IndicadorGrupo
|
||||
nombre={x}
|
||||
esLab
|
||||
idParcial={idCurso}
|
||||
tablaObserver={props.tablaObserver}
|
||||
onClick={fnOnClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</For>
|
||||
</td>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
|
||||
onClick={() => props.fnAgregarCurso(datosCurso)}
|
||||
>
|
||||
{tituloMemo}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
{([indiceCurso, datosCurso]) => CursoE(indiceCurso, datosCurso, anio, claseCursoAgregado, props)}
|
||||
</For>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -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 (
|
||||
<button className={clases()}
|
||||
onMouseEnter={() => {
|
||||
props.tablaObserver.resaltar(id)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
props.tablaObserver.quitarResaltado()
|
||||
}}
|
||||
onClick={fnSeleccionar}
|
||||
>
|
||||
{txt}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function CeldaFila(props: Props) {
|
||||
const datos = props.datos
|
||||
|
||||
return (
|
||||
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
|
||||
<For each={datos}>
|
||||
{(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 (
|
||||
<button className={clases()}
|
||||
onMouseEnter={() => {
|
||||
props.tablaObserver.resaltar(id)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
props.tablaObserver.quitarResaltado()
|
||||
}}
|
||||
onClick={fnSeleccionar}
|
||||
>
|
||||
{txt}
|
||||
</button>
|
||||
)
|
||||
}}
|
||||
{(datos) => RenderFila(datos, props)}
|
||||
</For>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -132,7 +132,6 @@ export function FilaTabla(props: Props) {
|
||||
</div>
|
||||
<For each={dias}>
|
||||
{(dia) => {
|
||||
console.log("Renderizar dias")
|
||||
const diaStr = dia.substring(0, 2)
|
||||
const horaStr = hora.substring(0, 5)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user