Time Manager
I made this project for my first "piscine" at school.
It was a 3 weeks long "piscine" and I did it in group with a classmate.
This is a (professional) time management wep application.
The concept is pretty simple : all employees of a company have access to the app, they have access to their working times and they can clock in and out
Managers can create new working times to their employees, and edit or delete existing ones.
All users can access their respective informations and managers can access other employees infos.
Main used technologies are Elixir, Phoenix with Postgres, Vue.js and Docker and Azure for deployment.
Time Manager
J'ai réalisé ce projet pour ma première piscine à l'école.
Cette piscine a duré 3 semaines et c'était un projet de groupe, nous l'avons réalisé à deux.
C'est une application web de management de temps.
Le concept est simple: Tous les employés ont accès à l'application avec leurs comptes, ils ont accès à leurs temps de travail et à la pointeuse
Managers can create new working times to their employees, and edit or delete existing ones.
Tous les utilisateurs ont accès à leurs informations et les managers peuvent accéder aux informations des autres employés.
Les principales technologies utilisées sont Elixir, Phoenix avec Postgres comme base de données, Vue.js pour le front et Docker et Azure pour le déploiement.
A brief presentation of main features
Présentation
Application architecture
Architecture de l'application
-The backend is an Elixir REST API. -The frontend is a Vue.js application that communicated with the API, but is completely separated from it. -Data is stored in a Postgres database.
-Le backend est une API REST utilisant Elixir. -Le frontend est une application Vue.js qui communique avec l'API mais qui en est séparée. -Les données sont stockées dans une base de données Postgres.
Login and register
Connexion et inscription
Users can login from this form. This sends a sign in request to the API that accepts or rejects connexion. When the user isn't authentified, all routes lead to this page, as only authentified users can access the application. Of course the application uses password hash and other security features...
Only managers can create new users as it is a professional application. All users can edit their password or email but only managers can have acces to, and edit other users informations.
Les utilisateurs peuvent se connecter depuis ce formulaire . Il envoie une requete à l'API qui accepte ou pas la connexion. Quand l'utilisateur n'est pas authentifié tous les routes mènent à cette page, car il faut se connecter pour avoir accès à l'application. L'application utilise des features de sécurité comme le hash etc...
Seuls les managers peuvent créer de nouveaux utilisateurs. Tous les utilisateurs peuvent éditer leurs mots de passe ou emails mais seuls les managers peuvent avoir accès aux informations des autres.
Working times
Horaires de travail
Calendar
Calendrier
All users have access to their calendar in their home page.
Tous les utilisateurs ont accès au calendrer dans leur page d'accueil.
This calendar lists all working times of the week (with start and end time).
Ce calendrier liste tous les horaires de travail de la semaine.
Working time List
Liste des horaires
They can also view their working times in this list that classifies them into 3 categories :
- Today : Today's working times.
- Upcomming : Working times to come, starting the next day.
- Latest : Previous working times.
The user can click on each categorie to expand or hide content. All those categories lists only list 3 working times, but the user can click "Show all" to see more items.
Les utilisateurs peuvent aussi voir leurs horaires depuis cette list, ils sont classifiés comme ceci :
- Aujourd'hui : Les horaires de la journée.
- A venir : Les horaires à venir, à partir du lendemain.
- Passé : Les horaires passés et terminés.
L'utilisateur peut cliquuer sur une catégorie pour l'afficher. Ces catégories listent au maximum 3 horaires mais l'utilisateur peut cliquer sur "Voir tout" pour voir tout.
The user can also click on "See more" to get more informations about a working time :
Ils peuvent aussi cliquer sur "voir plus" pour voir les détails de l'horaire sélectionné :
As I'm connected as a manager, I can modify it, delete it or even create a new working time.
Comme je suis connecté en tant que manager, je peux modifier l'horaire, le supprimer ou même en créer un nouveau.
Chart manager
Graphiques
This page contains user's statistics. It has 3 chart : -Working time by week : Gives a (selected) week's total worked hours, classified to day and night hours, and overtime. -Total working time : Gives total worked hours, classified to day and night hours, and overtime. -Working time by day : Gives each day's total worked hours.
Cette page contient les statistique de l'utilisateur. elle contient trois graphiques : -Temps de travail par semaine : Donne le total des heures de travail par semaine (sélectionnée), en précisant le nombre d'heures de jour, de nuit et supplémentaires. -Temps de travail total : Donne le total des heures travaillées en précisant le nombre d'heures de jour, de nuit et supplémentaires. -Temps de travail journalier : Donne le total d'heures travaillées chaque jour.
Working time by week (day/night/overtime):
Temps total par semaine (jour/nuit/heures sup):
Total working time by day:
Total journalier:
Clock
Pointeuse
Every authentified user can access this page to clock in and out.
He can only click the "Start/End" button if there's a working time going on at the moment. This clock is connected to the backend and if there is a clock in but no clock out yet for current working time, it shows an "End time" button instead of "Start time". There is no need to stay in the page or even connected one we clock in, we only need to access the app to clock out at the end of our working time.
The box in the bottom shows current (or next if there isn't any running at the moment) working time's informations. In this screen there isn't any working time running, so it shows the next one, so we can't click on the start/end button.
Tout utilisateur authentifié peut accéder à cette page pour pointer (début et fin).
Il ne peut cliquer sur le bouton que pendant les horaires de travail. La page est connectée au backend et s'il y a un pointage début mais pas de fin, le bouton affiche "Finir" au lieu de "Débuter". L'utilisateur peut quitter la page et même l'application après avoir pointé et revenir seulement à la fin de ses heures de travail pour faire un pointage de sortie.
La section en bas montre les informations de l'horaire de travail actuel (ou le prochain s'il n'y a pas d'horaire en ce moment). Dans cette capture il n'y a pas d'horaire donc elle montre le prochain, et on ne peut pas cliquer sur le bouton de pointage.
Mobile
Like you saw in the previous screen, the application is fully responsive and adapts to device's screen. We used Cordova because it was requested by he subject but the web application works very good on mobiles.
Comme vous l'avez vu dans le screen précédent, l'application est responsive aet s'adapte à l'écran. Nous avons utilisé Cordova car c'était demandé mais l'application marche très bien sur les navigateurs sur mobile/tablette.
Deploy
Déploiement
To deploy the app, we used 3 Docker images (backend, frontend and database), which we have deployed on Azure. We also used Github actions to deploy each time we push new modifications.
Pour déployer l'application, nous avons utilisé 3 image Docker (backend, frontend et base de données), que l'on a déployé sur Azure. Nous avons aussi utilisé Github actions pour le déploiement continu.