Agregar diferentes colores a los indicadores de hora

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;
 })();

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",

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 <span className={clases()}
                              onMouseEnter={() => fnOnMouseEnter(id)}

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 { For, createSignal, createMemo, createState, createEffect, State } from "solid-js";
-import { dias } from "../../Store";
+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",
+        minHeight: "1.1rem",
-        borderLeft: "solid transparent",
         ":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: {
+    celdaResaltado: {
-        borderLeft: "solid"
+        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}
+                        fnResaltarFila={() => fnResaltar(dia)}
-                        fnDesresaltarFila={desresaltarFila}
+                        fnDesresaltarFila={() => fnDesresaltar(dia)}
+                        dia={dia}
                     />
                 }}
             </For>

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",

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: {