Merge branch 'main' of https://gitlab2.istic.univ-rennes1.fr/tuvu/hackathon

README.md

@@ -1,44 +1,86 @@
-# hackathon
+# FrisbyEE (Projet Hackathon)
 
-## Pour lancer 
+Ce projet contient : un backend Spring Boot et un frontend React en TypeScript développé lors du hackathon. L'authentification est gérée par Keycloak et la base de données est PostgreSQL; les deux peuvent être lancés via Docker.
+---
+
+
+## Présentation rapide
+- **Backend** : Spring Boot (Java 17) dans `back_end/`
+- **Frontend** : React et TypeScript dans `front_end/`
+- **Auth** : Keycloak (voir `keycloak/` pour la thème et configuré via `docker-compose.yml`)
+- **Base de données** : PostgreSQL (configuré via `docker-compose.yml`)
+
+## Pré-requis
+- Java 17
+- Maven (utiliez `mvn`)
+- Node.js et npm
+- Docker et Docker Compose
+
+## Installation et démarrage
+1. Récupérez le dépôt et placez-vous à la racine du projet.
+2. Démarrez Keycloak et PostgreSQL avec Docker:
+
+```bash
 sudo docker compose up -d
+```
 
-### back_end
+3. Backend: construire et lancer (depuis la racine du projet):
-cd back_end 
 
-#### Pour installer java 17
+```bash
-sudo apt install openjdk-17-jdk
+cd back_end
-export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
+./mvn clean install  
-export PATH=$JAVA_HOME/bin:$PATH
+./mvn spring-boot:run 
+```
 
-#### Clean 
+4. Frontend: installer les dépendances et démarrer :
-mvn clean install
 
-#### Pour lancer back_end
+```bash
-mvn spring-boot:run
-
-### front_end
 cd front_end
-
+npm install
-#### Install
-npm install 
-
-#### Lancer front_end
 npm start
+```
 
-#### Docker 
+Le serveur de développement du frontend écoute par défaut sur `http://localhost:3000`, le backend sur `http://localhost:8080`, et api sur `http://localhost:8081` sauf configuration différente.
+
+## Commandes utiles
+- Arrêter et supprimer tous les conteneurs Docker:
+
+```bash
 sudo docker stop $(sudo docker ps -a -q)
+sudo docker rm $(sudo docker ps -a -q)
+```
 
-#### Pour acceder sur docker
+- Ouvrir un shell Postgres dans le conteneur en cours d'exécution (exemple : conteneur `frisbyee-postgres`):
+
+```bash
 sudo docker exec -it frisbyee-postgres psql -U frisbyee_user -d frisbyee
+# puis, par exemple : \dt  ou  SELECT * FROM session;
+```
 
-#### Voir les données:
+## Keycloak / Thème de connexion
-\dt
+- Au début, il faut crée run realm qui s'appelle `Frisbyee_realm`, ensuite dans ce realm, créez un `Frisbyee_client` avec ce config debug: 
-SELECT * FROM session;
+```
+ROOT URL: http://localhost:3000/
+HOME URL: http://localhost:3000/
+Valid redirect URIs: http://localhost:3000/*
+Web origins: *
+```
+- Après, ajoutez les rôles : `admin`, `coach`, `athlete`
+- Et, mettez chaque groupe `ADMIN`, `COACH`, `ATHLETE` et mapping chaque rôle pour chaque groupe.
+- Dans User Registration, mettez le `defaut groupe`: `ATHLETE` et activez le user self registration. 
+
+Pour appliquer le thème de connexion personnalisé fourni dans `keycloak/themes/frisbyee` :
+- Ouvrez la console d'administration Keycloak -> sélectionnez le realm -> `Realm Settings` -> modifiez le `Display name` si vous le souhaitez.
+- Dans `Themes`, définissez `Login Theme` sur `frisbyee` puis enregistrez.
 
 
-#### Appliquer le CSS pour la page de login Keycloak
+## Configuration / Environnement
+- Les propriétés du backend se trouvent dans `back_end/src/main/resources/application.properties`.
+- Le frontend utilise `public/keycloak.json` pour la configuration du client Keycloak.
+- Assurez-vous que le client Keycloak et le realm correspondent aux valeurs utilisées par les deux applications.
 
-Sur la console Keycloak aller dans realm setting
+## Contribution
--> Changer le display name (par exemple: Bienvenue sur Frisbyee !)
+- Thibaut ROCHAS
--> Theme puis changer le login theme sur frisbyee
+- Tuan Minh VU
+- Amäel KESTEMAN
+- Alexis LEBOEUF

front_end/src/components/StatsAthlete.tsx

@@ -23,16 +23,18 @@ function StatAthlete({ athlete }: AthleteStatsProps) {
   };
 
   useEffect(() => {
+    console.log("useEffect déclenché, athlete.id =", athlete.id);
     async function loadSessions() {
         if (!athlete.id) {
             console.error("Athlete ID is null");
             setLoading(false);
             return;
         }
-        
+        console.log("Début du chargement des sessions");
         setLoading(true);
         try {
             const sessionsData = await getSessionsByAthleteId(athlete.id);
+            console.log("Sessions reçues de l'API:", sessionsData);
             setSessions(sessionsData);
             console.log("Sessions chargées:", sessionsData);
             console.log("Première session:", sessionsData[0]);
@@ -42,6 +44,7 @@ function StatAthlete({ athlete }: AthleteStatsProps) {
             setSessions([]);
         } finally {
             setLoading(false);
+            console.log("Fin du chargement");
         }
     }
     
@@ -49,6 +52,8 @@ function StatAthlete({ athlete }: AthleteStatsProps) {
 }, [athlete.id]);
 
   const handleCalculerStats = () => {
+    console.log("Sessions au moment du calcul:", sessions); 
+    console.log("Nombre de sessions:", sessions.length); 
     let safeDebut = dateDebut;
     let safeFin = dateFin;
     if (sessions.length > 0) {

front_end/src/requetes.tsx

@@ -403,7 +403,7 @@ export async function getAllAthlete(): Promise<Athlete[]> {
 
 export async function getSessionsByAthleteId(athleteId: number): Promise<Session[]> {
     try {
-        const response = await api.get(`/athlete/athlete/${athleteId}/session`);
+        const response = await api.get(`/athlete/${athleteId}/session`);
         const sessions: Session[] = [];
         
         const allAthletes = await getAllAthlete();