Colores de los grupos
This commit is contained in:
Araozu
parent
81deec4461
commit
1993eade34
@ -35,6 +35,7 @@
|
||||
"Node 10"
|
||||
],
|
||||
"dependencies": {
|
||||
"swiper": "^8.4.4",
|
||||
"yaml": "^1.10.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'}
|
||||
|
||||
54
src/Views/SistemasMovil/Grupo.tsx
Normal file
54
src/Views/SistemasMovil/Grupo.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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 (
|
||||
<button className={css(ss.button)} style={estilo()}>
|
||||
{props.data.abreviado}
|
||||
<br />
|
||||
{props.data.grupo}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Dia(props: {dia: string, grupos: Array<GrupoDia>}) {
|
||||
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}) {
|
||||
const [currentDay, setCurrentDay] = createSignal<DayIndex>(0);
|
||||
|
||||
export function Table(props: { datos: TableInput }) {
|
||||
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}
|
||||
{viernes}
|
||||
<Swiper
|
||||
slidesPerView={2}
|
||||
style="width: 86vw"
|
||||
>
|
||||
<SwiperSlide>{lunes}</SwiperSlide>
|
||||
<SwiperSlide>{martes}</SwiperSlide>
|
||||
<SwiperSlide>{miercoles}</SwiperSlide>
|
||||
<SwiperSlide>{jueves}</SwiperSlide>
|
||||
<SwiperSlide>{viernes}</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user