Incorporar CursosElem a Mi Horario

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -120,7 +120,11 @@ export function ContenedorHorarios() {
 
     return <div className={css(e().contenedor)}>
         <div>
-            <MiHorario estadoLayout={estadoLayout()} setEstadoLayout={setEstadoLayout} cursosUsuario={cursosUsuario}/>
+            <MiHorario estadoLayout={estadoLayout()}
+                       setEstadoLayout={setEstadoLayout}
+                       cursosUsuario={cursosUsuario}
+                       fnAgregarCurso={agregarCursoUsuario}
+            />
         </div>
         <div>
             <Show when={datosCargados()}>

src/ContenedorHorarios/CursosElem.tsx

@@ -19,6 +19,9 @@ const e = StyleSheet.create({
         display: "inline-block",
         verticalAlign: "top"
     },
+    cursoOculto: {
+        display: "none"
+    },
     botonTexto: {
         padding: "0.25rem 0.35rem",
         borderRadius: "5px"
@@ -31,7 +34,8 @@ interface Props {
     fnAgregarCurso: (c: Curso) => void,
     listaCursosUsuario: ListaCursosUsuario,
     idHover: () => string,
-    setIdHover: (v: string) => string
+    setIdHover: (v: string) => string,
+    esCursoMiHorario: boolean
 }
 
 function IndicadorGrupo(props: { nombre: string, esLab: boolean, idParcial: string, setIdHover: (v: string) => string }) {
@@ -68,9 +72,11 @@ export function CursosElem(props: Props) {
     const claseCursoAgregado = css(
         e.contenedorCurso,
         estilosGlobales.contenedor,
-        estilosGlobales.contenedorCursorActivo,
+        !props.esCursoMiHorario && estilosGlobales.contenedorCursorActivo,
     );
 
+    const claseCursoOculto = css(e.cursoOculto);
+
     return <>
         <For each={Object.entries(props.dataAnio)}>
             {([_, datosCurso]) => {
@@ -90,10 +96,14 @@ export function CursosElem(props: Props) {
                     : `Agregar a mi horario`
                 );
 
-                const claseMemo = createMemo(() => cursoAgregadoMemo()
+                const claseMemo = createMemo(() => {
-                    ? claseCursoAgregado
+                    if (props.esCursoMiHorario && datosCurso.oculto) {
-                    : claseCursoNoAgregado
+                        return claseCursoOculto
-                );
+                    }
+                    return cursoAgregadoMemo()
+                        ? claseCursoAgregado
+                        : claseCursoNoAgregado
+                });
 
                 const profesoresTeoria = createMemo(() => agruparProfesores(datosCurso.Teoria));
                 const profesoresLab = createMemo(() => agruparProfesores(datosCurso.Laboratorio ?? {}));
@@ -158,6 +168,6 @@ export function CursosElem(props: Props) {
                     </span>
                 </div>
             }}
-        </For>
+                </For>
-    </>;
+                </>;
-}
+                }

src/ContenedorHorarios/Horarios.tsx

@@ -77,13 +77,13 @@ export function Horarios(props: HorariosProps) {
                     />
                 </div>
                 <div>
-                    <CursosElem
+                    <CursosElem dataAnio={dataTabla()}
-                        dataAnio={dataTabla()}
+                                anioActual={anioActual}
-                        anioActual={anioActual}
+                                fnAgregarCurso={props.fnAgregarCurso}
-                        fnAgregarCurso={props.fnAgregarCurso}
+                                listaCursosUsuario={props.listaCursosUsuario}
-                        listaCursosUsuario={props.listaCursosUsuario}
+                                idHover={idHover}
-                        idHover={idHover}
+                                setIdHover={setIdHover}
-                        setIdHover={setIdHover}
+                                esCursoMiHorario={false}
                     />
                 </div>
             </Match>

src/ContenedorHorarios/MiHorario.tsx

@@ -3,27 +3,17 @@ import { StyleSheet, css } from "aphrodite";
 import { Tabla } from "./Tabla";
 import { mostrarDescansos } from "../Store";
 import { EstadoLayout } from "./ContenedorHorarios";
-import { Switch, Match, For, createMemo } from "solid-js";
+import { Switch, Match, For, createMemo, createSignal } from "solid-js";
 import { BotonMaxMin } from "./BotonMaxMin";
 import { BotonIcono } from "./BotonIcono";
-import { Cursos, ListaCursosUsuario } from "../types/DatosHorario";
+import { Curso, Cursos, ListaCursosUsuario } from "../types/DatosHorario";
+import { CursosElem } from "./CursosElem";
 
 interface MiHorarioProps {
     estadoLayout: EstadoLayout,
     setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
-    cursosUsuario: ListaCursosUsuario
+    cursosUsuario: ListaCursosUsuario,
-}
+    fnAgregarCurso: (c: Curso) => void,
-
-function Horario(props: { cursosUsuario: ListaCursosUsuario }) {
-    return <div>
-        <For each={props.cursosUsuario.cursos}>
-            {c => {
-                return <div>
-                    <p>{c.abreviado} - {c.nombre}</p>
-                </div>
-            }}
-        </For>
-    </div>
 }
 
 const e = StyleSheet.create({
@@ -40,6 +30,7 @@ const e = StyleSheet.create({
 });
 
 export function MiHorario(props: MiHorarioProps) {
+    const [idHover, setIdHover] = createSignal("");
 
     const datosMiHorario = createMemo(() => {
         const obj: Cursos = {};
@@ -119,13 +110,19 @@ export function MiHorario(props: MiHorarioProps) {
                     <Tabla data={datosMiHorario()}
                            anio={"Mi horario"}
                            version={1}
-                           idHover={() => ""}
+                           idHover={idHover}
-                           setIdHover={(v: string) => ""}
+                           setIdHover={setIdHover}
                     />
-
-                    <Horario cursosUsuario={props.cursosUsuario}/>
-
                 </div>
+
+                <CursosElem anioActual={() => "Mi horario"}
+                            dataAnio={datosMiHorario()}
+                            fnAgregarCurso={props.fnAgregarCurso}
+                            listaCursosUsuario={props.cursosUsuario}
+                            idHover={idHover}
+                            setIdHover={setIdHover}
+                            esCursoMiHorario={true}
+                />
             </Match>
             <Match when={props.estadoLayout === "MaxHorarios"}>
                 <BotonMaxMin