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

Agregar diferentes colores a los indicadores de hora

Browse Source
This commit is contained in:
Araozu 2021-03-04 13:05:01 -05:00
parent fa55f56338
commit d8fe5bb2b4
6 changed files with 154 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ContenedorHorarios/ContenedorHorarios.tsx
View File

@ -7,7 +7,7 @@ import { estilosGlobales } from "../Estilos";
import { Show, createSignal, createEffect, createMemo, batch } from "solid-js";
const datosPromise = (async () => {
const file = await fetch("/horarios/2020_1_fps_ingenieriadesistemas.yaml");
const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
const text = await file.text();
return YAML.parse(text) as DatosHorario;
})();

29
src/ContenedorHorarios/Tabla.tsx
View File

@ -1,17 +1,40 @@
import { StyleSheet, css } from "aphrodite";
import { createEffect, createMemo, createSignal, createState, For } from "solid-js";
import { createMemo, createSignal, For } from "solid-js";
import { estilosGlobales } from "../Estilos";
import { AnioData } from "../types/DatosHorario";
import { dias, horas, horasDescanso } from "../Store";
import { Dia, dias, horas } from "../Store";
import { DataProcesada } from "../types/DatosHorario";
import { FilaTabla } from "./Tabla/FilaTabla";
export const coloresBorde = Object.freeze([
"rgba(33,150,243,1)",
"rgba(255,214,0 ,1)",
"rgba(236,64,122 ,1)",
"rgba(29,233,182 ,1)",
"rgba(244,67,54,1)"
]);
export const diaANum = (d: Dia) => {
switch (d) {
case "Lunes":
return 0;
case "Martes":
return 1;
case "Miercoles":
return 2;
case "Jueves":
return 3;
case "Viernes":
return 4;
}
}
const e = StyleSheet.create({
fila: {
position: "relative",
zIndex: 2,
transition: "background-color 250ms",
marginLeft: "4rem",
marginLeft: "4.5rem",
display: "flex",
alignItems: "center",
minHeight: "1.5rem",

51
src/ContenedorHorarios/Tabla/CeldaFila.tsx
View File

@ -1,24 +1,25 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
import { For, createSignal } from "solid-js";
import { For, createSignal, createMemo } from "solid-js";
import { Dia } from "../../Store";
const e = StyleSheet.create({
celdaComun: {
width: "20%",
textAlign: "center",
padding: "0 0.7rem",
boxSizing: "border-box"
boxSizing: "border-box",
userSelect: "none"
},
celdaCurso: {
display: "inline-block",
padding: "0.25rem 0.35rem",
cursor: "pointer",
borderRadius: "5px",
transition: "background-color 100ms, color 100ms"
// transition: "background-color 100ms, color 100ms"
},
celdaCursoActiva: {
backgroundColor: "rgba(200, 200, 200, 0.5)",
color: "#151515"
// color: "#151515"
},
celdaCursoTeoria: {
fontWeight: "bold"
@ -28,12 +29,41 @@ const e = StyleSheet.create({
}
});
const eColores = StyleSheet.create({
lunes: {
backgroundColor: "rgba(33,150,243,1)"
},
martes: {
backgroundColor: "rgba(255,214,0 ,1)",
color: "#151515"
},
miercoles: {
backgroundColor: "rgba(236,64,122 ,1)"
},
jueves: {
backgroundColor: "rgba(29,233,182 ,1)",
color: "#151515"
},
viernes: {
backgroundColor: "rgba(244,67,54,1)"
}
});
const clasesColores = {
Lunes: css(eColores.lunes),
Martes: css(eColores.martes),
Miercoles: css(eColores.miercoles),
Jueves: css(eColores.jueves),
Viernes: css(eColores.viernes)
}
interface Props {
datos: { id: string, txt: string, esLab: boolean }[],
idHover: () => string,
setIdHover: (v: string) => string,
fnResaltarFila: () => void,
fnDesresaltarFila: () => void
fnDesresaltarFila: () => void,
dia: Dia
}
export function CeldaFila(props: Props) {
@ -50,18 +80,21 @@ export function CeldaFila(props: Props) {
{({id, txt, esLab}) => {
const [estabaResaltado, setEstabaResaltado] = createSignal(false);
const clases = () => {
const clases = createMemo(() => {
const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
let adicional = "";
if (id === idHover()) {
props.fnResaltarFila();
clases.push(e.celdaCursoActiva);
adicional = clasesColores[props.dia];
setEstabaResaltado(true);
} else if (estabaResaltado()) {
props.fnDesresaltarFila();
setEstabaResaltado(false);
}
return css(...clases);
};
return css(...clases) + " " + adicional;
});
return <span className={clases()}
onMouseEnter={() => fnOnMouseEnter(id)}

110
src/ContenedorHorarios/Tabla/FilaTabla.tsx
View File

@ -1,27 +1,33 @@
import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos";
import { For, createSignal } from "solid-js";
import { dias } from "../../Store";
import { For, createSignal, createMemo, createState, createEffect, State } from "solid-js";
import { Dia, dias } from "../../Store";
import { CeldaFila } from "./CeldaFila";
import { DataProcesada } from "../../types/DatosHorario";
import { coloresBorde, diaANum } from "../Tabla";
const e = StyleSheet.create({
celdaHora: {
textAlign: "center",
width: "4rem",
width: "3rem",
padding: "0.25rem 0",
position: "absolute",
top: "-0.75rem"
},
filaResaltado: {
position: "absolute",
zIndex: -1,
height: "100%",
transform: "translateX(-1.5rem)"
},
fila: {
position: "relative",
zIndex: 2,
transition: "background-color 250ms, border 100ms",
marginLeft: "4rem",
marginLeft: "4.5rem",
display: "flex",
alignItems: "center",
minHeight: "1.5rem",
borderLeft: "solid transparent",
minHeight: "1.1rem",
":hover": {
// backgroundColor: "rgba(200, 200, 200, 0.25)"
}
@ -32,13 +38,28 @@ const e = StyleSheet.create({
height: "1px",
width: "100%",
backgroundColor: "rgba(200, 200, 200, 0.25)",
zIndex: 1
zIndex: -1
},
filaResaltada: {
borderLeft: "solid"
celdaResaltado: {
height: "101%",
width: "5px",
display: "inline-block"
},
celdaResaltadoTransparente: {
backgroundColor: "transparent"
}
});
// TODO: Usar un arr en vez de un objeto?
const [diasResaltados, setDiasResaltados] = createState({
Lunes: 0,
Martes: 0,
Miercoles: 0,
Jueves: 0,
Viernes: 0,
} as { [k: string]: number });
interface Props {
hora: string,
data: () => DataProcesada,
@ -46,32 +67,64 @@ interface Props {
setIdHover: (v: string) => string
}
const diasFilter = createMemo(() => {
return Object.entries(diasResaltados)
.filter(x => x[1] > 0)
.map(x => x[0] as Dia)
.sort((x, y) => diaANum(x) > diaANum(y) ? 1 : -1);
});
const useDiasResaltados: () => [
State<{ [k: string]: boolean }>,
(d: Dia) => void,
(d: Dia) => void
] = () => {
const [diasResaltadosLocal, setDiasResaltadosLocal] = createState({
Lunes: false,
Martes: false,
Miercoles: false,
Jueves: false,
Viernes: false,
} as { [k: string]: boolean });
const fnResaltar = (d: Dia) => {
setDiasResaltadosLocal(d, true);
setDiasResaltados(d, v => v + 1);
};
const fnDesresaltar = (d: Dia) => {
setDiasResaltadosLocal(d, false);
setDiasResaltados(d, v => v - 1);
};
return [diasResaltadosLocal, fnResaltar, fnDesresaltar];
};
export function FilaTabla(props: Props) {
const [filaResaltada, setFilaResaltada] = createSignal(false);
const [diasResaltadosLocal, fnResaltar, fnDesresaltar] = useDiasResaltados();
const hora = props.hora;
const data = props.data;
const claseFilaComun = css(e.fila);
const claseFilaResaltada = css(e.fila, e.filaResaltada);
const resaltarFila = () => {
if (!filaResaltada()) {
setFilaResaltada(true);
}
};
const desresaltarFila = () => {
if (filaResaltada()) {
setFilaResaltada(false);
}
}
return <div style={{position: "relative"}}>
<div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
{hora.substring(0, 5)}
</div>
<div className={filaResaltada() ? claseFilaResaltada : claseFilaComun}>
<div className={css(e.fila)}>
<div className={css(estilosGlobales.inlineBlock, e.filaResaltado)}>
<div className={css(e.celdaResaltado, diasResaltadosLocal.Lunes ? null : e.celdaResaltadoTransparente)}
style={{"background-color": coloresBorde[0]}}/>
<div className={css(e.celdaResaltado, diasResaltadosLocal.Martes ? null : e.celdaResaltadoTransparente)}
style={{"background-color": coloresBorde[1]}}/>
<div
className={css(e.celdaResaltado, diasResaltadosLocal.Miercoles ? null : e.celdaResaltadoTransparente)}
style={{"background-color": coloresBorde[2]}}/>
<div className={css(e.celdaResaltado, diasResaltadosLocal.Jueves ? null : e.celdaResaltadoTransparente)}
style={{"background-color": coloresBorde[3]}}/>
<div
className={css(e.celdaResaltado, diasResaltadosLocal.Viernes ? null : e.celdaResaltadoTransparente)}
style={{"background-color": coloresBorde[4]}}/>
</div>
<For each={dias}>
{dia => {
const diaStr = dia.substring(0, 2);
@ -83,8 +136,9 @@ export function FilaTabla(props: Props) {
datos={datos}
idHover={props.idHover}
setIdHover={props.setIdHover}
fnResaltarFila={resaltarFila}
fnDesresaltarFila={desresaltarFila}
fnResaltarFila={() => fnResaltar(dia)}
fnDesresaltarFila={() => fnDesresaltar(dia)}
dia={dia}
/>
}}
</For>

4
src/Store.ts
View File

@ -6,7 +6,9 @@ enum ModoColor {
Auto
}
export const dias = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
export const dias: Dia[] = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
export const horas = [
"07:00 - 07:50",
"07:50 - 08:40",

1
src/Wallpaper.tsx
View File

@ -7,7 +7,6 @@ const duracionTransicion = 250;
export function Wallpaper() {
/// @ts-ignore
const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
console.log("Soporta backdrop-filter?:", soportaBackdropFilter);
const estilos = StyleSheet.create({
contenedorCover: {