edt (et pas ent) toujours en cours

front_end/src/components/edt.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react"
+import { getUserTest, Session, User } from "../classes"
+import { useLocalData } from "../context/useLocalData"
+import './style/edt.css';
+import {updateSessionsOfUserAPI } from "../requetes";
+
+export const EDT =() =>{
+    const {user,setUser} = useLocalData()
+    const [sessions, setSessions] = useState<Session[]>([])
+    const [week,setWeek] = useState<Date>(getFirstDay(new Date()));
+    const week_days:String[] = ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
+    const week_days_nums:number[] = [1,2,3,4,5,6,0];
+
+
+
+    function loadSessions(date:Date){
+        var maxDate = getNextDay(date,6)
+
+        var newWeek: Session[] = []
+        user.sessions.forEach(session => {
+            if(session.creneau >= date && session.creneau <= maxDate){
+                newWeek.push(session);
+            }
+        });
+        setSessions(newWeek);
+    }
+
+    function changeWeek(date:Date){
+        setWeek(date);
+        loadSessions(date)
+    }
+
+    useEffect(() => {
+        updateWeek();
+    },[week])
+    
+    async function updateWeek(){
+        //TODO updateSession
+        //await updateSessionsOfUser(user,null,null);
+        loadSessions(week);
+        setUser(getUserTest())
+    }
+
+
+    function handlePrev(): void {
+        changeWeek(getNextDay(week,-7));
+    }
+
+    function handleNext(): void {
+        changeWeek(getNextDay(week,7));
+    }
+
+    function getFirstDay(date:Date):Date{
+        const numWeek = date.getDay();
+        var firstDate:Date;
+        if(numWeek == 0){
+            firstDate = getNextDay(date,-6);
+        }
+        else{
+            firstDate = getNextDay(date,-numWeek+1);
+        }
+        return firstDate;
+    }
+
+    function getNextDay(date:Date,nb:number):Date{
+        var newDate = new Date(date);
+        newDate.setDate(newDate.getDate() + nb);
+        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"> 
+            <div className="edt_header">
+                <button className="edt_button_week_select" onClick={() =>handlePrev()}>Prev</button>
+                <button className="edt_button_week_select" onClick={() => handleNext()}>Next</button>
+            </div>
+            <div className="edt_colonnes">
+
+                {week_days_nums.map((num,index)=>(
+                    <div className="edt_colonne">
+                        <div className="edt_day_header">
+                            <div> {week_days[index]} </div>
+                            <div> {dateToString(getNextDay(week,index))} </div>
+                        </div>
+                        <div className="edt_day_contedt">
+                        {sessions.map((session,index2)=>(
+                            session.creneau.getDay()===num &&
+                            displaySession(session)
+                        ))}
+                        </div>
+                    </div>
+                ))}
+
+            </div>
+        </div>
+    )
+}
+
+export default EDT