Add table view to create.html

master
Araozu 2022-04-05 18:31:33 -05:00
parent b70d23ab6f
commit e97e2ab4bb
9 changed files with 641 additions and 8797 deletions

View File

@ -2,14 +2,14 @@
<html lang="es">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="./favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<title>Horarios Unsa 2</title>
<link rel="stylesheet" href="css/phosphor.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="/css/phosphor.min.css">
<link rel="stylesheet" href="/css/global.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@ -17,5 +17,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

View File

@ -8,16 +8,22 @@
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"aphrodite": "^2.4.0",
"browserslist": "^4.20.2",
"component-register": "0.7.x",
"eslint": "^7.22.0",
"eslint-plugin-react": "^7.23.1",
"normalize.css": "^8.0.1",
"solid-js": "^0.23.11",
"solid-scripts": "0.0.50",
"typescript": "4.1.3"
"solid-app-router": "^0.3.2",
"solid-js": "^1.3.12",
"typescript": "^4.6.2",
"vite": "^2.8.6",
"vite-plugin-solid": "^2.2.6"
},
"scripts": {
"start": "solid-scripts start",
"build": "solid-scripts build"
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"browserslist": [
"Chrome 74",

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,6 @@
import { Cursos, DatosGrupo, ListaCursosUsuario, Curso } from "../types/DatosHorario"
import { createMemo, For, produce, SetStateFunction } from "solid-js"
import { createMemo, For } from "solid-js"
import { produce, SetStoreFunction } from "solid-js/store"
import { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../Estilos"
import { TablaObserver } from "./TablaObserver"
@ -48,11 +49,11 @@ interface Props {
fnAgregarCurso: (c: Curso) => void,
listaCursosUsuario: ListaCursosUsuario,
esCursoMiHorario: boolean,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>,
setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>,
tablaObserver: TablaObserver,
}
type FnSetCursosUsuarios = SetStateFunction<ListaCursosUsuario>;
type FnSetCursosUsuarios = SetStoreFunction<ListaCursosUsuario>;
interface PropsIndicadorGrupo {
nombre: string,
@ -65,7 +66,8 @@ interface PropsIndicadorGrupo {
function IndicadorGrupo(props: PropsIndicadorGrupo) {
const id = `${props.idParcial}_${props.esLab ? "L" : "T"}_${props.nombre}`
return (
<span className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
<span
className={css(e.botonTexto, estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft)}
style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}
onMouseEnter={() => props.tablaObserver.resaltar(id)}
onMouseLeave={() => props.tablaObserver.quitarResaltado()}
@ -97,7 +99,7 @@ const agruparProfesores = (
if (grupoActualSeleccionado) {
x[grupo].seleccionado = false
} else {
for (let xKey in x) {
for (const xKey in x) {
x[xKey].seleccionado = xKey === grupo
}
}
@ -120,7 +122,10 @@ function CursoE(
const cursoAgregadoMemo = createMemo(
() => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined,
undefined,
(x, y) => x === y,
{
equals:
(x, y) => x === y,
},
)
const tituloMemo = createMemo(() => (cursoAgregadoMemo()

View File

@ -1,5 +1,6 @@
import { Curso, Cursos, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario"
import { batch, createMemo, createSignal, For, Match, SetStateFunction, Switch, untrack } from "solid-js"
import { batch, createMemo, createSignal, For, Match, Switch, untrack } from "solid-js"
import {SetStoreFunction} from "solid-js/store"
import { css } from "aphrodite"
import { estilosGlobales } from "../Estilos"
import { Tabla } from "./Tabla"
@ -15,7 +16,7 @@ interface HorariosProps {
setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
fnAgregarCurso: (c: Curso) => void,
listaCursosUsuario: ListaCursosUsuario,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>
}
const {
@ -129,7 +130,7 @@ export function Horarios(props: HorariosProps) {
estadoLayoutMax={"MaxHorarios"}
/>
*/}
<div/>
<div />
</Match>
</Switch>

View File

@ -2,7 +2,8 @@ import { estilosGlobales } from "../Estilos"
import { StyleSheet, css } from "aphrodite"
import { Tabla } from "./Tabla"
import { EstadoLayout } from "./ContenedorHorarios"
import { Switch, Match, createMemo, SetStateFunction } from "solid-js"
import { Switch, Match, createMemo } from "solid-js"
import {SetStoreFunction} from "solid-js/store"
import { BotonMaxMin } from "./BotonMaxMin"
import { BotonIcono } from "./BotonIcono"
import { Curso, Cursos, ListaCursosUsuario } from "../types/DatosHorario"
@ -14,7 +15,7 @@ interface MiHorarioProps {
setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
cursosUsuario: ListaCursosUsuario,
fnAgregarCurso: (c: Curso) => void,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>
}
const e = StyleSheet.create({

View File

@ -1,5 +1,6 @@
import { StyleSheet, css } from "aphrodite"
import { batch, createMemo, For, produce, SetStateFunction } from "solid-js"
import { batch, createMemo, For } from "solid-js"
import { produce, SetStoreFunction } from "solid-js/store"
import { estilosGlobales } from "../Estilos"
import { Cursos, ListaCursosUsuario, DataProcesada, DatosGrupo } from "../types/DatosHorario"
import { Dia, dias, horas } from "../Store"
@ -82,7 +83,7 @@ const e = StyleSheet.create({
},
})
type FnSetCursosUsuarios = SetStateFunction<ListaCursosUsuario>;
type FnSetCursosUsuarios = SetStoreFunction<ListaCursosUsuario>;
const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsuarios: FnSetCursosUsuarios) => {
const obj: DataProcesada = {}
@ -122,7 +123,7 @@ const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsua
if (grupoActualSeleccionado) {
x[grupoStr].seleccionado = false
} else {
for (let xKey in x) {
for (const xKey in x) {
x[xKey].seleccionado = xKey === grupoStr
}
}
@ -166,7 +167,7 @@ const procesarAnio = (data: Cursos, anio: string, version: number, setCursosUsua
if (grupoActualSeleccionado) {
x[grupoStr].seleccionado = false
} else {
for (let xKey in x) {
for (const xKey in x) {
x[xKey].seleccionado = xKey === grupoStr
}
}
@ -185,7 +186,7 @@ interface Props {
data: Cursos,
anio: string,
version: number,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>,
setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>,
tablaObserver: TablaObserver,
}

View File

@ -1,6 +1,7 @@
import { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../../Estilos"
import { For, createMemo, createState, State } from "solid-js"
import { For, createMemo } from "solid-js"
import {createStore, Store} from "solid-js/store"
import { Dia, dias } from "../../Store"
import { CeldaFila } from "./CeldaFila"
import { DataProcesada } from "../../types/DatosHorario"
@ -51,7 +52,7 @@ const e = StyleSheet.create({
},
})
const [diasResaltados, setDiasResaltados] = createState({
const [diasResaltados, setDiasResaltados] = createStore({
Lunes: 0,
Martes: 0,
Miercoles: 0,
@ -71,11 +72,11 @@ const diasFilter = createMemo(() => Object.entries(diasResaltados)
.sort((x, y) => (diaANum(x) > diaANum(y) ? 1 : -1)))
const useDiasResaltados: () => [
State<{ [k: string]: boolean }>,
Store<{ [k: string]: boolean }>,
(d: Dia) => void,
(d: Dia) => void
] = () => {
const [diasResaltadosLocal, setDiasResaltadosLocal] = createState({
const [diasResaltadosLocal, setDiasResaltadosLocal] = createStore({
Lunes: false,
Martes: false,
Miercoles: false,
@ -148,7 +149,7 @@ export function FilaTabla(props: Props) {
)
}}
</For>
<div className={css(e.filaBorde)}/>
<div className={css(e.filaBorde)} />
</div>
</div>
)

10
vite.config.ts Normal file
View File

@ -0,0 +1,10 @@
import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"
export default defineConfig({
plugins: [solidPlugin()],
build: {
target: "esnext",
polyfillDynamicImport: false,
},
})