front groupe activation + fix Modal qui dépasse de l'écran (petit bug visuel mais ça marche)

front_end/src/App.css

@@ -242,9 +242,9 @@ textarea::placeholder {
 
 /* Select */
 select {
+  background-color: var(--tint2);
   color: var(--text);
-  background-color: var(--tint3);
+  border: 1px solid var(--tint4);
-  border: 2px solid var(--tint5);
   border-radius: 8px;
   padding: 10px 14px;
   cursor: pointer;
@@ -260,6 +260,7 @@ select:focus {
 select option {
   background-color: var(--tint2);
   color: var(--text);
+  border-radius: 5px;
 }
 
 /* Buttons */
@@ -364,7 +365,7 @@ button.add:hover,
 }
 
 /* Modal */
-.modal {
+.modalContent {
   background-color: var(--tint2);
   padding: 20px;
   min-width: 300px;
@@ -373,8 +374,22 @@ button.add:hover,
   border: 2px solid var(--green-primary);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
   position: relative;
+  max-height:100%;
+  overflow-y: auto;
 }
 
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    max-height:100%;
+  }
+
+
 .modal-overlay {
   position: fixed;
   inset: 0;

front_end/src/classes.tsx

@@ -153,7 +153,7 @@ export class Session{
             isRecurrent: this.isRecurrent,
             creneau: this.creneau.toISOString(),
             duree: this.duree,
-            groupe: "", //TODO
+            groupe: this.groupe,
             coachId: this.coach?.id ?? null,
             athleteIds: [],
             activiteIds: []

front_end/src/components/Modal.tsx

@@ -13,22 +13,10 @@ export function Modal({ isOpen, onClose, children }: ModalProps) {
     if (!isOpen) return null
 
     return (
-        <div
+        <div className="modal" onClick={onClose}>
-        style={{
+            <div className="modalContent" onClick={(e) => e.stopPropagation()}>
-            position: "fixed",
+                {children}
-            inset: 0,
+            </div>
-            backgroundColor: "rgba(0,0,0,0.25)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 1000,
-        }}
-        onClick={onClose}
-        >
-        <div className="modal" onClick={(e) => e.stopPropagation()}
-        >
-            {children}
-        </div>
         </div>
     )
 }

front_end/src/components/createSession.tsx

@@ -74,6 +74,20 @@ export const CreateSession = () => {
                 </tr>
                 <tr>
                     <th>Groupe:</th>
+                    <th>
+                        <select
+                            onChange={(e) => {
+                                const v = (e.target as HTMLSelectElement).value;
+                                setGroupe(v as Groupe)
+                                console.log(v);
+                            }}>
+                            <option value=""> Sans groupe</option>
+                            <option value="Loisir">Loisir</option>
+                            <option value="Entrainement">Entrainement</option>
+                            <option value="Competition">Competition</option>
+    
+                        </select>
+                    </th>
                 </tr>
                 <tr>
                     <th>Creneau:</th>

front_end/src/requetes.tsx

@@ -163,6 +163,7 @@ export async function createSessionAPI(session: Session): Promise<Session> {
     }
 
     try {
+        console.log("GROUPE = " + session.groupe);
         const response = await api.post<SessionDTO>("/session/create", session.toDTO());
         const sessionRes:Session = new Session(response.data);
         await Promise.all(