diff --git a/front_end/src/App.css b/front_end/src/App.css index c0547ce..4108493 100644 --- a/front_end/src/App.css +++ b/front_end/src/App.css @@ -54,6 +54,12 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } +.padding{ + padding: 10px +} + + + code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; @@ -69,6 +75,14 @@ code { background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%); } +.composant-container{ + background-color: var(--tint2); + border-radius: 30px; + padding: 10px; + border: 2px solid var(--tint4); + box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); +} + /* Header / Navigation */ .app-header { background-color: var(--tint1); @@ -145,7 +159,7 @@ input[type="time"], input[type="search"], input[type="datetime-local"], textarea { - background-color: var(--tint2); + background-color: var(--tint3); color: var(--text); border: 2px solid var(--tint5); border-radius: 8px; @@ -379,9 +393,9 @@ button.add:hover, table { width: 100%; border-collapse: collapse; - background-color: var(--tint1); border-radius: 12px; overflow: hidden; + width: fit-content; } thead { @@ -402,9 +416,6 @@ td { color: var(--text); } -tr:hover { - background-color: var(--tint2); -} /* Lists */ ul, ol { diff --git a/front_end/src/components/StatsAthlete.tsx b/front_end/src/components/StatsAthlete.tsx index e2f136f..641652d 100644 --- a/front_end/src/components/StatsAthlete.tsx +++ b/front_end/src/components/StatsAthlete.tsx @@ -4,10 +4,9 @@ import { calculStatsAthlete, niveauAlerte, StatsAthlete } from "../utils/athlete interface AthleteStatsProps { athlete: Athlete; - sessions: Session[]; } -function StatAthlete({ athlete, sessions }: AthleteStatsProps) { +function StatAthlete({ athlete }: AthleteStatsProps) { const [dateDebut, setDateDebut] = React.useState(new Date()); const [dateFin, setDateFin] = React.useState(new Date()); const [seuilCritique, setSeuilCritique] = React.useState(0); @@ -20,49 +19,34 @@ function StatAthlete({ athlete, sessions }: AthleteStatsProps) { }; const handleCalculerStats = () => { - const statsCalculees = calculStatsAthlete(sessions, athlete, dateDebut, dateFin); + const statsCalculees = calculStatsAthlete(athlete.sessions, athlete, dateDebut, dateFin); setStats(statsCalculees); }; return (
- - - - - - - +
Nb Session : {athlete.sessions.length};
+ + + + + + + + + + + + + + + + + + + + +
Début : setDateDebut(new Date(e.target.value))}/>
Fin : setDateFin(new Date(e.target.value))}/>
Seuil critique : setSeuilCritique(Number(e.target.value))}/>
Seuil max : setSeuilMax(Number(e.target.value))}/>
diff --git a/front_end/src/components/createSession.tsx b/front_end/src/components/createSession.tsx index 74fb4a7..a4937ac 100644 --- a/front_end/src/components/createSession.tsx +++ b/front_end/src/components/createSession.tsx @@ -3,6 +3,7 @@ import { Session, User, Coach, Activite, Groupe } from "../classes"; import { useLocalData } from "../context/useLocalData"; import { activiteService, sessionService } from "../api"; import { createSessionAPI, postSession } from "../requetes"; +import './style/createSession.css'; export const CreateSession = () => { const {user} = useLocalData(); @@ -64,41 +65,48 @@ export const CreateSession = () => { return ( -
+

Créer une session

- - - - - -

Ajouter une activité :

- - - - + + + + + + + + + + + + + + + + + + + + +
Nom: setName(e.target.value)} />
Groupe:
Creneau: setCreneau(new Date(e.target.value))} />
Duree (minutes): setDuree(Number(e.target.value))} />
Recurrent: setIsRecurent(e.target.checked)} />
+
+

Ajouter une activité :

