Agregada funcionalidad a los botones de los horarios

public/horarios/2018_2_fps_ingenieriadesistemas.yaml

@@ -1,4 +1,5 @@
 titulo: Horarios 2018-2, Ingeniería de Sistemas.
+version: 20200912
 año: 2018
 periodo: 2
 facultad:

public/horarios/2019_2_fps_ingenieriadesistemas.yaml

@@ -1,4 +1,5 @@
 titulo: Horarios 2019-2, Ingeniería de Sistemas.
+version: 20200912
 años:
   2do año:
     Estadistica:

public/horarios/2020_1_fps_ingenieriadesistemas.yaml

@@ -1,4 +1,5 @@
 titulo: Horarios 2020-1, Ingeniería de Sistemas.
+version: 20200912
 descripcion: |
   Este horario esta parcialmente completo. Los datos se obtuvieron de
   https://drive.google.com/file/d/1DqAkbDtcVjAWhEb6YwMpFWUkXGpgeQt1/view

public/horarios/2020_2_fps_ingenieriadesistemas.yaml

@@ -1,4 +1,5 @@
 titulo: Horarios 2020-2, Ingeniería de Sistemas.
+version: 20200912
 descripcion: |
   <b>Hay horas distintas/grupos eliminados en lab.</b>
   <br>

src/ContenedorHorarios/Horarios.tsx

@@ -1,28 +1,41 @@
 import { DatosHorario } from "../types/DatosHorario";
-import { createEffect, Show, For } from "solid-js";
+import { For, createSignal, createMemo } from "solid-js";
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
+import { Tabla } from "./Tabla";
 
 export function Horarios(props: { data: DatosHorario }) {
 
+    const [anioActual, setAnioActual] = createSignal("1er año");
+
     const elAnios = <For each={Object.entries(props.data.años)}>
-        {([nombre]) =>
-            <div className={css(
-                estilosGlobales.contenedor,
-                estilosGlobales.inlineBlock,
-                estilosGlobales.contenedorCursor,
-                estilosGlobales.contenedorCursorSoft
-            )}>
+        {([nombre]) => {
+            const clases = createMemo(() => {
+                const vAnio = anioActual();
+                return css(
+                    estilosGlobales.contenedor,
+                    estilosGlobales.inlineBlock,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft,
+                    nombre === vAnio && estilosGlobales.contenedorCursorActivo
+                );
+            });
+
+            return <div className={clases()} onClick={() => setAnioActual(nombre)}>
                 {nombre}
             </div>
-        }
+        }}
     </For>;
 
+    const dataTabla = createMemo(() => {
+        return props.data.años[anioActual()];
+    });
+
     return <div>
         {elAnios}
         <br/>
-        <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
-            Cargado :D
+        <div className={css(estilosGlobales.contenedor)}>
+            <Tabla data={dataTabla()}/>
         </div>
     </div>;
 }

src/ContenedorHorarios/MiHorario.tsx

@@ -50,7 +50,7 @@ export function MiHorario() {
             e.horario,
             estilosGlobales.contenedor
         )}>
-            <Tabla/>
+            <Tabla data={{}}/>
         </div>
     </div>;
 }

src/ContenedorHorarios/Tabla.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet, css } from "aphrodite";
-import { For, Show } from "solid-js";
+import { For} from "solid-js";
 import { estilosGlobales } from "../Estilos";
-import { mostrarDescansos } from "../Store";
+import { AnioData } from "../types/DatosHorario";
 
 const dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
 const horas = [
@@ -34,7 +34,7 @@ const horasDescanso = [
     "17:30 - 17:40"
 ]
 
-export function Tabla() {
+export function Tabla(props: {data: AnioData}) {
     const e = StyleSheet.create({
         fila: {
             position: "relative",
@@ -61,7 +61,7 @@ export function Tabla() {
             top: "-0.75rem"
         },
         celdaComun: {
-            width: "calc((100% - 4rem) / 5)",
+            width: "20%",
             textAlign: "center",
             padding: "0 0.5rem",
             boxSizing: "border-box"
@@ -91,12 +91,7 @@ export function Tabla() {
                         <For each={dias}>
                             {() =>
                                 <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
-                                    <span>:D</span>
-                                    <span>D:</span>
-                                    <span>:)</span>
-                                    <br/>
-                                    <span>(:</span>
-                                    <span>:p</span>
+
                                 </div>
                             }
                         </For>

src/Estilos.ts

@@ -15,14 +15,14 @@ export const estilosGlobales = StyleSheet.create({
         transition: "background-color 200ms",
         textDecoration: "underline solid white 2px",
         ":hover": {
-            backgroundColor: "rgba(200, 200, 200, 0.2)"
+            backgroundColor: "rgba(200, 200, 200, 0.3)"
         }
     },
     contenedorCursorSoft: {
         textDecoration: "underline rgba(255, 255, 255, 0.4)"
     },
     contenedorCursorActivo: {
-        backgroundColor: "rgba(255, 255, 255, 0.2)"
+        backgroundColor: "rgba(200, 200, 200, 0.3)"
     },
     inlineBlock: {
         display: "inline-block"

src/Store.ts

@@ -7,7 +7,6 @@ enum ModoColor {
 }
 
 const numImgGuardado = parseInt(localStorage.getItem("num-img") ?? "4");
-console.log(numImgGuardado);
 
 export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro);
 export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);

src/types/DatosHorario.ts

@@ -1,5 +1,4 @@
-
-interface Curso {
+export interface Curso {
     nombre: string,
     abreviado: string,
     Teoria: {
@@ -16,15 +15,18 @@ interface Curso {
     }
 }
 
-interface Anio {
-    [key: string]: {
-        [nombre: string]: Curso
-    }
+export interface AnioData {
+    [nombre: string]: Curso
+}
+
+export interface Anio {
+    [key: string]: AnioData
 }
 
 export interface DatosHorario {
     titulo: string,
     descripcion: string,
+    version: number,
     años: Anio
 }