ajout bouton d'édition dans session de l'edt + bouton debug pour api

front_end/src/App.tsx

@@ -8,6 +8,7 @@ import EDT from './components/edt';
 import SwitchThemeColor from './components/SwitchThemeColor';
 import CreateSession from './components/createSession'
 import RessourcePanel from './components/ressourcePanel';
+import TestAPI from './components/test_api';
 
 
 const keycloakInitOptions = {
@@ -29,6 +30,8 @@ function App() {
             <RessourcePanel/>
             <EDT/>
             <CreateSession/>
+
+            <TestAPI/>
         </div>
       </LocalDataProvider>
     </ReactKeycloakProvider>

front_end/src/classes.tsx

@@ -135,8 +135,8 @@ export function getUserTest():User{
     s1.activites.push(act2);
     s2.activites.push(act3);
     s2.activites.push(act4);
-    s3.activites.push(act5);
-    s3.activites.push(act6);
+    s2.activites.push(act5);
+    s2.activites.push(act6);
 
     user.sessions.push(s1);
     user.sessions.push(s2);

front_end/src/components/edt_session.tsx

@@ -20,6 +20,16 @@ function EdtSession({session}:Props){
         setOpen(!open);
     }
 
+    function handleDeleteActivite(): void {
+        session.activites.pop(); //TODO
+    }
+
+    function handleAddActivite(): void {
+        const newActivite = new Activite();
+        //TODO
+        session.activites.push(newActivite);
+    }
+
      async function updateActivites(){
         //TODO
         await delay(2000);
@@ -46,19 +56,27 @@ function EdtSession({session}:Props){
                     <div>{session.name}</div>
             </div>
             {open && 
-                         <Modal isOpen={open} onClose={() => setOpen(false)}>
-                            <div className="edt_session_modal">
-                                <div>{session.name}</div>
-                                <div>{hoursToString(sDate)}</div>
-                                <div>{dateToString(sDate)}</div>
+                <Modal isOpen={open} onClose={() => setOpen(false)}>
+                    <div className="edt_session_modal">
+                        <div>{session.name}</div>
+                        <div>{hoursToString(sDate)}</div>
+                        <div>{dateToString(sDate)}</div>
+                        <div>
+                            Activités :
+                            <div className="ent_activite_list">
                                 {session.activites.map((activite,index)=>(
-                                <div>activite</div>
+                                    <div>
+                                        {activite.nom}
+                                        <button className="deleteButton" onClick={() => handleDeleteActivite}>x</button>
+                                        </div>
                                 ))}
+                                <button  className="addButton" onClick={() => handleAddActivite}>+</button>
                                 {loading && <div className='edt_loading'><Loading/></div>}
                             </div>
-                           
-                        </Modal>
-                    }
+                        </div>
+                    </div>
+                </Modal>
+            }
         </div>
     )
 }

front_end/src/components/style/edt.css

@@ -98,8 +98,24 @@
 
 .edt_session_modal{
   background-color: var(--tint2);
-  padding: 20px;
+  padding: 10px;
   border-radius: 20px;
   position: relative;
 }
 
+.ent_activite_list{
+  padding: 10px;
+  background-color: var(--tint3);
+  border-radius: 10px;
+}
+
+.deleteButton{
+  background-color: #FF0000;
+  border-color: #AA0000;
+  border-radius: 10px;
+}
+
+.addButton{
+  background-color: var(--tint5);
+  border-radius: 10px;
+}

front_end/src/components/test_api.tsx

@@ -0,0 +1,16 @@
+import { getUsersAPI } from "../requetes"
+
+function TestAPI(){
+
+    function handleGetUsers(): void {
+        getUsersAPI()
+    }
+
+    return(
+        <div style={{padding:30, backgroundColor:"#000000"}}>
+           <button onClick={()=>handleGetUsers()}>getUsers</button>
+        </div>
+    )
+}
+
+export default TestAPI

front_end/src/requetes.tsx

@@ -14,7 +14,7 @@ const useAuthHeader = () => {
 export function delay(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
-*/
+
 //UPDATE /////////////////////////////////////////////////////////
 
 //COACH / ATHLETE