ajout d'activité

front_end/src/classes.tsx

@@ -4,6 +4,7 @@ export class User{
     id!: number;
     nom!: String;
     sessions: Session[] = []; //nb: Admin liaison non symétrique /!\
+    email!: String;
 }
 
 export class Admin extends User{

front_end/src/components/createActivite.tsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from "react";
+import { Session, User, Coach, Activite, Groupe } from "../classes";
+import { Modal } from "./Modal";
+
+type CreateActiciteProps = {
+    returnActivite: (activite:Activite|null) => void
+}
+
+
+export function CreateActivite({ returnActivite }: CreateActiciteProps){
+
+    const [activities, setActivities] = useState<Activite[]>([]);
+    const [activiteNom, setActiviteNom] = useState("");
+    const [activiteTheme, setActiviteTheme] = useState("");
+    const [activiteDuree, setActiviteDuree] = useState(0);
+
+    function addAcitivte(){
+        if (!activiteNom) return;
+
+        const newActivite = new Activite();
+        newActivite.nom= activiteNom;
+        newActivite.theme=activiteTheme;
+        newActivite.duree= activiteDuree;
+        newActivite.data= new Map<string,string>();
+        setActivities([...activities, newActivite]);
+
+        setActiviteNom("");
+        setActiviteTheme("");
+        setActiviteDuree(0);
+
+        returnActivite(newActivite);
+    }
+
+    function cancel(){
+        returnActivite(null);
+    }
+
+
+
+    return (
+        <Modal isOpen={true} onClose={() => cancel()}>
+            <div className="edt_activite_modal">
+                <h2>Nouvelle Activité :</h2>
+                <div>
+                    Nom de l'activité:
+                </div>
+                <div>
+                    <input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} />
+                </div>
+                <div>
+                    Theme:
+                </div>
+                <div>
+                    <input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} />
+                </div>
+                <div>
+                    Duree (minutes):
+                </div>
+                <div>
+                    <input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} />
+                </div>
+                <button type="button" onClick={()=>addAcitivte()}>Ajouter l'activite</button>
+                <button type="button" onClick={()=>cancel()}>Annuler</button>
+
+                <ul>
+                    {activities.map((act, idx) => (
+                        <li key={idx}>{act.nom} - {act.theme} ({act.duree} min)</li>
+                    ))}
+                </ul>
+            </div>
+        </Modal>
+    );
+};
+
+export default CreateActivite;

front_end/src/components/edt.tsx

