Use FullCalendar to display students and teachers timetables¹.

Timetables can be seen at https://horaires.esi-bru.be

If you have Docker, just run

make

and connect to https://localhost:8080

You need node and yarn. To install all the dependencies:

$ yarn

You also need iCalendar files and a config file (detailled explanation can be found below). The easiest is to grab those from our live app, e.g. :

wget -O- https://github.com/HEB-ESI/heb-esi.github.io/archive/refs/heads/gh-pages.tar.gz |
 tar -zx --strip-components=1 heb-esi.github.io-gh-pages/ical heb-esi.github.io-gh-pages/config

Alternatively you can generate them yourself from the ics (see the ics repo).

To compile (the compiled files will be generated in the ./dist directory)

$ yarn build # Production
$ yarn dev   # Development
$ yarn watch # Dev + watch for changes

Alternatively, you can serve locally :

$ yarn serve # Dev + watch + serve

Pull requests and issues are welcome. Before commit, please verify if you respect the linting by executing the command yarn lint.

Comme mentionné plus haute, nous utilisons FullCalendar pour afficher des événements dans un beau calendrier dans le navigateur.

Les événements sont obtenus via des fichiers iCalendar (.ics) généralement rangés dans une arborescence du type :

ical/
├── cours
│   ├── AGLR4.ics
│   ├── ...
│   └── WIRR4-rsml.ics
├── groupes
│   ├── B111.ics
│   ├── ...
│   └── SEC4B.ics
├── profs
│   ├── ABS.ics
│   ├── ...
│   └── YVO.ics
└── salles
    ├── 003.ics
    ├── ...
    └── 604.ics

Afin de ne pas coder en dur les noms des fichiers iCalendar utilisés, nous les récupérons (via AJAX) grâce à un fichier de configuration.

Le nom du fichier de configuration (par défaut calendars.json) est intégré en dur au moment de compiler le projet (voir fichier ./src/utils/configUrl.json -- le contenu de ce fichier est typiquement ajusté par le processus de déploiement ; voir .github/workflows/main.yml pour un exemple).

Les fichiers iCalendar sont générés par la personne en charge des horaires via son logiciel Hyperplanning. Le fichier de configuration est généré automatiquement à partir de là. Ceci permet de découpler les mises à jour du code de celles des fichiers iCalendar.

Le fichier de configuration calendars.json ressemble a ceci:

{
    "default": "groupes",
    "root": "ical/",
    "data": {
        "profs": {
            "name": "enseignants",
            "items": [
                {
                    "name": "JLE - Juste Leblanc",
                    "code": "JLE"
                },
            ]
        },
        "groupes": {
            "name": "groupes",
            "items": [
                {
                    "name": "A341",
                    "code": "A341"
                },
            ]
        },
        "salles": {
            "name": "salles",
            "items": [
                {
                    "name": "101",
                    "code": "101"
                },
            ]
        },
        "cours": {
            "name": "cours",
            "items": [
                {
                    "name": "Algorithmique 1",
                    "code": "1ALG1A"
                },
            ]
        }
    }
}

• Le name est affiché à l'écran
• Le code est utilisé en interne et pour les liens
• Le code est également utilisé pour obtenir le nom du fichier iCalendar : {root}/{category}/{code}.ics où root est défini en début de json, category est l'une des quatre catégories, et code est le code de l'élément
• Le code doit être unique au sein de sa catégorie, et devrait être unique sur tout le fichier.

Un tel fichier de configuration peut être généré à partir des ics : voir le dépôt avec les ics pour le fonctionnement.

1. Créer un dépôt sur Github avec le contenu du présent dépôt (p.ex. fork)
2. définir la variable CALENDARS_JSON vers une url contenant les ics. Par exemple /nom-du-depot-ics/calendars.json
3. in the action settings : give read AND WRITE permission to Workflow
4. une fois que la branche gh-pages a été créée (par le processus de déploiement normalement), on la définit comme branche utilisée par Github Pages (dans les paramètres)

• Pierre Bettens pbt
• Nicolas Richard nri
• Frédéric Servais srv
• Andrew Sassoye

v1 « À l'arrache » par Pierre, Nicolas (Némo) et Frédéric (Sébastien)
v2 « Marie revisitée » par Andrews
v2.1 « Peu me chaut » par Nicolas (Némo)