Implementar resaltado de grupos en la tabla y cursos

src/ContenedorHorarios/Cursos.tsx

@@ -27,13 +27,20 @@ const e = StyleSheet.create({
 
 interface Props {
     dataAnio: AnioData,
+    anioActual: () => string,
     fnAgregarCurso: (c: Curso) => void,
-    listaCursosUsuario: ListaCursosUsuario
+    listaCursosUsuario: ListaCursosUsuario,
+    idHover: () => string,
+    setIdHover: (v: string) => string
 }
 
-function IndicadorGrupo(props: { nombre: string, esLab: boolean }) {
+function IndicadorGrupo(props: { nombre: string, esLab: boolean, idParcial: string, setIdHover: (v: string) => string }) {
+    const id = `${props.idParcial}_${props.esLab? 'L' : 'T'}_${props.nombre}`;
     return <span className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
-                 style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}>
+                 style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}
+                 onMouseEnter={() => props.setIdHover(id)}
+                 onMouseLeave={() => props.setIdHover("")}
+    >
         {props.esLab ? "L" : ""}{props.nombre}
     </span>
 }
@@ -51,6 +58,7 @@ const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
 };
 
 export function Cursos(props: Props) {
+    const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" "));
 
     const claseCursoNoAgregado = css(
         e.contenedorCurso,
@@ -67,6 +75,8 @@ export function Cursos(props: Props) {
         <For each={Object.entries(props.dataAnio)}>
             {([_, datosCurso]) => {
 
+                const idCurso = `${anio()}_${datosCurso.abreviado}`;
+
                 const cursoAgregadoMemo = createMemo(
                     () => props.listaCursosUsuario.cursos.find(x => {
                         return x.nombre === datosCurso.nombre && !x.oculto
@@ -102,7 +112,13 @@ export function Cursos(props: Props) {
                                             {profesor}&nbsp;
                                         </span>
                                         <For each={grupos}>
-                                            {x => <IndicadorGrupo nombre={x} esLab={false}/>}
+                                            {x =>
+                                                <IndicadorGrupo nombre={x}
+                                                                esLab={false}
+                                                                idParcial={idCurso}
+                                                                setIdHover={props.setIdHover}
+                                                />
+                                            }
                                         </For>
                                     </td>
                                 }}
@@ -116,7 +132,13 @@ export function Cursos(props: Props) {
                                             {profesor}&nbsp;
                                         </span>
                                         <For each={grupos}>
-                                            {x => <IndicadorGrupo nombre={x} esLab={true}/>}
+                                            {x =>
+                                                <IndicadorGrupo nombre={x}
+                                                                esLab={true}
+                                                                idParcial={idCurso}
+                                                                setIdHover={props.setIdHover}
+                                                />
+                                            }
                                         </For>
                                     </td>
                                 }}

src/ContenedorHorarios/Horarios.tsx

@@ -79,8 +79,11 @@ export function Horarios(props: HorariosProps) {
                 <div>
                     <Cursos
                         dataAnio={dataTabla()}
+                        anioActual={anioActual}
                         fnAgregarCurso={props.fnAgregarCurso}
                         listaCursosUsuario={props.listaCursosUsuario}
+                        idHover={idHover}
+                        setIdHover={setIdHover}
                     />
                 </div>
             </Match>

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -80,7 +80,6 @@ interface Props {
 }
 
 export function CeldaFila(props: Props) {
-
     const datos = props.datos;
     const idHover = props.idHover;
     const setIdHover = props.setIdHover;