Files
hackathon/front_end/src/components/createSession.tsx
2026-01-09 14:01:34 +01:00

111 lines
3.8 KiB
TypeScript

import { useState, useEffect } from "react";
import { Session, User, Coach, Activite, Groupe } from "../classes";
import { useLocalData } from "../context/useLocalData";
import { activiteService, sessionService } from "../api";
import { createSessionAPI, postSession } from "../requetes";
export const CreateSession = () => {
const {user} = useLocalData();
const [session,setSession] = useState<Session>(new Session());
const [activities, setActivities] = useState<Activite[]>([]);
const [name,setName] = useState("");
const [groupe, setGroupe] = useState<Groupe>("");
const [creneau, setCreneau] = useState<Date>(new Date());
const [duree, setDuree] = useState<number>(0);
const [activiteNom, setActiviteNom] = useState("");
const [activiteTheme, setActiviteTheme] = useState("");
const [activiteDuree, setActiviteDuree] = useState(0);
const [isRecurent, setIsRecurent] = useState(false);
async function addAcitivte(){
if (!activiteNom) return;
const newActivite = new Activite();
newActivite.nom= activiteNom;
newActivite.theme=activiteTheme;
newActivite.duree= activiteDuree;
newActivite.data= new Map<string,string>();
setActivities([...activities, newActivite]);
session.activites.push(newActivite);
}
async function handleCreateSession() {
if(user instanceof Coach){
session.groupe = groupe;
session.creneau = creneau;
session.duree = duree;
session.isRecurrent = isRecurent;
session.activites = activities;
session.coach = user;
await createSessionAPI(session);
console.log("Session créée");
// reset
setName("");
setGroupe("");
setCreneau(new Date());
setDuree(0);
setIsRecurent(false);
setActivities([]);
setSession(new Session());
}
}
return (
<div className="ent">
<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>
<ul>
{activities.map((act, idx) => (
<li key={idx}>{act.nom} - {act.theme} ({act.duree} min)</li>
))}
</ul>
<button type="button" onClick={handleCreateSession}>Create Session</button>
</div>
);
};
export default CreateSession;