Colores de los grupos

package.json

@@ -35,6 +35,7 @@
         "Node 10"
     ],
     "dependencies": {
+        "swiper": "^8.4.4",
         "yaml": "^1.10.0"
     }
 }

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'}

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 (
+        <input
+            type="button"
+            className={css(ss.button)}
+            style={estilo()}
+            onClick={() => console.log(`:D ${props.data.id_laboratorio}`)}
+            value={`${props.data.abreviado} ${props.data.grupo}`}
+        >
+            {props.data.abreviado}
+            <br />
+            {props.data.grupo}
+        </input>
+    );
+}

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}) {
+function Dia(props: { dia: string, grupos: Array<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 (
-        <button className={css(ss.button)} style={estilo()}>
-            {props.data.abreviado}
-            <br />
-            {props.data.grupo}
-        </button>
-    );
-}
-
-function Dia(props: {dia: string, grupos: Array<GrupoDia>}) {
     const ss = StyleSheet.create({
         contenedorDia: {
             position: "relative",
+            width: "42vw",
         },
     });
     return (
@@ -95,9 +70,7 @@ export type TableInput = {
     viernes: Array<GrupoDia>,
 }
 
-export function Table(props: {datos: TableInput}) {
+export function Table(props: { datos: TableInput }) {
-    const [currentDay, setCurrentDay] = createSignal<DayIndex>(0);
-
     const lunes = <Dia dia={"Lunes"} grupos={props.datos.lunes} />;
     const martes = <Dia dia={"Martes"} grupos={props.datos.martes} />;
     const miercoles = <Dia dia={"Miercoles"} grupos={props.datos.miercoles} />;
@@ -112,8 +85,16 @@ export function Table(props: {datos: TableInput}) {
                     {(hora) => <div className={css(s.celdaHora)}>{hora.substring(0, 5)}</div>}
                 </For>
             </div>
-            {jueves}
+            <Swiper
-            {viernes}
+                slidesPerView={2}
+                style="width: 86vw"
+            >
+                <SwiperSlide>{lunes}</SwiperSlide>
+                <SwiperSlide>{martes}</SwiperSlide>
+                <SwiperSlide>{miercoles}</SwiperSlide>
+                <SwiperSlide>{jueves}</SwiperSlide>
+                <SwiperSlide>{viernes}</SwiperSlide>
+            </Swiper>
         </div>
     );
 }

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