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

Improvements on maps

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-31 17:33:18 +02:00
parent e5d90d824e
commit d088253758
13 changed files with 264 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,7 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import { List } from '@/components/list';
import { ReorderList } from '@/components/list';
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 TeamManagerItem({ team, index }) {
function TeamManagerItem({ team }) {
const { updateTeam, removeTeam } = useAdmin();
function handleRemove() {
@@ -17,47 +9,27 @@ function TeamManagerItem({ team, index }) {
}
return (
<Draggable draggableId={team.id.toString()} index={index}>
{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/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} />
</div>
</div>
<div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold'>
<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/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} />
</div>
)}
</Draggable>
</div>
</div>
);
}
export default function TeamManager() {
const { teams, reorderTeams } = useAdmin();
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 (
<DragDropContext onDragEnd={onDragEnd} >
<Droppable droppableId='team-list'>
{provided => (
<div className='w-full h-full' ref={provided.innerRef} {...provided.droppableProps}>
<List array={teams}>
{(team, i) => (
<TeamManagerItem index={i} team={team}/>
)}
</List>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
<ReorderList droppableId="team-manager" array={teams} setArray={reorderTeams}>
{(team) => (
<TeamManagerItem team={team}/>
)}
</ReorderList>
);
}