Mobile login

.eslintrc.yml

@@ -26,7 +26,7 @@ rules:
     - double
   semi:
     - error
-    - never
+    - always
   react/jsx-pascal-case: error
   react/jsx-closing-bracket-location: error
   react/jsx-closing-tag-location: error

index.html

@@ -9,7 +9,6 @@
     <title>Horarios Unsa 2</title>
 
     <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">

package.json

@@ -20,7 +20,7 @@
         "vite-plugin-solid": "^2.2.6"
     },
     "scripts": {
-        "start": "vite",
+        "start": "vite --host",
         "dev": "vite",
         "build": "vite build",
         "serve": "vite preview"

public/css/global.css

@@ -1,11 +0,0 @@
-:root {
-    --color-texto: white;
-}
-
-body {
-    color: var(--color-texto);
-}
-
-[class^="ph-"], [class*=" ph-"] ::before {
-    font-size: 0.8rem;
-}

public/horarios/2022_2_fps_ingenieriadesistemas.yaml

@@ -13,93 +13,128 @@ años:
       abreviado: TAIS
       Teoria:
         A:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Ma0940
             - Ma1040
             - Ma1130
         B:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Vi1450
             - Vi1550
             - Vi1640
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Mi0700
             - Mi0750
         B:
-          Docente: "?"
+          Docente: Robert Arisaca
           Horas:
             - Mi1400
             - Mi1450
+        C:
+          Docente: Lazo Dely
+          Horas:
+            - Mi1830
+            - Mi1920
     Plataformas:
       nombre: Plataformas Emergentes
       abreviado: PE
       Teoria:
         A:
-          Docente: "?"
+          Docente: Diego Iquira
           Horas:
             - Lu0750
             - Lu0850
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: Diego Iquira
           Horas:
             - Ju0850
             - Ju0940
+        B:
+          Docente: Diego Iquira
+          Horas:
+            - Ma1740
+            - Ma1830
     Proyecto de Sw:
       nombre: Proyecto de Ingeniería de Software 2
       abreviado: PIS2
       Teoria:
         A:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu0940
             - Lu1040
         C:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1130
             - Lu1220
         B:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1550
             - Lu1640
         D:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Lu1740
             - Lu1830
         E:
-          Docente: "?"
+          Docente: Freddy Saji
           Horas:
             - Ju0940
             - Ju1040
       Laboratorio:
+        A:
+          Docente: William Bornas
+          Horas:
+            - Ma0700
+            - Ma0750
         B:
-          Docente: "?"
+          Docente: Giovanni Martinez
           Horas:
             - Mi1830
             - Mi1920
+        C:
+          Docente: José Sulla
+          Horas:
+            - Ju1740
+            - Ju1830
+        D:
+          Docente: William Bornas
+          Horas:
+            - Vi1550
+            - Vi1730
+        E:
+          Docente: William Bornas
+          Horas:
+            - Ma0850
+            - Ma0940
     Sw de Juegos:
       nombre: Desarrollo de Software para Juegos
       abreviado: DSJ
       Teoria:
         A:
-          Docente: "?"
+          Docente: José Sulla
           Horas:
             - Lu1920
             - Lu2010
       Laboratorio:
         A:
-          Docente: "?"
+          Docente: José Sulla
           Horas:
             - Mi1220
             - Mi1310
+        B:
+          Docente: José Sulla
+          Horas:
+            - Mi1550
+            - Mi1640
     Tesis 2:
       nombre: Seminario de Tesis 2
       abreviado: ST2
@@ -163,23 +198,34 @@ años:
       abreviado: GSTI
       Teoria:
         A:
-          Docente: "?"
+          Docente: Fabricio Calienes
           Horas:
             - Ma1740
             - Ma1830
+      Laboratorio:
+        A:
+          Docente: Luis Rocha
+          Horas:
+            - Ju1830
+            - Ju1920
+        B:
+          Docente: Luis Rocha
+          Horas:
+            - Vi1830
+            - Vi1920
     Practicas:
       nombre: Prácticas Pre Profesionales
       abreviado: PPP
       Teoria:
         A:
-          Docente: "?"
+          Docente: Juan Zuñiga
           Horas:
             - Mi1740
             - Mi1830
             - Vi1740
             - Vi1830
         B:
-          Docente: "?"
+          Docente: Juan Zuñiga
           Horas:
             - Mi1920
             - Mi2010

src/App.tsx

@@ -1,16 +1,19 @@
-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"
+import { Main } from "./Views/Main";
+import { Index } from "./Views/Index";
+import { Editor } from "./Views/Editor";
+import { useRouter } from "./Router";
+import { Switch, Match, Show } from "solid-js";
+import { Wallpaper } from "./Wallpaper";
 
 function App() {
-    const route = useRouter()
+    const route = useRouter();
+    const isMobile = screen.width <= 500;
 
     return (
-        <div className="App">
+        <div className="App" style={isMobile ? "--color-texto: #202020;" : ""}>
+            <Show when={!isMobile}>
                 <Wallpaper />
+            </Show>
             <Switch fallback={<p>404!</p>}>
                 <Match when={route() === "/"}>
                     <Index />
@@ -23,7 +26,7 @@ function App() {
                 </Match>
             </Switch>
         </div>
-    )
+    );
 }
 
-export default App
+export default App;

src/BarraSuperior.tsx

@@ -1,10 +1,10 @@
-import { estilosGlobales } from "./Estilos"
-import { StyleSheet, css } from "aphrodite"
-import { numWallpaper, setNumWallpaper } from "./Store"
-import { TamanoLetra } from "./BarraSuperior/TamanoLetra"
-import { RouterLink } from "./Router"
+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
+const ultimoIndiceWallpaper = 1;
 
 const e = StyleSheet.create({
     contCambiador: {
@@ -30,29 +30,29 @@ const e = StyleSheet.create({
         paddingLeft: "0.5rem",
         marginRight: "0.25rem",
     },
-})
+});
 
 const retrocederWallpaper = () => {
-    const num = numWallpaper()
+    const num = numWallpaper();
     if (num > 0) {
-        setNumWallpaper(num - 1)
-        localStorage.setItem("num-img", (num - 1).toString())
+        setNumWallpaper(num - 1);
+        localStorage.setItem("num-img", (num - 1).toString());
     } else {
-        setNumWallpaper(ultimoIndiceWallpaper)
-        localStorage.setItem("num-img", (ultimoIndiceWallpaper).toString())
+        setNumWallpaper(ultimoIndiceWallpaper);
+        localStorage.setItem("num-img", (ultimoIndiceWallpaper).toString());
     }
-}
+};
 
 const avanzarWallpaper = () => {
-    const num = numWallpaper()
+    const num = numWallpaper();
     if (num < ultimoIndiceWallpaper) {
-        setNumWallpaper(num + 1)
-        localStorage.setItem("num-img", (num + 1).toString())
+        setNumWallpaper(num + 1);
+        localStorage.setItem("num-img", (num + 1).toString());
     } else {
-        setNumWallpaper(0)
-        localStorage.setItem("num-img", (0).toString())
+        setNumWallpaper(0);
+        localStorage.setItem("num-img", (0).toString());
     }
-}
+};
 
 function CambiadorImg() {
     return (
@@ -71,14 +71,14 @@ function CambiadorImg() {
                 />
             </span>
         </div>
-    )
+    );
 }
 
 const estilos = StyleSheet.create({
     tituloPrincipal: {
         fontWeight: "bold",
     },
-})
+});
 
 export function BarraSuperior() {
     return (
@@ -107,5 +107,5 @@ export function BarraSuperior() {
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>Ingeniería de Sistemas</span>
             <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>2022-B</span>
         </header>
-    )
+    );
 }

