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

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
tuanvu
2026-01-06 16:15:30 +01:00
parent ad5ca2189b 7b2b864d86
commit 3ec0110aab
5 changed files with 106 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front_end/src/App.tsx
View File

@@ -4,7 +4,7 @@ import { ReactKeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak'
import Login from './components/login';
import { LocalDataProvider } from './provider/LocalDataProvider';
import ENT from './components/ent';
import EDT from './components/edt';
import SwitchThemeColor from './components/SwitchThemeColor';
import CreateSession from './components/createSession'
@@ -22,7 +22,7 @@ function App() {
<SwitchThemeColor/>
<h1>Frisbyee</h1>
<Login/>
<ENT/>
<EDT/>
<CreateSession/>
</div>
</LocalDataProvider>

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;
}

18
front_end/src/index.css
View File

@@ -1,8 +1,9 @@
[data-theme='dark']{
--tint1: #000000;
--tint2: #191c20;
--tint3: #282c34;
--tint4: rgb(53, 59, 72);
--tint0: #000000; /* 0% */
--tint1: #0b0c0e; /* 5% */
--tint2: #16181d; /* 10% */
--tint3: #21252b; /* 15% */
--tint4: #2c313a; /* 20% */
--text: #FFFFFF;
@@ -14,10 +15,11 @@
}
[data-theme='light']{
--tint1: #FFFFFF;
--tint2: #E8E8EE;
--tint3: #D0D0DD;
--tint4: rgb(181, 181, 194);
--tint0: #FFFFFF; /* 100% */
--tint1: #f4f1f1; /* 95% */
--tint2: #e8e4e3; /* 90% */
--tint3: #ddd6d5; /* 85% */
--tint4: #d2c8c6; /* 80% */
--text: #000000;
--text2:#FFFFFF;