mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 10:20:16 +01:00
Réorganisation des dossiers
This commit is contained in:
Sebastien Riviere
120
traque-front/app/admin/parameters/components/circleZoneMap.jsx
Normal file
120
traque-front/app/admin/parameters/components/circleZoneMap.jsx
Normal file
@@ -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='© <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>
|
||||
);
|
||||
}
|
||||
44
traque-front/app/admin/parameters/components/messages.jsx
Normal file
44
traque-front/app/admin/parameters/components/messages.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
164
traque-front/app/admin/parameters/components/polygonZoneMap.jsx
Normal file
164
traque-front/app/admin/parameters/components/polygonZoneMap.jsx
Normal file
@@ -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='© <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>
|
||||
);
|
||||
}
|
||||
82
traque-front/app/admin/parameters/components/teamManager.jsx
Normal file
82
traque-front/app/admin/parameters/components/teamManager.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user