Permit

Permit est un site internet permettant une gestion centralisée des permanences. Ce projet est souvent utilisé dans le cadre de la plannification d'évènements associatifs, et est disponible à l'adresse https://permit.aliens-lyon.fr.

Permit est publié sous licence AGPL version 3 ou ultérieure.

Fonctionnalités

Parmi les nouvelles fonctionnalités de permit on retrouve :

• Création de plannings publics (tout le monde peut y accéder)
• Création de plannings privés (seul les personnes invitées peuvent y accéder)
• Déplacement de colonnes
• Duplication de colonnes
• Verrouillage d'une colonne (plus personne ne peut s'inscrire)
• Une file d'attente s'il y a trop de personnes sur un même planning

Un grand merci à toutes les personnes qui ont testé et trouvé des bugs ! ❤️

Technologies utilisées

Front end

Le front end utilise React pour sa capacité à gérer facilement des interfaces dynamiques. Pour le design, Material UI ainsi que différentes extensions sont utilisées. Les icones proviennent de font awesome.

Back end

Le back end, implémenté en Python, repose sur Flask et SQLAlchemy de manière à garder une indépendance vis-à-vis du SGBD utilisé.

Installation

flake.nix déclare un module NixOS utilisable pour héberger Permit sur une installation NixOS.

Pour cela, ajouter ce dépôt comme input dans le flake.nix :

{
  inputs = {
    # ...
    permit.url = "git+ssh://git@gitlab.aliens-lyon.fr/AliENS/permit.git";
  };

  # ...
}

Ensuite, importez le module dans la configuration et activez le service Permit :

{
  imports = [
    inputs.permit.nixosModules.default
  ];

  services.permit.enable = true;
}

Certaines autres options du service sont disponibles ; elles sont définies dans flake.nix ; référez s'y vous.

Développement

Une installation Nix avec la nouvelle CLI activée est nécessaire.

Pour lancer une version de développement, lancer les commandes suivantes dans un premier terminal afin de compiler les fichiers du front end :

nix develop
cd front-end
yarn install
yarn webpack --output-path "../back-end/permit/static/js/" --mode development --watch

Assurez-vous d'avoir le fichier client_secrets.json contenant les informations OpenID Connect de l'identity provider à utiliser pour les tests. Pour AliENS Auth, les paramètres sont :

{
  "web": {
    "client_id": "permit-test",
    "client_secret": "<secret>",
    "auth_uri": "https://auth.aliens-lyon.fr/realms/master/protocol/openid-connect/auth",
    "token_uri": "https://auth.aliens-lyon.fr/realms/master/protocol/openid-connect/token",
    "userinfo_uri": "https://auth.aliens-lyon.fr/realms/master/protocol/openid-connect/userinfo",
    "issuer": "https://auth.aliens-lyon.fr/realms/master",
    "redirect_uris": ["http://localhost:5000/authorize"]
  }
}

Dans un second terminal, pour initialiser les valeurs on a :

nix develop
cd back-end
source .venv/bin/activate
python -m pip install .
flask db upgrade
flask shell

Puis dans ce shell

>>> from permit.models.permission import Permission
>>> Permission.create_all(db.session)
>>> exit()

Et enfin le lancer

flask run

Architecture du code

Front end

Le dossier front-end/ contient l'intégralité des composants React.

Voici, de manière un peu plus détaillée, l'architecture du code :

• src/
  • Components/ : Divers composants utiles à chaque page
    • EasterEgg/ : contient le code source du jeu disponible sur la file d'attente
    • PlanningEdit/ : contient les composants concernant la page d'édition d'un planning
    • PlanningView/ : contient les composants concernant la page de visualisation d'un planning
    • CardPlanningList.js : composant affichant un planning sous forme de carte
    • Navbar.js : composant affichant la barre de navigation
  • Containers/ : Les diverses pages de l'application (correspondant aux templates du back end)
  • utils/ : Diverses fonctions utiles

Back end

Le dossier back-end/permit/ contient le code source du back end.

• blueprints/ : Les différentes views permettant d'afficher les pages
• models/
  • permission.py : Le système de permission
  • planning.py : La représentation d'un planning
  • registration.py : L'inscription d'un·e utilisateurice sur un créneau
  • template.py : Le système de templates
  • user.py : les utilisateurices
• schemas/ : Les différents serializers
• static/ : Les fichiers js qui seront générés par le front end
• templates/ : Les différentes pages
• utils : différentes fonctions algorithmiques utiles

back-end/migrations/ contient les scripts de migration de la base de données, générés par flake db migrate.

Notes d'implémentation

Vous trouverez ci-dessous diverses notes d'implémentation permettant de mieux comprendre et donc de contribuer à ce projet.

Utilisation de React servi statiquement

Permit a besoin d'un système de connexion lié au CAS. Afin de permettre tout de même l'utilisation de React, nous exportons les composants sous forme de bundle que nous chargeons ensuite dans le template et que nous affichons.

De cette manière, on tire parti des avantages de React tout en gardant une gestion des connexions côté serveur.

Ajout d'une nouvelle page

Les grandes étapes pour ajouter une nouvelle page sont les suivantes :

• Création d'un blueprint côté back (et d'éventuels models)
• Création des composants utilisés côté react
• Création de la page principale
• Ajout de l'entrypoint au fichier de config webpack
• Création d'un template côté back important les fichiers statiques nouvellement générés