Agregar vista de editor. Devolver pagina de inicio

2021-09-06 18:43:57 -05:00 · 2021-09-06 18:43:57 -05:00 · b70d23ab6f
parent b05316a21b
commit b70d23ab6f
13 changed files with 350 additions and 30 deletions
--- a/public/horarios/2021_2_fps_ingenieriadesistemas.yaml
+++ b/public/horarios/2021_2_fps_ingenieriadesistemas.yaml
@ -133,7 +133,7 @@ años:
          Docente: Edward Zarate
          Horas:
            - Ju0940
-            - Ju1030
+            - Ju1040
            - Ju1130
            - Vi0850
            - Vi0940
@ -235,4 +235,3 @@ años:
            - Mi1920
            - Mi2010
  5to año: {}
-    
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,10 +1,27 @@
-import {Main} from "./Views/Main"
-import {Index} from "./Views/Index"
+import { Main } from "./Views/Main"
+import { Index } from "./Views/Index"
+import { Editor } from "./Views/Editor"
+import { useRouter } from "./Router"
+import { Switch, Match } from "solid-js"
+import { Wallpaper } from "./Wallpaper"

 function App() {
+    const route = useRouter()
+
    return (
        <div className="App">
-            <Main />
+            <Wallpaper />
+            <Switch fallback={<p>404!</p>}>
+                <Match when={route() === "/"}>
+                    <Index />
+                </Match>
+                <Match when={route() === "/editor/"}>
+                    <Editor />
+                </Match>
+                <Match when={route() === "/sistemas/"}>
+                    <Main />
+                </Match>
+            </Switch>
        </div>
    )
 }
--- a/src/BarraSuperior.tsx
+++ b/src/BarraSuperior.tsx
@ -2,6 +2,7 @@ import { estilosGlobales } from "./Estilos"
 import { StyleSheet, css } from "aphrodite"
 import { numWallpaper, setNumWallpaper } from "./Store"
 import { TamanoLetra } from "./BarraSuperior/TamanoLetra"
+import { RouterLink } from "./Router"

 const ultimoIndiceWallpaper = 2

