vuminh224/hackathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edt (et pas ent) toujours en cours

Browse Source
This commit is contained in:
trochas
2026-01-06 16:05:41 +01:00
parent 39d603e7e9
commit 7b2b864d86
5 changed files with 106 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
front_end/src/components/ent.tsx → front_end/src/components/edt.tsx
View File

@@ -1,10 +1,10 @@
import { useEffect, useState } from "react"
import { getUserTest, Session, User } from "../classes"
import { useLocalData } from "../context/useLocalData"
import './style/ent.css';
import './style/edt.css';
import {updateSessionsOfUserAPI } from "../requetes";
export const ENT =() =>{
export const EDT =() =>{
const {user,setUser} = useLocalData()
const [sessions, setSessions] = useState<Session[]>([])
const [week,setWeek] = useState<Date>(getFirstDay(new Date()));
@@ -78,8 +78,8 @@ export const ENT =() =>{
}
function hoursToString(date:Date){
const hh_prefix = date.getDate()<10 ? "0" : "";
const mm_prefix = date.getMonth()+1<10 ? "0" : "";
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;
@@ -88,30 +88,34 @@ export const ENT =() =>{
function displaySession(session:Session){
const sDate = session.creneau;
return(
<div className="ent_session">
<div>{sDate.getHours()+"h"+sDate.getMinutes()}</div>
<div className="edt_session">
<div>{hoursToString(sDate)}</div>
{dateToString(sDate)}
<div>{session.id}</div>
<button className="edt_button">+</button>
</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 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="ent_colonnes">
<div className="edt_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 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>
))}
@@ -120,4 +124,4 @@ export const ENT =() =>{
)
}
export default ENT
export default EDT

70
front_end/src/components/style/edt.css Normal file
View File

@@ -0,0 +1,70 @@
.edt{
justify-contedt: cedter;
background-color: var(--tint1);
border-radius: 30px;
padding: 10px;
}
.edt_header{
justify-contedt: cedter;
display: grid;
grid-template-columns: repeat(2, 1fr);
/* background-color: #0000FF; */
padding-bottom: 10px;
gap: 30%;
}
.edt_colonnes {
display: grid;
align-items: flex-start;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
color: var(--text);
/* background-color: #00FF00; */
width: 100%;
}
.edt_colonne {
display: grid;
background-color: var(--tint3);
border-radius: 20px;
}
.edt_day_header{
padding: 8px;
/* background-color: var(--tint2); */
border-radius: 20px;
height: 50px;
text-align: cedter;
font-size: 1em;
}
.edt_day_contedt{
display: grid;
gap: 8px;
padding: 8px;
border-radius: 20px;
}
.edt_session {
gap: 8px;
background-color: var(--tint4);
border-radius: 12px;
padding: 8px;
height: 80px;
}
.edt_button_week_select{
background-color: var(--tint3);
color: var(--text);
height: 40px;
border-radius: 20px;
}
.edt_button{
background-color: var(--tint3);
color: var(--text);
height: 40px;
border-radius: 20px;
}

46
front_end/src/components/style/ent.css
View File

@@ -1,46 +0,0 @@
.ent{
justify-content: center;
/* background-color: #FF0000; */
padding: 10px;
}
.ent_header{
justify-content: center;
display: grid;
grid-template-columns: repeat(2, 1fr);
/* background-color: #0000FF; */
padding-bottom: 10px;
gap: 30%;
}
.ent_colonnes {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
color: var(--text);
/* background-color: #00FF00; */
width: 100%;
}
.ent_lines {
display: grid;
gap: 16px;
background-color: var(--tint2);
padding: 8px;
border-radius: 20px;
}
.ent_session {
gap: 5px;
background-color: var(--tint3);
border-radius: 20px;
padding: 8px;
}
.ent_button{
background-color: var(--tint3);
color: var(--text);
height: 30px;
border-radius: 20px;
}