Colores de los grupos
This commit is contained in:
parent
81deec4461
commit
1993eade34
@ -35,6 +35,7 @@
|
|||||||
"Node 10"
|
"Node 10"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"swiper": "^8.4.4",
|
||||||
"yaml": "^1.10.0"
|
"yaml": "^1.10.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -14,6 +14,7 @@ specifiers:
|
|||||||
normalize.css: ^8.0.1
|
normalize.css: ^8.0.1
|
||||||
solid-app-router: ^0.3.2
|
solid-app-router: ^0.3.2
|
||||||
solid-js: ^1.3.12
|
solid-js: ^1.3.12
|
||||||
|
swiper: ^8.4.4
|
||||||
ts-jest: ^29.0.3
|
ts-jest: ^29.0.3
|
||||||
typescript: ^4.6.2
|
typescript: ^4.6.2
|
||||||
vite: ^2.8.6
|
vite: ^2.8.6
|
||||||
@ -21,6 +22,7 @@ specifiers:
|
|||||||
yaml: ^1.10.0
|
yaml: ^1.10.0
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
|
swiper: 8.4.4
|
||||||
yaml: 1.10.0
|
yaml: 1.10.0
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
@ -1475,6 +1477,12 @@ packages:
|
|||||||
esutils: 2.0.3
|
esutils: 2.0.3
|
||||||
dev: true
|
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:
|
/electron-to-chromium/1.4.101:
|
||||||
resolution: {integrity: sha512-XJH+XmJjACx1S7ASl/b//KePcda5ocPnFH2jErztXcIS8LpP0SE6rX8ZxiY5/RaDPnaF1rj0fPaHfppzb0e2Aw==}
|
resolution: {integrity: sha512-XJH+XmJjACx1S7ASl/b//KePcda5ocPnFH2jErztXcIS8LpP0SE6rX8ZxiY5/RaDPnaF1rj0fPaHfppzb0e2Aw==}
|
||||||
dev: true
|
dev: true
|
||||||
@ -3433,6 +3441,10 @@ packages:
|
|||||||
resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
|
resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/ssr-window/4.0.2:
|
||||||
|
resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/stack-utils/2.0.5:
|
/stack-utils/2.0.5:
|
||||||
resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
|
resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
@ -3559,6 +3571,15 @@ packages:
|
|||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
dev: true
|
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:
|
/table/6.0.7:
|
||||||
resolution: {integrity: sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==}
|
resolution: {integrity: sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==}
|
||||||
engines: {node: '>=10.0.0'}
|
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 { createSignal, For } from "solid-js";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/solid";
|
||||||
import { horas } from "../../Store";
|
import { horas } from "../../Store";
|
||||||
|
|
||||||
|
import "swiper/css";
|
||||||
|
import { Grupo } from "./Grupo";
|
||||||
|
|
||||||
const s = StyleSheet.create({
|
const s = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "13vw 1fr 1fr",
|
gridTemplateColumns: "13vw 1fr",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
fontSize: "0.9rem",
|
fontSize: "0.9rem",
|
||||||
},
|
},
|
||||||
tableIndex: {
|
tableIndex: {
|
||||||
backgroundColor: "rgba(83,25,37,0.8)",
|
backgroundColor: "rgb(108,67,75)",
|
||||||
color: "white",
|
color: "white",
|
||||||
padding: "0.5rem 0.25rem",
|
padding: "0.5rem 0.25rem",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
|
width: "42vw",
|
||||||
},
|
},
|
||||||
columna: {
|
columna: {
|
||||||
borderRight: "solid 2px var(--color-borde)",
|
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 = {
|
export type GrupoDia = {
|
||||||
id_horario: number,
|
id_horario: number,
|
||||||
id_laboratorio: number,
|
id_laboratorio: number,
|
||||||
@ -39,38 +41,11 @@ export type GrupoDia = {
|
|||||||
fraccion: number, // por cuanto dividir la celda. 1, 2, 3, ...
|
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({
|
const ss = StyleSheet.create({
|
||||||
contenedorDia: {
|
contenedorDia: {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
|
width: "42vw",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
@ -95,9 +70,7 @@ export type TableInput = {
|
|||||||
viernes: Array<GrupoDia>,
|
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 lunes = <Dia dia={"Lunes"} grupos={props.datos.lunes} />;
|
||||||
const martes = <Dia dia={"Martes"} grupos={props.datos.martes} />;
|
const martes = <Dia dia={"Martes"} grupos={props.datos.martes} />;
|
||||||
const miercoles = <Dia dia={"Miercoles"} grupos={props.datos.miercoles} />;
|
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>}
|
{(hora) => <div className={css(s.celdaHora)}>{hora.substring(0, 5)}</div>}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -7,6 +7,9 @@ const s = StyleSheet.create({
|
|||||||
height: "3.5rem",
|
height: "3.5rem",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
position: "sticky",
|
||||||
|
top: 0,
|
||||||
|
zIndex: 100,
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
|
Loading…
Reference in New Issue
Block a user