Modificar la interfaz DatosHorario para que permita almacenar cursos ocultos y grupos seleccionados

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -1,15 +1,59 @@
 import YAML from "yaml";
-import { StyleSheet, css } from "aphrodite";
+import { css, StyleSheet } from "aphrodite";
 import { MiHorario } from "./MiHorario";
 import { Horarios } from "./Horarios";
-import { Curso, CursoUsuario, DatosHorario, DatosVarianteUsuario, ListaCursosUsuario } from "../types/DatosHorario";
+import {
+    Anios,
+    Cursos,
+    CursoRaw,
+    Curso,
+    DatosHorario,
+    DatosHorarioRaw,
+    DatosGrupo,
+    ListaCursosUsuario
+} from "../types/DatosHorario";
 import { estilosGlobales } from "../Estilos";
-import { Show, createSignal, createEffect, createMemo, batch, createState } from "solid-js";
+import { batch, createEffect, createMemo, createSignal, createState, Show } from "solid-js";
 
 const datosPromise = (async () => {
     const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
     const text = await file.text();
-    return YAML.parse(text) as DatosHorario;
+    const datosRaw = YAML.parse(text) as DatosHorarioRaw;
+
+    // Agregar los campos faltantes a DatosHorarioRaw para que sea DatosHorario
+    const datos: DatosHorario = {
+        ...datosRaw,
+        años: {}
+    };
+
+    const anios: Anios = {}
+    for (const [nombreAnio, anio] of Object.entries(datosRaw.años)) {
+        const anioData: Cursos = {};
+        for (const [nombreCurso, curso] of Object.entries(anio)) {
+
+            const gruposTeoria: { [k: string]: DatosGrupo } = {};
+            for (const [key, data] of Object.entries(curso.Teoria)) {
+                gruposTeoria[key] = Object.assign({seleccionado: false}, data);
+            }
+
+            const gruposLab: { [k: string]: DatosGrupo } = {};
+            for (const [key, data] of Object.entries(curso.Laboratorio ?? {})) {
+                gruposLab[key] = Object.assign({seleccionado: false}, data);
+            }
+
+            anioData[nombreCurso] = {
+                ...curso,
+                oculto: false,
+                Teoria: gruposTeoria,
+                Laboratorio: gruposLab
+            };
+        }
+
+        anios[nombreAnio] = anioData;
+    }
+
+    datos.años = anios;
+    return datos;
 })();
 
 const ElemCargando = () =>