src/Creditos.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, css } from "aphrodite"
+import { StyleSheet, css } from "aphrodite";
 
 const e = StyleSheet.create({
     creditos: {
@@ -6,16 +6,10 @@ const e = StyleSheet.create({
         paddingTop: "7.5rem",
         paddingBottom: "1rem",
     },
-})
+});
 
 export function Creditos() {
     return (
-        <div className={css(e.creditos)}>
-            Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
-            <br/>
-            <a href="https://horarios1.araozu.dev/" style={{color: "white"}}>
-                Ir a la versión anterior.
-            </a>
-        </div>
-    )
+        <div className={css(e.creditos)} />
+    );
 }

src/Store.ts

@@ -1,48 +1,37 @@
-import { createSignal } from "solid-js"
-
-enum ModoColor {
-    Claro,
-    Oscuro,
-    Auto
-}
+import { createSignal } from "solid-js";
 
 export type Dia = "Lunes" | "Martes" | "Miercoles" | "Jueves" | "Viernes";
 
-export const dias: Dia[] = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
+export const dias: Dia[] = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"];
 export const horas = [
     "07:00 - 07:50",
     "07:50 - 08:40",
-    "08:40 - 08:50",
     "08:50 - 09:40",
     "09:40 - 10:30",
-    "10:30 - 10:40",
     "10:40 - 11:30",
     "11:30 - 12:20",
     "12:20 - 13:10",
     "13:10 - 14:00",
     "14:00 - 14:50",
     "14:50 - 15:40",
-    "15:40 - 15:50",
     "15:50 - 16:40",
     "16:40 - 17:30",
-    "17:30 - 17:40",
     "17:40 - 18:30",
     "18:30 - 19:20",
     "19:20 - 20:10",
     "20:10 - 21:00",
     "21:00 - 21:00",
-]
+];
 export const horasDescanso = [
     "08:40 - 08:50",
     "10:30 - 10:40",
     "15:40 - 15:50",
     "17:30 - 17:40",
-]
+];
 
