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

Esquema de interfaz de tabla para movil

Browse Source
This commit is contained in:
Araozu 2022-10-13 18:29:19 -05:00
parent 76f723a097
commit 10749c5900
12 changed files with 304 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
__tests__/celdas.ts
View File

@ -42,7 +42,7 @@ type Output = {
class MapaCeldas { class MapaCeldas {
// Almacena referencias a input // Almacena referencias a input
private mapa: Map<number, Map<number, Input>> = new Map(); private mapa: Map<number, Map<number, null>> = new Map();
private disponible(nroFila: number, nroColumna: number): boolean { private disponible(nroFila: number, nroColumna: number): boolean {
if (!this.mapa.has(nroFila)) return true; if (!this.mapa.has(nroFila)) return true;
@ -52,9 +52,9 @@ class MapaCeldas {
return fila.has(nroColumna) === false; return fila.has(nroColumna) === false;
} }
private obtenerFilaOCrear(nro: number): Map<number, Input> { private obtenerFilaOCrear(nro: number): Map<number, null> {
if (!this.mapa.has(nro)) { if (!this.mapa.has(nro)) {
const m = new Map<number, Input>(); const m = new Map<number, null>();
this.mapa.set(nro, m); this.mapa.set(nro, m);
return m; return m;
} }
@ -63,7 +63,7 @@ class MapaCeldas {
} }
// Devuelve el offset // Devuelve el offset
public solicitar(inicio: number, cantidad: number, input: Input): number { public solicitar(inicio: number, cantidad: number): number {
const filas = []; const filas = [];
for (let i = 0; i < cantidad; i += 1) filas.push(inicio + i); for (let i = 0; i < cantidad; i += 1) filas.push(inicio + i);
@ -80,7 +80,7 @@ class MapaCeldas {
// Crear estas celdas y almacenar // Crear estas celdas y almacenar
filas.forEach((nroFila) => { filas.forEach((nroFila) => {
const fila = this.obtenerFilaOCrear(nroFila); const fila = this.obtenerFilaOCrear(nroFila);
fila.set(offsetActual, input); fila.set(offsetActual, null);
}); });
// Devolver nro de offset // Devolver nro de offset
@ -112,7 +112,7 @@ function generarMapaCeldas(entrada: Readonly<Array<Input>>): Array<Output> {
// Obtener los offsets de cada curso // Obtener los offsets de cada curso
for (const input of entrada) { for (const input of entrada) {
const offset = mapa.solicitar(input.horaInicio, input.nroHoras, input); const offset = mapa.solicitar(input.horaInicio, input.nroHoras);
salida.push({ salida.push({
...input, ...input,
offset, offset,
@ -174,29 +174,29 @@ describe("MapaCeldas", () => {
it("crea 1", () => { it("crea 1", () => {
const mapa = new MapaCeldas(); const mapa = new MapaCeldas();
const input = {} as unknown as Input; const input = {} as unknown as Input;
const offset = mapa.solicitar(0, 2, input); const offset = mapa.solicitar(0, 2);
expect(offset).toBe(0); expect(offset).toBe(0);
}); });
it("crea varios que no se solapan", () => { it("crea varios que no se solapan", () => {
const mapa = new MapaCeldas(); const mapa = new MapaCeldas();
const input = {} as unknown as Input; const input = {} as unknown as Input;
let offset = mapa.solicitar(0, 2, input); let offset = mapa.solicitar(0, 2);
expect(offset).toBe(0); expect(offset).toBe(0);
offset = mapa.solicitar(4, 3, input); offset = mapa.solicitar(4, 3);
expect(offset).toBe(0); expect(offset).toBe(0);
offset = mapa.solicitar(7, 4, input); offset = mapa.solicitar(7, 4);
expect(offset).toBe(0); expect(offset).toBe(0);
}); });
it("crea varios que se solapan", () => { it("crea varios que se solapan", () => {
const mapa = new MapaCeldas(); const mapa = new MapaCeldas();
const input = {} as unknown as Input; const input = {} as unknown as Input;
let offset = mapa.solicitar(0, 2, input); let offset = mapa.solicitar(0, 2);
expect(offset).toBe(0); expect(offset).toBe(0);
offset = mapa.solicitar(0, 2, input); offset = mapa.solicitar(0, 2);
expect(offset).toBe(1); expect(offset).toBe(1);
offset = mapa.solicitar(0, 4, input); offset = mapa.solicitar(0, 4);
expect(offset).toBe(2); expect(offset).toBe(2);
}); });
@ -212,33 +212,33 @@ describe("MapaCeldas", () => {
*/ */
const mapa = new MapaCeldas(); const mapa = new MapaCeldas();
const input = {} as unknown as Input; const input = {} as unknown as Input;
let offset = mapa.solicitar(0, 2, input); let offset = mapa.solicitar(0, 2);
expect(offset).toBe(0); expect(offset).toBe(0);
offset = mapa.solicitar(1, 3, input); offset = mapa.solicitar(1, 3);
expect(offset).toBe(1); expect(offset).toBe(1);
offset = mapa.solicitar(1, 4, input); offset = mapa.solicitar(1, 4);
expect(offset).toBe(2); expect(offset).toBe(2);
offset = mapa.solicitar(2, 3, input); offset = mapa.solicitar(2, 3);
expect(offset).toBe(0); expect(offset).toBe(0);
offset = mapa.solicitar(4, 2, input); offset = mapa.solicitar(4, 2);
expect(offset).toBe(1); expect(offset).toBe(1);
}); });
it("genera offsets", () => { it("genera offsets", () => {
const mapa = new MapaCeldas(); const mapa = new MapaCeldas();
const input = {} as unknown as Input; const input = {} as unknown as Input;
let offset = mapa.solicitar(0, 2, input); let offset = mapa.solicitar(0, 2);
expect(offset).toBe(0); expect(offset).toBe(0);
let fraccion = mapa.generarFraccion(0, offset, 2); let fraccion = mapa.generarFraccion(0, offset, 2);
expect(fraccion).toBe(1); expect(fraccion).toBe(1);
offset = mapa.solicitar(1, 3, input); offset = mapa.solicitar(1, 3);
fraccion = mapa.generarFraccion(1, offset, 3); fraccion = mapa.generarFraccion(1, offset, 3);
expect(fraccion).toBe(2); expect(fraccion).toBe(2);
mapa.solicitar(1, 4, input); mapa.solicitar(1, 4);
mapa.solicitar(2, 3, input); mapa.solicitar(2, 3);
offset = mapa.solicitar(4, 2, input); offset = mapa.solicitar(4, 2);
fraccion = mapa.generarFraccion(4, offset, 2); fraccion = mapa.generarFraccion(4, offset, 2);
expect(fraccion).toBe(3); expect(fraccion).toBe(3);
}); });

4
src/App.tsx
View File

@ -4,6 +4,7 @@ import { Editor } from "./Views/Editor";
import { useRouter } from "./Router"; import { useRouter } from "./Router";
import { Switch, Match, Show } from "solid-js"; import { Switch, Match, Show } from "solid-js";
import { Wallpaper } from "./Wallpaper"; import { Wallpaper } from "./Wallpaper";
import { SistemasMovil } from "./Views/SistemasMovil";
function App() { function App() {
const route = useRouter(); const route = useRouter();
@ -21,6 +22,9 @@ function App() {
<Match when={route() === "/editor/"}> <Match when={route() === "/editor/"}>
<Editor /> <Editor />
</Match> </Match>
<Match when={route() === "/sistemas-movil/"}>
<SistemasMovil />
</Match>
<Match when={route() === "/sistemas/"}> <Match when={route() === "/sistemas/"}>
<Main /> <Main />
</Match> </Match>

102
src/ContenedorHorarios/Tabla.tsx
View File

@ -1,11 +1,11 @@
import { StyleSheet, css } from "aphrodite" import { StyleSheet, css } from "aphrodite";
import { batch, createMemo, For } from "solid-js" import { batch, createMemo, For } from "solid-js";
import { produce, SetStoreFunction } from "solid-js/store" import { produce, SetStoreFunction } from "solid-js/store";
import { estilosGlobales } from "../Estilos" import { estilosGlobales } from "../Estilos";
import { Cursos, ListaCursosUsuario, DataProcesada, DatosGrupo } from "../types/DatosHorario" import { Cursos, ListaCursosUsuario, DataProcesada, DatosGrupo } from "../types/DatosHorario";
import { Dia, dias, horas } from "../Store" import { Dia, dias, horas } from "../Store";
import { FilaTabla } from "./Tabla/FilaTabla" import { FilaTabla } from "./Tabla/FilaTabla";
import { TablaObserver } from "./TablaObserver" import { TablaObserver } from "./TablaObserver";
export const coloresBorde = Object.freeze([ export const coloresBorde = Object.freeze([
"rgba(33,150,243,1)", "rgba(33,150,243,1)",
@ -13,22 +13,22 @@ export const coloresBorde = Object.freeze([
"rgba(236,64,122 ,1)", "rgba(236,64,122 ,1)",
"rgba(29,233,182 ,1)", "rgba(29,233,182 ,1)",
"rgba(244,67,54,1)", "rgba(244,67,54,1)",
]) ]);
export const diaANum = (d: Dia) => { export const diaANum = (d: Dia) => {
switch (d) { switch (d) {
case "Lunes": case "Lunes":
return 0 return 0;
case "Martes": case "Martes":
return 1 return 1;
case "Miercoles": case "Miercoles":
return 2 return 2;
case "Jueves": case "Jueves":
return 3 return 3;
case "Viernes": case "Viernes":
return 4 return 4;
} }
} };
const e = StyleSheet.create({ const e = StyleSheet.create({
fila: { fila: {
@ -81,34 +81,34 @@ const e = StyleSheet.create({
celdaCursoTeoria: { celdaCursoTeoria: {
fontWeight: "bold", fontWeight: "bold",
}, },
}) });
type FnSetCursosUsuarios = SetStoreFunction<ListaCursosUsuario>; type FnSetCursosUsuarios = SetStoreFunction<ListaCursosUsuario>;
const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsuarios: FnSetCursosUsuarios) => { const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsuarios: FnSetCursosUsuarios) => {
const obj: DataProcesada = {} const obj: DataProcesada = {};
for (const [indiceCurso, curso] of Object.entries(data)) { for (const [indiceCurso, curso] of Object.entries(data)) {
if (curso.oculto) continue if (curso.oculto) continue;
const nombreAbreviado = curso.abreviado const nombreAbreviado = curso.abreviado;
for (const [grupoStr, grupo] of Object.entries(curso.Teoria)) { for (const [grupoStr, grupo] of Object.entries(curso.Teoria)) {
for (const hora of grupo.Horas) { for (const hora of grupo.Horas) {
const dia = hora.substring(0, 2) const dia = hora.substring(0, 2);
const horas = hora.substring(2, 4) const horas = hora.substring(2, 4);
const minutos = hora.substr(4) const minutos = hora.substr(4);
const horaCompleta = `${horas}:${minutos}` const horaCompleta = `${horas}:${minutos}`;
const id = `${version}_${anio}_${nombreAbreviado}_T_${grupoStr}` const id = `${version}_${anio}_${nombreAbreviado}_T_${grupoStr}`;
if (!(horaCompleta in obj)) { if (!(horaCompleta in obj)) {
obj[horaCompleta] = {} obj[horaCompleta] = {};
} }
if (!(dia in obj[horaCompleta])) { if (!(dia in obj[horaCompleta])) {
obj[horaCompleta][dia] = [] obj[horaCompleta][dia] = [];
} }
obj[horaCompleta][dia].push({ obj[horaCompleta][dia].push({
@ -118,37 +118,37 @@ const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsua
datosGrupo: grupo, datosGrupo: grupo,
fnSeleccionar: () => { fnSeleccionar: () => {
setCursosUsuarios("cursos", Number(indiceCurso), "Teoria", produce<{ [p: string]: DatosGrupo }>((x) => { setCursosUsuarios("cursos", Number(indiceCurso), "Teoria", produce<{ [p: string]: DatosGrupo }>((x) => {
const grupoActualSeleccionado = x[grupoStr].seleccionado const grupoActualSeleccionado = x[grupoStr].seleccionado;
if (grupoActualSeleccionado) { if (grupoActualSeleccionado) {
x[grupoStr].seleccionado = false x[grupoStr].seleccionado = false;
} else { } else {
for (const xKey in x) { for (const xKey in x) {
x[xKey].seleccionado = xKey === grupoStr x[xKey].seleccionado = xKey === grupoStr;
} }
} }
})) }));
}, },
}) });
} }
} }
for (const [grupoStr, grupo] of Object.entries(curso.Laboratorio ?? {})) { for (const [grupoStr, grupo] of Object.entries(curso.Laboratorio ?? {})) {
for (const hora of grupo.Horas) { for (const hora of grupo.Horas) {
const dia = hora.substring(0, 2) const dia = hora.substring(0, 2);
const horas = hora.substring(2, 4) const horas = hora.substring(2, 4);
const minutos = hora.substr(4) const minutos = hora.substr(4);
const horaCompleta = `${horas}:${minutos}` const horaCompleta = `${horas}:${minutos}`;
const id = `${version}_${anio}_${nombreAbreviado}_L_${grupoStr}` const id = `${version}_${anio}_${nombreAbreviado}_L_${grupoStr}`;
if (!(horaCompleta in obj)) { if (!(horaCompleta in obj)) {
obj[horaCompleta] = {} obj[horaCompleta] = {};
} }
if (!(dia in obj[horaCompleta])) { if (!(dia in obj[horaCompleta])) {
obj[horaCompleta][dia] = [] obj[horaCompleta][dia] = [];
} }
obj[horaCompleta][dia].push({ obj[horaCompleta][dia].push({
@ -162,25 +162,25 @@ const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsua
Number(indiceCurso), Number(indiceCurso),
"Laboratorio", "Laboratorio",
produce<{ [p: string]: DatosGrupo }>((x) => { produce<{ [p: string]: DatosGrupo }>((x) => {
const grupoActualSeleccionado = x[grupoStr].seleccionado const grupoActualSeleccionado = x[grupoStr].seleccionado;
if (grupoActualSeleccionado) { if (grupoActualSeleccionado) {
x[grupoStr].seleccionado = false x[grupoStr].seleccionado = false;
} else { } else {
for (const xKey in x) { for (const xKey in x) {
x[xKey].seleccionado = xKey === grupoStr x[xKey].seleccionado = xKey === grupoStr;
} }
} }
}), }),
) );
}, },
}) });
} }
} }
} }
return obj return obj;
} };
interface Props { interface Props {
data: Cursos, data: Cursos,
@ -191,12 +191,12 @@ interface Props {
} }
export function Tabla(props: Props) { export function Tabla(props: Props) {
const anio = () => props.anio.substring(0, props.anio.indexOf(" ")) const anio = () => props.anio.substring(0, props.anio.indexOf(" "));
const data = createMemo(() => procesarAnio(props.data, anio(), props.version, props.setCursosUsuarios)) const data = createMemo(() => procesarAnio(props.data, anio(), props.version, props.setCursosUsuarios));
const celdas = createMemo(() => { const celdas = createMemo(() => {
// Hace reaccionar a la reactividad de Solid // Hace reaccionar a la reactividad de Solid
const d = data() const d = data();
return ( return (
<For each={horas}> <For each={horas}>
{(hora) => ( {(hora) => (
@ -207,8 +207,8 @@ export function Tabla(props: Props) {
/> />
)} )}
</For> </For>
) );
}) });
return ( return (
<div> <div>
@ -223,5 +223,5 @@ export function Tabla(props: Props) {
</div> </div>
{celdas()} {celdas()}
</div> </div>
) );
} }

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

@ -1,9 +1,9 @@
import { StyleSheet, css } from "aphrodite" import { StyleSheet, css } from "aphrodite";
import { estilosGlobales } from "../../Estilos" import { estilosGlobales } from "../../Estilos";
import { For, createSignal, createMemo, createEffect, onCleanup } from "solid-js" import { For, createSignal, createMemo, createEffect, onCleanup } from "solid-js";
import { Dia } from "../../Store" import { Dia } from "../../Store";
import { DatosGrupo } from "../../types/DatosHorario" import { DatosGrupo } from "../../types/DatosHorario";
import { TablaObserver } from "../TablaObserver" import { TablaObserver } from "../TablaObserver";
const e = StyleSheet.create({ const e = StyleSheet.create({
celdaComun: { celdaComun: {
@ -42,7 +42,7 @@ const e = StyleSheet.create({
celdaResaltadoSeleccionado: { celdaResaltadoSeleccionado: {
textDecoration: "underline", textDecoration: "underline",
}, },
}) });
const eColores = StyleSheet.create({ const eColores = StyleSheet.create({
lunes: { lunes: {
@ -62,7 +62,7 @@ const eColores = StyleSheet.create({
viernes: { viernes: {
backgroundColor: "rgba(244,67,54,1)", backgroundColor: "rgba(244,67,54,1)",
}, },
}) });
const clasesColores = { const clasesColores = {
Lunes: css(eColores.lunes), Lunes: css(eColores.lunes),
@ -70,7 +70,7 @@ const clasesColores = {
Miercoles: css(eColores.miercoles), Miercoles: css(eColores.miercoles),
Jueves: css(eColores.jueves), Jueves: css(eColores.jueves),
Viernes: css(eColores.viernes), Viernes: css(eColores.viernes),
} };
interface DatosProps { interface DatosProps {
id: string, id: string,
@ -97,108 +97,108 @@ interface Props {
tablaObserver: TablaObserver, tablaObserver: TablaObserver,
} }
const claseSeldaSeleccionada = css(e.celdaSeleccionado) const claseSeldaSeleccionada = css(e.celdaSeleccionado);
function RenderFila(datos: DatosProps, props: Props) { function RenderFila(datos: DatosProps, props: Props) {
const id = datos.id const id = datos.id;
const txt = datos.txt const txt = datos.txt;
const esLab = datos.esLab const esLab = datos.esLab;
const fnSeleccionar = datos.fnSeleccionar const fnSeleccionar = datos.fnSeleccionar;
const estadoCeldaMemo = props.tablaObserver.registrarConId(id, datos.datosGrupo) const estadoCeldaMemo = props.tablaObserver.registrarConId(id, datos.datosGrupo);
const [estabaResaltado, setEstabaResaltado] = createSignal(false) const [estabaResaltado, setEstabaResaltado] = createSignal(false);
// Limpiar los memos, porque cuando se desmonta la celda esos memos quedan sin efecto // Limpiar los memos, porque cuando se desmonta la celda esos memos quedan sin efecto
onCleanup(() => { onCleanup(() => {
props.tablaObserver.limpiar(id) props.tablaObserver.limpiar(id);
}) });
const clases = createMemo( const clases = createMemo(
() => { () => {
const clases = [ const clases = [
e.celdaCurso, e.celdaCurso,
esLab ? e.celdaCursoLab : e.celdaCursoTeoria, esLab ? e.celdaCursoLab : e.celdaCursoTeoria,
] ];
let adicional = "" let adicional = "";
const estadoCelda = estadoCeldaMemo() const estadoCelda = estadoCeldaMemo();
switch (estadoCelda) { switch (estadoCelda) {
case "Normal": { case "Normal": {
if (estabaResaltado()) { if (estabaResaltado()) {
props.fnDesresaltarFila() props.fnDesresaltarFila();
setEstabaResaltado(false) setEstabaResaltado(false);
} }
break break;
} }
case "Oculto": { case "Oculto": {
if (estabaResaltado()) { if (estabaResaltado()) {
props.fnDesresaltarFila() props.fnDesresaltarFila();
setEstabaResaltado(false) setEstabaResaltado(false);
} }
clases.push(e.celdaOculto) clases.push(e.celdaOculto);
break break;
} }
case "Resaltado": { case "Resaltado": {
props.fnResaltarFila() props.fnResaltarFila();
setEstabaResaltado(true) setEstabaResaltado(true);
clases.push(e.celdaResaltado) clases.push(e.celdaResaltado);
adicional = clasesColores[props.dia] adicional = clasesColores[props.dia];
break break;
} }
case "Seleccionado": { case "Seleccionado": {
if (estabaResaltado()) { if (estabaResaltado()) {
props.fnDesresaltarFila() props.fnDesresaltarFila();
setEstabaResaltado(false) setEstabaResaltado(false);
} }
clases.push(e.celdaSeleccionado) clases.push(e.celdaSeleccionado);
break break;
} }
case "ResaltadoOculto": { case "ResaltadoOculto": {
props.fnResaltarFila() props.fnResaltarFila();
setEstabaResaltado(true) setEstabaResaltado(true);
clases.push(e.celdaResaltadoOculto) clases.push(e.celdaResaltadoOculto);
adicional = clasesColores[props.dia] adicional = clasesColores[props.dia];
break break;
} }
case "ResaltadoSeleccionado": { case "ResaltadoSeleccionado": {
props.fnResaltarFila() props.fnResaltarFila();
setEstabaResaltado(true) setEstabaResaltado(true);
clases.push(e.celdaResaltadoSeleccionado) clases.push(e.celdaResaltadoSeleccionado);
adicional = clasesColores[props.dia] adicional = clasesColores[props.dia];
break break;
} }
} }
return `${css(...clases)} ${adicional}` return `${css(...clases)} ${adicional}`;
}, },
undefined, undefined,
(x, y) => x === y, (x, y) => x === y,
) );
return ( return (
<button className={clases()} <button className={clases()}
onMouseEnter={() => { onMouseEnter={() => {
props.tablaObserver.resaltar(id) props.tablaObserver.resaltar(id);
}} }}
onMouseLeave={() => { onMouseLeave={() => {
props.tablaObserver.quitarResaltado() props.tablaObserver.quitarResaltado();
}} }}
onClick={fnSeleccionar} onClick={fnSeleccionar}
> >
{txt} {txt}
</button> </button>
) );
} }
export function CeldaFila(props: Props) { export function CeldaFila(props: Props) {
const datos = props.datos const datos = props.datos;
return ( return (
<div className={css(e.celdaComun, estilosGlobales.inlineBlock)}> <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
@ -206,5 +206,5 @@ export function CeldaFila(props: Props) {
{(datos) => RenderFila(datos, props)} {(datos) => RenderFila(datos, props)}
</For> </For>
</div> </div>
) );
} }

4
src/Estilos.ts
View File

@ -1,4 +1,4 @@
import { StyleSheet } from "aphrodite" import { StyleSheet } from "aphrodite";
export const estilosGlobales = StyleSheet.create({ export const estilosGlobales = StyleSheet.create({
contenedor: { contenedor: {
@ -58,4 +58,4 @@ export const estilosGlobales = StyleSheet.create({
padding: "0.25rem 0.35rem", padding: "0.25rem 0.35rem",
borderRadius: "5px", borderRadius: "5px",
}, },
}) });

26
src/Router.tsx
View File

@ -1,31 +1,31 @@
import { createSignal, JSX } from "solid-js" import { createSignal, JSX } from "solid-js";
export const useRouter = (): () => string => { export const useRouter = (): () => string => {
let rutaPrevia = window.location.hash let rutaPrevia = window.location.hash;
if (rutaPrevia === "") { if (rutaPrevia === "") {
window.history.pushState({}, "Horarios UNSA", "#/") window.history.pushState({}, "Horarios UNSA", "#/");
rutaPrevia = "/" rutaPrevia = "/";
} else { } else {
rutaPrevia = rutaPrevia.substr(1) rutaPrevia = rutaPrevia.substr(1);
} }
const [rutaActual, setRutaActual] = createSignal(rutaPrevia) const [rutaActual, setRutaActual] = createSignal(rutaPrevia);
const fnEffect = () => { const fnEffect = () => {
const nuevaRuta = window.location.hash.substr(1) const nuevaRuta = window.location.hash.substr(1);
setRutaActual(nuevaRuta) setRutaActual(nuevaRuta);
} };
window.addEventListener("hashchange", fnEffect) window.addEventListener("hashchange", fnEffect);
return rutaActual return rutaActual;
} };
export function RouterLink(props: { to: string, className?: string, children: JSX.Element }) { export function RouterLink(props: { to: string, className?: string, children: JSX.Element }) {
return ( return (
<a className={props.className} href={`/#${props.to}`}> <a className={props.className} href={`/#${props.to}`}>
{props.children} {props.children}
</a> </a>
) );
} }

1
src/Views/Index.tsx
View File

@ -55,6 +55,7 @@ function MobileIndex() {
const login = () => { const login = () => {
console.log((inputElement as HTMLInputElement).value); console.log((inputElement as HTMLInputElement).value);
window.location.href = "#/sistemas-movil/";
}; };
return ( return (

28
src/Views/Main.tsx
View File

@ -1,22 +1,22 @@
import { BarraSuperior } from "../BarraSuperior" import { BarraSuperior } from "../BarraSuperior";
import { ContenedorHorarios } from "../ContenedorHorarios/ContenedorHorarios" import { ContenedorHorarios } from "../ContenedorHorarios/ContenedorHorarios";
import { Show, createSignal } from "solid-js" import { Show, createSignal } from "solid-js";
import { css } from "aphrodite" import { css } from "aphrodite";
import { estilosGlobales } from "../Estilos" import { estilosGlobales } from "../Estilos";
import { Creditos } from "../Creditos" import { Creditos } from "../Creditos";
import { Separador } from "../Separador" import { Separador } from "../Separador";
export function Main() { export function Main() {
/// @ts-ignore /// @ts-ignore
const soportaBackdropFilter = document.body.style.backdropFilter !== undefined const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
const mostrarMensajeBackdropFilterRaw = !localStorage.getItem("mensaje-backdrop-filter-oculto") const mostrarMensajeBackdropFilterRaw = !localStorage.getItem("mensaje-backdrop-filter-oculto");
const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw) const [mostrarMensajeBackdropFilter, setMostrarMensaje] = createSignal(mostrarMensajeBackdropFilterRaw);
const ocultarMensajeBackdropFilter = () => { const ocultarMensajeBackdropFilter = () => {
setMostrarMensaje(false) setMostrarMensaje(false);
localStorage.setItem("mensaje-backdrop-filter-oculto", "true") localStorage.setItem("mensaje-backdrop-filter-oculto", "true");
} };
return ( return (
<div> <div>
@ -45,5 +45,5 @@ export function Main() {
<ContenedorHorarios /> <ContenedorHorarios />
<Creditos /> <Creditos />
</div> </div>
) );
} }

11
src/Views/SistemasMovil.tsx Normal file
View File

@ -0,0 +1,11 @@
import { TopBar } from "./SistemasMovil/TopBar";
import { Table } from "./SistemasMovil/Table";
export function SistemasMovil() {
return (
<div>
<TopBar />
<Table />
</div>
);
}

90
src/Views/SistemasMovil/Table.tsx Normal file
View File

@ -0,0 +1,90 @@
import {StyleSheet, css} from "aphrodite/no-important";
import { createSignal, JSX } from "solid-js";
const s = StyleSheet.create({
container: {
display: "grid",
gridTemplateColumns: "3.5rem 1fr 1fr",
textAlign: "center",
fontSize: "0.9rem",
},
tableIndex: {
backgroundColor: "rgba(83,25,37,0.8)",
color: "white",
padding: "0.5rem 0.25rem",
textAlign: "center",
},
columna: {
textAlign: "left",
borderRight: "solid 2px var(--color-borde)",
},
});
type DayIndex = 0 | 1 | 2 | 3;
const days = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
function Grupo(props: {curso: string, grupo: string}) {
const ss = StyleSheet.create({
button: {
display: "inline-block",
padding: "0.25rem 0.35rem",
textAlign: "left",
borderRadius: "10px",
border: "solid 2px red",
flexGrow: 1,
margin: "1px",
},
});
return (
<button className={css(ss.button)}>
{props.curso}
<br />
{props.grupo}
</button>
);
}
export function Celda(props: {children: JSX.Element}) {
const ss = StyleSheet.create({
celda: {
padding: "0 0.25rem",
display: "flex",
},
});
return (
<div className={css(ss.celda)}>
{props.children}
</div>
);
}
export function Table() {
const [currentDay, setCurrentDay] = createSignal<DayIndex>(0);
return (
<div className={css(s.container)}>
<div className={css(s.columna)}>
<div className={css(s.tableIndex)} style="border: none">&nbsp;</div>
</div>
<div className={css(s.columna)}>
<div className={css(s.tableIndex)}>{days[currentDay()]}</div>
<Celda>
<Grupo curso="TAIS 2" grupo="LA" />
<Grupo curso="ST2" grupo="LB" />
</Celda>
<Celda>
<Grupo curso="TAIS 2" grupo="LB" />
</Celda>
<Celda>
<Grupo curso="TAIS" grupo="LC" />
<Grupo curso="PIS 2" grupo="LB" />
<Grupo curso="PPP" grupo="B" />
</Celda>
</div>
<div className={css(s.columna)}>
<div className={css(s.tableIndex)}>{days[currentDay() + 1]}</div>
<div style="padding: 0 0.25rem" />
</div>
</div>
);
}

40
src/Views/SistemasMovil/TopBar.tsx Normal file
View File

@ -0,0 +1,40 @@
import { StyleSheet, css } from "aphrodite/no-important";
const s = StyleSheet.create({
bar: {
backgroundColor: "var(--color-primario)",
color: "white",
height: "3.5rem",
display: "flex",
alignItems: "center",
},
icon: {
display: "inline-block",
color: "white",
fontSize: "1.5rem",
verticalAlign: "bottom",
cursor: "pointer",
height: "1.5rem",
padding: "0 0.5rem",
},
barLabel: {
color: "white",
padding: "0 1rem",
fontWeight: 500,
fontSize: "1.25rem",
},
});
export function TopBar() {
return (
<nav className={css(s.bar)}>
<button>
<i
className={`ph-list ${css(s.icon)}`}
title={"Cambiar imagen de fondo"}
/>
</button>
<p className={css(s.barLabel)}>Mi horario</p>
</nav>
);
}

1
src/styles/global.css
View File

@ -1,6 +1,7 @@
:root { :root {
--color-texto: white; --color-texto: white;
--color-primario: #531925; --color-primario: #531925;
--color-borde: rgba(83, 25, 37, 0.49);
} }
body { body {