Simplificar interfaz de horario de pc

src/Views/pc/Sistemas.tsx

@@ -1,8 +1,5 @@
 import { BarraSuperior } from "../../BarraSuperior";
 import { ContenedorHorarios } from "./Sistemas/ContenedorHorarios";
-import { Show, createSignal } from "solid-js";
-import { css } from "aphrodite";
-import { estilosGlobales } from "../../Estilos";
 import { Creditos } from "../../Creditos";
 import { Separador } from "../../Separador";
 
@@ -11,6 +8,7 @@ export function Sistemas() {
         <div>
             <BarraSuperior />
             <Separador />
+            <Separador />
             <ContenedorHorarios />
             <Creditos />
         </div>

src/Views/pc/Sistemas/ContenedorHorarios.tsx

@@ -72,35 +72,6 @@ const {
 export function ContenedorHorarios() {
     const [datosCargados, setDatosCargados] = createSignal(false);
     const [datos, setDatos] = createSignal<DatosHorario | null>(null);
-    const [estadoLayout, setEstadoLayout] = (
-        createSignal<EstadoLayout>(localStorage.getItem("estadoLayout") as EstadoLayout || "Normal")
-    );
-
-    const e = createMemo(() => {
-        let templateColumns = "";
-        switch (estadoLayout()) {
-            case "MaxHorarios": {
-                templateColumns = "0 auto";
-                break;
-            }
-            case "MaxPersonal": {
-                templateColumns = "auto 0m";
-                break;
-            }
-            case "Normal": {
-                templateColumns = "50% 50%";
-            }
-        }
-
-        localStorage.setItem("estadoLayout", estadoLayout());
-
-        return StyleSheet.create({
-            contenedor: {
-                display: "grid",
-                gridTemplateColumns: templateColumns,
-            },
-        });
-    });
 
     createEffect(async() => {
         const datos = await datosPromise;
@@ -111,28 +82,10 @@ export function ContenedorHorarios() {
     });
 
     return (
-        <div className={css(e().contenedor)}>
+        <MiHorario
-            <div>
+            cursosUsuario={cursosUsuario}
-                <MiHorario
+            fnAgregarCurso={agregarCursoUsuario}
-                    estadoLayout={estadoLayout()}
+            setCursosUsuarios={setCursosUsuarios}
-                    setEstadoLayout={setEstadoLayout}
+        />
-                    cursosUsuario={cursosUsuario}
-                    fnAgregarCurso={agregarCursoUsuario}
-                    setCursosUsuarios={setCursosUsuarios}
-                />
-            </div>
-            <div>
-                <Show when={datosCargados()}>
-                    <Horarios
-                        data={datos()!}
-                        estadoLayout={estadoLayout()}
-                        setEstadoLayout={setEstadoLayout}
-                        fnAgregarCurso={(c) => agregarCursoUsuario(JSON.parse(JSON.stringify(c)))}
-                        listaCursosUsuario={cursosUsuario}
-                        setCursosUsuarios={setCursosUsuarios}
-                    />
-                </Show>
-            </div>
-        </div>
     );
 }

src/Views/pc/Sistemas/ContenedorHorarios/MiHorario.tsx

@@ -11,8 +11,6 @@ import { CursosElem } from "./CursosElem";
 import { TablaObserver } from "./TablaObserver";
 
 interface MiHorarioProps {
-    estadoLayout: EstadoLayout,
-    setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
     cursosUsuario: ListaCursosUsuario,
     fnAgregarCurso: (c: Curso) => void,
     setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>
@@ -42,105 +40,40 @@ export function MiHorario(props: MiHorarioProps) {
         return obj;
     });
 
-    const fnMaximizar = () => props.setEstadoLayout("MaxPersonal");
-    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>
+            <div className={css(
-                <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
+                estilosGlobales.inlineBlock,
+                estilosGlobales.contenedor,
+            )}
+            >
+                Mi horario
+            </div>
 
-                    <div>
+            <div className={css(
-                        <div className={css(
+                e.horario,
-                            estilosGlobales.inlineBlock,
+                estilosGlobales.contenedor,
-                            estilosGlobales.contenedor,
+            )}
-                        )}
+            >
-                        >
+                <Tabla
-                        Mi horario
+                    data={datosMiHorario()}
-                        </div>
+                    anio={"Mi horario"}
-                    </div>
+                    version={1}
+                    setCursosUsuarios={props.setCursosUsuarios}
+                    tablaObserver={tablaObserver}
+                />
+            </div>
 
-                    <div>
+            <CursosElem
-                        <div className={css(
+                version={Math.floor(Math.random() * 1_000_000)}
-                            estilosGlobales.inlineBlock,
+                anioActual={() => "Mi horario"}
-                            estilosGlobales.contenedor,
+                dataAnio={datosMiHorario()}
-                        )}
+                fnAgregarCurso={props.fnAgregarCurso}
-                        >
+                listaCursosUsuario={props.cursosUsuario}
-                            Mi horario
+                esCursoMiHorario
-                        </div>
+                setCursosUsuarios={props.setCursosUsuarios}
-                        |
+                tablaObserver={tablaObserver}
-                        {/*
+            />
-                        <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}
-                            fnMinimizar={fnMinimizar}
-                            estadoActualLayout={estadoActualLayout}
-                            estadoLayoutMax={"MaxPersonal"}
-                        />
-                    </div>
-
-                    <div className={css(
-                        e.horario,
-                        estilosGlobales.contenedor,
-                    )}
-                    >
-                        <Tabla
-                            data={datosMiHorario()}
-                            anio={"Mi horario"}
-                            version={1}
-                            setCursosUsuarios={props.setCursosUsuarios}
-                            tablaObserver={tablaObserver}
-                        />
-                    </div>
-
-                    <CursosElem
-                        version={Math.floor(Math.random() * 1_000_000)}
-                        anioActual={() => "Mi horario"}
-                        dataAnio={datosMiHorario()}
-                        fnAgregarCurso={props.fnAgregarCurso}
-                        listaCursosUsuario={props.cursosUsuario}
-                        esCursoMiHorario
-                        setCursosUsuarios={props.setCursosUsuarios}
-                        tablaObserver={tablaObserver}
-                    />
-                </Match>
-                <Match when={props.estadoLayout === "MaxHorarios"}>
-                    {/*
-                    <BotonMaxMin
-                        fnMaximizar={fnMaximizar}
-                        fnMinimizar={fnMinimizar}
-                        estadoActualLayout={estadoActualLayout}
-                        estadoLayoutMax={"MaxPersonal"}
-                    />
-                    */}
-                    <div />
-                </Match>
-            </Switch>
         </div>
     );
 }