Commit f0780a74 authored by Najib Idrissi's avatar Najib Idrissi
Browse files

un peu de docs

parent 23793d0b
......@@ -10,11 +10,11 @@ https://licence.math.univ-paris-diderot.fr/informations/edt/
### Ressources ADE
Le fichier ``calendars.json`` contient les codes des ressources ADE
Le fichier `calendars.json` contient les codes des ressources ADE
qui nous intéressent, avec des titres et le niveau hiérarchique
``parcours/year`` où ils apparaissent dans les emplois du temps. Il est utilisé pour les boutons.
`parcours/year` où ils apparaissent dans les emplois du temps. Il est utilisé pour les boutons.
Il est aussi utilisé pour le bouton ``obsolète`` de certaines formations. Ce bouton affiche les événements qui étaient présents dans une ancienne archive (data.28) et qui ont été supprimés ou modifiés dans le calendrier courant (data).
Il est aussi utilisé pour le bouton `obsolète` de certaines formations. Ce bouton affiche les événements qui étaient présents dans une ancienne archive (data.28) et qui ont été supprimés ou modifiés dans le calendrier courant (data).
### Récupération et correction des calendriers ADE
......@@ -22,22 +22,51 @@ Il est aussi utilisé pour le bouton ``obsolète`` de certaines formations. Ce b
python3 get_ical.py
```
- lit le fichier ``formations.json``
- lit le fichier `formations.json`
- télécharge chaque calendrier ADE et procède à quelques fusions de calendriers.
- devine le shift temporel et le corrige et ajoute le tag pour l'heure de Paris.
- sauvegarde les fichiers ``ics`` dans ``data/``
- sauvegarde les fichiers `ics` dans `data/`
Un fichier par ressource ADE, nommé d'après le numéro de la ressource.
### Création d'un emploi du temps HTML
- Le fichier `index.html` est juste un wrapper autour de React avec un unique `<div>` racine.
- La source JavaScript:
- `main.tsx`: Le point d'entrée de React. Pas besoin d'y toucher en principe.
- `App.tsx`: Le fichier principal qui va contenir l'application complète. Pour le moment, on y met directement la liste des calendriers, créée à partir de la variable `calendarInfos`. À l'avenir, on peut mettre plusieurs "pages" qui seront chacune dans leur fichier.
- `OurCalendar.tsx`: Le fichier où le composant `OurCalendar`, qui prend en entrée une liste de groupes et un titre et qui ressort un calendrier avec FullCalendar, est défini.
Le projet React se situe dans le dossier `src` et comprend :
*Note* Les fichiers ont l'extension `.tsx` car ils sont écrits en TypeScript, un sur-ensemble typé de JavaScript, et le `x` se rapporte à React. Si vous ne voulez pas utiliser TypeScript, créez vos fichiers avec l'extension `.jsx`. Si un fichier ne contient pas de React, vous pouvez l'appeler `.ts` ou `.js`.
- `global.css` : Styles globaux.
- `index.tsx` : Le point d'entrée pour la version "complète" de l'application.
- `bare.tsx` : La même chose mais pour une version "incrustée" où l'on n'afficherait qu'un seul calendrier pré-sélectionné.
- `config.ts`, `config.json` : Des configurations diverses.
- `types.d.ts` : Des déclarations de types globales, essentiellement pour Webpack.
- `templates/` : Dossier qui contient deux modèles HTML, un pour la version complète, un pour la version incrustée.
- `features/` : Dossier principal.
- `ComboChoice` : Interface qui permet à un utilisateur de choisir successivement un parcours, puis une année de ce parcours.
- `Help` : Page d'aide de l'application. L'aide elle-même se situe dans `help.md`.
- `Layout` : La mise en page globale de l'application.
- `ManualChoice` : Permet la sélection de groupes arbitraires à l'aide de leurs codes ADE.
- `OurCalendar` : Le gros du boulot, affiche un calendrier en prenant en entrée plusieurs groupes. Contient notamment :
- `GroupChooser` : Cases à cocher pour choisir quel(s) groupe(s) on veut afficher dans le calendrier.
- `GroupsIcal` : Lien directs vers les fichiers ICal des groupes.
- `index.tsx` : Fichier d'entrée.
- `ModalEvent` : La boîte qui s'affiche par-dessus les autres évènements quand on clique sur l'un d'entre eux.
_Notes_ :
- Les fichiers ont l'extension `.ts`, `.tsx` car ils sont écrits en TypeScript, un sur-ensemble typé de JavaScript, et le `x` se rapporte à React. Si vous ne voulez pas utiliser TypeScript, créez vos fichiers avec l'extension `.jsx`. Si un fichier ne contient pas de React, vous pouvez l'appeler `.ts` ou `.js`.
- Les styles CSS sont dans des modules, c'est-à-dire des fichiers ayant l'extension `.module.css`. Concrètement, cela signifie qu'ils n'interagissent pas entre eux. Pour s'en servir, créez un fichier avec cette extension, puis importez-le dans un fichier `.tsx` avec :
```jsx
import styles from "./Styles.module.css";
```
et vous pourrez ensuite utiliser le style défini en l'appliquant à un élément :
```tsx
return <div className={styles["maClasse"]}>...</div>;
```
À noter : l'importateur convertit les casses "kebab" (`le-nom-de-ma-classe`) en casse "chameau" (`leNomDeMaClasse`).
## Composants
......@@ -48,9 +77,8 @@ Lancer un serveur web dans le dossier, par exemple
```
npm run start
```
et visiter http://localhost:8080 dans un navigateur.
et visiter http://localhost:8080 dans un navigateur.
### Choix d'affichage manuel
......@@ -60,42 +88,41 @@ http://localhost:8080/#/manuel/6736+5638
### Single page
Editer le fichier ``single.html`` pour configurer l'emploi du temps à afficher,
Editer le fichier `single.html` pour configurer l'emploi du temps à afficher,
et charger la page.
```
http://localhost:8080/single.html
```
## Développement
### javascript
Les fichiers source sont dans le répertoire ``src``,
les fichiers produits dans ``dist/`` ne doivent surtout pas être
Les fichiers source sont dans le répertoire `src`,
les fichiers produits dans `dist/` ne doivent surtout pas être
modifiés directement (générés par webpack pour inclure fullcalendar)
Pour développer, besoin d'avoir ``node``
Pour développer, besoin d'avoir `node`
```
npm install
npm run build
```
crée les scripts
et
```
npm run start
```
lance un serveur et recompile quand les sources sont modifiées.
lance un serveur et recompile quand les sources sont modifiées.
### Ajouter des formations
Le fichier ``calendars.json``
Contient les groupes via leurs codes sur ADE.
Le fichier `calendars.json`
Contient les groupes via leurs codes sur ADE.
Exemple de syntaxe:
```
......@@ -113,11 +140,11 @@ Exemple de syntaxe:
il est utilisé pour les boutons.
Mais ces groupes sont souvent inclus sur ADE dans une année de formation qui a un autre code.
Parfois certaines reservations communes aux groupes sont saisies sur le code de la formation.
Parfois certaines reservations communes aux groupes sont saisies sur le code de la formation.
Il existe donc un fichier:
``formations.json``
`formations.json`
qui regroupe les codes des formations, et les codes des fiches qu'elle contient.
Ainsi au telechargement du calendrier d'un groupe, on ajoute toujours celui de la formation.
......@@ -128,4 +155,5 @@ Exemple de syntaxe:
{ "code": 6593, "title": "L2Miashs", "fiches": "6598,6599,6600,6601,6602,6603,6604"}
```
alors les calendriers 6593,6598 sont téléchargés, fusionnés et enregistré sous le nom de 6598. Puis idem avec 6593 et 6599,...
......@@ -7,7 +7,7 @@ import { filterCalendars } from "./features/ComboChoice/Year";
const OurCalendar = React.lazy(() => import("./features/OurCalendar"));
import "./index.css";
import "./global.css";
// cherche tous les élements qui ressemblent à :
// <div class="root-edt" data-parcours="maths" data-year="l1" />
......
......@@ -4,7 +4,7 @@ import React from "react";
import ReactDOM from "react-dom";
import App from "./features/App";
import "./index.css";
import "./global.css";
document.getElementById("fallback")?.remove();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment