admin interface basic functionalities

traque-front/components/admin/teamAdd.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import TextInput from '../util/textInput'
+import Button from '../util/button'
+
+export default function TeamAddForm({onAddTeam}) {
+    const [teamName, setTeamName] = React.useState('');
+    function handleSubmit(e) {
+        e.preventDefault();
+        onAddTeam(teamName);
+        setTeamName("")
+    }
+    return (
+        <form className='flex flex-row m-y-5' onSubmit={handleSubmit}>
+            <div className='w-4/5'>
+                <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
+            </div>
+            <div className='w-1/5'>
+                <Button type="submit" className="w-5">+</Button>
+            </div>
+        </form>
+    )
+}

traque-front/components/admin/teamEdit.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import TextInput from '../util/textInput'
+import Button from '../util/button';
+import useAdmin from '@/hook/useAdmin';
+
+export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
+    const [newTeamName, setNewTeamName] = React.useState('');
+    const {setTeamName, getTeamName, removeTeam, getTeam} = useAdmin();
+    const [team, setTeam] = useState({})
+
+    useEffect(() => {
+        let team = getTeam(selectedTeamId);
+        if (team != undefined) {
+            setNewTeamName(team.name);
+        }
+    },[selectedTeamId])
+
+    
+    useEffect(() => {
+        let team = getTeam(selectedTeamId);
+        if (team != undefined) {
+            setTeam(team);
+        }
+    }, [selectedTeamId])
+
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        setTeamName(team.id, newTeamName);
+    }
+
+    function handleRemove() {
+        removeTeam(team.id);
+        setSelectedTeamId(null);
+    }
+
+  return (team && 
+    <div className='flex flex-row'>
+        <div className='w-1/2 flex flex-col space-y-3 mx-2'>
+            <h2 className='text-2xl text-center'>Actions</h2>
+            <form className='flex flex-row' onSubmit={handleSubmit}>
+                <div className='w-4/5'>
+                    <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)}/>
+                </div>
+                <div className='w-2/5'>
+                    <Button type="submit">Rename</Button>
+                </div>
+            </form>
+            <Button onClick={handleRemove}>Eliminate</Button>
+        </div>
+        <div className='w-1/2 flex flex-col space-y-2 mx-2'>
+            <h2 className='text-2xl text-center'>Team details</h2>
+            <div>
+                <p>Secret : {team.id}</p>
+                <p>Name : {team.name}</p>
+                <p>Chasing : {getTeamName(team.chasing)}</p>
+                <p>Chased by : {getTeamName(team.chased)}</p>
+            </div>
+        </div>
+    </div>
+  )
+}

traque-front/components/admin/teamList.jsx

@@ -0,0 +1,63 @@
+"use client";
+import useAdmin from '@/hook/useAdmin';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React from 'react'
+
+const 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, onSelected, itemSelected }) {
+    const classNames = 'w-full p-3 m-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {provided => (
+                <div className={classNames} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <p className='text-center'>{team.name}</p>
+                </div>
+
+            )}
+        </Draggable>
+    )
+}
+
+export default function TeamList({selectedTeamId, onSelected}) {
+    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 => (
+                    <ul  ref={provided.innerRef} {...provided.droppableProps}>
+                        {teams.map((team, i) => (
+                            <li key={team.id} onClick={() => onSelected(team.id)}>
+                                <TeamListItem onSelected={onSelected} index={i} itemSelected={selectedTeamId === team.id} team={team} />
+                            </li>
+                        ))}
+                        {provided.placeholder}
+                    </ul>
+                )}
+            </Droppable>
+        </DragDropContext>
+    )
+}