From 0ab324d65088ec6913610b9152f7a07c6e551842 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Tue, 16 Mar 2021 13:33:12 -0500
Subject: [PATCH] Cambiar estado del boton al agregar curso a mi horario

---
 src/App.tsx                                   |  2 +
 src/ContenedorHorarios/ContenedorHorarios.tsx |  6 +-
 src/ContenedorHorarios/Cursos.tsx             | 65 +++++++++++++++----
 src/ContenedorHorarios/Horarios.tsx           | 11 +++-
 src/ContenedorHorarios/MiHorario.tsx          | 10 ++-
 src/Creditos.tsx                              | 15 +++++
 6 files changed, 85 insertions(+), 24 deletions(-)
 create mode 100644 src/Creditos.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8edbbb8..813c8df 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { Wallpaper } from "./Wallpaper";
 import { Show, createSignal } from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "./Estilos";
+import { Creditos } from "./Creditos";
 
 function App() {
     /// @ts-ignore
@@ -34,6 +35,7 @@ function App() {
             </Show>
             <div style={{width: "100%", height: "0.5rem"}}/>
             <ContenedorHorarios/>
+            <Creditos/>
         </div>
     );
 }
diff --git a/src/ContenedorHorarios/ContenedorHorarios.tsx b/src/ContenedorHorarios/ContenedorHorarios.tsx
index 26ecd75..218871f 100755
--- a/src/ContenedorHorarios/ContenedorHorarios.tsx
+++ b/src/ContenedorHorarios/ContenedorHorarios.tsx
@@ -23,8 +23,6 @@ const [cursosUsuario, setCursosUsuarios] = createState<ListaCursosUsuario>({
     cursos: []
 });
 
