diff --git a/src/Store.ts b/src/Store.ts
index 37caceb..542e7cc 100755
--- a/src/Store.ts
+++ b/src/Store.ts
@@ -1,4 +1,5 @@
import { createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
@@ -36,3 +37,5 @@ const tamanoLetraGuardado = Number(/* localStorage.getItem("tamano-letra") ?? */
export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);
export const [isMobile, setIsMobile] = createSignal(screen.width < 500);
+
+export const [gruposSeleccionados, setGruposSeleccionados] = createStore<{[k: number]: boolean}>({});
diff --git a/src/Views/SistemasMovil/Grupo.tsx b/src/Views/SistemasMovil/Grupo.tsx
index a3af04b..06d1653 100644
--- a/src/Views/SistemasMovil/Grupo.tsx
+++ b/src/Views/SistemasMovil/Grupo.tsx
@@ -1,5 +1,6 @@
import { css, StyleSheet } from "aphrodite/no-important";
import { GrupoDia } from "./Table";
+import { gruposSeleccionados, setGruposSeleccionados } from "../../Store";
const colores: Array<[string, string]> = [
["#FFEBEE", "#F44336"],
@@ -14,41 +15,50 @@ const colores: Array<[string, string]> = [
];
export function Grupo(props: { data: GrupoDia }) {
+ const [colorDesactivado, colorActivado] = colores[props.data.id_laboratorio % 9];
const ss = StyleSheet.create({
button: {
display: "inline-block",
- padding: "0.2rem 0.2rem",
+ padding: "0.2rem 1rem",
textAlign: "left",
borderRadius: "10px",
- border: "solid 2px red",
+ border: `solid 2px ${colorActivado}`,
position: "absolute",
},
});
+ const estiloFondo = () => {
+ if (gruposSeleccionados[props.data.id_laboratorio]) {
+ return `background-color: ${colorActivado}; color: white; font-weight: 600;`;
+ } else {
+ return `background-color: ${colorDesactivado};`;
+ }
+ };
+
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}`;
+ `height: ${nroHoras * 3}rem; width: calc(100% / ${fraccion});`;
+ };
+
+ const handleClick = () => {
+ setGruposSeleccionados(props.data.id_laboratorio, (x) => !x);
};
return (
- console.log(`:D ${props.data.id_laboratorio}`)}
- value={`${props.data.abreviado} ${props.data.grupo}`}
+ style={`${estilo()}${estiloFondo()}`}
+ onClick={handleClick}
>
{props.data.abreviado}
{props.data.grupo}
-
+
);
}