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 {
|
interface Props {
|
||||||
version: number,
|
version: number,
|
||||||
dataAnio: Cursos,
|
dataAnio: Cursos,
|
||||||
@ -101,129 +108,113 @@ const agruparProfesores = (
|
|||||||
return profesores
|
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) {
|
export function CursosElem(props: Props) {
|
||||||
const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" "))
|
const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" "))
|
||||||
|
|
||||||
const claseCursoNoAgregado = css(
|
|
||||||
e.contenedorCurso,
|
|
||||||
estilosGlobales.contenedor,
|
|
||||||
)
|
|
||||||
|
|
||||||
const claseCursoAgregado = css(
|
const claseCursoAgregado = css(
|
||||||
e.contenedorCurso,
|
e.contenedorCurso,
|
||||||
estilosGlobales.contenedor,
|
estilosGlobales.contenedor,
|
||||||
!props.esCursoMiHorario && estilosGlobales.contenedorCursorActivo,
|
!props.esCursoMiHorario && estilosGlobales.contenedorCursorActivo,
|
||||||
)
|
)
|
||||||
|
|
||||||
const claseCursoOculto = css(e.cursoOculto)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<For each={Object.entries(props.dataAnio)}>
|
<For each={Object.entries(props.dataAnio)}>
|
||||||
{([indiceCurso, datosCurso]) => {
|
{([indiceCurso, datosCurso]) => CursoE(indiceCurso, datosCurso, anio, claseCursoAgregado, 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,
|
|
||||||
))
|
|
||||||
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
</For>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -72,6 +72,14 @@ const clasesColores = {
|
|||||||
Viernes: css(eColores.viernes),
|
Viernes: css(eColores.viernes),
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DatosProps {
|
||||||
|
id: string,
|
||||||
|
txt: string,
|
||||||
|
esLab: boolean,
|
||||||
|
datosGrupo: DatosGrupo,
|
||||||
|
fnSeleccionar: () => void
|
||||||
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
/**
|
/**
|
||||||
* Informacion de los cursos a renderizar en la celda
|
* 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
|
* esLab - Boolean que indica si el grupo es de laboratorio
|
||||||
*/
|
*/
|
||||||
datos: {
|
datos: DatosProps[],
|
||||||
id: string,
|
|
||||||
txt: string,
|
|
||||||
esLab: boolean,
|
|
||||||
datosGrupo: DatosGrupo,
|
|
||||||
fnSeleccionar: () => void
|
|
||||||
}[],
|
|
||||||
fnResaltarFila: () => void,
|
fnResaltarFila: () => void,
|
||||||
fnDesresaltarFila: () => void,
|
fnDesresaltarFila: () => void,
|
||||||
dia: Dia,
|
dia: Dia,
|
||||||
@ -97,109 +99,111 @@ interface Props {
|
|||||||
|
|
||||||
const claseSeldaSeleccionada = css(e.celdaSeleccionado)
|
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) {
|
export function CeldaFila(props: Props) {
|
||||||
const datos = props.datos
|
const datos = props.datos
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
|
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
|
||||||
<For each={datos}>
|
<For each={datos}>
|
||||||
{(datos) => {
|
{(datos) => RenderFila(datos, 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>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -132,7 +132,6 @@ export function FilaTabla(props: Props) {
|
|||||||
</div>
|
</div>
|
||||||
<For each={dias}>
|
<For each={dias}>
|
||||||
{(dia) => {
|
{(dia) => {
|
||||||
console.log("Renderizar dias")
|
|
||||||
const diaStr = dia.substring(0, 2)
|
const diaStr = dia.substring(0, 2)
|
||||||
const horaStr = hora.substring(0, 5)
|
const horaStr = hora.substring(0, 5)
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user