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

ent en cours

Browse Source
This commit is contained in:
trochas
2026-01-06 15:06:48 +01:00
parent defefd2c79
commit d5ea854dcb
13 changed files with 256 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
front_end/src/components/SwitchThemeColor.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { useState,useEffect } from 'react';
import './style/SwitchThemeColor.css';
const SwitchThemeColor = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
/*
Inverse le thème actuel
*/
function switchTheme(){
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light'
//const newTheme = window.matchMedia("(prefers-color-scheme: dark)").matches? "dark": "light";
setTheme(newTheme)
document.documentElement.setAttribute('data-theme', newTheme);
}
/*
détecte automatiquement le thème du navigateur au démarrage
*/
useEffect(() => {
const newTheme = window.matchMedia("(prefers-color-scheme: dark)").matches? "dark": "light";
setTheme(newTheme)
document.documentElement.setAttribute('data-theme', newTheme);
}, []);
return (
<div>
<button className="ButtonTheme" onClick={switchTheme}>
{theme === 'light' ? '𖤓' : '☾'}
</button>
</div>
);
};
export default SwitchThemeColor;

5
front_end/src/components/ent.css
View File

@@ -1,5 +0,0 @@
.ent_colonne {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
}

134
front_end/src/components/ent.tsx
View File

@@ -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>

11
front_end/src/components/style/SwitchThemeColor.css Normal file
View File

@@ -0,0 +1,11 @@
.ButtonTheme{
height: 35px;
width: 39px;
color: var(--text);
background-color: var(--tint3);
border-radius: 10px;
margin: 0px;
font-size: 20px;
display: inline;
border-color: var(--accent1);
}

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

@@ -0,0 +1,46 @@
.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;
}