124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { getUserTest, Session, User } from "../classes"
|
|
import { useLocalData } from "../context/useLocalData"
|
|
import './style/ent.css';
|
|
import {updateSessionsOfUser } from "../requetes";
|
|
|
|
export const ENT =() =>{
|
|
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.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_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>
|
|
)
|
|
}
|
|
|
|
export default ENT
|