-
-
- {dia =>
-
- {dia}
-
- }
+ props.data
+ return (
+
+ {(hora) => (
+
+ )}
+ )
+ })
+
+ return (
+
+
+
+ {(dia) => (
+
+ {dia}
+
+ )}
+
+
+ {celdas()}
-}
\ No newline at end of file
+ )
+}
diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
index 61b0871..e195422 100755
--- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx
+++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
@@ -1,8 +1,8 @@
-import { StyleSheet, css } from "aphrodite";
-import { estilosGlobales } from "../../Estilos";
-import { For, createSignal, createMemo, createEffect, SetStateFunction } from "solid-js";
-import { Dia } from "../../Store";
-import { DatosGrupo, ListaCursosUsuario } from "../../types/DatosHorario";
+import { StyleSheet, css } from "aphrodite"
+import { estilosGlobales } from "../../Estilos"
+import { For, createSignal, createMemo, createEffect, SetStateFunction } from "solid-js"
+import { Dia } from "../../Store"
+import { DatosGrupo, ListaCursosUsuario } from "../../types/DatosHorario"
const e = StyleSheet.create({
celdaComun: {
@@ -10,7 +10,7 @@ const e = StyleSheet.create({
textAlign: "center",
padding: "0 0.7rem",
boxSizing: "border-box",
- userSelect: "none"
+ userSelect: "none",
},
celdaCurso: {
display: "inline-block",
@@ -23,39 +23,42 @@ const e = StyleSheet.create({
// color: "#151515"
},
celdaCursoTeoria: {
- fontWeight: "bold"
+ fontWeight: "bold",
},
celdaCursoLab: {
- fontStyle: "italic"
- }
-});
+ fontStyle: "italic",
+ },
+ celdaSeleccionada: {
+ textDecoration: "underline",
+ },
+})
const eColores = StyleSheet.create({
lunes: {
- backgroundColor: "rgba(33,150,243,1)"
+ backgroundColor: "rgba(33,150,243,1)",
},
martes: {
backgroundColor: "rgba(255,214,0 ,1)",
- color: "#151515"
+ color: "#151515",
},
miercoles: {
- backgroundColor: "rgba(236,64,122 ,1)"
+ backgroundColor: "rgba(236,64,122 ,1)",
},
jueves: {
backgroundColor: "rgba(29,233,182 ,1)",
- color: "#151515"
+ color: "#151515",
},
viernes: {
- backgroundColor: "rgba(244,67,54,1)"
- }
-});
+ 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)
+ Viernes: css(eColores.viernes),
}
interface Props {
@@ -79,64 +82,68 @@ interface Props {
setIdHover: (v: string) => string,
fnResaltarFila: () => void,
fnDesresaltarFila: () => void,
- dia: Dia
+ dia: Dia,
}
+const claseSeldaSeleccionada = css(e.celdaSeleccionada)
+
export function CeldaFila(props: Props) {
- const datos = props.datos;
- const idHover = props.idHover;
- const setIdHover = props.setIdHover;
+ const datos = props.datos
+ const idHover = props.idHover
+ const setIdHover = props.setIdHover
- const fnOnMouseEnter = (id: string) => setIdHover(id);
- const fnOnMouseLeave = () => setIdHover("");
+ const fnOnMouseEnter = (id: string) => setIdHover(id)
+ const fnOnMouseLeave = () => setIdHover("")
- return
-
- {datos => {
- const id = datos.id;
- const txt = datos.txt;
- const esLab = datos.esLab;
- const fnSeleccionar = datos.fnSeleccionar;
+ return (
+
+
+ {(datos) => {
+ const id = datos.id
+ const txt = datos.txt
+ const esLab = datos.esLab
+ const fnSeleccionar = datos.fnSeleccionar
- const [estabaResaltado, setEstabaResaltado] = createSignal(false);
+ const [estabaResaltado, setEstabaResaltado] = createSignal(false)
- const estaSeleccionado = createMemo(() => {
- return datos.datosGrupo.seleccionado;
- });
+ const estaSeleccionado = createMemo(() => datos.datosGrupo.seleccionado)
- const clases = createMemo(
- () => {
- const clases = [
- e.celdaCurso,
- esLab ? e.celdaCursoLab : e.celdaCursoTeoria,
- estaSeleccionado() && estilosGlobales.contenedorCursorActivo
- ];
- let adicional = "";
- const idHoverS = idHover();
- if (idHoverS !== "" && id.search(idHoverS) !== -1) {
- props.fnResaltarFila();
- clases.push(e.celdaCursoActiva);
- adicional = clasesColores[props.dia];
+ const clases = createMemo(
+ () => {
+ const clases = [
+ e.celdaCurso,
+ esLab ? e.celdaCursoLab : e.celdaCursoTeoria,
+ estaSeleccionado() && e.celdaSeleccionada,
+ ]
+ let adicional = ""
+ const idHoverS = idHover()
+ if (idHoverS !== "" && id.search(idHoverS) !== -1) {
+ props.fnResaltarFila()
+ clases.push(e.celdaCursoActiva)
+ adicional = clasesColores[props.dia]
- setEstabaResaltado(true);
- } else if (estabaResaltado()) {
- props.fnDesresaltarFila();
- setEstabaResaltado(false);
- }
- return css(...clases) + " " + adicional;
- },
- undefined,
- (x, y) => x === y
- );
+ setEstabaResaltado(true)
+ } else if (estabaResaltado()) {
+ props.fnDesresaltarFila()
+ setEstabaResaltado(false)
+ }
+ return `${css(...clases)} ${adicional}`
+ },
+ undefined,
+ (x, y) => x === y,
+ )
- return fnOnMouseEnter(id)}
- onMouseLeave={fnOnMouseLeave}
- onClick={fnSeleccionar}
- >
- {txt}
- ;
- }}
-
-
-}
\ No newline at end of file
+ return (
+ fnOnMouseEnter(id)}
+ onMouseLeave={fnOnMouseLeave}
+ onClick={fnSeleccionar}
+ >
+ {txt}
+
+ )
+ }}
+
+
+ )
+}
diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
index 591c306..1ef7f75 100755
--- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx
+++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
@@ -1,10 +1,10 @@
-import { StyleSheet, css } from "aphrodite";
-import { estilosGlobales } from "../../Estilos";
-import { For, createSignal, createMemo, createState, createEffect, State, SetStateFunction } from "solid-js";
-import { Dia, dias } from "../../Store";
-import { CeldaFila } from "./CeldaFila";
-import { DataProcesada, ListaCursosUsuario } from "../../types/DatosHorario";
-import { coloresBorde, diaANum } from "../Tabla";
+import { StyleSheet, css } from "aphrodite"
+import { estilosGlobales } from "../../Estilos"
+import { For, createSignal, createMemo, createState, createEffect, State, SetStateFunction } from "solid-js"
+import { Dia, dias } from "../../Store"
+import { CeldaFila } from "./CeldaFila"
+import { DataProcesada, ListaCursosUsuario } from "../../types/DatosHorario"
+import { coloresBorde, diaANum } from "../Tabla"
const e = StyleSheet.create({
celdaHora: {
@@ -12,13 +12,13 @@ const e = StyleSheet.create({
width: "3rem",
padding: "0.25rem 0",
position: "absolute",
- top: "-0.75rem"
+ top: "-0.75rem",
},
filaResaltado: {
position: "absolute",
zIndex: -1,
height: "100%",
- transform: "translateX(-1.5rem)"
+ transform: "translateX(-1.5rem)",
},
fila: {
position: "relative",
@@ -30,7 +30,7 @@ const e = StyleSheet.create({
minHeight: "1.2rem",
":hover": {
// backgroundColor: "rgba(200, 200, 200, 0.25)"
- }
+ },
},
filaBorde: {
position: "absolute",
@@ -38,17 +38,17 @@ const e = StyleSheet.create({
height: "1px",
width: "100%",
backgroundColor: "rgba(200, 200, 200, 0.25)",
- zIndex: -1
+ zIndex: -1,
},
celdaResaltado: {
height: "101%",
width: "5px",
- display: "inline-block"
+ display: "inline-block",
},
celdaResaltadoTransparente: {
- backgroundColor: "transparent"
- }
-});
+ backgroundColor: "transparent",
+ },
+})
const [diasResaltados, setDiasResaltados] = createState({
Lunes: 0,
@@ -56,7 +56,7 @@ const [diasResaltados, setDiasResaltados] = createState({
Miercoles: 0,
Jueves: 0,
Viernes: 0,
-} as { [k: string]: number });
+} as { [k: string]: number })
interface Props {
hora: string,
@@ -65,12 +65,10 @@ 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 diasFilter = createMemo(() => 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 }>,
@@ -83,64 +81,76 @@ const useDiasResaltados: () => [
Miercoles: false,
Jueves: false,
Viernes: false,
- } as { [k: string]: boolean });
+ } as { [k: string]: boolean })
const fnResaltar = (d: Dia) => {
- setDiasResaltadosLocal(d, true);
- setDiasResaltados(d, v => v + 1);
- };
+ setDiasResaltadosLocal(d, true)
+ setDiasResaltados(d, (v) => v + 1)
+ }
const fnDesresaltar = (d: Dia) => {
- setDiasResaltadosLocal(d, false);
- setDiasResaltados(d, v => v - 1);
- };
+ setDiasResaltadosLocal(d, false)
+ setDiasResaltados(d, (v) => v - 1)
+ }
- return [diasResaltadosLocal, fnResaltar, fnDesresaltar];
-};
+ return [diasResaltadosLocal, fnResaltar, fnDesresaltar]
+}
export function FilaTabla(props: Props) {
- const [diasResaltadosLocal, fnResaltar, fnDesresaltar] = useDiasResaltados();
+ const [diasResaltadosLocal, fnResaltar, fnDesresaltar] = useDiasResaltados()
- const hora = props.hora;
- const data = props.data;
+ const hora = props.hora
+ const data = props.data
- return
-
- {hora.substring(0, 5)}
-
-
-
-
-
-
-
-
+ return (
+
+
+ {hora.substring(0, 5)}
-
- {dia => {
- const diaStr = dia.substring(0, 2);
- const horaStr = hora.substring(0, 5);
-
- const datos = data?.[horaStr]?.[diaStr] ?? [];
-
- return fnResaltar(dia)}
- fnDesresaltarFila={() => fnDesresaltar(dia)}
- dia={dia}
+
+
+
- }}
-
-
+
+ {(dia) => {
+ const diaStr = dia.substring(0, 2)
+ const horaStr = hora.substring(0, 5)
+
+ const datos = data?.[horaStr]?.[diaStr] ?? []
+
+ return (
+ fnResaltar(dia)}
+ fnDesresaltarFila={() => fnDesresaltar(dia)}
+ dia={dia}
+ />
+ )
+ }}
+
+
+
;
-}
\ No newline at end of file
+ )
+}
diff --git a/src/ContenedorHorarios/TablaObserver.ts b/src/ContenedorHorarios/TablaObserver.ts
new file mode 100644
index 0000000..b732d30
--- /dev/null
+++ b/src/ContenedorHorarios/TablaObserver.ts
@@ -0,0 +1,70 @@
+/**
+ * - Normal
+ * - Oculto - Otro grupo seleccionado
+ * - Seleccionado - Cursor ensima
+ * - Resaltado - Grupo seleccionado
+ * - ResaltadoSeleccionado - Grupo seleccionado y cursor encima
+ * - ResaltadoOculto - Otro grupo seleccionado y cursor encima
+ */
+import { createMemo, createState, SetStateFunction, State } from "solid-js";
+
+type EstadoCelda =
+ | "Normal"
+ | "Oculto"
+ | "Seleccionado"
+ | "Resaltado"
+ | "ResaltadoSeleccionado"
+ | "ResaltadoOculto"
+
+interface Datos {
+ anio?: string,
+ curso?: string,
+ esLab?: boolean,
+ grupo?: string
+}
+
+export class TablaObserver {
+
+ private readonly resaltado: State
+ private readonly setResaltado: SetStateFunction
+ private gruposSeleccionados = {}
+
+ constructor() {
+ const [resaltado, setResaltado] = createState({
+ anio: undefined,
+ curso: undefined,
+ esLab: undefined,
+ grupo: undefined
+ });
+ this.resaltado = resaltado;
+ this.setResaltado = setResaltado;
+ }
+
+ // Cada celda se registra dando estos datos
+ // Devuelve un memo con un valor de EstadoCelda,
+ // el cual cada celda sabra como manejar
+ registrar(anio: string, cursoAbreviado: string, esLab: boolean, grupo: string) {
+ const fn = () => {
+
+ };
+
+ const memo = createMemo(
+ fn,
+ undefined,
+ (x, y) => x === y
+ );
+ }
+
+ resaltar(id: string) {
+
+ }
+
+ quitarResaltado() {
+ this.setResaltado({
+ anio: undefined,
+ curso: undefined,
+ esLab: undefined,
+ grupo: undefined
+ });
+ }
+}
diff --git a/src/ContenedorHorarios/useListaCursos.ts b/src/ContenedorHorarios/useListaCursos.ts
index 591ec6f..1783b96 100644
--- a/src/ContenedorHorarios/useListaCursos.ts
+++ b/src/ContenedorHorarios/useListaCursos.ts
@@ -1,5 +1,5 @@
-import { createState, SetStateFunction, State } from "solid-js";
-import { Curso, ListaCursosUsuario } from "../types/DatosHorario";
+import { createState, SetStateFunction, State } from "solid-js"
+import { Curso, ListaCursosUsuario } from "../types/DatosHorario"
interface ReturnType {
listaCursos: State,
@@ -11,31 +11,31 @@ interface ReturnType {
export const useListaCursos = (): ReturnType => {
const [listaCursos, setListaCursos] = createState({
sigIndice: 0,
- cursos: []
- });
+ cursos: [],
+ })
const agregarCursoALista = (curso: Curso): Curso => {
// Si el horario ya se habia agregado, ocultarlo
- const cursoActualIndex = listaCursos.cursos.findIndex(x => x.nombre === curso.nombre);
+ const cursoActualIndex = listaCursos.cursos.findIndex((x) => x.nombre === curso.nombre)
if (cursoActualIndex !== -1) {
- setListaCursos("cursos", cursoActualIndex, "oculto", x => !x);
- return listaCursos.cursos[cursoActualIndex];
+ setListaCursos("cursos", cursoActualIndex, "oculto", (x) => !x)
+ return listaCursos.cursos[cursoActualIndex]
} else {
- setListaCursos("cursos", listaCursos.sigIndice, curso);
- setListaCursos("sigIndice", x => x + 1);
- return listaCursos.cursos[listaCursos.sigIndice - 1];
+ setListaCursos("cursos", listaCursos.sigIndice, curso)
+ setListaCursos("sigIndice", (x) => x + 1)
+ return listaCursos.cursos[listaCursos.sigIndice - 1]
}
- };
+ }
const eliminarCursosDeLista = () => {
- setListaCursos("cursos", []);
- setListaCursos("sigIndice", 0);
- };
+ setListaCursos("cursos", [])
+ setListaCursos("sigIndice", 0)
+ }
return {
listaCursos,
setListaCursos,
agregarCursoALista,
- eliminarCursosDeLista
- };
-};
+ eliminarCursosDeLista,
+ }
+}
diff --git a/src/Creditos.tsx b/src/Creditos.tsx
index b9a56e9..97debc0 100644
--- a/src/Creditos.tsx
+++ b/src/Creditos.tsx
@@ -1,15 +1,17 @@
-import { StyleSheet, css } from "aphrodite";
+import { StyleSheet, css } from "aphrodite"
const e = StyleSheet.create({
creditos: {
textAlign: "center",
paddingTop: "7.5rem",
- paddingBottom: "1rem"
- }
-});
+ paddingBottom: "1rem",
+ },
+})
export function Creditos() {
- return
- Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
-
-}
\ No newline at end of file
+ return (
+
+ Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
+
+ )
+}
diff --git a/src/Estilos.ts b/src/Estilos.ts
index d7daf57..6b19278 100755
--- a/src/Estilos.ts
+++ b/src/Estilos.ts
@@ -1,4 +1,4 @@
-import {StyleSheet} from "aphrodite";
+import {StyleSheet} from "aphrodite"
export const estilosGlobales = StyleSheet.create({
contenedor: {
@@ -7,7 +7,7 @@ export const estilosGlobales = StyleSheet.create({
borderRadius: "10px",
backdropFilter: "blur(40px)",
backgroundColor: "rgba(100, 100, 100, 0.25)",
- color: "var(--color-texto)"
+ color: "var(--color-texto)",
},
contenedorCursor: {
cursor: "pointer",
@@ -15,27 +15,27 @@ export const estilosGlobales = StyleSheet.create({
transition: "background-color 200ms",
textDecoration: "underline solid white 2px",
":hover": {
- backgroundColor: "rgba(200, 200, 200, 0.3)"
- }
+ backgroundColor: "rgba(200, 200, 200, 0.3)",
+ },
},
contenedorCursorSoft: {
- textDecoration: "underline rgba(255, 255, 255, 0.4)"
+ textDecoration: "underline rgba(255, 255, 255, 0.4)",
},
contenedorCursorActivo: {
- backgroundColor: "rgba(200, 200, 200, 0.3)"
+ backgroundColor: "rgba(200, 200, 200, 0.3)",
},
contenedorPhospor: {
padding: "0.5rem 0.65rem",
- transform: "translateY(0.2rem)"
+ transform: "translateY(0.2rem)",
},
inlineBlock: {
- display: "inline-block"
+ display: "inline-block",
},
botonPhospor: {
"::before": {
fontSize: "1.25rem",
// transform: "translateY(0.2rem)",
textDecoration: "underline rgba(255, 255, 255, 0.4)",
- }
+ },
},
-});
+})
diff --git a/src/Store.ts b/src/Store.ts
index 3fee18d..da9b0fd 100755
--- a/src/Store.ts
+++ b/src/Store.ts
@@ -1,4 +1,4 @@
-import { createSignal, createEffect } from "solid-js";
+import { createSignal} from "solid-js"
enum ModoColor {
Claro,
@@ -8,7 +8,7 @@ enum ModoColor {
export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
-export const dias: 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",
@@ -30,17 +30,17 @@ export const horas = [
"18:30 - 19:20",
"19:20 - 20:10",
"20:10 - 21:00",
- "21:00 - 21:00"
-];
+ "21:00 - 21:00",
+]
export const horasDescanso = [
"08:40 - 08:50",
"10:30 - 10:40",
"15:40 - 15:50",
- "17:30 - 17:40"
-];
+ "17:30 - 17:40",
+]
-const numImgGuardado = parseInt(localStorage.getItem("num-img") ?? "3");
+const numImgGuardado = Number(localStorage.getItem("num-img") ?? "3")
-export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro);
-export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
-export const [mostrarDescansos, setMostrarDescansos] = createSignal(true);
+export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro)
+export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado)
+export const [mostrarDescansos, setMostrarDescansos] = createSignal(true)
diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx
index ccb59eb..3d525bb 100755
--- a/src/Wallpaper.tsx
+++ b/src/Wallpaper.tsx
@@ -1,12 +1,12 @@
-import { StyleSheet, css } from "aphrodite";
-import { numWallpaper } from "./Store";
-import { createEffect, createState } from "solid-js";
+import { StyleSheet, css } from "aphrodite"
+import { numWallpaper } from "./Store"
+import { createEffect, createState } from "solid-js"
-const duracionTransicion = 250;
+const duracionTransicion = 250
export function Wallpaper() {
/// @ts-ignore
- const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+ const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
const estilos = StyleSheet.create({
contenedorCover: {
@@ -16,7 +16,7 @@ export function Wallpaper() {
top: "0",
left: "0",
backgroundColor: "#212121",
- zIndex: -1
+ zIndex: -1,
},
cover: {
width: "100vw",
@@ -25,43 +25,45 @@ export function Wallpaper() {
backgroundSize: "cover",
zIndex: -1,
transition: `opacity ${duracionTransicion}ms`,
- filter: soportaBackdropFilter? "": "blur(40px)"
+ filter: soportaBackdropFilter ? "" : "blur(40px)",
},
coverTransicion: {
- opacity: 0
- }
- });
+ opacity: 0,
+ },
+ })
const [estilosRaw, setEstilosRaw] = createState({
- "background-image": `none`,
- opacity: 1
- });
+ "background-image": "none",
+ opacity: 1,
+ })
createEffect(() => {
- const numImg = numWallpaper();
- setEstilosRaw("opacity", 0);
+ const numImg = numWallpaper()
+ setEstilosRaw("opacity", 0)
- const promesa250ms = new Promise(resolve => {
- setTimeout(resolve, duracionTransicion);
- });
+ const promesa250ms = new Promise((resolve) => {
+ setTimeout(resolve, duracionTransicion)
+ })
- const url = `/img/wall${numImg}.webp`;
- const img = new Image();
- img.addEventListener("load", async () => {
- await promesa250ms;
+ const url = `/img/wall${numImg}.webp`
+ const img = new Image()
+ img.addEventListener("load", async() => {
+ await promesa250ms
setEstilosRaw({
"background-image": `url('${url}')`,
- opacity: 1
- });
- });
- img.src = url;
- });
+ opacity: 1,
+ })
+ })
+ img.src = url
+ })
- return
+ return (
+
+ )
}
diff --git a/src/index.tsx b/src/index.tsx
index d545069..ac16ac6 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
-import "solid-js";
-import { render } from 'solid-js/web';
-import App from './App';
-import "normalize.css";
-import "./styles/global.css";
+import "solid-js"
+import { render } from "solid-js/web"
+import App from "./App"
+import "normalize.css"
+import "./styles/global.css"
-render(App, document.getElementById('root') as Node);
+render(App, document.getElementById("root") as Node)
diff --git a/src/types/DatosHorario.ts b/src/types/DatosHorario.ts
index 02d5761..3eb6c34 100755
--- a/src/types/DatosHorario.ts
+++ b/src/types/DatosHorario.ts
@@ -74,4 +74,4 @@ export interface DataProcesada {
fnSeleccionar: () => void
}[]
}
-}
\ No newline at end of file
+}