merge
This commit is contained in:
trochas
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Session, User, Coach, Activite, Groupe } from "../classes";
|
||||
import { useLocalData } from "../context/useLocalData";
|
||||
import { sessionService } from "../api";
|
||||
import { activiteService, sessionService } from "../api";
|
||||
import { postSession } from "../requetes";
|
||||
|
||||
export const CreateSession = () => {
|
||||
|
||||
65
front_end/src/components/edt_athlete.tsx
Normal file
65
front_end/src/components/edt_athlete.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export const EdtAthlete = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
prenom: '',
|
||||
id_keycloak: '',
|
||||
categorie: '',
|
||||
niveau: ''
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch("http://localhost:8081/api/athlete/create", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert("Athlete created successfully in PostgreSQL!");
|
||||
setFormData({ name: '', prenom: '', id_keycloak: '', categorie: '', niveau: '' });
|
||||
} else {
|
||||
alert("Failed to create athlete. Status: " + response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating athlete:", error);
|
||||
alert("Error: Check console");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>
|
||||
<h3>Test Create Athlete (PostgreSQL)</h3>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>Nom: </label>
|
||||
<input type="text" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Prénom: </label>
|
||||
<input type="text" value={formData.prenom} onChange={(e) => setFormData({...formData, prenom: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Keycloak ID: </label>
|
||||
<input type="text" value={formData.id_keycloak} onChange={(e) => setFormData({...formData, id_keycloak: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Catégorie: </label>
|
||||
<input type="text" value={formData.categorie} onChange={(e) => setFormData({...formData, categorie: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label>Niveau: </label>
|
||||
<input type="text" value={formData.niveau} onChange={(e) => setFormData({...formData, niveau: e.target.value})} />
|
||||
</div>
|
||||
<button type="submit" style={{ marginTop: '10px' }}>Créer l'athlète</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EdtAthlete;
|
||||
@@ -3,20 +3,63 @@ import { useEffect } from 'react';
|
||||
import { getUserTest, User } from '../classes';
|
||||
import { useLocalData } from '../context/useLocalData';
|
||||
|
||||
|
||||
|
||||
|
||||
export const Login =() =>{
|
||||
const {user,setUser} = useLocalData()
|
||||
const { keycloak } = useKeycloak();
|
||||
|
||||
useEffect(() => {
|
||||
const syncUser = async () => {
|
||||
if (keycloak.authenticated && keycloak.token) {
|
||||
console.log("Attempting to sync user with backend...");
|
||||
try {
|
||||
const response = await fetch("http://localhost:8081/api/users/sync", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${keycloak.token}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
});
|
||||
console.log("Sync status:", response.status);
|
||||
} catch (error) {
|
||||
console.error("Sync fetch failed:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { //TODO à supprimer
|
||||
setUser(getUserTest())
|
||||
},[]);
|
||||
syncUser();
|
||||
}, [keycloak.authenticated, keycloak.token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (keycloak.authenticated && keycloak.token) {
|
||||
fetch("http://localhost:8081/api/users/sync", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${keycloak.token}`,
|
||||
},
|
||||
})
|
||||
.then(res => console.log("Sync response status:", res.status))
|
||||
.catch(err => console.error("Sync error:", err));;
|
||||
}
|
||||
}, [keycloak.authenticated]);
|
||||
|
||||
useEffect(() => {
|
||||
if (keycloak.authenticated) {
|
||||
const tokenParsed = keycloak.tokenParsed;
|
||||
setUser({
|
||||
id: 0,
|
||||
keycloakId: tokenParsed!.sub!,
|
||||
email: tokenParsed?.email,
|
||||
nom: tokenParsed?.family_name,
|
||||
prenom: tokenParsed?.given_name,
|
||||
role: "athlete",
|
||||
sessions: []
|
||||
});
|
||||
}
|
||||
}, [keycloak.authenticated]);
|
||||
|
||||
|
||||
function handleLogin(): void {
|
||||
keycloak.login()
|
||||
keycloak.login();
|
||||
//TODO setUser
|
||||
}
|
||||
|
||||
@@ -24,8 +67,6 @@ export const Login =() =>{
|
||||
keycloak.logout()
|
||||
setUser(new User());
|
||||
}
|
||||
|
||||
const { keycloak } = useKeycloak()
|
||||
return(
|
||||
<div>
|
||||
<div>
|
||||
@@ -39,6 +80,9 @@ export const Login =() =>{
|
||||
<div>
|
||||
User nom : { user.nom}
|
||||
</div>
|
||||
<div>
|
||||
User role : { user.role}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,25 +1,87 @@
|
||||
import React from "react";
|
||||
import { Athlete, Activite, Coach, Session, Ligne } from "../classes";
|
||||
import ObjectSession from "./object/session";
|
||||
import {calculStatsAthlete, niveauAlerte} from "../utils/athleteUtils";
|
||||
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
|
||||
|
||||
type AthleteListProps = { athletes: Athlete[] };
|
||||
|
||||
type AthleteListProps = { athletes: Athlete[], sessions: Session[]};
|
||||
type ActiviteListProps = { activites: Activite[] };
|
||||
type CoachListProps = { coachs: Coach[] };
|
||||
type SessionListProps = { sessions: Session[]};
|
||||
type LigneListProps = { lignes: Ligne[]};
|
||||
type LigneListProps = { lignes: Ligne[], tempsDeJeuParLigne: Map<number, number> };
|
||||
|
||||
|
||||
|
||||
|
||||
function AthleteList({ athletes }: AthleteListProps) {
|
||||
function AthleteList({ athletes, sessions }: AthleteListProps) {
|
||||
const [dateDebut, setDateDebut] = React.useState(new Date());
|
||||
const [dateFin, setDateFin] = React.useState(new Date());
|
||||
const [seuilCritique, setSeuilCritique] = React.useState(0);
|
||||
const [seuilMax, setSeuilMax] = React.useState(0);
|
||||
|
||||
const dateToDatetimeLocal = (date: Date) => {
|
||||
const pad = (n: number) => n.toString().padStart(2, "0");
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||
};
|
||||
|
||||
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>
|
||||
<>
|
||||
<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>
|
||||
|
||||
<ul className="AthleteList">
|
||||
{athletes.map(a => {
|
||||
const stats = calculStatsAthlete(sessions, a, dateDebut, dateFin);
|
||||
const alerte = niveauAlerte(stats, seuilCritique, seuilMax);
|
||||
|
||||
return (
|
||||
<li key={a.id}>
|
||||
<div><strong>Nom:</strong> {a.nom}</div>
|
||||
<div><strong>Groupe:</strong> {a.groupe}</div>
|
||||
<div><strong>Nombre de sessions:</strong> {stats.nbSessions}</div>
|
||||
<div><strong>Sessions/semaine:</strong> {stats.nbSessionsPerWeek.toFixed(2)}</div>
|
||||
<div><strong>Alerte:</strong> {alerte}</div>
|
||||
<div><strong>Distribuion des activités:</strong> {stats.distributions}</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,7 +131,7 @@ function SessionList({ sessions }: SessionListProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function LigneList({ lignes }: LigneListProps) {
|
||||
function LigneList({ lignes, tempsDeJeuParLigne }: LigneListProps) {
|
||||
return (
|
||||
<ul className="LigneList">
|
||||
{lignes.map((lignes) => (
|
||||
@@ -90,7 +152,8 @@ function LigneList({ lignes }: LigneListProps) {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Temps de jeu: {lignes.tempsDeJeu}</strong>
|
||||
<strong>Temps de jeu total :</strong>{" "}
|
||||
{tempsDeJeuParLigne.get(lignes.id) ?? 0} min
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import { useLocalData } from "../context/useLocalData";
|
||||
import { AthleteList, ActiviteList, CoachList, SessionList, LigneList} from "./ressourceList";
|
||||
import { Activite, Athlete, Coach , Session, Ligne } from "../classes";
|
||||
import { useState } from "react";
|
||||
import { useLocalData } from "../context/useLocalData";
|
||||
import { Activite, Athlete, Coach , Session, Ligne, getUserTest } from "../classes";
|
||||
import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
|
||||
import { keyboard } from "@testing-library/user-event/dist/keyboard";
|
||||
import ObjectSession from "./object/session";
|
||||
import ObjectUser from "./object/user";
|
||||
@@ -10,21 +10,25 @@ import ObjectUser from "./object/user";
|
||||
export type keyWord = "athletes" | "activites" | "coachs" | "sessions"| "lignes";
|
||||
|
||||
export default function RessourcePanel() {
|
||||
const { user } = useLocalData();
|
||||
//const { user } = useLocalData();
|
||||
const user = getUserTest(); //TODO
|
||||
const [value,setValue] = useState<keyWord>("athletes");
|
||||
console.log("Rôle utilisateur:", user.role);
|
||||
if (user.role === "Athlete") return null;
|
||||
console.log(user.nom);
|
||||
console.log(user.prenom);
|
||||
console.log(user.email);
|
||||
if (user.role === "athlete") return null;
|
||||
|
||||
|
||||
const athleteMap: Map<number, Athlete> = new Map();
|
||||
const athleteMap: Map<number, Athlete> = new Map();//TODO
|
||||
user.sessions.forEach(session => {
|
||||
session.athletes?.forEach(a => athleteMap.set(a.id, a));
|
||||
session.athletes?.forEach(a => athleteMap.set(a.id, a));
|
||||
});
|
||||
const allAthletes: Athlete[] = Array.from(athleteMap.values());
|
||||
|
||||
const activiteMap: Map<number, Activite> = new Map();
|
||||
user.sessions.forEach(session => {
|
||||
session.activites?.forEach(act => activiteMap.set(act.id, act));
|
||||
session.activites?.forEach(act => activiteMap.set(act.id, act));
|
||||
});
|
||||
const allActivites: Activite[] = Array.from(activiteMap.values());
|
||||
|
||||
@@ -54,7 +58,18 @@ import ObjectUser from "./object/user";
|
||||
}
|
||||
});
|
||||
|
||||
const allLignes: Ligne[] = Array.from(ligneMap.values());
|
||||
|
||||
const allLignes: Ligne[] = Array.from(ligneMap.values());
|
||||
|
||||
// Calculer le temps de jeu pour chaque ligne
|
||||
const tempsDeJeuParLigne: Map<number, number> = new Map();
|
||||
allLignes.forEach(ligne => {
|
||||
const tempsTotal = calculTempsDeJeuParLigne(allSessions, ligne);
|
||||
tempsDeJeuParLigne.set(ligne.id, tempsTotal);
|
||||
ligne.tempsDeJeu = tempsTotal;
|
||||
});
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="ressource_panel">
|
||||
@@ -68,7 +83,7 @@ import ObjectUser from "./object/user";
|
||||
}}>
|
||||
<option value="athletes">Athlètes</option>
|
||||
<option value="activites">Activités</option>
|
||||
{user.role === "Admin" && <option value="coachs"> Coachs</option>}
|
||||
{user.role === "admin" && <option value="coachs"> Coachs</option>}
|
||||
<option value="sessions"> Sessions</option>
|
||||
<option value="lignes"> Lignes</option>
|
||||
|
||||
@@ -78,7 +93,7 @@ import ObjectUser from "./object/user";
|
||||
<h3>Liste des {value}</h3>
|
||||
<div className="list_object">
|
||||
{value==="athletes" && (
|
||||
allAthletes.map((athlete) => ( //TODO
|
||||
allAthletes.map((athlete) => (
|
||||
<ObjectUser athlete={athlete}/>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user