clean ressourcePanel

front_end/src/components/ressourcePanel.tsx

@@ -2,14 +2,14 @@
 	import { useLocalData } from "../context/useLocalData";
 	import { AthleteList, ActiviteList, CoachList, SessionList, LigneList} from "./ressourceList";
 	import { Activite, Athlete, Coach , Session, Ligne } from "../classes";
+import { keyboard } from "@testing-library/user-event/dist/keyboard";
+
+
+	export type keyWord = "athletes" | "activites" | "coachs" | "sessions"| "lignes";
 
 	export default function RessourcePanel() {
 	    const { user } = useLocalData();
-	    const [showAthletes, setShowAthletes] = useState(false);
-	    const [showActivites, setShowActivites] = useState(false);
-	    const [showCoachs,setShowCoachs] = useState(false);
-	    const [showSessions, setShowSessions] = useState(false);
-	    const [showLignes, setShowLignes] = useState(false);
+		const [value,setValue] = useState<keyWord>("athletes");
 	    console.log("Rôle utilisateur:", user.role);
 	    if (user.role === "Athlete") return null;
 
@@ -54,48 +54,6 @@
 
 	    const allLignes: Ligne[] = Array.from(ligneMap.values());
 
-	    function onAthletesClick(): void {
-		setShowAthletes(prev => !prev);
-		setShowActivites(false); 
-		setShowCoachs(false);
-		setShowSessions(false);
-		setShowLignes(false);
-
-	    }
-	    function onActivitiesClick(): void {
-		setShowActivites(prev => !prev);
-		setShowAthletes(false);
-		setShowCoachs(false);
-		setShowSessions(false);
-		setShowLignes(false);
-
-
-	    }
-	    function onCoachClick(): void {
-		setShowCoachs(prev => !prev);
-		setShowActivites(false); 
-		setShowAthletes(false);
-		setShowSessions(false);
-		setShowLignes(false);
-
-	    }
-
-	    function onSessionClick(): void {
-		setShowSessions(prev => !prev);
-		setShowActivites(false); 
-		setShowAthletes(false);
-		setShowCoachs(false);
-		setShowLignes(false);
-
-	    }
-
-	    function onLigneClick():void{
-		setShowLignes(prev => !prev);
-		setShowAthletes(false);
-		setShowActivites(false); 
-		setShowCoachs(false);
-		setShowSessions(false);
-	    }
 
 
 	    return (
@@ -106,50 +64,45 @@
 		    <select
 		        onChange={(e) => {
 		            const v = (e.target as HTMLSelectElement).value;
-		            if (v === "athletes") onAthletesClick();
-		            else if (v === "activites") onActivitiesClick();
-		            else if (v === "coach") onCoachClick();
-		            else if (v === "session") onSessionClick();
-		            else if (v === "lignes") onLigneClick();
-		            else {setShowAthletes(false); setShowActivites(false); setShowCoachs(false); setShowSessions(false)}
+					setValue(v as keyWord)
 		        }}>
 		        <option value="athletes">Athlètes</option>
 		        <option value="activites">Activités</option>
-		        {user.role === "Admin" && <option value="coach"> Coach</option>}
-		        <option value="session"> Session</option>
+		        {user.role === "Admin" && <option value="coachs"> Coachs</option>}
+		        <option value="sessions"> Sessions</option>
 		        <option value="lignes"> Lignes</option>
 
 		    </select>
 
-		    {showAthletes && (
+		    {value==="athletes" && (
 		        <div className="edt_athletes_panel">
 		            <h3>Liste des athlètes</h3>
 		            <AthleteList athletes={allAthletes} />
 		        </div>
 		    )}
 
-		    {showActivites && (
+		    {value==="activites" && (
 		        <div className="edt_activites_panel">
 		            <h3>Liste des activités</h3>
 		            <ActiviteList activites={allActivites} />
 		        </div>
 		    )}
 
-		    {showCoachs && (
+		    {value==="coachs" && (
 		        <div className="edt_coachs_panel">
 		            <h3>Liste des coachs</h3>
 		            <CoachList coachs={allCoachs} />
 		        </div>
 		    )}
 
-		    {showSessions && (
+		    {value==="sessions" && (
 		        <div className="edt_sessions_panel">
 		            <h3>Liste des sessions</h3>
 		            <SessionList sessions={allSessions} />
 		        </div>
 		    )}
 
-		    {showLignes && (
+		    {value==="lignes" && (
 		        <div className="edt_lignes_panel">
 		            <h3>Liste des lignes</h3>
 		            <LigneList lignes={allLignes} />

front_end/src/index.css

@@ -68,7 +68,17 @@ code {
 
 input{
   background-color: var(--tint2);
-  color: var(--test);
+  color: var(--text);
   border-color: var(--tint5);
   border-radius: 8px;
+}
+
+button{
+  color: var(--text); 
+  background-color: var(--tint3);
+}
+
+select{
+  color: var(--text); 
+  background-color: var(--tint3);
 }