Feat: ajout de la liste pour voir les activités et les athlètes en tant que coach/ admin

front_end/src/App.tsx

@@ -7,6 +7,7 @@ import { LocalDataProvider } from './provider/LocalDataProvider';
 import EDT from './components/edt';
 import SwitchThemeColor from './components/SwitchThemeColor';
 import CreateSession from './components/createSession'
+import RessourcePanel from './components/ressourcePanel';
 
 
 const keycloakInitOptions = {
@@ -22,6 +23,7 @@ function App() {
             <SwitchThemeColor/>
             <h1>Frisbyee</h1>
             <Login/>
+            <RessourcePanel/>
             <EDT/>
             <CreateSession/>
         </div>

front_end/src/classes.tsx

@@ -11,6 +11,7 @@ export class Admin extends User{
 }
 
 export class Athlete extends User{
+    nom!: String;
     groupe!: Groupe;
 
 }
@@ -60,10 +61,83 @@ export function getUserTest():User{
     s3.id = 3;
     s3.name = "entraintement3"
 
-    const a1:Activite = new Activite();
+    const athlete1 = new Athlete();
-    const a2:Activite = new Activite();
+    athlete1.id = 1;
-    s1.activites.push(a1);
+    athlete1.nom = "Alice Dupont";
-    s1.activites.push(a2);
+    athlete1.groupe = "Entrainement";
+
+    const athlete2 = new Athlete();
+    athlete2.id = 2;
+    athlete2.nom = "Bob Martin";
+    athlete2.groupe = "Competition";
+
+    const athlete3 = new Athlete();
+    athlete3.id = 3;
+    athlete3.nom = "Clara Lopez";
+    athlete3.groupe = "Loisir";
+
+    s1.athletes = [athlete1, athlete2];
+    s2.athletes = [athlete2, athlete3];
+    s3.athletes = [athlete1, athlete3];
+
+
+    const act1 = new Activite();
+    act1.id = 1;
+    act1.nom = "Échauffement";
+    act1.theme = "Cardio";
+    act1.duree = 15;
+    act1.session = s1;
+    act1.data = new Map([["objectif", "Préparer le corps"], ["matériel", "Ballon"]]);
+
+    const act2 = new Activite();
+    act2.id = 2;
+    act2.nom = "Dribbles et passes";
+    act2.theme = "Technique";
+    act2.duree = 30;
+    act2.session = s1;
+    act2.data = new Map([["objectif", "Améliorer les passes"], ["niveau", "Intermédiaire"]]);
+
+    const act3 = new Activite();
+    act3.id = 3;
+    act3.nom = "Renforcement musculaire";
+    act3.theme = "Force";
+    act3.duree = 25;
+    act3.session = s2;
+    act3.data = new Map([["objectif", "Renforcer les jambes"], ["matériel", "Haltères"]]);
+
+    const act4 = new Activite();
+    act4.id = 4;
+    act4.nom = "Sprint et agilité";
+    act4.theme = "Vitesse";
+    act4.duree = 20;
+    act4.session = s2;
+    act4.data = new Map([["objectif", "Améliorer les sprints"], ["matériel", "Plots"]]);
+
+    const act5 = new Activite();
+    act5.id = 5;
+    act5.nom = "Match 5v5";
+    act5.theme = "Jeu";
+    act5.duree = 60;
+    act5.session = s3;
+    act5.data = new Map([["objectif", "Appliquer les techniques"], ["niveau", "Avancé"]]);
+
+    const act6 = new Activite();
+    act6.id = 6;
+    act6.nom = "Étirements";
+    act6.theme = "Récupération";
+    act6.duree = 10;
+    act6.session = s3;
+    act6.data = new Map([["objectif", "Éviter les blessures"], ["matériel", "Tapis"]]);
+
+
+    // attach the concrete activities to their sessions
+    s1.activites.push(act1);
+    s1.activites.push(act2);
+    s2.activites.push(act3);
+    s2.activites.push(act4);
+    s3.activites.push(act5);
+    s3.activites.push(act6);
+
     user.sessions.push(s1);
     user.sessions.push(s2);
     user.sessions.push(s3);

front_end/src/components/dropdownButton.tsx

@@ -0,0 +1,27 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import { Athlete } from '../classes';
+
+    type Props = {
+        onAthletesClick: () => void;
+        onActivitiesClick: () => void;
+    }
+
+function ListButton({ onAthletesClick, onActivitiesClick }: Props) {
+    return (
+        <Dropdown> 
+            <Dropdown.Toggle>
+                Sélectionner la ressource
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+                <Dropdown.Item as="button" onClick={onAthletesClick}>
+                    Athlètes
+                </Dropdown.Item>
+                <Dropdown.Item as="button" onClick={onActivitiesClick}>
+                    Activités
+                </Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown>
+    );
+}
+
+export default ListButton;

front_end/src/components/ressourceList.tsx

@@ -0,0 +1,47 @@
+import ListGroup from "react-bootstrap/ListGroup";
+import { Athlete, Activite } from "../classes";
+
+type Props = {
+    athletes: Athlete[];
+    activites: Activite[];
+
+};
+
+function AthleteList({ athletes }: Props) {
+    return (
+        <ListGroup>
+            {athletes.map((athlete) => (
+                <ListGroup.Item key={athlete.id}>
+                    <div>
+                        <strong>Nom:</strong> {athlete.nom}
+                    </div>
+                    <div>
+                        <strong>Groupe:</strong> {athlete.groupe}
+                    </div>
+                </ListGroup.Item>
+            ))}
+        </ListGroup>
+    );
+}
+
+function ActiviteList({ activites }: Props) {
+    return (
+        <ListGroup>
+            {activites.map((activite) => (
+                <ListGroup.Item key={activite.id}>
+                    <div>
+                        <strong>Nom:</strong> {activite.nom}
+                    </div>
+                    <div>
+                        <strong>Thème:</strong> {activite.theme}
+                    </div>
+                    <div>
+                        <strong>Durée:</strong> {activite.duree} minutes
+                    </div>
+                </ListGroup.Item>
+            ))}
+        </ListGroup>
+    );
+}
+
+export { AthleteList, ActiviteList };

front_end/src/components/ressourcePanel.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useLocalData } from "../context/useLocalData";
+import ListButton from "./dropdownButton";
+import { AthleteList, ActiviteList } from "./ressourceList";
+import { Activite, Athlete } from "../classes";
+
+export default function RessourcePanel() {
+    const { user } = useLocalData();
+    const [showAthletes, setShowAthletes] = useState(false);
+    const [showActivites, setShowActivites] = useState(false);
+
+
+    const athleteMap: Map<number, Athlete> = new Map();
+    user.sessions.forEach(session => {
+        session.athletes?.forEach(a => athleteMap.set(a.id, a));
+    });
+    const allAthletes: Athlete[] = Array.from(athleteMap.values());
+
+    const activiteMap: Map<number, Activite> = new Map();
+    user.sessions.forEach(session => {
+        session.activites?.forEach(act => activiteMap.set(act.id, act));
+    });
+    const allActivites: Activite[] = Array.from(activiteMap.values());
+
+    return (
+        <div className="ressource_panel">
+            <ListButton 
+                onAthletesClick={() => {
+                    setShowAthletes(prev => !prev);
+                    setShowActivites(false); 
+                }}
+                onActivitiesClick={() => {
+                    setShowActivites(prev => !prev);
+                    setShowAthletes(false);
+                }}
+            />
+            {showAthletes && (
+                <div className="edt_athletes_panel">
+                    <h3>Liste des athlètes</h3>
+                    <AthleteList athletes={allAthletes} activites={[]}/>
+                </div>
+            )}
+            {showActivites && (
+                <div className="edt_activites_panel">
+                    <h3>Liste des activités</h3>
+                    <ActiviteList athletes={[]} activites={allActivites} />
+                </div>
+            )}
+            
+        </div>
+    );
+}