77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Session, User, Coach, Activite, Groupe } from "../classes";
|
|
import { Modal } from "./Modal";
|
|
|
|
type CreateActiciteProps = {
|
|
returnActivite: (activite:Activite|null) => void
|
|
session: Session;
|
|
}
|
|
|
|
|
|
export function CreateActivite({ returnActivite,session }: CreateActiciteProps){
|
|
|
|
const [activities, setActivities] = useState<Activite[]>([]);
|
|
const [activiteNom, setActiviteNom] = useState("");
|
|
const [activiteTheme, setActiviteTheme] = useState("");
|
|
const [activiteDuree, setActiviteDuree] = useState(0);
|
|
|
|
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]);
|
|
|
|
setActiviteNom("");
|
|
setActiviteTheme("");
|
|
setActiviteDuree(0);
|
|
|
|
returnActivite(newActivite);
|
|
}
|
|
|
|
function cancel(){
|
|
returnActivite(null);
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<Modal isOpen={true} onClose={() => cancel()}>
|
|
<div className="create_activite_modal">
|
|
<h2>Nouvelle Activité :</h2>
|
|
<div>Session : {session.name}</div>
|
|
<div>
|
|
Nom de l'activité:
|
|
</div>
|
|
<div>
|
|
<input type="text" value={activiteNom} onChange={e => setActiviteNom(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
Theme:
|
|
</div>
|
|
<div>
|
|
<input type="text" value={activiteTheme} onChange={e => setActiviteTheme(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
Duree (minutes):
|
|
</div>
|
|
<div>
|
|
<input type="number" value={activiteDuree} onChange={e => setActiviteDuree(Number(e.target.value))} />
|
|
</div>
|
|
<button type="button" onClick={()=>addAcitivte()}>Ajouter l'activite</button>
|
|
<button type="button" onClick={()=>cancel()}>Annuler</button>
|
|
|
|
<ul>
|
|
{activities.map((act, idx) => (
|
|
<li key={idx}>{act.nom} - {act.theme} ({act.duree} min)</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default CreateActivite; |