Scrollable team list

This commit is contained in:
Sebastien Riviere
2025-08-30 16:19:30 +02:00
parent cb534ed1aa
commit e5d90d824e
39 changed files with 163 additions and 119 deletions

View File

@@ -7,15 +7,16 @@ import { Section } from "@/components/section";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from '@/hook/useAdmin';
import Messages from "./components/messages";
import TeamList from './components/teamManager';
import TeamManager from './components/teamManager';
// Imported at runtime and not at compile time
const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
export default function AdminPage() {
const {penaltySettings, changePenaltySettings} = useAdmin();
const {penaltySettings, changePenaltySettings, addTeam} = useAdmin();
const { useProtect } = useAdminConnexion();
const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
const [teamName, setTeamName] = useState('');
useProtect();
@@ -30,10 +31,18 @@ export default function AdminPage() {
changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
}
}
function handleSubmit(e) {
e.preventDefault();
if (teamName !== "") {
addTeam(teamName);
setTeamName("")
}
}
return (
<div className='h-full bg-gray-200 p-3 flex flex-row gap-3'>
<div className="h-full w-3/6 gap-3 flex flex-col">
<div className="h-full w-2/6 gap-3 flex flex-col">
<div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
<Link href="/admin">
<img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
@@ -41,19 +50,27 @@ export default function AdminPage() {
<h2 className="text-3xl font-bold">Paramètres</h2>
</div>
<Messages/>
<Section className="h-full" title="Équipe">
<div className="w-full h-full gap-3 flex flex-col items-center">
<TeamList/>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Interval between position updates</p>
<div className="w-16 h-10">
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
</div>
<Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
<form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
<div className='w-full'>
<input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
</div>
<div className='w-1/5'>
<button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
</div>
</form>
<div className="w-full flex-1 min-h-0 ">
<TeamManager/>
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Interval between position updates</p>
<div className="w-16 h-10">
<TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
</div>
</div>
</Section>
</div>
<div className="h-full w-full">
<div className="h-full flex-1">
<ZoneSelector />
</div>
</div>