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

détail d'une session de l'edt en cours

Browse Source
This commit is contained in:
trochas
2026-01-06 18:27:46 +01:00
parent 3ec0110aab
commit 7094373ca2
12 changed files with 173 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
front_end/public/Frisbyee_logo.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
front_end/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 44 KiB

2
front_end/public/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/Frisbyee_logo.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

BIN
front_end/public/loading.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

10
front_end/src/classes.tsx
View File

@@ -22,7 +22,7 @@ export class Coach extends User{
export class Session{ export class Session{
id!: number; id!: number;
name!: String; name!: String;
activites!: Activite[]; activites: Activite[] = [];
isRecurent! : Boolean; isRecurent! : Boolean;
creneau!: Date; creneau!: Date;
coach!: Coach; coach!: Coach;
@@ -50,12 +50,20 @@ export function getUserTest():User{
user.nom = "Emilien-Yee NootNoot"; user.nom = "Emilien-Yee NootNoot";
s1.creneau = new Date(); s1.creneau = new Date();
s1.id = 1; s1.id = 1;
s1.name = "Entrainement Frisbee"
var date2 = new Date(); var date2 = new Date();
date2.setDate(date2.getDate() + 2); date2.setDate(date2.getDate() + 2);
s2.creneau = date2; s2.creneau = date2;
s2.id = 2; s2.id = 2;
s2.name = "entraintement2"
s3.creneau = date2; s3.creneau = date2;
s3.id = 3; s3.id = 3;
s3.name = "entraintement3"
const a1:Activite = new Activite();
const a2:Activite = new Activite();
s1.activites.push(a1);
s1.activites.push(a2);
user.sessions.push(s1); user.sessions.push(s1);
user.sessions.push(s2); user.sessions.push(s2);
user.sessions.push(s3); user.sessions.push(s3);

34
front_end/src/components/Modal.tsx Normal file
View File

@@ -0,0 +1,34 @@
import {useEffect } from "react"
type ModalProps = {
isOpen: boolean
onClose: () => void
children: React.ReactNode
}
export function Modal({ isOpen, onClose, children }: ModalProps) {
if (!isOpen) return null
return (
<div
style={{
position: "fixed",
inset: 0,
backgroundColor: "rgba(0,0,0,0.25)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1000,
}}
onClick={onClose}
>
<div className="modal" onClick={(e) => e.stopPropagation()}
>
{children}
</div>
</div>
)
}

51
front_end/src/components/edt.tsx
View File

@@ -3,6 +3,26 @@ import { getUserTest, Session, User } from "../classes"
import { useLocalData } from "../context/useLocalData" import { useLocalData } from "../context/useLocalData"
import './style/edt.css'; import './style/edt.css';
import {updateSessionsOfUserAPI } from "../requetes"; import {updateSessionsOfUserAPI } from "../requetes";
import EdtSession from "./edt_session";
export 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;
}
export function hoursToString(date:Date){
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;
}
export const EDT =() =>{ export const EDT =() =>{
const {user,setUser} = useLocalData() const {user,setUser} = useLocalData()
@@ -68,33 +88,6 @@ export const EDT =() =>{
return newDate; 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.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;
}
function displaySession(session:Session){
const sDate = session.creneau;
return(
<div className="edt_session">
<div>{hoursToString(sDate)}</div>
{dateToString(sDate)}
<button className="edt_button">+</button>
</div>
)
}
return( return(
<div className="edt"> <div className="edt">
@@ -108,12 +101,12 @@ export const EDT =() =>{
<div className="edt_colonne"> <div className="edt_colonne">
<div className="edt_day_header"> <div className="edt_day_header">
<div> {week_days[index]} </div> <div> {week_days[index]} </div>
<div> {dateToString(getNextDay(week,index))} </div> <div className="edt_date"> {dateToString(getNextDay(week,index))} </div>
</div> </div>
<div className="edt_day_contedt"> <div className="edt_day_contedt">
{sessions.map((session,index2)=>( {sessions.map((session,index2)=>(
session.creneau.getDay()===num && session.creneau.getDay()===num &&
displaySession(session) <EdtSession session={session}/>
))} ))}
</div> </div>
</div> </div>

59
front_end/src/components/edt_session.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { useEffect, useState } from 'react';
import { Activite, Session } from '../classes';
import { dateToString, hoursToString } from './edt';
import './style/edt.css';
import { Modal } from './Modal';
import Loading from './loading';
type Props = {
session:Session;
}
function EdtSession({session}:Props){
const [open, setOpen] = useState<boolean>(false)
const [loading,setLoading] = useState<boolean>(false);
function handleOpen(): void {
setOpen(!open);
}
async function updateActivites(){
//TODO
//await updateActivitiesOfSessionAPI(session);
setLoading(false);
}
useEffect(() => {
if(open){
setLoading(true);
updateActivites()
}
},[open])
const sDate = session.creneau;
return(
<div>
<div className="edt_session" onClick={() => handleOpen()}>
<div className="edt_date">{hoursToString(sDate)}</div>
<div>{session.name}</div>
</div>
{open &&
<Modal isOpen={open} onClose={() => setOpen(false)}>
<div>{session.name}</div>
<div>{hoursToString(sDate)}</div>
<div>{dateToString(sDate)}</div>
{session.activites.map((activite,index)=>(
<div>activite</div>
))}
{loading && <Loading/>}
</Modal>
}
</div>
)
}
export default EdtSession

10
front_end/src/components/loading.tsx Normal file
View File

@@ -0,0 +1,10 @@
function Loading(){
return(
<div>
<img className="loading" src="/loading.png"></img>
</div>
)
}
export default Loading

24
front_end/src/components/style/edt.css
View File

@@ -33,7 +33,7 @@
padding: 8px; padding: 8px;
/* background-color: var(--tint2); */ /* background-color: var(--tint2); */
border-radius: 20px; border-radius: 20px;
height: 50px; height: 30px;
text-align: cedter; text-align: cedter;
font-size: 1em; font-size: 1em;
} }
@@ -51,20 +51,24 @@
background-color: var(--tint4); background-color: var(--tint4);
border-radius: 12px; border-radius: 12px;
padding: 8px; padding: 8px;
height: 80px; }
.edt_session:hover {
background-color: var(--tint2);
}
.edt_session:active {
background-color: var(--tint5);
}
.edt_date{
font-size: 0.75em;
} }
.edt_button_week_select{ .edt_button_week_select{
background-color: var(--tint3); background-color: var(--tint2);
color: var(--text); color: var(--text);
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
} }
.edt_button{
background-color: var(--tint3);
color: var(--text);
height: 40px;
border-radius: 20px;
}

22
front_end/src/index.css
View File

@@ -4,6 +4,7 @@
--tint2: #16181d; /* 10% */ --tint2: #16181d; /* 10% */
--tint3: #21252b; /* 15% */ --tint3: #21252b; /* 15% */
--tint4: #2c313a; /* 20% */ --tint4: #2c313a; /* 20% */
--tint5: #373d48; /* 25% */
--text: #FFFFFF; --text: #FFFFFF;
@@ -20,6 +21,7 @@
--tint2: #e8e4e3; /* 90% */ --tint2: #e8e4e3; /* 90% */
--tint3: #ddd6d5; /* 85% */ --tint3: #ddd6d5; /* 85% */
--tint4: #d2c8c6; /* 80% */ --tint4: #d2c8c6; /* 80% */
--tint5: #c6bab8; /* 75% */
--text: #000000; --text: #000000;
--text2:#FFFFFF; --text2:#FFFFFF;
@@ -45,3 +47,23 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
.modal{
background-color: var(--tint2);
padding: 10px;
border-radius: 20px;
min-width: 200px;
min-height: 100px;
}
.loading{
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

4
front_end/src/requetes.tsx
View File

@@ -48,11 +48,11 @@ export async function updateSessionsOfUserAPI(user:Coach|Athlete, min: Date|null
export async function updateActivitiesOfSessionAPI(session:Session){ export async function updateActivitiesOfSessionAPI(session:Session){
try { try {
const response = await api.get<Activite[]>(`/sessions/${session.id}/activities`); const response = await api.get<Activite[]>(`/sessions/${session.id}/activities`);
return response.data; session.activites = response.data;
} catch (error) { } catch (error) {
console.error("Error fetching activities for session:", error); console.error("Error fetching activities for session:", error);
return [];
} }
} }
export async function subscribeSessionAPI(user:User, session:Session):Promise<boolean>{ export async function subscribeSessionAPI(user:User, session:Session):Promise<boolean>{