-const numImgGuardado = Number(localStorage.getItem("num-img") ?? "1")
-const tamanoLetraGuardado = Number(localStorage.getItem("tamano-letra") ?? "16")
+const numImgGuardado = Number(localStorage.getItem("num-img") ?? "0");
+const tamanoLetraGuardado = Number(/* localStorage.getItem("tamano-letra") ?? */ "16");
 
-export const [modoColor, setModoColor] = createSignal(ModoColor.Oscuro)
-export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado)
-export const [mostrarDescansos, setMostrarDescansos] = createSignal(true)
-export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado)
+export const [numWallpaper, setNumWallpaper] = createSignal(numImgGuardado);
+export const [tamanoLetra, setTamanoLetra] = createSignal(tamanoLetraGuardado);
+export const [isMobile, setIsMobile] = createSignal(screen.width < 500);

src/Views/Editor.tsx

@@ -1,15 +1,13 @@
-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 } from "solid-js"
-import {createStore} from "solid-js/store"
-import { CursoEditor } from "./Editor/CursoEditor"
+import { BarraSuperior } from "../BarraSuperior";
+import { estilosGlobales } from "../Estilos";
+import { StyleSheet, css } from "aphrodite";
+import { Separador } from "../Separador";
+import { Tabla } from "../ContenedorHorarios/Tabla";
+import { TablaObserver } from "../ContenedorHorarios/TablaObserver";
+import { Curso, Cursos } from "../types/DatosHorario";
+import { For, createMemo } from "solid-js";
+import {createStore} from "solid-js/store";
+import { CursoEditor } from "./Editor/CursoEditor";
 
 const e = StyleSheet.create({
     contenedorGlobal: {
@@ -19,7 +17,7 @@ const e = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-})
+});
 
 interface Data {
     indice: number,
@@ -40,39 +38,39 @@ const [nuevaData, setNuevaData] = createStore<Data>({
             },
         },
     }],
-})
+});
 
 type FormEvent = Event & { submitter: HTMLElement; } & { currentTarget: HTMLFormElement; target: HTMLFormElement; }
 export function Editor() {
-    const tablaObserver = new TablaObserver()
-    const dataWrapper = createMemo(() => nuevaData)
+    const tablaObserver = new TablaObserver();
+    const dataWrapper = createMemo(() => nuevaData);
 
     const agregarCurso = (ev: FormEvent) => {
-        ev.preventDefault()
+        ev.preventDefault();
 
         /// @ts-ignore
-        const nombreCurso: string = ev.target.elements.nombre_curso.value
+        const nombreCurso: string = ev.target.elements.nombre_curso.value;
         /// @ts-ignore
-        const nombreAbreviado: string = ev.target.elements.nombre_abreviado.value
+        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)
-    }
+        setNuevaData("cursos", nuevaData.indice, curso);
+        setNuevaData("indice", (i) => i + 1);
+    };
 
     const data = createMemo<Cursos>(() => {
-        const o: Cursos = {}
+        const o: Cursos = {};
         nuevaData.cursos.forEach((c) => {
-            o[c.nombre] = c
-        })
-        return o
-    })
+            o[c.nombre] = c;
+        });
+        return o;
+    });
 
     return (
         <div>
@@ -127,5 +125,5 @@ export function Editor() {
             </div>
 
         </div>
-    )
+    );
 }

src/Views/Index.tsx

