hackathon/front_end/src/components/ressourcePanel.tsx

	import { useState } from "react";
	import { useLocalData } from "../context/useLocalData";
	import { AthleteList, ActiviteList, CoachList, SessionList, LigneList} from "./ressourceList";
	import { Activite, Athlete, Coach , Session, Ligne } from "../classes";

	export default function RessourcePanel() {
	    const { user } = useLocalData();
	    const [showAthletes, setShowAthletes] = useState(false);
	    const [showActivites, setShowActivites] = useState(false);
	    const [showCoachs,setShowCoachs] = useState(false);
	    const [showSessions, setShowSessions] = useState(false);
	    const [showLignes, setShowLignes] = useState(false);
	    console.log("Rôle utilisateur:", user.role);
	    if (user.role === "Athlete") return null;


	    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());

	    const coachMap: Map<number, Coach> = new Map();
	    user.sessions.forEach(session => {
		if (session.coach) {
		    coachMap.set(session.coach.id, session.coach);
		}
	    });

	    const allCoachs: Coach[] = Array.from(coachMap.values());

	    const sessionMap: Map<number, Session> = new Map();
	    user.sessions.forEach(session => {
		sessionMap.set(session.id, session);
	    });

	    const allSessions: Session[] = Array.from(sessionMap.values());

	    const ligneMap: Map<number, Ligne> = new Map();
	    user.sessions.forEach(session => {
		if (session.ligne) {

		    session.ligne.forEach(ligne => {
		        ligneMap.set(ligne.id, ligne);
		    });
		}
	    });

	    const allLignes: Ligne[] = Array.from(ligneMap.values());

	    function onAthletesClick(): void {
		setShowAthletes(prev => !prev);
		setShowActivites(false); 
		setShowCoachs(false);
		setShowSessions(false);
		setShowLignes(false);

	    }
	    function onActivitiesClick(): void {
		setShowActivites(prev => !prev);
		setShowAthletes(false);
		setShowCoachs(false);
		setShowSessions(false);
		setShowLignes(false);


	    }
	    function onCoachClick(): void {
		setShowCoachs(prev => !prev);
		setShowActivites(false); 
		setShowAthletes(false);
		setShowSessions(false);
		setShowLignes(false);

	    }

	    function onSessionClick(): void {
		setShowSessions(prev => !prev);
		setShowActivites(false); 
		setShowAthletes(false);
		setShowCoachs(false);
		setShowLignes(false);

	    }

	    function onLigneClick():void{
		setShowLignes(prev => !prev);
		setShowAthletes(false);
		setShowActivites(false); 
		setShowCoachs(false);
		setShowSessions(false);
	    }


	    return (
		<div className="ressource_panel">
		    <div>
		        Sélectionner une ressource:
		    </div>
		    <select
		        onChange={(e) => {
		            const v = (e.target as HTMLSelectElement).value;
		            if (v === "athletes") onAthletesClick();
		            else if (v === "activites") onActivitiesClick();
		            else if (v === "coach") onCoachClick();
		            else if (v === "session") onSessionClick();
		            else if (v === "lignes") onLigneClick();
		            else {setShowAthletes(false); setShowActivites(false); setShowCoachs(false); setShowSessions(false)}
		        }}>
		        <option value="athletes">Athlètes</option>
		        <option value="activites">Activités</option>
		        {user.role === "Admin" && <option value="coach"> Coach</option>}
		        <option value="session"> Session</option>
		        <option value="lignes"> Lignes</option>

		    </select>

		    {showAthletes && (
		        <div className="edt_athletes_panel">
		            <h3>Liste des athlètes</h3>
		            <AthleteList athletes={allAthletes} />
		        </div>
		    )}

		    {showActivites && (
		        <div className="edt_activites_panel">
		            <h3>Liste des activités</h3>
		            <ActiviteList activites={allActivites} />
		        </div>
		    )}

		    {showCoachs && (
		        <div className="edt_coachs_panel">
		            <h3>Liste des coachs</h3>
		            <CoachList coachs={allCoachs} />
		        </div>
		    )}

		    {showSessions && (
		        <div className="edt_sessions_panel">
		            <h3>Liste des sessions</h3>
		            <SessionList sessions={allSessions} />
		        </div>
		    )}

		    {showLignes && (
		        <div className="edt_lignes_panel">
		            <h3>Liste des lignes</h3>
		            <LigneList lignes={allLignes} />
		        </div>
		    )}



		</div>
	    );
	}