diff --git a/front_end/public/Frisbyee_logo.ico b/front_end/public/Frisbyee_logo.ico deleted file mode 100644 index 62f9ce5..0000000 Binary files a/front_end/public/Frisbyee_logo.ico and /dev/null differ diff --git a/front_end/public/favicon.ico b/front_end/public/favicon.ico index a11777c..62f9ce5 100644 Binary files a/front_end/public/favicon.ico and b/front_end/public/favicon.ico differ diff --git a/front_end/public/index.html b/front_end/public/index.html index fa76032..aa069f2 100644 --- a/front_end/public/index.html +++ b/front_end/public/index.html @@ -2,7 +2,7 @@ - + void + children: React.ReactNode +} + +export function Modal({ isOpen, onClose, children }: ModalProps) { + + + + if (!isOpen) return null + + return ( +
+
e.stopPropagation()} + > + {children} +
+
+ ) +} diff --git a/front_end/src/components/edt.tsx b/front_end/src/components/edt.tsx index 4ebc37d..3277335 100644 --- a/front_end/src/components/edt.tsx +++ b/front_end/src/components/edt.tsx @@ -3,6 +3,26 @@ import { getUserTest, Session, User } from "../classes" import { useLocalData } from "../context/useLocalData" import './style/edt.css'; 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 =() =>{ const {user,setUser} = useLocalData() @@ -68,33 +88,6 @@ export const EDT =() =>{ 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( -
-
{hoursToString(sDate)}
- {dateToString(sDate)} - -
- ) - } return(
@@ -108,12 +101,12 @@ export const EDT =() =>{
{week_days[index]}
-
{dateToString(getNextDay(week,index))}
+
{dateToString(getNextDay(week,index))}
{sessions.map((session,index2)=>( session.creneau.getDay()===num && - displaySession(session) + ))}
diff --git a/front_end/src/components/edt_session.tsx b/front_end/src/components/edt_session.tsx new file mode 100644 index 0000000..66d0b0c --- /dev/null +++ b/front_end/src/components/edt_session.tsx @@ -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(false) + const [loading,setLoading] = useState(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( +
+
handleOpen()}> +
{hoursToString(sDate)}
+
{session.name}
+
+ {open && + setOpen(false)}> +
{session.name}
+
{hoursToString(sDate)}
+
{dateToString(sDate)}
+ {session.activites.map((activite,index)=>( +
activite
+ ))} + + {loading && } + + } +
+ ) +} + +export default EdtSession diff --git a/front_end/src/components/loading.tsx b/front_end/src/components/loading.tsx new file mode 100644 index 0000000..6217d8b --- /dev/null +++ b/front_end/src/components/loading.tsx @@ -0,0 +1,10 @@ +function Loading(){ + + return( +
+ +
+ ) +} + +export default Loading diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css index 14cc949..4c4d274 100644 --- a/front_end/src/components/style/edt.css +++ b/front_end/src/components/style/edt.css @@ -33,7 +33,7 @@ padding: 8px; /* background-color: var(--tint2); */ border-radius: 20px; - height: 50px; + height: 30px; text-align: cedter; font-size: 1em; } @@ -51,20 +51,24 @@ background-color: var(--tint4); border-radius: 12px; 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{ - background-color: var(--tint3); + background-color: var(--tint2); color: var(--text); height: 40px; border-radius: 20px; } - -.edt_button{ - background-color: var(--tint3); - color: var(--text); - height: 40px; - border-radius: 20px; -} \ No newline at end of file diff --git a/front_end/src/index.css b/front_end/src/index.css index 3475b34..f82f209 100644 --- a/front_end/src/index.css +++ b/front_end/src/index.css @@ -4,6 +4,7 @@ --tint2: #16181d; /* 10% */ --tint3: #21252b; /* 15% */ --tint4: #2c313a; /* 20% */ + --tint5: #373d48; /* 25% */ --text: #FFFFFF; @@ -20,6 +21,7 @@ --tint2: #e8e4e3; /* 90% */ --tint3: #ddd6d5; /* 85% */ --tint4: #d2c8c6; /* 80% */ + --tint5: #c6bab8; /* 75% */ --text: #000000; --text2:#FFFFFF; @@ -45,3 +47,23 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 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); + } +} \ No newline at end of file diff --git a/front_end/src/requetes.tsx b/front_end/src/requetes.tsx index d852aa9..1b13c48 100644 --- a/front_end/src/requetes.tsx +++ b/front_end/src/requetes.tsx @@ -48,11 +48,11 @@ export async function updateSessionsOfUserAPI(user:Coach|Athlete, min: Date|null export async function updateActivitiesOfSessionAPI(session:Session){ try { const response = await api.get(`/sessions/${session.id}/activities`); - return response.data; + session.activites = response.data; } catch (error) { console.error("Error fetching activities for session:", error); - return []; } + } export async function subscribeSessionAPI(user:User, session:Session):Promise{