@ -82,15 +83,16 @@ const estilos = StyleSheet.create({
 export function BarraSuperior() {
    return (
        <header>
-            <span className={css(
+            <RouterLink to={"/"} className={css(
                estilosGlobales.contenedor,
                estilosGlobales.inlineBlock,
                estilos.tituloPrincipal,
            )}
            >
                Horarios Unsa
-            </span>
-            <a href="https://github.com/Araozu/horarios-unsa-2/" target="_blank" title={"Ver codigo fuente en GitHub"}
+            </RouterLink>
+            <a
+                href="https://github.com/Araozu/horarios-unsa-2/" target="_blank" title={"Ver codigo fuente en GitHub"}
                className={css(
                    estilosGlobales.contenedor,
                    estilosGlobales.inlineBlock,
@ -103,7 +105,7 @@ export function BarraSuperior() {
            <CambiadorImg />
            <TamanoLetra />
            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>Ingeniería de Sistemas</span>
-            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2021-A</span>
+            <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2021-B</span>
        </header>
    )
 }
--- a/src/ContenedorHorarios/CursosElem.tsx
+++ b/src/ContenedorHorarios/CursosElem.tsx
@ -113,7 +113,7 @@ function CursoE(
    datosCurso: Curso,
    anio: () => string,
    claseCursoAgregado: string,
-    props: Props
+    props: Props,
 ) {
    const idCurso = `${props.version}_${anio()}_${datosCurso.abreviado}`

--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@ -137,7 +137,7 @@ export function MiHorario(props: MiHorarioProps) {
                        estadoLayoutMax={"MaxPersonal"}
                    />
                    */}
-                    <div/>
+                    <div />
                </Match>
            </Switch>
        </div>
--- a/src/ContenedorHorarios/TablaObserver.ts
+++ b/src/ContenedorHorarios/TablaObserver.ts
@ -154,6 +154,7 @@ export class TablaObserver {
                }
                default: {
                    let _: never
+                    // eslint-disable-next-line prefer-const
                    _ = seleccionado
                    return _
                }
--- a/src/Estilos.ts
+++ b/src/Estilos.ts
@ -42,6 +42,20 @@ export const estilosGlobales = StyleSheet.create({
        },
    },
    linkGenerico: {
-        color: "var(--color-texto)"
+        color: "var(--color-texto)",
+    },
+    entradaTexto: {
+        display: "inline-block",
+        background: "none",
+        color: "var(--color-texto)",
+        margin: "0.25rem 0",
+        borderRadius: "0.25rem",
+        border: "dashed 1px rgba(255, 255, 255, 0.4)",
+        padding: "0.35rem",
+        fontSize: "1rem",
+    },
+    botonTexto: {
+        padding: "0.25rem 0.35rem",
+        borderRadius: "5px",
    },
 })
--- a/src/Router.tsx
+++ b/src/Router.tsx
@ -0,0 +1,31 @@
+import { createSignal, JSX } from "solid-js"
+
+export const useRouter = (): () => string => {
+    let rutaPrevia = window.location.hash
+
+    if (rutaPrevia === "") {
+        window.history.pushState({}, "Horarios UNSA", "#/")
+        rutaPrevia = "/"
+    } else {
+        rutaPrevia = rutaPrevia.substr(1)
+    }
+
+    const [rutaActual, setRutaActual] = createSignal(rutaPrevia)
+
+    const fnEffect = () => {
+        const nuevaRuta = window.location.hash.substr(1)
+        setRutaActual(nuevaRuta)
+    }
+
+    window.addEventListener("hashchange", fnEffect)
+
+    return rutaActual
+}
+
+export function RouterLink(props: { to: string, className?: string, children: JSX.Element }) {
+    return (
+        <a className={props.className} href={`/#${props.to}`}>
+            {props.children}
+        </a>
+    )
+}
--- a/src/Separador.tsx
+++ b/src/Separador.tsx
@ -0,0 +1,6 @@
+
+export function Separador() {
+    return (
+        <div style={{width: "100%", height: "2rem"}} />
+    )
+}
--- a/src/Views/Editor.tsx
+++ b/src/Views/Editor.tsx
@ -0,0 +1,130 @@
+import { BarraSuperior } from "../BarraSuperior"
+import { estilosGlobales } from "../Estilos"
+import { StyleSheet, css } from "aphrodite"
+import { Separador } from "../Separador"
+import { Tabla } from "../ContenedorHorarios/Tabla"
+import YAML from "yaml"
+import { TablaObserver } from "../ContenedorHorarios/TablaObserver"
+import { Curso, Cursos } from "../types/DatosHorario"
+import { CursosElem } from "../ContenedorHorarios/CursosElem"
+import { For, createMemo, createState } from "solid-js"
+import { CursoEditor } from "./Editor/CursoEditor"
+
+const e = StyleSheet.create({
+    contenedorGlobal: {
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+})
+
+interface Data {
+    indice: number,
+    cursos: Curso[],
+}
+
+const [nuevaData, setNuevaData] = createState<Data>({
+    indice: 1,
+    cursos: [{
+        nombre: "Curso de Ejemplo",
+        abreviado: "CE",
+        oculto: false,
+        Teoria: {
+            A: {
+                Docente: "Juan Perez",
+                seleccionado: false,
+                Horas: ["Mi0700", "Mi0750", "Ju1400", "Ju1450"],
+            },
+        },
+    }],
+})
+
+type FormEvent = Event & { submitter: HTMLElement; } & { currentTarget: HTMLFormElement; target: HTMLFormElement; }
+export function Editor() {
+    const tablaObserver = new TablaObserver()
+    const dataWrapper = createMemo(() => nuevaData)
+
+    const agregarCurso = (ev: FormEvent) => {
+        ev.preventDefault()
+
+        /// @ts-ignore
+        const nombreCurso: string = ev.target.elements.nombre_curso.value
+        /// @ts-ignore
+        const nombreAbreviado: string = ev.target.elements.nombre_abreviado.value
+
+        const curso: Curso = {
+            nombre: nombreCurso,
+            abreviado: nombreAbreviado,
+            oculto: false,
+            Teoria: {},
+        }
+
+        setNuevaData("cursos", nuevaData.indice, curso)
+        setNuevaData("indice", (i) => i + 1)
+    }
+
+    const data = createMemo<Cursos>(() => {
+        const o: Cursos = {}
+        nuevaData.cursos.forEach((c) => {
+            o[c.nombre] = c
+        })
+        return o
+    })
+
+    return (
+        <div>
+            <BarraSuperior />
+            <Separador />
+            <div>
+                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+                    Editor de horarios
+                </div>
+                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+                    Ingeniería de Sistemas
+                </div>
+                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+                    2021-B
+                </div>
+            </div>
+            <div className={css(estilosGlobales.contenedor)}>
+                <Tabla
+                    data={data()}
+                    anio={"1er"}
+                    version={1}
+                    setCursosUsuarios={console.log}
+                    tablaObserver={tablaObserver}
+                />
+            </div>
+            <Separador />
+
+            <div>
+                <For each={nuevaData.cursos}>
+                    {(c) => <CursoEditor curso={c} />}
+                </For>
+            </div>
+
+            <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+                <span style={{margin: "1rem 0", display: "inline-block"}}>
+                    Agregar curso nuevo:
+                </span>
+                <form onSubmit={agregarCurso}>
+                    <label htmlFor="nombre_curso">Nombre del curso:</label>
+                    <input className={css(estilosGlobales.entradaTexto)} type="text" id="nombre_curso" name="nombre_curso" />
+                    <br />
+                    <label htmlFor="nombre_abreviado">Nombre abreviado</label>
+                    <input className={css(estilosGlobales.entradaTexto)} type="text" id="nombre_abreviado" name="nombre_abreviado" />
+                    <br />
+                    <input
+                        type="submit"
+                        className={css(estilosGlobales.contenedorCursor, estilosGlobales.contenedorCursorSoft, estilosGlobales.botonTexto)}
+                        style={{margin: "0.5rem 0", background: "inherit", color: "inherit", border: "inherit"}}
+                        value="Agregar"
+                    />
+                </form>
+            </div>
+
+        </div>
+    )
+}
--- a/src/Views/Editor/CursoEditor.tsx
+++ b/src/Views/Editor/CursoEditor.tsx
@ -0,0 +1,105 @@
+import { Curso, DatosGrupo } from "../../types/DatosHorario"
+import { estilosGlobales } from "../../Estilos"
+import { StyleSheet, css } from "aphrodite"
+import { For } from "solid-js"
+
+const e = StyleSheet.create({
+    entrada: {
+        margin: "0.5rem 0",
+        color: "inherit",
+    },
+    contenedorVariante: {
+        // padding: "0.5rem 0.75rem 0.5rem 1rem",
+        paddingLeft: "1rem",
+        borderLeft: "solid 1px rgba(200, 200, 200, 0.5)",
+        margin: "0.25rem",
+    },
+})
+
+function EditorGrupo(props: { grupo: string, datosGrupo: DatosGrupo }) {
+    return (
+        <div>
+            Grupo&nbsp;
+            <input
+                type="text"
+                value={props.grupo}
+                style={{width: "1rem"}}
+                className={css(
+                    estilosGlobales.entradaTexto,
+                    e.entrada,
+                )}
+            />
+            <div className={css(e.contenedorVariante)}>
+                Docente:&nbsp;
+                <input
+                    type="text"
+                    value={props.datosGrupo.Docente}
+                    className={css(
+                        estilosGlobales.entradaTexto,
+                        e.entrada,
+                    )}
+                />
+                <br />
+                Horas:
+                <br />
+                <For each={props.datosGrupo.Horas}>
+                    {(h) => <span>{h}, </span>}
+                </For>
+            </div>
+        </div>
+    )
+}
+
+export function CursoEditor(props: { curso: Curso }) {
+    return (
+        <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
+            <input
+                type="text"
+                value={props.curso.nombre}
+                className={css(
+                    estilosGlobales.entradaTexto,
+                    e.entrada,
+                )}
+            />
+            &nbsp;-&nbsp;
+            <input
+                type="text"
+                value={props.curso.abreviado}
+                style={{width: "5rem"}}
+                className={css(
+                    estilosGlobales.entradaTexto,
+                    e.entrada,
+                )}
+            />
+            <br />
+            Teoria:
+            <div className={css(e.contenedorVariante)}>
+                <For each={Object.entries(props.curso.Teoria)}>
+                    {([grupo, datosGrupo]) => <EditorGrupo grupo={grupo} datosGrupo={datosGrupo} />}
+                </For>
+                <br />
+                <button
+                    className={css(
+                        estilosGlobales.contenedorCursor,
+                        estilosGlobales.contenedorCursorSoft,
+                        estilosGlobales.botonTexto,
+                    )}
+                >
+                    Agregar grupo de teoría
+                </button>
+            </div>
+            Laboratorio:
+            <div className={css(e.contenedorVariante)}>
+                <button
+                    className={css(
+                        estilosGlobales.contenedorCursor,
+                        estilosGlobales.contenedorCursorSoft,
+                        estilosGlobales.botonTexto,
+                    )}
+                >
+                    Agregar grupo de laboratorio
+                </button>
+            </div>
+        </div>
+    )
+}
--- a/src/Views/Index.tsx
+++ b/src/Views/Index.tsx
@ -1,7 +1,6 @@
-import { BarraSuperior } from "../BarraSuperior"
-import { Wallpaper } from "../Wallpaper"
 import { estilosGlobales } from "../Estilos"
 import { StyleSheet, css } from "aphrodite"
+import { RouterLink } from "../Router"

 const e = StyleSheet.create({
    contenedorGlobal: {
@ -33,29 +32,46 @@ const e = StyleSheet.create({
 export function Index() {
    return (
        <div className={css(e.contenedorGlobal)}>
-            <Wallpaper />
            <div className={css(e.cont)}>
                <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
-                    <h1 style={{"text-align": "center", "font-size": "1.75rem"}}>Horarios UNSA</h1>
+                    <h1 style={{
+                        "text-align": "center",
+                        "font-size": "1.75rem",
+                    }}
+                    >
+                        Horarios UNSA
+                    </h1>
                    <p className={css(e.parrafo)}>
                        Esta página te permite crear tu horario fácilmente, sin importar de que
                        año son los cursos.
                    </p>
                    <p className={css(e.parrafo)}>
-                        Ingeniería de Sistemas cuenta con horarios de teoria y laboratorio automáticos,
-                        el resto de carreras solo cuenta con teoria y necesitan que el alumno inicie
-                        sesión.
+                        Por ahora solo está disponible para ing. de sistemas. Proximamente se habilitarán
+                        otras carreras.
                    </p>
                    <p className={css(e.parrafo)}>
-                        Se recomienda usar un computador/laptop y un navegador actualizado (Firefox, Chrome, Qutebrowser).
+                        Se recomienda usar un computador/laptop y un navegador actualizado (Firefox, Chrome,
+                        Qutebrowser).
                    </p>
                </div>
-                <button className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
+                <RouterLink
+                    to={"/sistemas/"}
+                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                >
                    Ing. de Sistemas
-                </button>
-                <button className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
+                </RouterLink>
+                {/*
+                <button disabled className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
                    Otras carreras
                </button>
+                */}
+                <RouterLink
+                    to={"/editor/"}
+                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
+                >
+                    <i className={`${css(e.iconoGitHub)} ph-pencil`} />
+                    Editor
+                </RouterLink>
                <a
                    className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
                    href="https://github.com/Araozu/horarios-unsa-2/"
--- a/src/Views/Main.tsx
+++ b/src/Views/Main.tsx
@ -1,10 +1,10 @@
 import { BarraSuperior } from "../BarraSuperior"
 import { ContenedorHorarios } from "../ContenedorHorarios/ContenedorHorarios"
-import { Wallpaper } from "../Wallpaper"
 import { Show, createSignal } from "solid-js"
 import { css } from "aphrodite"
 import { estilosGlobales } from "../Estilos"
 import { Creditos } from "../Creditos"
+import { Separador } from "../Separador"

 export function Main() {
    /// @ts-ignore
@ -20,7 +20,6 @@ export function Main() {

    return (
        <div>
-            <Wallpaper />
            <BarraSuperior />
            <Show when={!soportaBackdropFilter && mostrarMensajeBackdropFilter()}>
                <div className={css(estilosGlobales.contenedor)}>
@ -42,7 +41,7 @@ export function Main() {
                </a>
            </div>
            */}
-            <div style={{width: "100%", height: "2rem"}} />
+            <Separador />
            <ContenedorHorarios />
            <Creditos />
        </div>