détail d'une session de l'edt en cours

front_end/src/components/Modal.tsx

@@ -0,0 +1,34 @@
+import {useEffect } from "react"
+
+type ModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
+}
+
+export function Modal({ isOpen, onClose, children }: ModalProps) {
+
+
+
+    if (!isOpen) return null
+
+    return (
+        <div
+        style={{
+            position: "fixed",
+            inset: 0,
+            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/edt.tsx

@@ -3,6 +3,26 @@ import { getUserTest, Session, User } from "../classes"
 import { useLocalData } from "../context/useLocalData"
 import './style/edt.css';
 import {updateSessionsOfUserAPI } from "../requetes";
+import EdtSession from "./edt_session";
+
+
+export function dateToString(date:Date){
+    const dd_prefix = date.getDate()<10 ? "0" : "";
+    const mm_prefix = date.getMonth()+1<10 ? "0" : "";
+    const dd:String = dd_prefix+date.getDate().toString();
+    const mm:String = mm_prefix+(date.getMonth()+1).toString();
+    const yyyy:String = date.getFullYear().toString();
+    return dd+"/"+mm+"/"+yyyy;
+}
+
+export function hoursToString(date:Date){
+    const hh_prefix = date.getHours()<10 ? "0" : "";
+    const mm_prefix = date.getMinutes()+1<10 ? "0" : "";
+    const hh:String = hh_prefix+date.getHours().toString();
+    const mm:String = mm_prefix+date.getMinutes().toString();
+    return hh+"h"+mm;
+}
+
 
 export const EDT =() =>{
     const {user,setUser} = useLocalData()
@@ -68,33 +88,6 @@ export const EDT =() =>{
         return newDate;
     }
 
-    function dateToString(date:Date){
-        const dd_prefix = date.getDate()<10 ? "0" : "";
-        const mm_prefix = date.getMonth()+1<10 ? "0" : "";
-        const dd:String = dd_prefix+date.getDate().toString();
-        const mm:String = mm_prefix+(date.getMonth()+1).toString();
-        const yyyy:String = date.getFullYear().toString();
-        return dd+"/"+mm+"/"+yyyy;
-    }
-
-    function hoursToString(date:Date){
-        const hh_prefix = date.getHours()<10 ? "0" : "";
-        const mm_prefix = date.getMinutes()+1<10 ? "0" : "";
-        const hh:String = hh_prefix+date.getHours().toString();
-        const mm:String = mm_prefix+date.getMinutes().toString();
-        return hh+"h"+mm;
-    }
-
-    function displaySession(session:Session){
-        const sDate = session.creneau;
-        return(
-            <div className="edt_session">
-                <div>{hoursToString(sDate)}</div>
-                {dateToString(sDate)}
-                <button className="edt_button">+</button>
-            </div>
-        )
-    }
 
     return(
         <div className="edt"> 
@@ -108,12 +101,12 @@ export const EDT =() =>{
                     <div className="edt_colonne">
                         <div className="edt_day_header">
                             <div> {week_days[index]} </div>
-                            <div> {dateToString(getNextDay(week,index))} </div>
+                            <div className="edt_date"> {dateToString(getNextDay(week,index))} </div>
                         </div>
                         <div className="edt_day_contedt">
                         {sessions.map((session,index2)=>(
                             session.creneau.getDay()===num &&
-                            displaySession(session)
+                            <EdtSession session={session}/>
                         ))}
                         </div>
                     </div>

front_end/src/components/edt_session.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { Activite, Session } from '../classes';
+import { dateToString, hoursToString } from './edt';
+import './style/edt.css';
+import { Modal } from './Modal';
+import Loading from './loading';
+
+
+type Props = {
+    session:Session;
+}
+
+function EdtSession({session}:Props){
+
+    const [open, setOpen] = useState<boolean>(false)
+    const [loading,setLoading] = useState<boolean>(false);
+
+    function handleOpen(): void {
+        setOpen(!open);
+    }
+
+     async function updateActivites(){
+        //TODO
+        //await updateActivitiesOfSessionAPI(session);
+        setLoading(false);
+    }
+
+
+    useEffect(() => {
+        if(open){
+            setLoading(true);
+            updateActivites()
+        }
+    },[open])
+
+    const sDate = session.creneau;
+    return(
+        <div>
+            <div className="edt_session" onClick={() => handleOpen()}>
+                    <div className="edt_date">{hoursToString(sDate)}</div>
+                    <div>{session.name}</div>
+            </div>
+            {open && 
+                         <Modal isOpen={open} onClose={() => setOpen(false)}>
+                            <div>{session.name}</div>
+                            <div>{hoursToString(sDate)}</div>
+                            <div>{dateToString(sDate)}</div>
+                            {session.activites.map((activite,index)=>(
+                            <div>activite</div>
+                            ))}
+
+                            {loading && <Loading/>}
+                        </Modal>
+                    }
+        </div>
+    )
+}
+
+export default EdtSession

front_end/src/components/loading.tsx

@@ -0,0 +1,10 @@
+function Loading(){
+
+    return(
+        <div>
+            <img className="loading" src="/loading.png"></img>
+        </div>
+    )
+}
+
+export default Loading

front_end/src/components/style/edt.css

@@ -33,7 +33,7 @@
   padding: 8px;
   /* background-color: var(--tint2); */
   border-radius: 20px;
-  height: 50px;
+  height: 30px;
   text-align: cedter;
   font-size: 1em;
 }
@@ -51,20 +51,24 @@
   background-color: var(--tint4);
   border-radius: 12px;
   padding: 8px;
-  height: 80px;
+}
+
+.edt_session:hover {
+  background-color: var(--tint2);
+}
+
+.edt_session:active {
+  background-color: var(--tint5);
+}
+
+.edt_date{
+  font-size: 0.75em;
 }
 
 .edt_button_week_select{
-  background-color: var(--tint3);
+  background-color: var(--tint2);
   color: var(--text);
   height: 40px;
   border-radius: 20px;
 }
 
-
-.edt_button{
-  background-color: var(--tint3);
-  color: var(--text);
-  height: 40px;
-  border-radius: 20px;
-}