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