+ + + + + + + + + + + + + + +
Nom de l'activitée: setActiviteNom(e.target.value)} />
Theme: setActiviteTheme(e.target.value)} />
Duree (minutes): setActiviteDuree(Number(e.target.value))} />
+ +
    {activities.map((act, idx) => ( diff --git a/front_end/src/components/edt.tsx b/front_end/src/components/edt.tsx index e22286b..18ad6e9 100644 --- a/front_end/src/components/edt.tsx +++ b/front_end/src/components/edt.tsx @@ -130,7 +130,7 @@ export const EDT =() =>{ } return( -
    +
    @@ -139,8 +139,8 @@ export const EDT =() =>{
    {loading && }
    {week_days_nums.map((num,index)=>( -
    -
    +
    +
    {week_days[index]}
    {dateToString(getNextDay(week,index))}
    diff --git a/front_end/src/components/object/user.tsx b/front_end/src/components/object/user.tsx index 38dbb0d..49c68c0 100644 --- a/front_end/src/components/object/user.tsx +++ b/front_end/src/components/object/user.tsx @@ -4,62 +4,48 @@ import { dateToString, hoursToString } from '../edt'; import '../style/objectList.css'; import { Modal } from '../Modal'; import Loading from '../loading'; -import {delay} from "../../requetes"; +import {delay, getSessionsOfUserAPI} from "../../requetes"; import CreateActivite from '../createActivite'; import { useLocalData } from '../../context/useLocalData'; import ObjectSession from './session'; import StatAthlete from '../StatsAthlete'; type Props = { - admin?:Admin|null; - athlete?:Athlete|null; - coach?:Coach|null; + user:User; + } -function ObjectUser({admin=null,athlete=null,coach=null}:Props){ +function ObjectUser({user}:Props){ - const {user,setUser} = useLocalData() - const[user2,setUser2]= useState(getUser()); + //const {user,setUser} = useLocalData()); const [open, setOpen] = useState(false); const [open2, setOpen2] = useState(false); const [loading,setLoading] = useState(false); const [sessions,setSessions] = useState([]); - function getUser(): User{ - if(admin!=null) return admin; - if(athlete!=null) return athlete; - if(coach!=null) return coach; - else return new User(); - } function handleOpen(): void { setOpen(!open); } function handleDeleteSession(session:Session): void { - if(athlete!==null){ - athlete.sessions.splice(athlete.sessions.indexOf(session), 1); - setSessions([...athlete.sessions]) + if(user instanceof Coach || user instanceof Athlete){ + user.sessions.splice(user.sessions.indexOf(session), 1); + setSessions([...user.sessions]) } - if(coach!==null){ - coach.sessions.splice(coach.sessions.indexOf(session), 1); - setSessions([...coach.sessions]) - } } function handleAddSession(): void { - if(athlete!==null){ + if(user instanceof Athlete){ setOpen2(true) } } async function updateSession(){ - if(athlete!==null){ - //TODO - await delay(2000); - //await update ... (athlete); + if(user instanceof Athlete || user instanceof Coach){ + user.sessions = await getSessionsOfUserAPI(user); setLoading(false); } } @@ -74,11 +60,11 @@ function ObjectUser({admin=null,athlete=null,coach=null}:Props){ useEffect(() => { if(!loading){ - if(athlete!==null){ - setSessions([...athlete.sessions]) + if(user instanceof Athlete){ + setSessions([...user.sessions]) } - if(coach!==null){ - setSessions([...coach.sessions]) + if(user instanceof Coach){ + setSessions([...user.sessions]) } } },[loading]) @@ -86,13 +72,13 @@ function ObjectUser({admin=null,athlete=null,coach=null}:Props){ function returnSession(session: Session|null){ if(session!==null){ - if(athlete!==null){ - athlete.sessions.push(session); - setSessions([...athlete.sessions]) + if(user instanceof Athlete){ + user.sessions.push(session); + setSessions([...user.sessions]) } - if(coach!==null){ - coach.sessions.push(session); - setSessions([...coach.sessions]) + if(user instanceof Coach){ + user.sessions.push(session); + setSessions([...user.sessions]) } } setOpen2(false); @@ -101,23 +87,29 @@ function ObjectUser({admin=null,athlete=null,coach=null}:Props){ return(
    handleOpen()}> -
    {user2.nom}
    +
    {user.nom}
    {/*
    {user2.role}
    */}
    {open && setOpen(false)}>
    -
    {user2.nom}
    -
    {user2.email}
    -
    -
    Sessions :
    - {/* TODO */} +
    {user.prenom}
    +
    {user.nom}
    + {(user instanceof Athlete || user instanceof Coach) && +
    +
    +
    Sessions :
    + {user.sessions.map((session,index)=>( + + ))} +
    +
    + } -
    - {athlete !== null && ( + {user instanceof Athlete && (
    - +
    )}
    diff --git a/front_end/src/components/ressourcePanel.tsx b/front_end/src/components/ressourcePanel.tsx index 785423e..8216402 100644 --- a/front_end/src/components/ressourcePanel.tsx +++ b/front_end/src/components/ressourcePanel.tsx @@ -70,7 +70,7 @@ import ObjectLigne from "./object/lignes"; return ( -
    +
    {(user instanceof Admin || user instanceof Coach) &&
    @@ -98,7 +98,7 @@ import ObjectLigne from "./object/lignes";
    {value==="athletes" && ( allAthletes.map((athlete) => ( - + )) )} {value==="activites" && ( @@ -108,7 +108,7 @@ import ObjectLigne from "./object/lignes"; )} {value==="coachs" && ( allCoachs.map((coach) => ( - + )) )} {value==="sessions" && ( diff --git a/front_end/src/components/style/createSession.css b/front_end/src/components/style/createSession.css new file mode 100644 index 0000000..89000af --- /dev/null +++ b/front_end/src/components/style/createSession.css @@ -0,0 +1,5 @@ +.createActivite{ + background: var(--tint1); + padding: 15px; + border-radius: 15px; +} \ No newline at end of file diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css index f6c4d44..642b743 100644 --- a/front_end/src/components/style/edt.css +++ b/front_end/src/components/style/edt.css @@ -1,9 +1,8 @@ .edt{ - justify-content: center; - background-color: var(--tint1); + background-color: var(--tint2); border-radius: 30px; padding: 10px; - border: 2px solid var(--green-primary); /* Bordure verte */ + border: 2px solid var(--tint4); box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); } @@ -40,10 +39,6 @@ transition: all 0.3s ease; } -.edt_colonne:hover { - border-color: var(--green-primary); - box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); -} .edt_day_header{ font-size: clamp(5px, 1vw, 18px); @@ -52,12 +47,13 @@ height: fit-content; text-align: center; font-size: 1em; - background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary)); + background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark)); font-weight: 600; } .today{ - border: 2px solid var(--green-primary) ; + background: linear-gradient(135deg, var(--green-primary), var(--green-dark)); + color: #FFFFFF; } .edt_day_content{ diff --git a/front_end/src/components/style/objectList.css b/front_end/src/components/style/objectList.css index bd9e763..09028d3 100644 --- a/front_end/src/components/style/objectList.css +++ b/front_end/src/components/style/objectList.css @@ -6,6 +6,16 @@ border-radius: 20px; } +.list_object_modal{ + display: grid; + gap:10px; + background-color: var(--tint1); + padding: 10px; + border-radius: 20px; + max-height: 200px; + overflow-y: auto; +} + .object { font-size: clamp(1px, 8cqi, 18px);