@@ -28,27 +72,9 @@ const agregarCursoUsuario = (curso: Curso) => {
     const cursoActualIndex = cursosUsuario.cursos.findIndex(x => x.nombre === curso.nombre);
     if (cursoActualIndex !== -1) {
         setCursosUsuarios("cursos", cursoActualIndex, "oculto", x => !x);
-        return;
+    } else {
+        setCursosUsuarios("cursos", a => [...a, curso]);
     }
-
-    const gruposTeoria: { [k: string]: DatosVarianteUsuario } = {};
-    for (const [key, data] of Object.entries(curso.Teoria)) {
-        gruposTeoria[key] = Object.assign({seleccionado: false}, data);
-    }
-
-    const gruposLab: { [k: string]: DatosVarianteUsuario } = {};
-    for (const [key, data] of Object.entries(curso.Laboratorio ?? {})) {
-        gruposLab[key] = Object.assign({seleccionado: false}, data);
-    }
-
-    const cursoUsuario: CursoUsuario = {
-        ...curso,
-        oculto: false,
-        Teoria: gruposTeoria,
-        Laboratorio: gruposLab
-    };
-
-    setCursosUsuarios("cursos", a => [...a, cursoUsuario]);
 };
 
 export function ContenedorHorarios() {

src/ContenedorHorarios/CursosElem.tsx

@@ -1,4 +1,4 @@
-import { AnioData, Curso, DatosVariante, ListaCursosUsuario } from "../types/DatosHorario";
+import { Cursos, CursoRaw, DatosGrupo, ListaCursosUsuario, Curso } from "../types/DatosHorario";
 import { createEffect, createMemo, For } from "solid-js";
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
@@ -26,7 +26,7 @@ const e = StyleSheet.create({
 });
 
 interface Props {
-    dataAnio: AnioData,
+    dataAnio: Cursos,
     anioActual: () => string,
     fnAgregarCurso: (c: Curso) => void,
     listaCursosUsuario: ListaCursosUsuario,
@@ -35,7 +35,7 @@ interface Props {
 }
 
 function IndicadorGrupo(props: { nombre: string, esLab: boolean, idParcial: string, setIdHover: (v: string) => string }) {
-    const id = `${props.idParcial}_${props.esLab? 'L' : 'T'}_${props.nombre}`;
+    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"}}
                  onMouseEnter={() => props.setIdHover(id)}
@@ -45,7 +45,7 @@ function IndicadorGrupo(props: { nombre: string, esLab: boolean, idParcial: stri
     </span>
 }
 
-const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
+const agruparProfesores = (datos: { [k: string]: DatosGrupo }) => {
     const profesores: { [k: string]: string[] } = {};
     for (const [grupo, datosGrupo] of Object.entries(datos)) {
         const nombreProfesor = datosGrupo.Docente;
@@ -57,7 +57,7 @@ const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
     return profesores;
 };
 
-export function Cursos(props: Props) {
+export function CursosElem(props: Props) {
     const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" "));
 
     const claseCursoNoAgregado = css(
@@ -99,9 +99,10 @@ export function Cursos(props: Props) {
                 const profesoresLab = createMemo(() => agruparProfesores(datosCurso.Laboratorio ?? {}));
 
                 return <div className={claseMemo()}>
-                    <div className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
+                    <div
-                         onMouseEnter={() => props.setIdHover(idCurso)}
+                        className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
-                         onMouseLeave={() => props.setIdHover("")}
+                        onMouseEnter={() => props.setIdHover(idCurso)}
+                        onMouseLeave={() => props.setIdHover("")}
                     >
                         {datosCurso.abreviado} - {datosCurso.nombre}
                     </div>

src/ContenedorHorarios/Horarios.tsx

@@ -1,9 +1,9 @@
-import { Curso, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario";
+import { Curso, CursoRaw, DatosHorario, DatosHorarioRaw, ListaCursosUsuario } from "../types/DatosHorario";
 import { For, createSignal, createMemo } from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 import { Tabla } from "./Tabla";
-import { Cursos } from "./Cursos";
+import { CursosElem } from "./CursosElem";
 import { EstadoLayout } from "./ContenedorHorarios";
 import { BotonMaxMin } from "./BotonMaxMin";
 import { Switch, Match } from "solid-js";
@@ -77,7 +77,7 @@ export function Horarios(props: HorariosProps) {
                     />
                 </div>
                 <div>
-                    <Cursos
+                    <CursosElem
                         dataAnio={dataTabla()}
                         anioActual={anioActual}
                         fnAgregarCurso={props.fnAgregarCurso}

src/ContenedorHorarios/MiHorario.tsx

@@ -6,7 +6,7 @@ import { EstadoLayout } from "./ContenedorHorarios";
 import { Switch, Match, For, createMemo } from "solid-js";
 import { BotonMaxMin } from "./BotonMaxMin";
 import { BotonIcono } from "./BotonIcono";
-import { AnioData, ListaCursosUsuario } from "../types/DatosHorario";
+import { Cursos, ListaCursosUsuario } from "../types/DatosHorario";
 
 interface MiHorarioProps {
     estadoLayout: EstadoLayout,
@@ -42,7 +42,7 @@ const e = StyleSheet.create({
 export function MiHorario(props: MiHorarioProps) {
 
     const datosMiHorario = createMemo(() => {
-        const obj: AnioData = {};
+        const obj: Cursos = {};
         props.cursosUsuario.cursos.forEach(x => {
             obj[x.nombre] = {...x};
         });
@@ -83,10 +83,26 @@ export function MiHorario(props: MiHorarioProps) {
                         Mi horario
                     </div>
                     |
-                    <BotonIcono titulo={"Nuevo horario en blanco"} icono={"ph-plus"} onClick={() => {}}/>
+                    <BotonIcono titulo={"Nuevo horario en blanco"}
-                    <BotonIcono titulo={"Reiniciar horario"} icono={"ph-arrow-counter-clockwise"} onClick={() => {}}/>
+                                icono={"ph-plus"}
-                    <BotonIcono titulo={"Duplicar horario"} icono={"ph-copy"} onClick={() => {}}/>
+                                onClick={() => {
-                    <BotonIcono titulo={"Eliminar horario"} icono={"ph-trash"} onClick={() => {}}/>
+                                }}
+                    />
+                    <BotonIcono titulo={"Reiniciar horario"}
+                                icono={"ph-arrow-counter-clockwise"}
+                                onClick={() => {
+                                }}
+                    />
+                    <BotonIcono titulo={"Duplicar horario"}
+                                icono={"ph-copy"}
+                                onClick={() => {
+                                }}
+                    />
+                    <BotonIcono titulo={"Eliminar horario"}
+                                icono={"ph-trash"}
+                                onClick={() => {
+                                }}
+                    />
                     |
                     <BotonMaxMin
                         fnMaximizar={fnMaximizar}
@@ -100,7 +116,12 @@ export function MiHorario(props: MiHorarioProps) {
                     e.horario,
                     estilosGlobales.contenedor
                 )}>
-                    <Tabla data={datosMiHorario()} anio={"Mi horario"} version={1}/>
+                    <Tabla data={datosMiHorario()}
+                           anio={"Mi horario"}
+                           version={1}
+                           idHover={() => ""}
+                           setIdHover={(v: string) => ""}
+                    />
 
                     <Horario cursosUsuario={props.cursosUsuario}/>
 

src/ContenedorHorarios/Tabla.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, css } from "aphrodite";
 import { createMemo, createSignal, For } from "solid-js";
 import { estilosGlobales } from "../Estilos";
-import { AnioData, CursoUsuario } from "../types/DatosHorario";
+import { Cursos, Curso } from "../types/DatosHorario";
 import { Dia, dias, horas } from "../Store";
 import { DataProcesada } from "../types/DatosHorario";
 import { FilaTabla } from "./Tabla/FilaTabla";
@@ -81,12 +81,11 @@ const e = StyleSheet.create({
     }
 });
 
-const procesarAnio = (data: AnioData, anio: string, version: number) => {
+const procesarAnio = (data: Cursos, anio: string, version: number) => {
     const obj: DataProcesada = {};
 
     for (const [, curso] of Object.entries(data)) {
-        // TODO: Reemplazar Curso con CursoUsuario, hacer los cambios donde se cargan los datos
+        if (curso.oculto) continue;
-        if ((curso as CursoUsuario).oculto) continue;
 
         const nombreAbreviado = curso.abreviado;
 
@@ -147,7 +146,7 @@ const procesarAnio = (data: AnioData, anio: string, version: number) => {
 }
 
 interface Props {
-    data: AnioData,
+    data: Cursos,
     anio: string,
     version: number,
     idHover: () => string,

src/types/DatosHorario.ts

@@ -1,50 +1,66 @@
-export interface DatosVariante {
+export interface CursoRaw {
-    Docente: string,
+    nombre: string,
-    Horas: string[]
+    abreviado: string,
+    Teoria: {
+        [grupo: string]: {
+            Docente: string,
+            Horas: string[]
+        }
+    }
+    Laboratorio?: {
+        [grupo: string]: {
+            Docente: string,
+            Horas: string[]
+        }
+    }
 }
 
-export interface DatosVarianteUsuario extends DatosVariante {
+export interface DatosHorarioRaw {
+    titulo: string,
+    descripcion: string,
+    version: number,
+    años: {
+        [key: string]: {
+            [nombre: string]: CursoRaw
+        }
+    }
+}
+
+export interface DatosGrupo {
+    Docente: string,
+    Horas: string[]
     seleccionado: boolean
 }
 
 export interface Curso {
     nombre: string,
     abreviado: string,
-    Teoria: {
-        [grupo: string]: DatosVariante
-    }
-    Laboratorio?: {
-        [grupo: string]: DatosVariante
-    }
-}
-
-export interface CursoUsuario extends Curso {
     oculto: boolean,
     Teoria: {
-        [grupo: string]: DatosVarianteUsuario
+        [grupo: string]: DatosGrupo
     }
     Laboratorio?: {
-        [grupo: string]: DatosVarianteUsuario
+        [grupo: string]: DatosGrupo
     }
 }
 
 export interface ListaCursosUsuario {
-    cursos: CursoUsuario[]
+    cursos: Curso[]
 }
 
-export interface AnioData {
+export interface Cursos {
     [nombre: string]: Curso
 }
 
-export interface Anio {
+export interface Anios {
-    [key: string]: AnioData
+    [key: string]: Cursos
 }
 
 export interface DatosHorario {
     titulo: string,
     descripcion: string,
     version: number,
-    años: Anio
+    años: Anios
 }
 
 export interface DataProcesada {