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

Modificar la interfaz DatosHorario para que permita almacenar cursos ocultos y grupos seleccionados

Browse Source
This commit is contained in:
Araozu 2021-03-17 18:24:36 -05:00
parent 24b8647513
commit 2a6d8ddde6
6 changed files with 130 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/ContenedorHorarios/ContenedorHorarios.tsx
View File

@ -1,15 +1,59 @@
import YAML from "yaml";
import { StyleSheet, css } from "aphrodite";
import { css, StyleSheet } from "aphrodite";
import { MiHorario } from "./MiHorario";
import { Horarios } from "./Horarios";
import { Curso, CursoUsuario, DatosHorario, DatosVarianteUsuario, ListaCursosUsuario } from "../types/DatosHorario";
import {
Anios,
Cursos,
CursoRaw,
Curso,
DatosHorario,
DatosHorarioRaw,
DatosGrupo,
ListaCursosUsuario
} from "../types/DatosHorario";
import { estilosGlobales } from "../Estilos";
import { Show, createSignal, createEffect, createMemo, batch, createState } from "solid-js";
import { batch, createEffect, createMemo, createSignal, createState, Show } from "solid-js";
const datosPromise = (async () => {
const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
const text = await file.text();
return YAML.parse(text) as DatosHorario;
const datosRaw = YAML.parse(text) as DatosHorarioRaw;
// Agregar los campos faltantes a DatosHorarioRaw para que sea DatosHorario
const datos: DatosHorario = {
...datosRaw,
años: {}
};
const anios: Anios = {}
for (const [nombreAnio, anio] of Object.entries(datosRaw.años)) {
const anioData: Cursos = {};
for (const [nombreCurso, curso] of Object.entries(anio)) {
const gruposTeoria: { [k: string]: DatosGrupo } = {};
for (const [key, data] of Object.entries(curso.Teoria)) {
gruposTeoria[key] = Object.assign({seleccionado: false}, data);
}
const gruposLab: { [k: string]: DatosGrupo } = {};
for (const [key, data] of Object.entries(curso.Laboratorio ?? {})) {
gruposLab[key] = Object.assign({seleccionado: false}, data);
}
anioData[nombreCurso] = {
...curso,
oculto: false,
Teoria: gruposTeoria,
Laboratorio: gruposLab
};
}
anios[nombreAnio] = anioData;
}
datos.años = anios;
return datos;
})();
const ElemCargando = () =>
@ -28,27 +72,9 @@ const agregarCursoUsuario = (curso: Curso) => {
const cursoActualIndex = cursosUsuario.cursos.findIndex(x => x.nombre === curso.nombre);
if (cursoActualIndex !== -1) {
setCursosUsuarios("cursos", cursoActualIndex, "oculto", x => !x);
return;
} else {
setCursosUsuarios("cursos", a => [...a, curso]);
}
const gruposTeoria: { [k: string]: DatosVarianteUsuario } = {};
for (const [key, data] of Object.entries(curso.Teoria)) {
gruposTeoria[key] = Object.assign({seleccionado: false}, data);
}
const gruposLab: { [k: string]: DatosVarianteUsuario } = {};
for (const [key, data] of Object.entries(curso.Laboratorio ?? {})) {
gruposLab[key] = Object.assign({seleccionado: false}, data);
}
const cursoUsuario: CursoUsuario = {
...curso,
oculto: false,
Teoria: gruposTeoria,
Laboratorio: gruposLab
};
setCursosUsuarios("cursos", a => [...a, cursoUsuario]);
};
export function ContenedorHorarios() {

11
src/ContenedorHorarios/Cursos.tsx → src/ContenedorHorarios/CursosElem.tsx
View File

@ -1,4 +1,4 @@
import { AnioData, Curso, DatosVariante, ListaCursosUsuario } from "../types/DatosHorario";
import { Cursos, CursoRaw, DatosGrupo, ListaCursosUsuario, Curso } from "../types/DatosHorario";
import { createEffect, createMemo, For } from "solid-js";
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../Estilos";
@ -26,7 +26,7 @@ const e = StyleSheet.create({
});
interface Props {
dataAnio: AnioData,
dataAnio: Cursos,
anioActual: () => string,
fnAgregarCurso: (c: Curso) => void,
listaCursosUsuario: ListaCursosUsuario,
@ -45,7 +45,7 @@ function IndicadorGrupo(props: { nombre: string, esLab: boolean, idParcial: stri
</span>
}
const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
const agruparProfesores = (datos: { [k: string]: DatosGrupo }) => {
const profesores: { [k: string]: string[] } = {};
for (const [grupo, datosGrupo] of Object.entries(datos)) {
const nombreProfesor = datosGrupo.Docente;
@ -57,7 +57,7 @@ const agruparProfesores = (datos: { [k: string]: DatosVariante }) => {
return profesores;
};
export function Cursos(props: Props) {
export function CursosElem(props: Props) {
const anio = () => props.anioActual().substring(0, props.anioActual().indexOf(" "));
const claseCursoNoAgregado = css(
@ -99,7 +99,8 @@ export function Cursos(props: Props) {
const profesoresLab = createMemo(() => agruparProfesores(datosCurso.Laboratorio ?? {}));
return <div className={claseMemo()}>
<div className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
<div
className={css(e.inline, e.lineaTexto, e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
onMouseEnter={() => props.setIdHover(idCurso)}
onMouseLeave={() => props.setIdHover("")}
>

6
src/ContenedorHorarios/Horarios.tsx
View File

@ -1,9 +1,9 @@
import { Curso, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario";
import { Curso, CursoRaw, DatosHorario, DatosHorarioRaw, ListaCursosUsuario } from "../types/DatosHorario";
import { For, createSignal, createMemo } from "solid-js";
import { css } from "aphrodite";
import { estilosGlobales } from "../Estilos";
import { Tabla } from "./Tabla";
import { Cursos } from "./Cursos";
import { CursosElem } from "./CursosElem";
import { EstadoLayout } from "./ContenedorHorarios";
import { BotonMaxMin } from "./BotonMaxMin";
import { Switch, Match } from "solid-js";
@ -77,7 +77,7 @@ export function Horarios(props: HorariosProps) {
/>
</div>
<div>
<Cursos
<CursosElem
dataAnio={dataTabla()}
anioActual={anioActual}
fnAgregarCurso={props.fnAgregarCurso}

35
src/ContenedorHorarios/MiHorario.tsx
View File

@ -6,7 +6,7 @@ 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";
import { Cursos, ListaCursosUsuario } from "../types/DatosHorario";
interface MiHorarioProps {
estadoLayout: EstadoLayout,
@ -42,7 +42,7 @@ const e = StyleSheet.create({
export function MiHorario(props: MiHorarioProps) {
const datosMiHorario = createMemo(() => {
const obj: AnioData = {};
const obj: Cursos = {};
props.cursosUsuario.cursos.forEach(x => {
obj[x.nombre] = {...x};
});
@ -83,10 +83,26 @@ export function MiHorario(props: MiHorarioProps) {
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={() => {}}/>
<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}
@ -100,7 +116,12 @@ export function MiHorario(props: MiHorarioProps) {
e.horario,
estilosGlobales.contenedor
)}>
<Tabla data={datosMiHorario()} anio={"Mi horario"} version={1}/>
<Tabla data={datosMiHorario()}
anio={"Mi horario"}
version={1}
idHover={() => ""}
setIdHover={(v: string) => ""}
/>
<Horario cursosUsuario={props.cursosUsuario}/>

9
src/ContenedorHorarios/Tabla.tsx
View File

@ -1,7 +1,7 @@
import { StyleSheet, css } from "aphrodite";
import { createMemo, createSignal, For } from "solid-js";
import { estilosGlobales } from "../Estilos";
import { AnioData, CursoUsuario } from "../types/DatosHorario";
import { Cursos, Curso } from "../types/DatosHorario";
import { Dia, dias, horas } from "../Store";
import { DataProcesada } from "../types/DatosHorario";
import { FilaTabla } from "./Tabla/FilaTabla";
@ -81,12 +81,11 @@ const e = StyleSheet.create({
}
});
const procesarAnio = (data: AnioData, anio: string, version: number) => {
const procesarAnio = (data: Cursos, anio: string, version: number) => {
const obj: DataProcesada = {};
for (const [, curso] of Object.entries(data)) {
// TODO: Reemplazar Curso con CursoUsuario, hacer los cambios donde se cargan los datos
if ((curso as CursoUsuario).oculto) continue;
if (curso.oculto) continue;
const nombreAbreviado = curso.abreviado;
@ -147,7 +146,7 @@ const procesarAnio = (data: AnioData, anio: string, version: number) => {
}
interface Props {
data: AnioData,
data: Cursos,
anio: string,
version: number,
idHover: () => string,

52
src/types/DatosHorario.ts
View File

@ -1,50 +1,66 @@
export interface DatosVariante {
export interface CursoRaw {
nombre: string,
abreviado: string,
Teoria: {
[grupo: string]: {
Docente: string,
Horas: string[]
}
}
Laboratorio?: {
[grupo: string]: {
Docente: string,
Horas: string[]
}
}
}
export interface DatosVarianteUsuario extends DatosVariante {
export interface DatosHorarioRaw {
titulo: string,
descripcion: string,
version: number,
años: {
[key: string]: {
[nombre: string]: CursoRaw
}
}
}
export interface DatosGrupo {
Docente: string,
Horas: string[]
seleccionado: boolean
}
export interface Curso {
nombre: string,
abreviado: string,
Teoria: {
[grupo: string]: DatosVariante
}
Laboratorio?: {
[grupo: string]: DatosVariante
}
}
export interface CursoUsuario extends Curso {
oculto: boolean,
Teoria: {
[grupo: string]: DatosVarianteUsuario
[grupo: string]: DatosGrupo
}
Laboratorio?: {
[grupo: string]: DatosVarianteUsuario
[grupo: string]: DatosGrupo
}
}
export interface ListaCursosUsuario {
cursos: CursoUsuario[]
cursos: Curso[]
}
export interface AnioData {
export interface Cursos {
[nombre: string]: Curso
}
export interface Anio {
[key: string]: AnioData
export interface Anios {
[key: string]: Cursos
}
export interface DatosHorario {
titulo: string,
descripcion: string,
version: number,
años: Anio
años: Anios
}
export interface DataProcesada {