ent en cours

front_end/src/components/ent.tsx

@@ -1,63 +1,119 @@
-import { useState } from "react"
-import { Session, User } from "../classes"
+import { useEffect, useState } from "react"
+import { getUserTest, Session, User } from "../classes"
 import { useLocalData } from "../context/useLocalData"
-import './ent.css';
-//import {updateSessionsOfUser } from "../requetes";
+import './style/ent.css';
+import {updateSessionsOfUser } from "../requetes";
 
 export const ENT =() =>{
-    const {user} = useLocalData()
+    const {user,setUser} = useLocalData()
     const [sessions, setSessions] = useState<Session[]>([])
-    const [week,setWeek] = useState<Date>(new Date());
+    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 updateSessions(){
+
+    function loadSessions(date:Date){
+        var maxDate = getNextDay(date,6)
+
         var newWeek: Session[] = []
         user.sessions.forEach(session => {
-            newWeek.push(session);
+            if(session.creneau >= date && session.creneau <= maxDate){
+                newWeek.push(session);
+            }
         });
         setSessions(newWeek);
     }
 
-    function changeWeek(){
-        updateSessions()
-        setWeek(new Date());
+    function changeWeek(date:Date){
+        setWeek(date);
+        loadSessions(date)
     }
 
+    useEffect(() => {
+        updateWeek();
+    },[week])
+    
     async function updateWeek(){
         //TODO updateSession
         //await updateSessionsOfUser(user,null,null);
-        var newWeek: Session[] = []
-        user.sessions.forEach(session => {
-            newWeek.push(session);
-        });
-        setSessions(newWeek);
+        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.getDate()<10 ? "0" : "";
+        const mm_prefix = date.getMonth()+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="ent_session">
+                <div>{sDate.getHours()+"h"+sDate.getMinutes()}</div>
+                {dateToString(sDate)}
+
+                <div>{session.id}</div>
+            </div>
+        )
     }
 
     return(
         <div className="ent"> 
-            <div className="ent_colonne">
-                <div>
-                    Lundi
-                </div>
-                <div>
-                    Mardi
-                    
-                </div>
-                <div>
-                    Mercredi
-                </div>
-                <div>
-                    Jeudi
-                </div>
-                <div>
-                    Vendredi
-                </div>
-                <div>
-                    Samedi
-                </div>
-                <div>
-                    Dimanche
-                </div>
+            <div className="ent_header">
+                <button className="ent_button" onClick={() =>handlePrev()}>Prev</button>
+                <button className="ent_button" onClick={() => handleNext()}>Next</button>
+            </div>
+            <div className="ent_colonnes">
+
+                {week_days_nums.map((num,index)=>(
+                    <div className="ent_lines">
+                        {week_days[index]} {dateToString(getNextDay(week,index))}
+                            {sessions.map((session,index2)=>(
+                                session.creneau.getDay()===num &&
+                                displaySession(session)
+                            ))}
+                    </div>
+                ))}
 
             </div>
         </div>