@@ -1,6 +1,8 @@
-import { estilosGlobales } from "../Estilos"
-import { StyleSheet, css } from "aphrodite"
-import { RouterLink } from "../Router"
+import { estilosGlobales } from "../Estilos";
+import { StyleSheet, css } from "aphrodite/no-important";
+import { RouterLink } from "../Router";
+import { Show } from "solid-js";
+import { isMobile } from "../Store";
 
 const e = StyleSheet.create({
     contenedorGlobal: {
@@ -27,10 +29,52 @@ const e = StyleSheet.create({
         verticalAlign: "bottom",
         marginRight: "0.5rem",
     },
-})
+});
+
+function MobileIndex() {
+    const s = StyleSheet.create({
+        boton: {
+            backgroundColor: "var(--color-primario)",
+            color: "white",
+            padding: "1rem 5rem",
+            borderRadius: "25px",
+            margin: "1.5rem 0",
+            boxShadow: "2px 2px 2px 0 gray",
+            cursor: "pointer",
+        },
+        entrada: {
+            borderTop: "none",
+            borderRight: "none",
+            borderLeft: "none",
+            borderBottom: "solid 2px gray",
+            padding: "0.75rem 1rem",
+        },
+    });
+
+    const inputElement = <input type="email" placeholder="Correo electronico" className={css(s.entrada)} />;
+
+    const login = () => {
+        console.log((inputElement as HTMLInputElement).value);
+    };
+
+    return (
+        <div className={css(e.contenedorGlobal)}>
+            <div style="text-align: center;">
+                <h1>Iniciar sesión</h1>
+                <br />
+                <br />
+                {inputElement}
+                <br />
+                <button className={css(s.boton)} onClick={login}>Iniciar Sesion</button>
+            </div>
+        </div>
+    );
+}
 
 export function Index() {
     return (
+        <>
+            <Show when={!isMobile()}>
                 <div className={css(e.contenedorGlobal)}>
                     <div className={css(e.cont)}>
                         <div className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock, e.cont)}>
@@ -82,5 +126,10 @@ export function Index() {
                         </a>
                     </div>
                 </div>
-    )
+            </Show>
+            <Show when={isMobile()}>
+                <MobileIndex />
+            </Show>
+        </>
+    );
 }

src/Wallpaper.tsx

@@ -1,13 +1,13 @@
-import { StyleSheet, css } from "aphrodite"
-import { numWallpaper } from "./Store"
-import { createEffect } from "solid-js"
-import {createStore} from "solid-js/store"
+import { StyleSheet, css } from "aphrodite";
+import { numWallpaper } from "./Store";
+import { createEffect } from "solid-js";
+import {createStore} from "solid-js/store";
 
-const duracionTransicion = 250
+const duracionTransicion = 250;
 
 export function Wallpaper() {
     /// @ts-ignore
-    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
 
     const estilos = StyleSheet.create({
         contenedorCover: {
@@ -32,32 +32,32 @@ export function Wallpaper() {
         coverTransicion: {
             opacity: 0,
         },
-    })
+    });
 
     const [estilosRaw, setEstilosRaw] = createStore({
         "background-image": "none",
         opacity: 1,
-    })
+    });
 
     createEffect(() => {
-        const numImg = numWallpaper()
-        setEstilosRaw("opacity", 0)
+        const numImg = numWallpaper();
+        setEstilosRaw("opacity", 0);
 
         const promesa250ms = new Promise((resolve) => {
-            setTimeout(resolve, duracionTransicion)
-        })
+            setTimeout(resolve, duracionTransicion);
+        });
 
-        const url = `/img/wall${numImg}.webp`
-        const img = new Image()
+        const url = `/img/wall${numImg}.webp`;
+        const img = new Image();
         img.addEventListener("load", async() => {
-            await promesa250ms
+            await promesa250ms;
             setEstilosRaw({
                 "background-image": `url('${url}')`,
                 opacity: 1,
-            })
-        })
-        img.src = url
-    })
+            });
+        });
+        img.src = url;
+    });
 
     return (
         <div className={css(estilos.contenedorCover)}>
@@ -66,6 +66,6 @@ export function Wallpaper() {
                 style={{"background-image": estilosRaw["background-image"], opacity: estilosRaw.opacity}}
             />
         </div>
-    )
+    );
 
 }

src/index.tsx

@@ -1,7 +1,7 @@
-import "solid-js"
-import { render } from "solid-js/web"
-import App from "./App"
-import "normalize.css"
-import "./styles/global.css"
+import "solid-js";
+import { render } from "solid-js/web";
+import App from "./App";
+import "normalize.css";
+import "./styles/global.css";
 
-render(App, document.getElementById("root") as Node)
+render(App, document.getElementById("root") as Node);

src/styles/global.css

@@ -1,9 +1,47 @@
+:root {
+    --color-texto: white;
+    --color-primario: #531925;
+}
+
+body {
+    color: var(--color-texto);
+}
+
+[class^="ph-"], [class*=" ph-"] ::before {
+    font-size: 0.8rem;
+}
+
+* {
+    color: var(--color-texto);
+}
+
 body {
     font-family: Inter, sans-serif;
+    color: var(--color-texto);
 }
 
 button {
     background-color: transparent;
-    color: var(--color);
+    color: var(--color-texto);
     border: none;
 }
+
+h1 {
+    font-weight: 600;
+}
+
+h2 {
+    font-weight: 500;
+}
+
+@media screen and (max-width: 500px) {
+    .hide-on-small {
+        display: none !important;
+    }
+}
+
+@media screen and (min-width: 501px) {
+    .hide-on-big {
+
+    }
+}