Files
hackathon/front_end/src/components/ressourceList.tsx
2026-01-08 08:58:26 +01:00

116 lines
3.8 KiB
TypeScript

import { Athlete, Activite, Coach, Session, Ligne } from "../classes";
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
type AthleteListProps = { athletes: Athlete[] };
type ActiviteListProps = { activites: Activite[] };
type CoachListProps = { coachs: Coach[] };
type SessionListProps = { sessions: Session[]};
type LigneListProps = { lignes: Ligne[], tempsDeJeuParLigne: Map<number, number> };
function AthleteList({ athletes }: AthleteListProps) {
return (
<ul className="AthleteList">
{athletes.map((athlete) => (
<li key={athlete.id}>
<div><strong>Nom:</strong> {athlete.nom}</div>
<div><strong>Groupe:</strong> {athlete.groupe}</div>
</li>
))}
</ul>
);
}
function ActiviteList({ activites }: ActiviteListProps) {
return (
<ul className="ActiviteList">
{activites.map((activite) => (
<li key={activite.id}>
<div>
<strong>Nom:</strong> {activite.nom}
</div>
<div>
<strong>Thème:</strong> {activite.theme}
</div>
<div>
<strong>Durée:</strong> {activite.duree} minutes
</div>
</li>
))}
</ul>
);
}
function CoachList({ coachs }: CoachListProps) {
return (
<ul className="CoachList">
{coachs.map((coachs) => (
<li key={coachs.id}>
<div>
<strong>Nom:</strong> {coachs.nom}
</div>
</li>
))}
</ul>
);
}
function SessionList({ sessions }: SessionListProps) {
return (
<ul className="SessionList">
{sessions.map((sessions) => (
<li key={sessions.id}>
<div>
<strong>Nom:</strong> {sessions.name}
</div>
<div>
<strong>Groupe:</strong> {sessions.groupe}
</div>
<div>
<strong>Recurrent:</strong> {sessions.isRecurrent ? "Oui" : "Non"}
</div>
<div>
<strong>Coach:</strong> {sessions.coach ? sessions.coach.nom : "Pas de coach sur la séance"}
</div>
<div>
<strong>Ligne:</strong> {sessions.ligne ? sessions.ligne.map(ligne => ligne.nom).join(", ") : "Pas de ligne sur la séance"}
</div>
</li>
))}
</ul>
);
}
function LigneList({ lignes, tempsDeJeuParLigne }: LigneListProps) {
return (
<ul className="LigneList">
{lignes.map((lignes) => (
<li key={lignes.id}>
<div>
<strong>Nom:</strong> {lignes.nom}
</div>
<div>
<div>
<strong>Composition :</strong>
<ul>
{lignes.composition.map((athlete) => (
<li key={athlete.id}>
{athlete.nom}
</li>
))}
</ul>
</div>
</div>
<div>
<strong>Temps de jeu total :</strong>{" "}
{tempsDeJeuParLigne.get(lignes.id) ?? 0} min
</div>
</li>
))}
</ul>
);
}
export { AthleteList, ActiviteList, CoachList , SessionList, LigneList };