From 1993eade34dc2202a8c51ff81180775aaf05f378 Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 14 Oct 2022 13:46:16 -0500 Subject: [PATCH] Colores de los grupos --- package.json | 1 + pnpm-lock.yaml | 21 ++++++++++ src/Views/SistemasMovil/Grupo.tsx | 54 ++++++++++++++++++++++++++ src/Views/SistemasMovil/Table.tsx | 61 ++++++++++-------------------- src/Views/SistemasMovil/TopBar.tsx | 3 ++ 5 files changed, 100 insertions(+), 40 deletions(-) create mode 100644 src/Views/SistemasMovil/Grupo.tsx diff --git a/package.json b/package.json index f8ce5be..96ba5af 100755 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "Node 10" ], "dependencies": { + "swiper": "^8.4.4", "yaml": "^1.10.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6e9171..5ae8019 100755 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,7 @@ specifiers: normalize.css: ^8.0.1 solid-app-router: ^0.3.2 solid-js: ^1.3.12 + swiper: ^8.4.4 ts-jest: ^29.0.3 typescript: ^4.6.2 vite: ^2.8.6 @@ -21,6 +22,7 @@ specifiers: yaml: ^1.10.0 dependencies: + swiper: 8.4.4 yaml: 1.10.0 devDependencies: @@ -1475,6 +1477,12 @@ packages: esutils: 2.0.3 dev: true + /dom7/4.0.4: + resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==} + dependencies: + ssr-window: 4.0.2 + dev: false + /electron-to-chromium/1.4.101: resolution: {integrity: sha512-XJH+XmJjACx1S7ASl/b//KePcda5ocPnFH2jErztXcIS8LpP0SE6rX8ZxiY5/RaDPnaF1rj0fPaHfppzb0e2Aw==} dev: true @@ -3433,6 +3441,10 @@ packages: resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=} dev: true + /ssr-window/4.0.2: + resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==} + dev: false + /stack-utils/2.0.5: resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==} engines: {node: '>=10'} @@ -3559,6 +3571,15 @@ packages: engines: {node: '>= 0.4'} dev: true + /swiper/8.4.4: + resolution: {integrity: sha512-jA/8BfOZwT8PqPSnMX0TENZYitXEhNa7ZSNj1Diqh5LZyUJoBQaZcqAiPQ/PIg1+IPaRn/V8ZYVb0nxHMh51yw==} + engines: {node: '>= 4.7.0'} + requiresBuild: true + dependencies: + dom7: 4.0.4 + ssr-window: 4.0.2 + dev: false + /table/6.0.7: resolution: {integrity: sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==} engines: {node: '>=10.0.0'} diff --git a/src/Views/SistemasMovil/Grupo.tsx b/src/Views/SistemasMovil/Grupo.tsx new file mode 100644 index 0000000..a3af04b --- /dev/null +++ b/src/Views/SistemasMovil/Grupo.tsx @@ -0,0 +1,54 @@ +import { css, StyleSheet } from "aphrodite/no-important"; +import { GrupoDia } from "./Table"; + +const colores: Array<[string, string]> = [ + ["#FFEBEE", "#F44336"], + ["#F3E5F5", "#9C27B0"], + ["#E8EAF6", "#3F51B5"], + ["#E1F5FE", "#03A9F4"], + ["#E0F2F1", "#009688"], + ["#F1F8E9", "#689F38"], + ["#FFF9C4", "#FBC02D"], + ["#FBE9E7", "#F4511E"], + ["#EFEBE9", "#795548"], +]; + +export function Grupo(props: { data: GrupoDia }) { + const ss = StyleSheet.create({ + button: { + display: "inline-block", + padding: "0.2rem 0.2rem", + textAlign: "left", + borderRadius: "10px", + border: "solid 2px red", + position: "absolute", + }, + }); + + const estilo = () => { + const fraccion = props.data.fraccion; + const offsetHorizontal = props.data.offsetHorizontal; + const offsetVertical = props.data.offsetVertical; + const nroHoras = props.data.nroHoras; + + const [colorDesactivado, colorActivado] = colores[props.data.id_laboratorio % 9]; + const estiloColor = `background-color: ${colorDesactivado};border-color: ${colorActivado}`; + + return `left: calc((43vw / ${fraccion}) * ${offsetHorizontal}); top: ${offsetVertical * 3}rem;` + + `height: ${nroHoras * 3}rem; width: calc(100% / ${fraccion});${estiloColor}`; + }; + + return ( + console.log(`:D ${props.data.id_laboratorio}`)} + value={`${props.data.abreviado} ${props.data.grupo}`} + > + {props.data.abreviado} +
+ {props.data.grupo} + + ); +} diff --git a/src/Views/SistemasMovil/Table.tsx b/src/Views/SistemasMovil/Table.tsx index 23bff6f..df01b0b 100644 --- a/src/Views/SistemasMovil/Table.tsx +++ b/src/Views/SistemasMovil/Table.tsx @@ -1,19 +1,24 @@ -import {StyleSheet, css} from "aphrodite/no-important"; +import { StyleSheet, css } from "aphrodite/no-important"; import { createSignal, For } from "solid-js"; +import { Swiper, SwiperSlide } from "swiper/solid"; import { horas } from "../../Store"; +import "swiper/css"; +import { Grupo } from "./Grupo"; + const s = StyleSheet.create({ container: { display: "grid", - gridTemplateColumns: "13vw 1fr 1fr", + gridTemplateColumns: "13vw 1fr", textAlign: "center", fontSize: "0.9rem", }, tableIndex: { - backgroundColor: "rgba(83,25,37,0.8)", + backgroundColor: "rgb(108,67,75)", color: "white", padding: "0.5rem 0.25rem", textAlign: "center", + width: "42vw", }, columna: { borderRight: "solid 2px var(--color-borde)", @@ -25,9 +30,6 @@ const s = StyleSheet.create({ }, }); -type DayIndex = 0 | 1 | 2 | 3 | 4; -const days = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]; - export type GrupoDia = { id_horario: number, id_laboratorio: number, @@ -39,38 +41,11 @@ export type GrupoDia = { fraccion: number, // por cuanto dividir la celda. 1, 2, 3, ... } -function Grupo(props: {data: GrupoDia}) { - const ss = StyleSheet.create({ - button: { - display: "inline-block", - padding: "0.2rem 0.2rem", - textAlign: "left", - borderRadius: "10px", - border: "solid 2px red", - position: "absolute", - }, - }); - const estilo = () => { - const fraccion = props.data.fraccion; - const offsetHorizontal = props.data.offsetHorizontal; - const offsetVertical = props.data.offsetVertical; - const nroHoras = props.data.nroHoras; - return `left: calc((43vw / ${fraccion}) * ${offsetHorizontal}); top: ${offsetVertical * 3}rem;` + - `height: ${nroHoras * 3}rem; width: calc(100% / ${fraccion})`; - }; - return ( - - ); -} - -function Dia(props: {dia: string, grupos: Array}) { +function Dia(props: { dia: string, grupos: Array }) { const ss = StyleSheet.create({ contenedorDia: { position: "relative", + width: "42vw", }, }); return ( @@ -95,9 +70,7 @@ export type TableInput = { viernes: Array, } -export function Table(props: {datos: TableInput}) { - const [currentDay, setCurrentDay] = createSignal(0); - +export function Table(props: { datos: TableInput }) { const lunes = ; const martes = ; const miercoles = ; @@ -112,8 +85,16 @@ export function Table(props: {datos: TableInput}) { {(hora) =>
{hora.substring(0, 5)}
} - {jueves} - {viernes} + + {lunes} + {martes} + {miercoles} + {jueves} + {viernes} + ); } diff --git a/src/Views/SistemasMovil/TopBar.tsx b/src/Views/SistemasMovil/TopBar.tsx index 531363f..1a2c365 100644 --- a/src/Views/SistemasMovil/TopBar.tsx +++ b/src/Views/SistemasMovil/TopBar.tsx @@ -7,6 +7,9 @@ const s = StyleSheet.create({ height: "3.5rem", display: "flex", alignItems: "center", + position: "sticky", + top: 0, + zIndex: 100, }, icon: { display: "inline-block",