@@ -42,10 +42,7 @@ export const EDT =() =>{
 
         var newWeek: Session[] = []
         user.sessions.forEach(session => {
-            if( session.isRecurrent ){
+            if((session.creneau >= date && session.creneau <= maxDate && !session.isRecurrent) || session.isRecurrent){
-                newWeek.push(session);
-            }
-            if(session.creneau >= date && session.creneau <= maxDate && !session.isRecurrent){
                 newWeek.push(session);
             }
         });

front_end/src/components/edt_session.tsx

@@ -5,6 +5,7 @@ import './style/edt.css';
 import { Modal } from './Modal';
 import Loading from './loading';
 import {delay} from "../requetes";
+import CreateActivite from './createActivite';
 
 
 type Props = {
@@ -13,21 +14,22 @@ type Props = {
 
 function EdtSession({session}:Props){
 
-    const [open, setOpen] = useState<boolean>(false)
+    const [open, setOpen] = useState<boolean>(false);
+    const [open2, setOpen2] = useState<boolean>(false);
     const [loading,setLoading] = useState<boolean>(false);
+    const [activites,setActivites] = useState<Activite[]>([]);
 
     function handleOpen(): void {
         setOpen(!open);
     }
 
-    function handleDeleteActivite(): void {
+    function handleDeleteActivite(activite:Activite): void {
-        session.activites.pop(); //TODO
+        session.activites.splice(session.activites.indexOf(activite), 1);
+        setActivites([...session.activites])
     }
 
     function handleAddActivite(): void {
-        const newActivite = new Activite();
+        setOpen2(true)
-        //TODO
-        session.activites.push(newActivite);
     }
 
      async function updateActivites(){
@@ -45,13 +47,30 @@ function EdtSession({session}:Props){
         }
     },[open])
 
+    useEffect(() => {
+        if(!loading){
+            setActivites([...session.activites])
+        }
+    },[loading])
+
     const sDate = session.creneau;
+
+
+
+    function returnActivite(activite: Activite|null){
+        if(activite!==null){
+            session.activites.push(activite);
+            setActivites([...session.activites])
+        }
+        setOpen2(false);
+    }
+
     return(
         <div>
             <div className="edt_session" onClick={() => handleOpen()}>
                     <div className="edt_session_header">
                         <div className="edt_date">{hoursToString(sDate)}</div>
-                        {!session.isRecurrent && <div className="edt_date"> recurrent</div>}
+                        {session.isRecurrent && <div className="edt_date"> recurrent</div>}
                     </div>
                     <div>{session.name}</div>
             </div>
@@ -64,16 +83,20 @@ function EdtSession({session}:Props){
                         <div>
                             Activités :
                             <div className="ent_activite_list">
-                                {session.activites.map((activite,index)=>(
+                                {activites.map((activite,index)=>(
                                     <div>
                                         {activite.nom}
-                                        <button className="deleteButton" onClick={() => handleDeleteActivite}>x</button>
+                                        <button className="deleteButton" onClick={() => handleDeleteActivite(activite)}>x</button>
                                         </div>
                                 ))}
-                                <button  className="addButton" onClick={() => handleAddActivite}>+</button>
+                                <button  className="addButton" onClick={() => handleAddActivite()}>+</button>
                                 {loading && <div className='edt_loading'><Loading/></div>}
                             </div>
                         </div>
+                        
+                        {open2 &&
+                            <CreateActivite returnActivite={(activite) => returnActivite(activite)}/>
+                        }
                     </div>
                 </Modal>
             }

front_end/src/components/login.tsx

@@ -29,8 +29,19 @@ export const Login =() =>{
     return(
         <div>
             <div>
-                Authenticated : {keycloak.authenticated ? 'oui' : 'non'}
+                Etat : {keycloak.authenticated ? 'connecté' : 'non connecté'}
             </div>
+            {keycloak.authenticated &&
+            <div>
+                <div>
+                    Keycloak ID : { keycloak.tokenParsed?.sub}
+                </div>
+                <div>
+                    User nom : { user.nom}
+                </div>
+            
+            </div>
+            }
             <button onClick={() => handleLogin()}>
                 Se connecter
             </button>

front_end/src/components/style/edt.css

@@ -119,3 +119,10 @@
   background-color: var(--tint5);
   border-radius: 10px;
 }
+
+.edt_activite_modal{
+  background-color: var(--tint3);
+  padding: 10px;
+  border-radius: 20px;
+  position: relative;
+}

front_end/src/components/test_api.tsx

@@ -1,5 +1,6 @@
 import { useKeycloak } from "@react-keycloak/web"
-import { getCoachsAPI, getUsersAPI } from "../requetes"
+import { getCoachsAPI, getUsersAPI, postAdmin } from "../requetes"
+import { Admin } from "../classes";
 
 
 function TestAPI(){
@@ -9,9 +10,18 @@ function TestAPI(){
         getCoachsAPI();
     }
 
+    function handleSendAdmin(): void {
+        const admin = new Admin;
+        admin.nom = "admin";
+        admin.email = "admin@gmail.com";
+
+        postAdmin(admin);
+    }
+
     return(
         <div style={{padding:30, backgroundColor:"#000000"}}>
            <button onClick={()=>handleGetUsers()}>getUsers</button>
+           <button onClick={()=>handleSendAdmin()}>sendAdmin</button>
         </div>
     )
 }

front_end/src/index.css

@@ -65,3 +65,10 @@ code {
     transform: rotate(360deg);
   }
 }
+
+input{
+  background-color: var(--tint2);
+  color: var(--test);
+  border-color: var(--tint5);
+  border-radius: 8px;
+}

front_end/src/requetes.tsx

@@ -1,5 +1,5 @@
 import api from "./api";
-import { Activite, Athlete, Coach, Session, User } from "./classes";
+import { Activite, Admin, Athlete, Coach, Session, User } from "./classes";
 
 //debug:
 export function delay(ms: number): Promise<void> {
@@ -53,7 +53,7 @@ export async function updateActivitiesOfSessionAPI(session:Session){
 
 export async function subscribeSessionAPI(user:User, session:Session):Promise<boolean>{
     try {
-        await api.post(`/sessions/${session.id}/subscribe`, { userId: user.id });
+        await api.post(`/sessions/${session.id}/subscribe`);
         return true;
     } catch (error) {
         console.error("Error subscribing to session:", error);
@@ -63,7 +63,7 @@ export async function subscribeSessionAPI(user:User, session:Session):Promise<bo
 
 export async function unsubscribeSessionAPI(user:User, session:Session):Promise<boolean>{
     try {
-        await api.post(`/session/${session.id}/unsubscribe`, { userId: user.id });
+        await api.post(`/session/${session.id}/unsubscribe`);
         return true;
     } catch (error) {
         console.error("Error unsubscribing from session:", error);
@@ -104,8 +104,26 @@ export async function postActivityAPI(session: Session, activity: Activite){
     }
 }
 
-export async function postUser(user: User):Promise<boolean>{
+export async function postAthlete(athlete: Athlete):Promise<Athlete>{
-    return true;
+   try {
+        const response = await api.post<Athlete>("/athlete/create/",athlete);
+        console.log(response);
+        return response.data;
+    } catch (error) {
+        console.error("Error fetching coachs:", error);
+        throw error;
+    }
+}
+
+export async function postAdmin(athlete: Admin):Promise<Admin>{
+   try {
+        const response = await api.post<Admin>("/admin/create/",athlete);
+        console.log(response);
+        return response.data;
+    } catch (error) {
+        console.error("Error fetching coachs:", error);
+        throw error;
+    }
 }
 
 // SET /////////////////////////////////////////////////////////
@@ -142,6 +160,7 @@ export async function getUsersAPI(): Promise<User[]> {
 export async function getCoachsAPI(): Promise<Coach[]> {
     try {
         const response = await api.get<Coach[]>("/coach/all");
+        console.log(response);
         return response.data;
     } catch (error) {
         console.error("Error fetching coachs:", error);