diff --git a/src/ContenedorHorarios/ContenedorHorarios.tsx b/src/ContenedorHorarios/ContenedorHorarios.tsx index 267ef15..8030547 100755 --- a/src/ContenedorHorarios/ContenedorHorarios.tsx +++ b/src/ContenedorHorarios/ContenedorHorarios.tsx @@ -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; })(); diff --git a/src/ContenedorHorarios/Tabla.tsx b/src/ContenedorHorarios/Tabla.tsx index c74813c..52ffb44 100755 --- a/src/ContenedorHorarios/Tabla.tsx +++ b/src/ContenedorHorarios/Tabla.tsx @@ -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", diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx index dbf5228..f65928c 100755 --- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx +++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx @@ -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 fnOnMouseEnter(id)} diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx index 8f6e639..a2ac485 100755 --- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx +++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx @@ -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
{hora.substring(0, 5)}
-
+
+
+
+
+
+
+
+
{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} /> }} diff --git a/src/Store.ts b/src/Store.ts index 9eb4add..3fee18d 100755 --- a/src/Store.ts +++ b/src/Store.ts @@ -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", diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx index b50c106..d7710da 100755 --- a/src/Wallpaper.tsx +++ b/src/Wallpaper.tsx @@ -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: {