public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 02:10:18 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Cleaning

Browse Source
This commit is contained in:
Sebastien Riviere
2025-09-05 23:37:19 +02:00
parent 999c9a8b77
commit 93f9a05b1a
13 changed files with 356 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
traque-front/app/admin/components/teamSidePanel.jsx
View File

@@ -89,7 +89,7 @@ export default function TeamSidePanel({ selectedTeamId, onClose }) {
/>
</div>
<div>
<DotLine label="ID d'équipe" value={String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
<DotLine label="ID d'équipe" value={String(selectedTeamId).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")} />
<DotLine label="ID de capture" value={String(team.captureCode).padStart(4, '0')} />
</div>
<div>

2
traque-front/app/admin/page.js
View File

@@ -16,8 +16,8 @@ const LiveMap = dynamic(() => import('./components/liveMap'), { ssr: false });
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const { changeState, getTeam } = useAdmin();
const [selectedTeamId, setSelectedTeamId] = useState(null);
const [mapStyle, setMapStyle] = useState(mapStyles.default);
const [showZones, setShowZones] = useState(true);
const [showNames, setShowNames] = useState(true);

11
traque-front/app/admin/parameters/components/circleZoneSelector.jsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { Circle } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { BlueButton, GreenButton, RedButton } from "@/components/button";
import { CustomButton } from "@/components/button";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import { TextInput } from "@/components/input";
import useAdmin from "@/hook/useAdmin";
@@ -43,8 +43,7 @@ export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, ap
}
function customStringToInt(e) {
const res = parseInt(e, 10);
return isNaN(res) ? null : res;
return parseInt(e, 10) || null;
}
return (
@@ -56,8 +55,8 @@ export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, ap
</div>
<div className="h-full w-1/6 flex flex-col gap-3">
<div className="w-full h-15">
{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>}
{editMode == EditMode.MIN && <CustomButton color="blue" onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</CustomButton>}
{editMode == EditMode.MAX && <CustomButton color="red" onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</CustomButton>}
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Reduction number</p>
@@ -78,7 +77,7 @@ export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, ap
</div>
</div>
<div className="w-full h-15">
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
<CustomButton color="green" onClick={handleSettingsSubmit}>Apply</CustomButton>
</div>
</div>
</div>

6
traque-front/app/admin/parameters/components/polygonZoneSelector.jsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { Polyline, Polygon, Marker } from "react-leaflet";
import { Polyline } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { GreenButton } from "@/components/button";
import { CustomButton } from "@/components/button";
import { ReorderList } from "@/components/list";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import { TextInput } from "@/components/input";
@@ -88,7 +88,7 @@ export default function PolygonZoneSelector({zoneSettings, modifyZoneSettings, a
</div>
</div>
<div className="w-full h-15">
<GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
<CustomButton color="green" onClick={handleSettingsSubmit}>Apply</CustomButton>
</div>
</div>
</div>

12
traque-front/app/admin/parameters/components/teamManager.jsx
View File

@@ -2,11 +2,7 @@ import { ReorderList } from '@/components/list';
import useAdmin from '@/hook/useAdmin';
function TeamManagerItem({ team }) {
const { updateTeam, removeTeam } = useAdmin();
function handleRemove() {
removeTeam(team.id);
}
const { captureTeam, removeTeam } = useAdmin();
return (
<div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold'>
@@ -14,8 +10,8 @@ function TeamManagerItem({ team }) {
<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/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => updateTeam(team.id, { captured: !team.captured })} />
<img src="/icons/trash.png" className="w-8 h-8" onClick={handleRemove} />
<img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => captureTeam(team.id)} />
<img src="/icons/trash.png" className="w-8 h-8" onClick={() => removeTeam(team.id)} />
</div>
</div>
</div>
@@ -26,7 +22,7 @@ export default function TeamManager() {
const { teams, reorderTeams } = useAdmin();
return (
<ReorderList droppableId="team-manager" array={teams} setArray={reorderTeams}>
<ReorderList droppableId="team-manager" array={teams} setArray={(teams) => reorderTeams(teams.map(team => team.id))}>
{(team) => (
<TeamManagerItem team={team}/>
)}

4
traque-front/app/admin/parameters/page.js
View File

@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
import Link from "next/link";
import { TextInput } from "@/components/input";
import { Section } from "@/components/section";
import { BlueButton } from "@/components/button";
import { CustomButton } from "@/components/button";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from '@/hook/useAdmin';
import Messages from "./components/messages";
@@ -74,7 +74,7 @@ export default function ConfigurationPage() {
</div>
<div className="h-full flex-1 flex flex-col p-3 gap-3 bg-white shadow-2xl">
<div className="w-full h-15">
{localZoneSettings && <BlueButton onClick={handleChangeZoneType}>Change zone type</BlueButton>}
{localZoneSettings && <CustomButton color="blue" onClick={handleChangeZoneType}>Change zone type</CustomButton>}
</div>
<div className="w-full flex-1">
{localZoneSettings && localZoneSettings.type == ZoneTypes.CIRCLE &&

27
traque-front/components/button.jsx
View File

@@ -1,22 +1,15 @@
export function BlueButton({ children, ...props }) {
return (
<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>
);
}
export function CustomButton({ color, children, ...props }) {
const colorClasses = {
blue: 'bg-blue-600 hover:bg-blue-500',
red: 'bg-red-600 hover:bg-red-500',
green: 'bg-green-600 hover:bg-green-500',
yellow: 'bg-yellow-600 hover:bg-yellow-500',
purple: 'bg-purple-600 hover:bg-purple-500',
gray: 'bg-gray-600 hover:bg-gray-500',
};
export function RedButton({ children, ...props }) {
return (
<button {...props} className="bg-red-600 hover:bg-red-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>
);
}
export function GreenButton({ children, ...props }) {
return (
<button {...props} className="bg-green-600 hover:bg-green-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
<button {...props} className={`${colorClasses[color]} text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded`}>
{children}
</button>
);

8
traque-front/components/list.jsx
View File

@@ -17,10 +17,10 @@ export function List({array, children}) {
}
export function ReorderList({droppableId, array, setArray, children}) {
const [arrayLocal, setArrayLocal] = useState(array);
const [localArray, setLocalArray] = useState(array);
useEffect(() => {
setArrayLocal(array);
setLocalArray(array);
}, [array])
function reorder(list, startIndex, endIndex) {
@@ -34,7 +34,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
if (!result.destination) return;
if (result.destination.index === result.source.index) return;
const newArray = reorder(array, result.source.index, result.destination.index);
setArrayLocal(newArray);
setLocalArray(newArray);
setArray(newArray);
}
@@ -44,7 +44,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
{provided => (
<div className='w-full h-full bg-gray-300 overflow-y-scroll' ref={provided.innerRef} {...provided.droppableProps}>
<ul className="w-full p-1 pb-0">
{arrayLocal.map((elem, i) => (
{localArray.map((elem, i) => (
<li className='w-full' key={elem.id}>
<Draggable draggableId={elem.id.toString()} index={i}>
{provided => (

6
traque-front/hook/useAdmin.jsx
View File

@@ -23,8 +23,8 @@ export default function useAdmin() {
adminSocket.emit("remove_team", teamId);
}
function updateTeam(teamId, team) {
adminSocket.emit("update_team", teamId, team);
function captureTeam(teamId) {
adminSocket.emit("capture_team", teamId);
}
function changeState(state) {
@@ -35,5 +35,5 @@ export default function useAdmin() {
adminSocket.emit("update_settings", settings);
}
return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, updateTeam, changeState, updateSettings };
return { ...adminContext, getTeam, reorderTeams, addTeam, removeTeam, captureTeam, changeState, updateSettings };
}