fernando
/
horarios-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile login

master
Araozu 2022-10-13 12:02:23 -05:00
parent 1f9d27aa83
commit 77f6d638bc
17 changed files with 307 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.yml
View File

@ -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

1
index.html
View File

@ -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">

2
package.json
View File

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

11
public/css/global.css
View File

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

80
public/horarios/2022_2_fps_ingenieriadesistemas.yaml
View File

@ -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

BIN
public/img/wall0.webp Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 143 KiB

After

Width:  |  Height:  |  Size: 215 KiB

BIN
public/img/wall1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 215 KiB

BIN
public/img/wall2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

25
src/App.tsx
View File

@ -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">
<Wallpaper />
<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;

44
src/BarraSuperior.tsx
View File

@ -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>
)
);
}

14
src/Creditos.tsx
View File

@ -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)} />
);
}

29
src/Store.ts
View File

@ -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);

56
src/Views/Editor.tsx
View File

@ -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>
)
);
}

153
src/Views/Index.tsx
View File

@ -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,60 +29,107 @@ 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 (
<div className={css(e.contenedorGlobal)}>
<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>
<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)}>
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).
</p>
</div>
<RouterLink
to={"/sistemas/"}
className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
>
Ing. de Sistemas
</RouterLink>
{/*
<>
<Show when={!isMobile()}>
<div className={css(e.contenedorGlobal)}>
<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>
<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)}>
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).
</p>
</div>
<RouterLink
to={"/sistemas/"}
className={css(estilosGlobales.contenedor, estilosGlobales.contenedorCursor, e.botonAccion)}
>
Ing. de Sistemas
</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/"
target="_blank"
>
<i className={`${css(e.iconoGitHub)} ph-code`} />
Código fuente en GitHub
</a>
</div>
</div>
)
<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/"
target="_blank"
>
<i className={`${css(e.iconoGitHub)} ph-code`} />
Código fuente en GitHub
</a>
</div>
</div>
</Show>
<Show when={isMobile()}>
<MobileIndex />
</Show>
</>
);
}

40
src/Wallpaper.tsx
View File

@ -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>
)
);
}

12
src/index.tsx
View File

@ -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);

40
src/styles/global.css
View File

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