pages + correction coach dans detail Session

front_end/src/App.tsx

@@ -10,8 +10,13 @@ import CreateSession from './components/createSession'
 import EdtCoach from './components/edt_coach'
 import { Coach } from "./classes";
 import RessourcePanel from './components/ressourcePanel';
-import TestAPI from './components/test_api';
 import TopBar from './components/topBar';
+import { Routes, Route } from 'react-router-dom'
+import Home from './components/pages/pageHome';
+import SelectionSession from './components/pages/pageSectionSession';
+import Gestion from './components/pages/pageGestion';
+import Admin from './components/pages/pageAdmin';
+
 
 const keycloakInitOptions = {
   onLoad: 'login-required',
@@ -24,11 +29,12 @@ function App() {
       <LocalDataProvider>
         <div className="App">
           <TopBar/>
-          <h1>Frisbyee</h1>
-          <RessourcePanel/>
-          <EDT/>
-          <CreateSession/>
-          <TestAPI/>
+          <Routes>
+            <Route path="/" element={<Home/>}/>
+            <Route path="/sessions" element={<SelectionSession/>}/>
+            <Route path="/gestion" element={<Gestion/>}/>
+            <Route path="/admin" element={<Admin/>}/>
+          </Routes>
         </div>
       </LocalDataProvider>
     </ReactKeycloakProvider>

front_end/src/api.ts

@@ -45,7 +45,7 @@ export const athleteService = {
     delete: (id: number | string) => api.delete(`/athlete/${id}`),
 
     // session-related endpoints exposed by AthleteResource
-    getSessionsForAthlete: (athleteId: number | null) => api.get<SessionDTO[]>(`/athlete/athlete/${athleteId}/session`),
+    getSessionsForAthlete: (athleteId: number | null) => api.get<SessionDTO[]>(`/athlete/${athleteId}/session`),
     getAllSessions: () => api.get(`/athletes/session`),
     getActivitiesForSession: (sessionId: number | string) => api.get(`/athletes/session/${sessionId}/activities`),
     getSessionsAfterDate: (athleteId: number | string, date: string) => api.get(`/athletes/${athleteId}/session/after/${encodeURIComponent(date)}`),
@@ -78,6 +78,7 @@ export const sessionService = {
 
     getActivities: (sessionId: number | null) => api.get<ActiviteDTO[]>(`/session/${sessionId}/activities`),
     addActivity: (sessionId: number | null, activityId: number) => api.post(`/session/${sessionId}/activities/${activityId}`),
+    getCoach: (sessionId: number | null) => api.get<CoachDTO>(`/session/${sessionId}/coach`),
     subscribe: (sessionId: number | null, userId: number) => api.put(`/session/${sessionId}/subscribe/${userId}`),
     unsubscribe: (sessionId: number | null, userId: number) => api.put(`/session/${sessionId}/unsubscribe/${userId}`),
 };

front_end/src/components/object/detailSession.tsx

@@ -4,7 +4,7 @@ import { dateToString, hoursToString } from "../edt";
 import { Modal } from "../Modal";
 import CreateActivite from "../createActivite";
 import Loading from "../loading";
-import { addActiviteToSession, createActivityAPI, delay, deletActiviteFromSession, getSessionOfActivite, subscribeSessionAPI, unsubscribeSessionAPI } from "../../requetes";
+import { addActiviteToSession, createActivityAPI, delay, deletActiviteFromSession, getCoachOfSession, getSessionOfActivite, subscribeSessionAPI, unsubscribeSessionAPI } from "../../requetes";
 import { useLocalData } from "../../context/useLocalData";
 
 type Props = {
@@ -37,6 +37,10 @@ function DetailSession({session,open,setOpen}:Props){
     }
 
     async function updateActivites(){
+        const coach = await getCoachOfSession(session);
+        if(coach!=null){
+            session.coach = coach;
+        }
         const newActivites = await getSessionOfActivite(session);
         if(newActivites!=null){
             session.activites=newActivites;
@@ -95,8 +99,11 @@ function DetailSession({session,open,setOpen}:Props){
             <Modal isOpen={open} onClose={() => setOpen(false)}>
                 <div className="object_modal">
                     <h2>{session.name}</h2>
+                    
                     <div>{hoursToString(sDate)}</div>
                     <div>{dateToString(sDate)}</div>
+                    <div>encadré par :</div>
+                    <div>{session.coach?.prenom} {session.coach?.nom}</div>
                     {user instanceof Athlete  &&
                     <div>
                         {user.sessions.includes(session) ? <button onClick={()=>unsubscribeSession()}>quitter</button>

front_end/src/components/pages/pageAdmin.tsx

@@ -0,0 +1,12 @@
+import CreateSession from "../createSession"
+import TopBar from "../topBar"
+
+function Admin() {
+    return (
+        <div>
+            <h1>Admin</h1>
+        </div>
+    )
+}
+
+export default Admin

front_end/src/components/pages/pageGestion.tsx

@@ -0,0 +1,13 @@
+import CreateSession from "../createSession"
+import TopBar from "../topBar"
+
+function Gestion() {
+    return (
+        <div>
+            <h1>Gestion</h1>
+            <CreateSession/>
+        </div>
+    )
+}
+
+export default Gestion

front_end/src/components/pages/pageHome.tsx

@@ -0,0 +1,13 @@
+import EDT from "../edt"
+import TopBar from "../topBar"
+
+function Home() {
+      return (
+        <div>
+            <h1>Home</h1>
+            <EDT/>
+        </div>
+    )
+}
+
+export default Home

front_end/src/components/pages/pageSectionSession.tsx

@@ -0,0 +1,13 @@
+import RessourcePanel from "../ressourcePanel"
+import TopBar from "../topBar"
+
+function SelectionSession() {
+    return (
+        <div>
+            <h1>Selection Session</h1>
+            <RessourcePanel/>
+        </div>
+    )
+}
+
+export default SelectionSession

front_end/src/components/style/topBar.css

@@ -10,13 +10,23 @@
 }
 
 .toBarLeft{
+    flex: 1;
     display: flex;
     gap: 10px;
     align-items: center;
+    
+}
+
+.toBarMidle{
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    gap: 10px;
 }
 
 
 .topBarRight{
+    flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-end;

front_end/src/components/test_api.tsx

@@ -1,29 +0,0 @@
-import { useKeycloak } from "@react-keycloak/web"
-import { getAllCoach } from "../requetes"
-import { Admin } from "../classes";
-
-
-function TestAPI(){
-    const { keycloak } = useKeycloak()
-
-    function handleGetUsers(): void {
-        getAllCoach();
-    }
-
-    function handleSendAdmin(): void {
-        const admin = new Admin;
-        admin.nom = "admin";
-        admin.email = "admin@gmail.com";
-
-        //createAdminAPI(admin);
-    }
-
-    return(
-        <div style={{padding:30, backgroundColor:"#000000"}}>
-           <button onClick={()=>handleGetUsers()}>getUsers</button>
-           <button onClick={()=>handleSendAdmin()}>sendAdmin</button>
-        </div>
-    )
-}
-
-export default TestAPI

front_end/src/components/topBar.tsx

@@ -1,9 +1,12 @@
+import { Link } from "react-router-dom"
+import { Admin, Athlete, Coach } from "../classes"
+import { useLocalData } from "../context/useLocalData"
 import Login from "./login"
 import SwitchThemeColor from "./SwitchThemeColor"
 
 function TopBar(){
 
-
+    const {userLocal} = useLocalData()
 
 
     return(
@@ -12,7 +15,12 @@ function TopBar(){
                 <img className="logo" src="/Frisbyee_logo.png"/>
                 <h2>Frisbyee</h2>
             </div>
-            
+            <div className="toBarMidle">
+                <Link to="/">Home</Link>
+                <Link to="/sessions">Sessions</Link>
+                {userLocal instanceof Coach &&<Link to="/gestion">Gestion</Link>}
+                {userLocal instanceof Admin &&<Link to="/admin">Admin</Link>}
+            </div>
         
             <div className="topBarRight">
                     <SwitchThemeColor/>

front_end/src/index.tsx

@@ -3,13 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from 'react-router-dom'
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

front_end/src/requetes.tsx

@@ -371,6 +371,17 @@ export async function getAllSessionsBetweenAPI(d1:Date,d2:Date):Promise<Session[
     }
 }
 
+export async function getCoachOfSession(session:Session): Promise<Coach>{
+    try {
+        const response = await sessionService.getCoach(session.id);
+        const coach:Coach = new Coach(response.data);
+        return coach;
+    } catch (error) {
+        console.error("Error fetching coachs:", error);
+        throw error;
+    }
+}
+
 //COACH
 export async function getAllCoach(): Promise<Coach[]> {
     try {