fix style

2026-01-10 19:50:41 +01:00
parent e85f76c810
commit 62b9231d38
9 changed files with 144 additions and 138 deletions
--- 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 {
--- 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 (
    <div className="creneau-stats">
-      <label>
-        Début :
-        <input
-          type="datetime-local"
-          value={dateToDatetimeLocal(dateDebut)}
-          onChange={e => setDateDebut(new Date(e.target.value))}
-        />
-      </label>
-      
-      <label>
-        Fin :
-        <input
-          type="datetime-local"
-          value={dateToDatetimeLocal(dateFin)}
-          onChange={e => setDateFin(new Date(e.target.value))}
-        />
-      </label>
-      
-      <label>
-        Seuil critique :
-        <input
-          type="number"
-          value={seuilCritique}
-          min={1}
-          onChange={e => setSeuilCritique(Number(e.target.value))}
-        />
-      </label>
-      
-      <label>
-        Seuil max :
-        <input
-          type="number"
-          value={seuilMax}
-          min={1}
-          onChange={e => setSeuilMax(Number(e.target.value))}
-        />
-      </label>
+      <div>Nb Session : {athlete.sessions.length};</div>
+      <table>
+        <tr>
+          <th>Début :</th>
+          <th><input type="datetime-local"  value={dateToDatetimeLocal(dateDebut)} onChange={e => setDateDebut(new Date(e.target.value))}/></th>
+        </tr>
+        
+        <tr>
+          <th>Fin :</th>
+          <th><input type="datetime-local" value={dateToDatetimeLocal(dateFin)} onChange={e => setDateFin(new Date(e.target.value))}/></th>
+        </tr>
+        
+        <tr>
+          <th>Seuil critique :</th>
+          <th><input type="number" value={seuilCritique} min={1} onChange={e => setSeuilCritique(Number(e.target.value))}/></th>
+        </tr>
+        
+        <tr>
+          <th>Seuil max :</th>
+          <th><input type="number" value={seuilMax} min={1} onChange={e => setSeuilMax(Number(e.target.value))}/></th>
+        </tr>
+      </table>

      <button onClick={handleCalculerStats}>Calculer les statistiques</button>

--- 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 (
-        <div className="ent">
+        <div className="composant-container">
            <h2>Créer une session</h2>
-            <label>
-                Nom:
-                <input type="text" value={name} onChange={e => setName(e.target.value)} />
-            </label>
-            <label>
-                Groupe:
-            </label>
-            <label>
-                Creneau:
-                <input type="datetime-local" value={creneau.toISOString().slice(0, 16)} onChange={e => setCreneau(new Date(e.target.value))} />
-            </label>
-            <label>
-                Duree (minutes):
-                <input type="number" value={duree} onChange={e => setDuree(Number(e.target.value))} />
-            </label>
-            <label>
-                Recurrent:
-                <input type="checkbox" checked={isRecurent} onChange={e => setIsRecurent(e.target.checked)} />
-            </label>
-            <h3>Ajouter une activité : </h3>
-            <label>
-                Nom de l'activitée:
-                <input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} />
-            </label>
-            <label>
-                Theme:
-                <input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} />
-            </label>
-            <label>
-                Duree (minutes):
-                <input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} />
-            </label>
-            <button type="button" onClick={addAcitivte}>Ajouter</button>
+            <table>
+                <tr>
+                    <th>Nom:</th>
+                    <th><input type="text" value={name} onChange={e => setName(e.target.value)} /></th>
+                </tr>
+                <tr>
+                    <th>Groupe:</th>
+                </tr>
+                <tr>
+                    <th>Creneau:</th>
+                    <th><input type="datetime-local" value={creneau.toISOString().slice(0, 16)} onChange={e => setCreneau(new Date(e.target.value))} /></th>
+                </tr>
+                <tr>
+                    <th>Duree (minutes):</th>
+                    <th><input type="number" value={duree} onChange={e => setDuree(Number(e.target.value))} /></th>
+                </tr>
+                <tr>
+                    <th>Recurrent:</th>
+                    <th><input type="checkbox" checked={isRecurent} onChange={e => setIsRecurent(e.target.checked)} /></th>
+                </tr>
+            </table>
+            <div className="createActivite">
+                <h3>Ajouter une activité : </h3>
+
+                <table>
+                    <tr>
+                        <th>Nom de l'activitée:</th>
+                        <th><input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} /></th>
+                    </tr>
+                    <tr>
+                        <th>Theme:</th>
+                        <th><input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} /></th>
+                    </tr>
+                    <tr>
+                        <th>Duree (minutes):</th>
+                        <th><input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} /></th>
+                    </tr>
+                </table>
+                <button type="button" onClick={addAcitivte}>Ajouter</button>
+            </div>

            <ul>
                {activities.map((act, idx) => (
--- a/front_end/src/components/edt.tsx
+++ b/front_end/src/components/edt.tsx
@@ -130,7 +130,7 @@ export const EDT =() =>{
    }

    return(
-        <div className="edt">
+        <div className="composant-container">
            <div className="edt_header">
                <button className="edt_button_week_select" onClick={() =>handlePrev()}>Prev</button>
                <button onClick={()=>refresh()}>Actualiser</button>
@@ -139,8 +139,8 @@ export const EDT =() =>{
            <div className="edt_colonnes">
                <div className="top_left_loading">{loading && <Loading/>}</div>
                {week_days_nums.map((num,index)=>(
-                    <div className={`edt_colonne ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
-                        <div className="edt_day_header">
+                    <div className={`edt_colonne`}>
+                        <div className={`edt_day_header ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
                            <div> {week_days[index]} </div>
                            <div className="edt_date"> {dateToString(getNextDay(week,index))} </div>
                        </div>
--- 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<User>(getUser());
+    //const {user,setUser} = useLocalData());
    const [open, setOpen] = useState<boolean>(false);
    const [open2, setOpen2] = useState<boolean>(false);
    const [loading,setLoading] = useState<boolean>(false);
    const [sessions,setSessions] = useState<Session[]>([]);

-    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(
        <div>
            <div className="object" onClick={() => handleOpen()}>
-                    <div>{user2.nom}</div>
+                    <div>{user.nom}</div>
                    
                    {/* <div>{user2.role}</div> */}
            </div>
            {open && 
                <Modal isOpen={open} onClose={() => setOpen(false)}>
                    <div className="object_modal">
-                        <div>{user2.nom}</div>
-                        <div>{user2.email}</div>
-                        <div className='list_object'>
-                            <div>Sessions :</div>
-                            {/* TODO */}
+                        <div>{user.prenom}</div>
+                        <div>{user.nom}</div>
+                        {(user instanceof Athlete || user instanceof Coach) &&
+                            <div className='padding'>
+                                <div className='list_object_modal'>
+                                    <div>Sessions :</div>
+                                    {user.sessions.map((session,index)=>(
+                                        <ObjectSession session={session}></ObjectSession>
+                                    ))}
+                                </div>
+                            </div>
+                        }
                            
-                        </div>
-                        {athlete !== null && (
+                        {user instanceof Athlete && (
                            <div className="stats-container">
-                                <StatAthlete athlete={athlete} sessions={sessions} />
+                                <StatAthlete athlete={user}/>
                            </div>
                        )}
                    </div>
--- a/front_end/src/components/ressourcePanel.tsx
+++ b/front_end/src/components/ressourcePanel.tsx
@@ -70,7 +70,7 @@ import ObjectLigne from "./object/lignes";


 	    return (
-		<div className="ressource_panel">
+		<div className="composant-container">

 			{(user instanceof Admin || user instanceof Coach) &&
 				<div>
@@ -98,7 +98,7 @@ import ObjectLigne from "./object/lignes";
 				<div className="list_object">
 					{value==="athletes" && (
 						allAthletes.map((athlete) => ( 
-							<ObjectUser athlete={athlete}/>
+							<ObjectUser user={athlete}/>
 						))
 					)}
 					{value==="activites" && (
@@ -108,7 +108,7 @@ import ObjectLigne from "./object/lignes";
 					)}
 					{value==="coachs" && (
 						allCoachs.map((coach) => (
-							<ObjectUser coach={coach}/>
+							<ObjectUser user={coach}/>
 						))
 					)}
 					{value==="sessions" && (
--- a/front_end/src/components/style/createSession.css
+++ b/front_end/src/components/style/createSession.css
@@ -0,0 +1,5 @@
+.createActivite{
+    background: var(--tint1);
+    padding: 15px;
+    border-radius: 15px;
+}
--- 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{
--- 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);