diff --git a/src/ContenedorHorarios/BotonMaxMin.tsx b/src/ContenedorHorarios/BotonMaxMin.tsx
new file mode 100644
index 0000000..5d9313a
--- /dev/null
+++ b/src/ContenedorHorarios/BotonMaxMin.tsx
@@ -0,0 +1,39 @@
+import { css } from "aphrodite";
+import { estilosGlobales } from "../Estilos";
+import { EstadoLayout } from "./ContenedorHorarios";
+
+interface BotonMaxMinProps {
+ fnMaximizar: () => void,
+ fnMinimizar: () => void,
+ estadoActualLayout: () => EstadoLayout, // El nombre del estado actual del layout
+ estadoLayoutMax: EstadoLayout // El nombre del estado en el cual el componente esta maximizado
+}
+
+export function BotonMaxMin(props: BotonMaxMinProps) {
+ const horariosMax = () => props.estadoActualLayout() === props.estadoLayoutMax;
+
+ const tituloBoton = () => horariosMax() ? "Minimizar" : "Maximizar";
+ const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out";
+
+ const funcionBoton = () => {
+ const estaMaximizado = horariosMax();
+ if (estaMaximizado) {
+ props.fnMinimizar();
+ } else {
+ props.fnMaximizar();
+ }
+ };
+
+ return
+
+
+}
diff --git a/src/ContenedorHorarios/ContenedorHorarios.tsx b/src/ContenedorHorarios/ContenedorHorarios.tsx
index f85b1f1..dca92d2 100755
--- a/src/ContenedorHorarios/ContenedorHorarios.tsx
+++ b/src/ContenedorHorarios/ContenedorHorarios.tsx
@@ -32,7 +32,7 @@ export function ContenedorHorarios() {
break;
}
case "MaxPersonal": {
- templateColumns = "40% 60%";
+ templateColumns = "auto 4rem";
break;
}
case "Normal": {
@@ -58,11 +58,11 @@ export function ContenedorHorarios() {
return ;
diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index 74b19df..52244a4 100755
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/src/ContenedorHorarios/Horarios.tsx
@@ -5,46 +5,16 @@ import { estilosGlobales } from "../Estilos";
import { Tabla } from "./Tabla";
import { Cursos } from "./Cursos";
import { EstadoLayout } from "./ContenedorHorarios";
+import { BotonMaxMin } from "./BotonMaxMin";
+import { Switch, Match } from "solid-js";
-const maximizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => {
- setEstadoLayout("MaxHorarios");
-};
-
-const minimizarHorario = (setEstadoLayout: (v: EstadoLayout) => EstadoLayout) => {
- setEstadoLayout("Normal");
-};
-
-function BotonExpandirOcultar(props: { setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) {
- const [horariosMax, setHorariosMax] = createSignal(false);
-
- const tituloBoton = () => horariosMax() ? "Minimizar horario" : "Maximizar horario";
- const iconoBoton = () => horariosMax() ? "ph-arrows-in" : "ph-arrows-out";
-
- const funcionBoton = () => {
- const estaMaximizado = horariosMax();
- setHorariosMax(!estaMaximizado);
- if (estaMaximizado) {
- minimizarHorario(props.setEstadoLayout);
- } else {
- maximizarHorario(props.setEstadoLayout);
- }
- };
-
- return
-
-
+interface HorariosProps {
+ data: DatosHorario,
+ estadoLayout: EstadoLayout,
+ setEstadoLayout: (v: EstadoLayout) => EstadoLayout
}
-export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: EstadoLayout) => EstadoLayout }) {
+export function Horarios(props: HorariosProps) {
const [anioActual, setAnioActual] = createSignal("1er año");
@@ -71,16 +41,38 @@ export function Horarios(props: { data: DatosHorario, setEstadoLayout: (v: Estad
return props.data.años[anioActual()];
});
+ const fnMaximizar = () => props.setEstadoLayout("MaxHorarios");
+ const fnMinimizar = () => props.setEstadoLayout("Normal");
+ const estadoActualLayout = () => props.estadoLayout;
+
return
- {elAnios}
- |
-
-
-
-
-
-
-
-
+
+
+ {elAnios}
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
;
}
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index b95dc59..12646d3 100755
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -1,11 +1,17 @@
import { estilosGlobales } from "../Estilos";
import { StyleSheet, css } from "aphrodite";
import { Tabla } from "./Tabla";
-import { mostrarDescansos, setMostrarDescansos } from "../Store";
+import { mostrarDescansos } from "../Store";
import { EstadoLayout } from "./ContenedorHorarios";
import { Switch, Match } from "solid-js";
+import { BotonMaxMin } from "./BotonMaxMin";
-export function MiHorario(props: { estadoLayout: EstadoLayout }) {
+interface MiHorarioProps {
+ estadoLayout: EstadoLayout,
+ setEstadoLayout: (v: EstadoLayout) => EstadoLayout
+}
+
+export function MiHorario(props: MiHorarioProps) {
const e = StyleSheet.create({
horario: {},
boton: {
@@ -19,17 +25,18 @@ export function MiHorario(props: { estadoLayout: EstadoLayout }) {
}
});
- const iconoBoton = () => props.estadoLayout === "Normal" ? "ph-arrows-in" : "ph-arrows-out";
-
const claseBotonMostrarDescansos = () =>
mostrarDescansos()
? "ph-check " + css(e.boton)
: "ph-circle " + css(e.boton);
- return
+ const fnMaximizar = () => props.setEstadoLayout("MaxPersonal");
+ const fnMinimizar = () => props.setEstadoLayout("Normal");
+ const estadoActualLayout = () => props.estadoLayout;
+ return