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

View File

@ -8,16 +8,22 @@
"@typescript-eslint/eslint-plugin": "^4.19.0", "@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0", "@typescript-eslint/parser": "^4.19.0",
"aphrodite": "^2.4.0", "aphrodite": "^2.4.0",
"browserslist": "^4.20.2",
"component-register": "0.7.x",
"eslint": "^7.22.0", "eslint": "^7.22.0",
"eslint-plugin-react": "^7.23.1", "eslint-plugin-react": "^7.23.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"solid-js": "^0.23.11", "solid-app-router": "^0.3.2",
"solid-scripts": "0.0.50", "solid-js": "^1.3.12",
"typescript": "4.1.3" "typescript": "^4.6.2",
"vite": "^2.8.6",
"vite-plugin-solid": "^2.2.6"
}, },
"scripts": { "scripts": {
"start": "solid-scripts start", "start": "vite",
"build": "solid-scripts build" "dev": "vite",
"build": "vite build",
"serve": "vite preview"
}, },
"browserslist": [ "browserslist": [
"Chrome 74", "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 { 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 { StyleSheet, css } from "aphrodite"
import { estilosGlobales } from "../Estilos" import { estilosGlobales } from "../Estilos"
import { TablaObserver } from "./TablaObserver" import { TablaObserver } from "./TablaObserver"
@ -48,11 +49,11 @@ interface Props {
fnAgregarCurso: (c: Curso) => void, fnAgregarCurso: (c: Curso) => void,
listaCursosUsuario: ListaCursosUsuario, listaCursosUsuario: ListaCursosUsuario,
esCursoMiHorario: boolean, esCursoMiHorario: boolean,
setCursosUsuarios: SetStateFunction<ListaCursosUsuario>, setCursosUsuarios: SetStoreFunction<ListaCursosUsuario>,
tablaObserver: TablaObserver, tablaObserver: TablaObserver,
} }
type FnSetCursosUsuarios = SetStateFunction<ListaCursosUsuario>; type FnSetCursosUsuarios = SetStoreFunction<ListaCursosUsuario>;
interface PropsIndicadorGrupo { interface PropsIndicadorGrupo {
nombre: string, nombre: string,
@ -65,7 +66,8 @@ interface PropsIndicadorGrupo {
function IndicadorGrupo(props: PropsIndicadorGrupo) { function IndicadorGrupo(props: PropsIndicadorGrupo) {
const id = `${props.idParcial}_${props.esLab ? "L" : "T"}_${props.nombre}` const id = `${props.idParcial}_${props.esLab ? "L" : "T"}_${props.nombre}`
return ( 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"}} style={props.esLab ? {"font-style": "italic"} : {"font-weight": "bold"}}
onMouseEnter={() => props.tablaObserver.resaltar(id)} onMouseEnter={() => props.tablaObserver.resaltar(id)}
onMouseLeave={() => props.tablaObserver.quitarResaltado()} onMouseLeave={() => props.tablaObserver.quitarResaltado()}
@ -97,7 +99,7 @@ const agruparProfesores = (
if (grupoActualSeleccionado) { if (grupoActualSeleccionado) {
x[grupo].seleccionado = false x[grupo].seleccionado = false
} else { } else {
for (let xKey in x) { for (const xKey in x) {
x[xKey].seleccionado = xKey === grupo x[xKey].seleccionado = xKey === grupo
} }
} }
@ -120,7 +122,10 @@ function CursoE(
const cursoAgregadoMemo = createMemo( const cursoAgregadoMemo = createMemo(
() => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined, () => props.listaCursosUsuario.cursos.find((x) => x.nombre === datosCurso.nombre && !x.oculto) !== undefined,
undefined, undefined,
(x, y) => x === y, {
equals:
(x, y) => x === y,
},
) )
const tituloMemo = createMemo(() => (cursoAgregadoMemo() const tituloMemo = createMemo(() => (cursoAgregadoMemo()

View File

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

View File

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

View File

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

View File

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