Cambiar estado del boton al agregar curso a mi horario
This commit is contained in:
parent
2b6b6c4134
commit
0ab324d650
@ -4,6 +4,7 @@ import { Wallpaper } from "./Wallpaper";
|
||||
import { Show, createSignal } from "solid-js";
|
||||
import { css } from "aphrodite";
|
||||
import { estilosGlobales } from "./Estilos";
|
||||
import { Creditos } from "./Creditos";
|
||||
|
||||
function App() {
|
||||
/// @ts-ignore
|
||||
@ -34,6 +35,7 @@ function App() {
|
||||
</Show>
|
||||
<div style={{width: "100%", height: "0.5rem"}}/>
|
||||
<ContenedorHorarios/>
|
||||
<Creditos/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -23,8 +23,6 @@ const [cursosUsuario, setCursosUsuarios] = createState<ListaCursosUsuario>({
|
||||
cursos: []
|
||||
});
|
||||
|
||||
|
||||
|
||||
const agregarCursoUsuario = (curso: Curso) => {
|
||||
if (cursosUsuario.cursos.find(x => x.nombre === curso.nombre)) {
|
||||
return;
|
||||
@ -100,7 +98,9 @@ export function ContenedorHorarios() {
|
||||
<Horarios data={datos()!!}
|
||||
estadoLayout={estadoLayout()}
|
||||
setEstadoLayout={setEstadoLayout}
|
||||
fnAgregarCurso={agregarCursoUsuario}/>
|
||||
fnAgregarCurso={agregarCursoUsuario}
|
||||
listaCursosUsuario={cursosUsuario}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</div>;
|
||||
|
@ -1,28 +1,69 @@
|
||||
import { AnioData, Curso } from "../types/DatosHorario";
|
||||
import { For } from "solid-js";
|
||||
import { AnioData, Curso, ListaCursosUsuario } from "../types/DatosHorario";
|
||||
import { createEffect, createMemo, For } from "solid-js";
|
||||
import { StyleSheet, css } from "aphrodite";
|
||||
import { estilosGlobales } from "../Estilos";
|
||||
|
||||
const e = StyleSheet.create({
|
||||
contenedorCurso: {
|
||||
display: "inline-block",
|
||||
|
||||
display: "inline-block"
|
||||
}
|
||||
});
|
||||
|
||||
export function Cursos(props: { dataAnio: AnioData, fnAgregarCurso: (c: Curso) => void }) {
|
||||
interface Props {
|
||||
dataAnio: AnioData,
|
||||
fnAgregarCurso: (c: Curso) => void,
|
||||
listaCursosUsuario: ListaCursosUsuario
|
||||
}
|
||||
|
||||
export function Cursos(props: Props) {
|
||||
|
||||
const claseCursoNoAgregado = css(
|
||||
e.contenedorCurso,
|
||||
estilosGlobales.contenedor,
|
||||
estilosGlobales.contenedorCursor,
|
||||
estilosGlobales.contenedorCursorSoft
|
||||
);
|
||||
|
||||
const claseCursoAgregado = css(
|
||||
e.contenedorCurso,
|
||||
estilosGlobales.contenedor,
|
||||
estilosGlobales.contenedorCursor,
|
||||
estilosGlobales.contenedorCursorSoft,
|
||||
estilosGlobales.contenedorCursorActivo,
|
||||
);
|
||||
|
||||
return <>
|
||||
<For each={Object.entries(props.dataAnio)}>
|
||||
{([_, datosCurso]) => {
|
||||
return <span title={"Agregar " + datosCurso.abreviado + " a mi horario"} className={css(
|
||||
e.contenedorCurso,
|
||||
estilosGlobales.contenedor,
|
||||
estilosGlobales.contenedorCursor,
|
||||
estilosGlobales.contenedorCursorSoft
|
||||
)}
|
||||
|
||||
const cursoAgregadoMemo = createMemo(
|
||||
() => props.listaCursosUsuario.cursos.find(x => x.nombre === datosCurso.nombre) !== undefined,
|
||||
undefined,
|
||||
(x, y) => x === y
|
||||
);
|
||||
|
||||
const tituloMemo = createMemo(() => cursoAgregadoMemo()
|
||||
? `Remover ${datosCurso.abreviado} de mi horario`
|
||||
: `Agregar ${datosCurso.abreviado} a mi horario`
|
||||
);
|
||||
|
||||
const claseMemo = createMemo(() =>
|
||||
cursoAgregadoMemo()
|
||||
? claseCursoAgregado
|
||||
: claseCursoNoAgregado
|
||||
);
|
||||
|
||||
const iconoMemo = createMemo(() =>
|
||||
cursoAgregadoMemo()
|
||||
? "ph-minus"
|
||||
: "ph-plus"
|
||||
);
|
||||
|
||||
return <span title={tituloMemo()}
|
||||
className={claseMemo()}
|
||||
onClick={() => props.fnAgregarCurso(datosCurso)}
|
||||
>
|
||||
<i className="ph-plus"/>
|
||||
<i className={iconoMemo()}/>
|
||||
{datosCurso.abreviado} - {datosCurso.nombre}
|
||||
</span>
|
||||
}}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Curso, DatosHorario } from "../types/DatosHorario";
|
||||
import { Curso, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario";
|
||||
import { For, createSignal, createMemo} from "solid-js";
|
||||
import { css } from "aphrodite";
|
||||
import { estilosGlobales } from "../Estilos";
|
||||
@ -12,7 +12,8 @@ interface HorariosProps {
|
||||
data: DatosHorario,
|
||||
estadoLayout: EstadoLayout,
|
||||
setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
|
||||
fnAgregarCurso: (c: Curso) => void
|
||||
fnAgregarCurso: (c: Curso) => void,
|
||||
listaCursosUsuario: ListaCursosUsuario
|
||||
}
|
||||
|
||||
export function Horarios(props: HorariosProps) {
|
||||
@ -70,7 +71,11 @@ export function Horarios(props: HorariosProps) {
|
||||
<Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
|
||||
</div>
|
||||
<div>
|
||||
<Cursos dataAnio={dataTabla()} fnAgregarCurso={props.fnAgregarCurso}/>
|
||||
<Cursos
|
||||
dataAnio={dataTabla()}
|
||||
fnAgregarCurso={props.fnAgregarCurso}
|
||||
listaCursosUsuario={props.listaCursosUsuario}
|
||||
/>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={props.estadoLayout === "MaxPersonal"}>
|
||||
|
@ -58,6 +58,10 @@ export function MiHorario(props: MiHorarioProps) {
|
||||
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"}>
|
||||
@ -69,12 +73,6 @@ export function MiHorario(props: MiHorarioProps) {
|
||||
)}>
|
||||
Mi horario
|
||||
</div>
|
||||
<div className={css(
|
||||
estilosGlobales.inlineBlock,
|
||||
estilosGlobales.contenedor
|
||||
)}>
|
||||
Opcion 2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
15
src/Creditos.tsx
Normal file
15
src/Creditos.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { StyleSheet, css } from "aphrodite";
|
||||
|
||||
const e = StyleSheet.create({
|
||||
creditos: {
|
||||
textAlign: "center",
|
||||
paddingTop: "7.5rem",
|
||||
paddingBottom: "1rem"
|
||||
}
|
||||
});
|
||||
|
||||
export function Creditos() {
|
||||
return <div className={css(e.creditos)}>
|
||||
Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
|
||||
</div>
|
||||
}
|
Loading…
Reference in New Issue
Block a user