Réorganisation des dossiers

traque-front/app/admin/parameters/components/circleZoneMap.jsx

@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { Circle, MapContainer, TileLayer } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { BlueButton, GreenButton, RedButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+import { MapPan, MapEventListener } from "@/components/mapUtils";
+import useAdmin from "@/hook/useAdmin";
+import useLocation from "@/hook/useLocation";
+import useMapCircleDraw from "@/hook/useMapCircleDraw";
+
+const DEFAULT_ZOOM = 14;
+const EditMode = {
+    MIN: 0,
+    MAX: 1
+}
+
+function CircleDrawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
+    const { center: maxCenter, radius: maxRadius, handleLeftClick: maxLeftClick, handleRightClick: maxRightClick, handleMouseMove: maxHover } = useMapCircleDraw(maxZone, setMaxZone);
+    const { center: minCenter, radius: minRadius, handleLeftClick: minLeftClick, handleRightClick: minRightClick, handleMouseMove: minHover } = useMapCircleDraw(minZone, setMinZone);
+    
+    function handleLeftClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxLeftClick(e);
+        } else {
+            minLeftClick(e);
+        }
+    }
+    
+    function handleRightClick(e) {
+        if (editMode == EditMode.MAX) {
+            maxRightClick(e);
+        } else {
+            minRightClick(e);
+        }
+    }
+    
+    function handleMouseMove(e) {
+        if (editMode == EditMode.MAX) {
+            maxHover(e);
+        } else {
+            minHover(e);
+        }
+    }
+
+    return (
+        <div>
+            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
+            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
+            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
+        </div>
+    );
+}
+
+export function CircleZonePicker({ minZone, maxZone, editMode, setMinZone, setMaxZone, ...props }) {
+    const location = useLocation(Infinity);
+
+    return (
+        <div className='h-96'>
+            <MapContainer {...props} className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+                <CircleDrawings minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            </MapContainer>
+        </div>
+    );
+}
+
+export default function CircleZoneMap() {
+    const [editMode, setEditMode] = useState(EditMode.MIN);
+    const [minZone, setMinZone] = useState(null);
+    const [maxZone, setMaxZone] = useState(null);
+    const [reductionCount, setReductionCount] = useState("");
+    const [duration, setDuration] = useState("");
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setMinZone(zoneSettings.min);
+            setMaxZone(zoneSettings.max);
+            setReductionCount(zoneSettings.reductionCount.toString());
+            setDuration(zoneSettings.duration.toString());
+        }
+    }, [zoneSettings]);
+
+    function handleSettingsSubmit() {
+        const newSettings = {min:minZone, max:maxZone, reductionCount: Number(reductionCount), duration: Number(duration)};
+        changeZoneSettings(newSettings);
+    }
+
+    // When the user set one zone, switch to the other
+    useEffect(() => {
+        if(editMode == EditMode.MIN) {
+            setEditMode(EditMode.MAX);
+        } else {
+            setEditMode(EditMode.MIN);
+        }
+
+    }, [minZone, maxZone]);
+
+    return (
+        <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+            <h2 className="text-2xl">Edit zones</h2>
+            {editMode == EditMode.MIN && <BlueButton onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</BlueButton>}
+            {editMode == EditMode.MAX && <RedButton onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</RedButton>}
+            <CircleZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            <div>
+                <p>Number of zones</p>
+                <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
+            </div>
+            <div>
+                <p>Duration of a zone</p>
+                <TextInput value={duration} onChange={(e) => setDuration(e.target.value)}></TextInput>
+            </div>
+            <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+        </div>
+    );
+}

traque-front/app/admin/parameters/components/messages.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { Section } from "@/components/section";
+import useAdmin from "@/hook/useAdmin";
+
+function MessageInput({title, ...props}) {
+    return (
+        <div className="w-full flex flex-row gap-3 items-center">
+            <p>{title}</p>
+            <input {...props} type="text" className="w-full h-8 p-2 rounded ring-1 ring-inset ring-gray-400 placeholder:text-gray-600" />
+        </div>
+    );
+}
+
+export default function Messages() {
+    const {gameSettings, changeGameSettings} = useAdmin();
+    const [capturedMessage, setCapturedMessage] = useState("");
+    const [winnerEndMessage, setWinnerEndMessage] = useState("");
+    const [loserEndMessage, setLoserEndMessage] = useState("");
+    const [waitingMessage, setWaitingMessage] = useState("");
+
+    useEffect(() => {
+        if (gameSettings) {
+            setCapturedMessage(gameSettings.capturedMessage);
+            setWinnerEndMessage(gameSettings.winnerEndGameMessage);
+            setLoserEndMessage(gameSettings.loserEndGameMessage);
+            setWaitingMessage(gameSettings.waitingMessage);
+        }
+    }, [gameSettings]);
+
+    function applySettings() {
+        changeGameSettings({capturedMessage: capturedMessage, winnerEndGameMessage: winnerEndMessage, loserEndGameMessage: loserEndMessage, waitingMessage: waitingMessage});
+    }
+
+    return (
+        <Section title="Message">
+            <div className="w-full h-full flex flex-col gap-3 items-center">
+                <MessageInput title="Attente  :" value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} onBlur={applySettings}/>
+                <MessageInput title="Capture :" value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} onBlur={applySettings}/>
+                <MessageInput title="Victoire :" value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} onBlur={applySettings}/>
+                <MessageInput title="Défaite  :" value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} onBlur={applySettings}/>
+            </div>
+        </Section>
+    );
+}

