README.md 6.17 KB
Newer Older
Pascal's avatar
Pascal committed
1
2
3
4
# Calendriers ADE

Rendu des calendriers ADE sous forme html

Pascal's avatar
doc    
Pascal committed
5
![Screenshot](ical-ufr.png)
Pascal's avatar
Pascal committed
6

Najib Idrissi's avatar
Najib Idrissi committed
7
8
https://licence.math.univ-paris-diderot.fr/informations/edt/

Pascal's avatar
doc    
Pascal committed
9
10
11
12
## Principe

### Ressources ADE

Najib Idrissi's avatar
Najib Idrissi committed
13
Le fichier `calendars.json` contient les codes des ressources ADE
Pascal's avatar
doc    
Pascal committed
14
qui nous intéressent, avec des titres et le niveau hiérarchique
Najib Idrissi's avatar
Najib Idrissi committed
15
`parcours/year` où ils apparaissent dans les emplois du temps. Il est utilisé pour les boutons.
Pascal's avatar
Pascal committed
16

Najib Idrissi's avatar
Najib Idrissi committed
17
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).
Frederic HAN's avatar
Frederic HAN committed
18

Pascal's avatar
Pascal committed
19
20
21
22
23
24
25
26
27
28
29
30
31
32
### Python

Ce projet nécessite ``python>=3.9``. Dans le déploiement ufr math on utilise
un environnement anaconda

```shell
conda create -n ical --file requirements.txt
```
de sorte que tous les appels ``python script.py`` peuvent être remplacés par

```shell
conda run -n ical python script.py
```

Pascal's avatar
Pascal committed
33
34
### Récupération et correction des calendriers ADE

Najib Idrissi's avatar
Najib Idrissi committed
35
```shell
Pascal's avatar
Pascal committed
36
python get_ical.py
Pascal's avatar
Pascal committed
37
```
Najib Idrissi's avatar
Najib Idrissi committed
38

Najib Idrissi's avatar
Najib Idrissi committed
39
- lit le fichier `formations.json`
Frederic HAN's avatar
Frederic HAN committed
40
41
- 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.
Najib Idrissi's avatar
Najib Idrissi committed
42
- sauvegarde les fichiers `ics` dans `data/`
Pascal's avatar
doc    
Pascal committed
43
44
45
46
47

Un fichier par ressource ADE, nommé d'après le numéro de la ressource.

### Création d'un emploi du temps HTML

Najib Idrissi's avatar
Najib Idrissi committed
48
Le projet React se situe dans le dossier `src` et comprend :
Najib Idrissi's avatar
Najib Idrissi committed
49

Najib Idrissi's avatar
Najib Idrissi committed
50
51
52
53
54
55
56
57
58
59
60
61
62
- `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 :
Najib Idrissi's avatar
Najib Idrissi committed
63
    - `groups.ts` : Fonctions et types utilitaires sur les groupes et les sources.
Najib Idrissi's avatar
Najib Idrissi committed
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    - `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`).
Pascal's avatar
doc    
Pascal committed
85
86

## Composants
Pascal's avatar
Pascal committed
87
88
89

### Rendu html

Pascal's avatar
doc    
Pascal committed
90
Lancer un serveur web dans le dossier, par exemple
Pascal's avatar
Pascal committed
91
92

```
Najib Idrissi's avatar
Najib Idrissi committed
93
npm run start
Pascal's avatar
Pascal committed
94
```
Pascal's avatar
Pascal committed
95

Najib Idrissi's avatar
Najib Idrissi committed
96
et visiter http://localhost:8080 dans un navigateur.
Pascal's avatar
Pascal committed
97
98
99
100
101
102
103
104
105

### Choix d'affichage manuel

```
http://localhost:8080/#/manuel/6736+5638
```

### Single page

Najib Idrissi's avatar
Najib Idrissi committed
106
Editer le fichier `single.html` pour configurer l'emploi du temps à afficher,
Pascal's avatar
Pascal committed
107
108
109
110
111
112
et charger la page.

```
http://localhost:8080/single.html
```

Pascal's avatar
Pascal committed
113
114
115
116
## Développement

### javascript

Najib Idrissi's avatar
Najib Idrissi committed
117
118
Les fichiers source sont dans le répertoire `src`,
les fichiers produits dans `dist/` ne doivent surtout pas être
Pascal's avatar
doc    
Pascal committed
119
120
modifiés directement (générés par webpack pour inclure fullcalendar)

Najib Idrissi's avatar
Najib Idrissi committed
121
Pour développer, besoin d'avoir `node`
Pascal's avatar
Pascal committed
122
123
124

```
npm install
Pascal's avatar
doc    
Pascal committed
125
npm run build
Pascal's avatar
Pascal committed
126
```
Najib Idrissi's avatar
Najib Idrissi committed
127

Pascal's avatar
doc    
Pascal committed
128
129
crée les scripts
et
Najib Idrissi's avatar
Najib Idrissi committed
130

Pascal's avatar
Pascal committed
131
```
Pascal's avatar
doc    
Pascal committed
132
npm run start
Pascal's avatar
Pascal committed
133
```
134

Najib Idrissi's avatar
Najib Idrissi committed
135
lance un serveur et recompile quand les sources sont modifiées.
136
137
138

### Ajouter des formations

Najib Idrissi's avatar
Najib Idrissi committed
139
140
Le fichier `calendars.json`
Contient les groupes via leurs codes sur ADE.
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
Exemple de syntaxe:

```

    { "code": 6598  , "title": "MiashsEco1"  , "label": "ECO1"        , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6599  , "title": "MiashsEco2"  , "label": "ECO2"        , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6600  , "title": "MiashsEco3"  , "label": "ECO3"        , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6601  , "title": "MiashsHisto" , "label": "Histoire" , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6602  , "title": "MiashsSocio" , "label": "Sociologie"    , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6603  , "title": "MiashsGéog"  , "label": "Géographie"      , "parcours": "miashs"   , "year": "l2"}  ,
    { "code": 6604  , "title": "MiashsLingu" , "label": "Linguistique"     , "parcours": "miashs"   , "year": "l2"}

```

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.
Najib Idrissi's avatar
Najib Idrissi committed
158
Parfois certaines reservations communes aux groupes sont saisies sur le code de la formation.
159
160
161

Il existe donc un fichier:

Najib Idrissi's avatar
Najib Idrissi committed
162
`formations.json`
163
164
165
166
167
168
169
170
171
172

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.

Exemple de syntaxe:

```
    { "code": 6593, "title": "L2Miashs", "fiches": "6598,6599,6600,6601,6602,6603,6604"}

```
Najib Idrissi's avatar
Najib Idrissi committed
173

Frederic HAN's avatar
Frederic HAN committed
174
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,...