Merge remote-tracking branch 'refs/remotes/origin/main'

front_end/src/components/edt_coach.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { coachService } from "../api";
+
+export default function EdtCoach() {
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [statusCode, setStatusCode] = useState<number | null>(null);
+
+  const handleCreate = async () => {
+    try {
+      const response = await coachService.create({ name });
+      console.log("Success:", response.status, response.data);
+      alert(`Coach created! Status: ${response.status}`);
+      setError("");
+      setStatusCode(response.status);
+    } catch (err: any) {
+      if (err.response) {
+        // This is the HTTP response from the server
+        console.error("HTTP status:", err.response.status);
+        console.error("Response data:", err.response.data);
+        setError(`Failed to create coach: ${err.response.data}`);
+        setStatusCode(err.response.status);
+      } else if (err.request) {
+        console.error("No response received", err.request);
+        setError("No response from server!");
+        setStatusCode(null);
+      } else {
+        console.error("Error", err.message);
+        setError(err.message);
+        setStatusCode(null);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2>Create Coach</h2>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Coach name"
+      />
+      <button onClick={handleCreate}>Create</button>
+
+      {error && <p style={{ color: "red" }}>{error}</p>}
+      {statusCode && <p>HTTP Status: {statusCode}</p>}
+    </div>
+  );
+}

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/ressourceList.tsx

@@ -1,4 +1,3 @@
-import ListGroup from "react-bootstrap/ListGroup";
 import { Athlete, Activite } from "../classes";
 
 type Props = {
@@ -9,26 +8,22 @@ type Props = {
 
 function AthleteList({ athletes }: Props) {
     return (
-        <ListGroup>
+        <ul className="AthleteList">
             {athletes.map((athlete) => (
-                <ListGroup.Item key={athlete.id}>
-                    <div>
-                        <strong>Nom:</strong> {athlete.nom}
-                    </div>
-                    <div>
-                        <strong>Groupe:</strong> {athlete.groupe}
-                    </div>
-                </ListGroup.Item>
+                <li key={athlete.id}>
+                    <div><strong>Nom:</strong> {athlete.nom}</div>
+                    <div><strong>Groupe:</strong> {athlete.groupe}</div>
+                </li>
             ))}
-        </ListGroup>
+        </ul>
     );
 }
 
 function ActiviteList({ activites }: Props) {
     return (
-        <ListGroup>
+        <ul className="ActiviteList">
             {activites.map((activite) => (
-                <ListGroup.Item key={activite.id}>
+                <li key={activite.id}>
                     <div>
                         <strong>Nom:</strong> {activite.nom}
                     </div>
@@ -38,9 +33,9 @@ function ActiviteList({ activites }: Props) {
                     <div>
                         <strong>Durée:</strong> {activite.duree} minutes
                     </div>
-                </ListGroup.Item>
+                </li>
             ))}
-        </ListGroup>
+        </ul>
     );
 }
 

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