fernando/horarios-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplificar interfaz de horario de pc

Browse Source
This commit is contained in:
Araozu 2022-10-14 17:29:05 -05:00
parent 678f266946
commit c7c705460a
3 changed files with 36 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Views/pc/Sistemas.tsx
View File

@ -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>

57
src/Views/pc/Sistemas/ContenedorHorarios.tsx
View File

@ -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)}>
<div>
<MiHorario
estadoLayout={estadoLayout()}
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>
<MiHorario
cursosUsuario={cursosUsuario}
fnAgregarCurso={agregarCursoUsuario}
setCursosUsuarios={setCursosUsuarios}
/>
);
}

127
src/Views/pc/Sistemas/ContenedorHorarios/MiHorario.tsx
View File

@ -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>
<Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
<div className={css(
estilosGlobales.inlineBlock,
estilosGlobales.contenedor,
)}
>
Mi horario
</div>
<div>
<div className={css(
estilosGlobales.inlineBlock,
estilosGlobales.contenedor,
)}
>
Mi horario
</div>
</div>
<div className={css(
e.horario,
estilosGlobales.contenedor,
)}
>
<Tabla
data={datosMiHorario()}
anio={"Mi horario"}
version={1}
setCursosUsuarios={props.setCursosUsuarios}
tablaObserver={tablaObserver}
/>
</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}
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>
<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}
/>
</div>
);
}