From 2b6b6c413486ccefe62435088d5d20dbeda49164 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Thu, 11 Mar 2021 11:25:02 -0500
Subject: [PATCH] Modificar layout para que el usuario pueda tener multiples
 horarios

---
 src/App.tsx                           |  2 +-
 src/ContenedorHorarios/BotonIcono.tsx | 23 +++++++++++++++++++++++
 src/ContenedorHorarios/Horarios.tsx   |  8 ++++++++
 src/ContenedorHorarios/MiHorario.tsx  | 22 ++++++++++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/ContenedorHorarios/BotonIcono.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 06c4829..8edbbb8 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,7 +32,7 @@ function App() {
                     </span>
                 </div>
             </Show>
-            <br/>
+            <div style={{width: "100%", height: "0.5rem"}}/>
             <ContenedorHorarios/>
         </div>
     );
diff --git a/src/ContenedorHorarios/BotonIcono.tsx b/src/ContenedorHorarios/BotonIcono.tsx
new file mode 100644
index 0000000..bc83dd2
--- /dev/null
+++ b/src/ContenedorHorarios/BotonIcono.tsx
@@ -0,0 +1,23 @@
+import { css } from "aphrodite";
+import { estilosGlobales } from "../Estilos";
+
+interface BotonMaxMinProps {
+    icono: string,
+    titulo: string,
+    onClick: () => void
+}
+
+export function BotonIcono(props: BotonMaxMinProps) {
+    return <div title={props.titulo}
+                onClick={props.onClick}
+                className={css(
+                    estilosGlobales.contenedor,
+                    estilosGlobales.inlineBlock,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft,
+                    estilosGlobales.contenedorPhospor
+                )}
+    >
+        <i className={css(estilosGlobales.botonPhospor) + " " + props.icono}/>
+    </div>
+}
diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index d5ecfef..40acfc1 100755
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/src/ContenedorHorarios/Horarios.tsx
@@ -49,6 +49,14 @@ export function Horarios(props: HorariosProps) {
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxHorarios"}>
+                <div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Horarios disponibles
+                    </div>
+                </div>
                 {elAnios}
                 |
                 <BotonMaxMin
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index 8d332c0..a9e287c 100755
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -5,6 +5,7 @@ import { mostrarDescansos } from "../Store";
 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";
 
 interface MiHorarioProps {
@@ -60,6 +61,7 @@ export function MiHorario(props: MiHorarioProps) {
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
+
                 <div>
                     <div className={css(
                         estilosGlobales.inlineBlock,
@@ -67,6 +69,26 @@ export function MiHorario(props: MiHorarioProps) {
                     )}>
                         Mi horario
                     </div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Opcion 2
+                    </div>
+                </div>
+
+                <div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Mi horario
+                    </div>
+                    |
+                    <BotonIcono titulo={"Nuevo horario en blanco"} icono={"ph-plus"} 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}