Agregar vista de editor. Devolver pagina de inicio

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: {}
-    

src/App.tsx

@@ -1,10 +1,27 @@
-import {Main} from "./Views/Main"
+import { Main } from "./Views/Main"
-import {Index} from "./Views/Index"
+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>
     )
 }

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>
+            </RouterLink>
-            <a href="https://github.com/Araozu/horarios-unsa-2/" target="_blank" title={"Ver codigo fuente en GitHub"}
+            <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>
     )
 }

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}`
 

src/ContenedorHorarios/MiHorario.tsx

@@ -137,7 +137,7 @@ export function MiHorario(props: MiHorarioProps) {
                         estadoLayoutMax={"MaxPersonal"}
                     />
                     */}
-                    <div/>
+                    <div />
                 </Match>
             </Switch>
         </div>

src/ContenedorHorarios/TablaObserver.ts

@@ -154,6 +154,7 @@ export class TablaObserver {
                 }
                 default: {
                     let _: never
+                    // eslint-disable-next-line prefer-const
                     _ = seleccionado
                     return _
                 }

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",
     },
 })

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>
+    )
+}

src/Separador.tsx

@@ -0,0 +1,6 @@
+
+export function Separador() {
+    return (
+        <div style={{width: "100%", height: "2rem"}} />
+    )
+}

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>
+    )
+}

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>
+    )
+}

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,
+                        Por ahora solo está disponible para ing. de sistemas. Proximamente se habilitarán
-                        el resto de carreras solo cuenta con teoria y necesitan que el alumno inicie
+                        otras carreras.
-                        sesión.
                     </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>
+                </RouterLink>
-                <button className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}>
+                {/*
+                <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/"

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>