-
-
 const agregarCursoUsuario = (curso: Curso) => {
     if (cursosUsuario.cursos.find(x => x.nombre === curso.nombre)) {
         return;
@@ -100,7 +98,9 @@ export function ContenedorHorarios() {
                 <Horarios data={datos()!!}
                           estadoLayout={estadoLayout()}
                           setEstadoLayout={setEstadoLayout}
-                          fnAgregarCurso={agregarCursoUsuario}/>
+                          fnAgregarCurso={agregarCursoUsuario}
+                          listaCursosUsuario={cursosUsuario}
+                />
             </Show>
         </div>
     </div>;
diff --git a/src/ContenedorHorarios/Cursos.tsx b/src/ContenedorHorarios/Cursos.tsx
index 4707871..8dc21f0 100755
--- a/src/ContenedorHorarios/Cursos.tsx
+++ b/src/ContenedorHorarios/Cursos.tsx
@@ -1,28 +1,69 @@
-import { AnioData, Curso } from "../types/DatosHorario";
-import { For } from "solid-js";
+import { AnioData, Curso, ListaCursosUsuario } from "../types/DatosHorario";
+import { createEffect, createMemo, For } from "solid-js";
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 
 const e = StyleSheet.create({
     contenedorCurso: {
-        display: "inline-block",
-
+        display: "inline-block"
     }
 });
 
-export function Cursos(props: { dataAnio: AnioData, fnAgregarCurso: (c: Curso) => void }) {
+interface Props {
+    dataAnio: AnioData,
+    fnAgregarCurso: (c: Curso) => void,
+    listaCursosUsuario: ListaCursosUsuario
+}
+
+export function Cursos(props: Props) {
+
+    const claseCursoNoAgregado = css(
+        e.contenedorCurso,
+        estilosGlobales.contenedor,
+        estilosGlobales.contenedorCursor,
+        estilosGlobales.contenedorCursorSoft
+    );
+
+    const claseCursoAgregado = css(
+        e.contenedorCurso,
+        estilosGlobales.contenedor,
+        estilosGlobales.contenedorCursor,
+        estilosGlobales.contenedorCursorSoft,
+        estilosGlobales.contenedorCursorActivo,
+    );
+
     return <>
         <For each={Object.entries(props.dataAnio)}>
             {([_, datosCurso]) => {
-                return <span title={"Agregar " + datosCurso.abreviado + " a mi horario"} className={css(
-                    e.contenedorCurso,
-                    estilosGlobales.contenedor,
-                    estilosGlobales.contenedorCursor,
-                    estilosGlobales.contenedorCursorSoft
-                )}
+
+                const cursoAgregadoMemo = createMemo(
+                    () => props.listaCursosUsuario.cursos.find(x => x.nombre === datosCurso.nombre) !== undefined,
+                    undefined,
+                    (x, y) => x === y
+                );
+
+                const tituloMemo = createMemo(() => cursoAgregadoMemo()
+                    ? `Remover ${datosCurso.abreviado} de mi horario`
+                    : `Agregar ${datosCurso.abreviado} a mi horario`
+                );
+
+                const claseMemo = createMemo(() =>
+                    cursoAgregadoMemo()
+                        ? claseCursoAgregado
+                        : claseCursoNoAgregado
+                );
+
+                const iconoMemo = createMemo(() =>
+                    cursoAgregadoMemo()
+                        ? "ph-minus"
+                        : "ph-plus"
+                );
+
+                return <span title={tituloMemo()}
+                             className={claseMemo()}
                              onClick={() => props.fnAgregarCurso(datosCurso)}
                 >
-                    <i className="ph-plus"/>
+                    <i className={iconoMemo()}/>
                     {datosCurso.abreviado} - {datosCurso.nombre}
                 </span>
             }}
diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index 40acfc1..507123a 100755
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/src/ContenedorHorarios/Horarios.tsx
@@ -1,4 +1,4 @@
-import { Curso, DatosHorario } from "../types/DatosHorario";
+import { Curso, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario";
 import { For, createSignal, createMemo} from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
@@ -12,7 +12,8 @@ interface HorariosProps {
     data: DatosHorario,
     estadoLayout: EstadoLayout,
     setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
-    fnAgregarCurso: (c: Curso) => void
+    fnAgregarCurso: (c: Curso) => void,
+    listaCursosUsuario: ListaCursosUsuario
 }
 
 export function Horarios(props: HorariosProps) {
@@ -70,7 +71,11 @@ export function Horarios(props: HorariosProps) {
                     <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
                 </div>
                 <div>
-                    <Cursos dataAnio={dataTabla()} fnAgregarCurso={props.fnAgregarCurso}/>
+                    <Cursos
+                        dataAnio={dataTabla()}
+                        fnAgregarCurso={props.fnAgregarCurso}
+                        listaCursosUsuario={props.listaCursosUsuario}
+                    />
                 </div>
             </Match>
             <Match when={props.estadoLayout === "MaxPersonal"}>
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index a9e287c..3038a3f 100755
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -58,6 +58,10 @@ export function MiHorario(props: MiHorarioProps) {
     const fnMinimizar = () => props.setEstadoLayout("Normal");
     const estadoActualLayout = () => props.estadoLayout;
 
+    /* TODO: En barra superior colocar todos los horarios. En barra inferior el horario
+        actual.
+        Al hacer click en un horario de la barra superior, llevarlo al inicio de la lista.
+     */
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
@@ -69,12 +73,6 @@ export function MiHorario(props: MiHorarioProps) {
                     )}>
                         Mi horario
                     </div>
-                    <div className={css(
-                        estilosGlobales.inlineBlock,
-                        estilosGlobales.contenedor
-                    )}>
-                        Opcion 2
-                    </div>
                 </div>
 
                 <div>
diff --git a/src/Creditos.tsx b/src/Creditos.tsx
new file mode 100644
index 0000000..b9a56e9
--- /dev/null
+++ b/src/Creditos.tsx
@@ -0,0 +1,15 @@
+import { StyleSheet, css } from "aphrodite";
+
+const e = StyleSheet.create({
+    creditos: {
+        textAlign: "center",
+        paddingTop: "7.5rem",
+        paddingBottom: "1rem"
+    }
+});
+
+export function Creditos() {
+    return <div className={css(e.creditos)}>
+        Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
+    </div>
+}
\ No newline at end of file