traque-front/app/admin/parameters/components/polygonZoneMap.jsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Polyline, Polygon, CircleMarker } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { GreenButton } from "@/components/button";
+import { TextInput } from "@/components/textInput";
+import { MapPan, MapEventListener } from "@/components/mapUtils";
+import useAdmin from "@/hook/useAdmin";
+import useLocation from "@/hook/useLocation";
+import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
+
+const DEFAULT_ZOOM = 14;
+
+function PolygonDrawings({ polygons, addPolygon, removePolygon }) {
+    const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
+    const nodeSize = 5; // px
+    const lineThickness = 3; // px
+
+    function DrawNode({pos, color}) {
+        return (
+            <CircleMarker center={pos} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: 1 }} />
+        );
+    }
+
+    function DrawLine({pos1, pos2, color}) {
+        return (
+            <Polyline positions={[pos1, pos2]} pathOptions={{ color: color, weight: lineThickness }} />
+        );
+    }
+
+    function DrawUnfinishedPolygon({polygon}) {
+        const length = polygon.length;
+        if (length > 0) {
+            return (
+                <div>
+                    <DrawNode pos={polygon[0]} color={"red"} zIndexOffset={1000} />
+                    {polygon.map((_, i) => {
+                        if (i < length-1) {
+                            return <DrawLine key={i} pos1={polygon[i]} pos2={polygon[i+1]} color={"red"} />;
+                        } else {
+                            return null;
+                        }
+                    })}
+                </div>
+            );
+        }
+    }
+
+    function DrawPolygon({polygon}) {
+        const length = polygon.length;
+
+        if (length > 2) {
+            return (
+                <Polygon positions={polygon} pathOptions={{ color: 'black', fillColor: 'black', fillOpacity: '0.5', weight: lineThickness }} />
+            );
+        }
+    }
+
+    return (
+        <div>
+            <MapEventListener onLeftClick={handleLeftClick}  onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
+            {polygons.map((polygon, i) => <DrawPolygon key={i} polygon={polygon} />)}
+            <DrawUnfinishedPolygon polygon={currentPolygon} />
+            {highlightNodes.map((node, i) => <DrawNode key={i} pos={node} color={"black"} />)}
+        </div>
+    );
+}
+
+function PolygonZonePicker({ polygons, addPolygon, removePolygon, ...props }) {
+    const location = useLocation(Infinity);
+
+    return (
+        <div className='h-full'>
+            <MapContainer {...props} className='min-h-full w-full' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <MapPan center={location} zoom={DEFAULT_ZOOM} />
+                <PolygonDrawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+            </MapContainer>
+        </div>
+    );
+}
+
+export default function PolygonZoneMap() {
+    const defaultDuration = 10;
+    const [polygons, setPolygons] = useState([]);
+    const [durations, setDurations] = useState([]);
+    const {zoneSettings, changeZoneSettings} = useAdmin();
+    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
+
+    useEffect(() => {
+        if (zoneSettings) {
+            setPolygons(zoneSettings.polygons);
+            setDurations(zoneSettings.durations);
+        }
+        if (penaltySettings) {
+            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
+        }
+    }, [zoneSettings, penaltySettings]);
+
+    function addPolygon(polygon) {
+        // Polygons
+        setPolygons([...polygons, polygon]);
+        // Durations
+        setDurations([...durations, defaultDuration]);
+    }
+
+    function removePolygon(i) {
+        // Polygons
+        const newPolygons = [...polygons];
+        newPolygons.splice(i, 1);
+        setPolygons(newPolygons);
+        // Durations
+        const newDurations = [...durations];
+        newDurations.splice(i, 1);
+        setDurations(newDurations);
+    }
+
+    function updateDuration(i, duration) {
+        const newDurations = [...durations];
+        newDurations[i] = duration;
+        setDurations(newDurations);
+    }
+
+    function handleSettingsSubmit() {
+        const newSettings = {polygons: polygons, durations: durations};
+        changeZoneSettings(newSettings);
+        changePenaltySettings({allowedTimeOutOfZone: Number(allowedTimeOutOfZone)});
+    }
+    
+    return (
+        <div className='h-full w-full bg-white p-3 gap-3 flex flex-row shadow-2xl'>
+            <div className="h-full w-full">
+                <PolygonZonePicker polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
+            </div>
+            <div className="h-full w-1/6 flex flex-col gap-3">
+                <div className="w-full text-center">
+                    <h2 className="text-xl">Reduction order</h2>
+                </div>
+                <ul className="w-full h-full bg-gray-300">
+                    {durations.map((duration, i) => (
+                        <li key={i} className="w-full bg-white flex flex-row gap-2 items-center justify-between p-1">
+                            <p>Zone {i+1}</p>
+                            <div className="w-16 h-10">
+                                <TextInput value={duration} onChange={(e) => updateDuration(i, e.target.value)}/>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+                <div className="w-full flex flex-row gap-2 items-center justify-between">
+                    <p>Timeout</p>
+                    <div className="w-16 h-10">
+                        <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)} />
+                    </div>
+                </div>
+                <div className="w-full h-15">
+                    <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+                </div>
+            </div>
+        </div>
+    );
+}

traque-front/app/admin/parameters/components/teamManager.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import useAdmin from '@/hook/useAdmin';
+
+function reorder(list, startIndex, endIndex) {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+
+function TeamListItem({ team, index }) {
+    const { removeTeam } = useAdmin();
+
+    function handleRemove() {
+        removeTeam(team.id);
+    }
+
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {provided => (
+                <div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
+                        <p>{team.name}</p>
+                        <div className='flex flex-row items-center justify-between gap-3'>
+                            <p>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
+                            <img src="/icons/home.png" className="w-8 h-8" />
+                            <img src="/icons/home.png" className="w-8 h-8" onClick={handleRemove} />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
+export default function TeamList() {
+    const { teams, reorderTeams, addTeam } = useAdmin();
+    const [teamName, setTeamName] = useState('');
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }
+    
+    function onDragEnd(result) {
+        if (!result.destination) return;
+        if (result.destination.index === result.source.index) return;
+        const newTeams = reorder(teams, result.source.index, result.destination.index);
+        reorderTeams(newTeams);
+    }
+
+    return (
+        <div className='w-full h-full flex flex-col 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>
+            <DragDropContext onDragEnd={onDragEnd} >
+                <Droppable droppableId='team-list'>
+                    {provided => (
+                        <ul className='w-full h-full gap-1 flex flex-col bg-gray-300 p-1' ref={provided.innerRef} {...provided.droppableProps}>
+                            {teams.map((team, i) => (
+                                <li key={team.id}>
+                                    <TeamListItem index={i} team={team} />
+                                </li>
+                            ))}
+                            {provided.placeholder}
+                        </ul>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </div>
+    );
+}

traque-front/app/admin/parameters/page.js

@@ -1,21 +1,19 @@
 "use client";
 import { useState, useEffect } from "react";
-import GameSettings from "@/components/admin/gameSettings";
-import { useAdminConnexion } from "@/context/adminConnexionContext";
 import dynamic from "next/dynamic";
-import TeamList from '@/components/admin/teamManager';
-import useAdmin from '@/hook/useAdmin';
 import Link from "next/link";
-import { GreenButton } from "@/components/util/button";
-import { TextInput } from "@/components/util/textInput";
-import { Section } from "@/components/util/section";
+import { TextInput } from "@/components/textInput";
+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';
 
 // Imported at runtime and not at compile time
-const ZoneSelector = dynamic(() => import('@/components/admin/polygonZoneMap'), { ssr: false });
+const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
 
 export default function AdminPage() {
     const {penaltySettings, changePenaltySettings} = useAdmin();
-    const { addTeam } = useAdmin();
     const { useProtect } = useAdminConnexion();
     const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
 
@@ -42,19 +40,16 @@ export default function AdminPage() {
                     </Link>
                     <h2 className="text-3xl font-bold">Paramètres</h2>
                 </div>
-                <GameSettings />
+                <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)} />
+                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
                             </div>
                         </div>
-                        <div className="w-40 h-15">
-                            <GreenButton onClick={applySettings}>Apply</GreenButton>
-                        </div>
                     </div>
                 </Section>
             </div>
@@ -63,4 +58,4 @@ export default function AdminPage() {
             </div>
         </div>
     );
-}
+}