Seleccion de grupos de laboratorio
This commit is contained in:
parent
1993eade34
commit
1ffcfa608d
@ -1,4 +1,5 @@
|
|||||||
import { createSignal } from "solid-js";
|
import { createSignal } from "solid-js";
|
||||||
|
import { createStore } from "solid-js/store";
|
||||||
|
|
||||||
export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
|
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 [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
|
||||||
export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);
|
export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);
|
||||||
export const [isMobile, setIsMobile] = createSignal(screen.width < 500);
|
export const [isMobile, setIsMobile] = createSignal(screen.width < 500);
|
||||||
|
|
||||||
|
export const [gruposSeleccionados, setGruposSeleccionados] = createStore<{[k: number]: boolean}>({});
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { css, StyleSheet } from "aphrodite/no-important";
|
import { css, StyleSheet } from "aphrodite/no-important";
|
||||||
import { GrupoDia } from "./Table";
|
import { GrupoDia } from "./Table";
|
||||||
|
import { gruposSeleccionados, setGruposSeleccionados } from "../../Store";
|
||||||
|
|
||||||
const colores: Array<[string, string]> = [
|
const colores: Array<[string, string]> = [
|
||||||
["#FFEBEE", "#F44336"],
|
["#FFEBEE", "#F44336"],
|
||||||
@ -14,41 +15,50 @@ const colores: Array<[string, string]> = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export function Grupo(props: { data: GrupoDia }) {
|
export function Grupo(props: { data: GrupoDia }) {
|
||||||
|
const [colorDesactivado, colorActivado] = colores[props.data.id_laboratorio % 9];
|
||||||
const ss = StyleSheet.create({
|
const ss = StyleSheet.create({
|
||||||
button: {
|
button: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
padding: "0.2rem 0.2rem",
|
padding: "0.2rem 1rem",
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
border: "solid 2px red",
|
border: `solid 2px ${colorActivado}`,
|
||||||
position: "absolute",
|
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 estilo = () => {
|
||||||
const fraccion = props.data.fraccion;
|
const fraccion = props.data.fraccion;
|
||||||
const offsetHorizontal = props.data.offsetHorizontal;
|
const offsetHorizontal = props.data.offsetHorizontal;
|
||||||
const offsetVertical = props.data.offsetVertical;
|
const offsetVertical = props.data.offsetVertical;
|
||||||
const nroHoras = props.data.nroHoras;
|
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;` +
|
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 (
|
return (
|
||||||
<input
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={css(ss.button)}
|
className={css(ss.button)}
|
||||||
style={estilo()}
|
style={`${estilo()}${estiloFondo()}`}
|
||||||
onClick={() => console.log(`:D ${props.data.id_laboratorio}`)}
|
onClick={handleClick}
|
||||||
value={`${props.data.abreviado} ${props.data.grupo}`}
|
|
||||||
>
|
>
|
||||||
{props.data.abreviado}
|
{props.data.abreviado}
|
||||||
<br />
|
<br />
|
||||||
{props.data.grupo}
|
{props.data.grupo}
|
||||||
</input>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user