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>
+    )
+}

traque-front/components/team/loginForm.jsx

@@ -1,12 +1,20 @@
+"use client";
+import { useState } from "react";
 import Button from "../util/button";
 import TextInput from "../util/textInput";
 
-export default function LoginForm() {
+export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
+    const [value, setValue] = useState("");
+    function handleSubmit(e) {
+        e.preventDefault();
+        setValue("");
+        onSubmit(value);
+    }
     return (
-        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4">
-            <h1 className="text-2xl font-bold text-center text-gray-700">Connexion équipe</h1>
-            <TextInput placeholder="Code d'équipe" name="team-id" />
-            <Button type="submit">Se connecter</Button>
+        <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
+            <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
+            <TextInput placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
+            <Button type="submit">{buttonText}</Button>
         </form>
     )
 }

traque-front/components/team/map.jsx

@@ -22,13 +22,28 @@ function MapPan(props) {
 }
 
 export default function LiveMap({enemyPosition, currentPosition, ...props}) {
+    const [positionSet, setPositionSet] = useState(false);
+    useEffect(() => {
+        if(!positionSet && JSON.stringify(currentPosition) != "[0,0]") {
+            setPositionSet(true);
+        }
+    }, [currentPosition]);
+    const [enemyPositionSet, setEnemyPositionSet] = useState(false);
+    useEffect(() => {
+        if(!enemyPositionSet && JSON.stringify(enemyPosition) != "[0,0]") {
+            setEnemyPositionSet(true);
+        }
+    }, [enemyPosition]);
+
+
+
     return (
         <MapContainer  {...props} center={[0,0]} zoom={0} 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"
             />
-            <Marker position={currentPosition} icon={new L.Icon({
+            {positionSet && <Marker position={currentPosition} icon={new L.Icon({
                 iconUrl: '/icons/location.png',
                 iconSize: [41, 41],
                 iconAnchor: [12, 41],
@@ -38,8 +53,8 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                 <Popup>
                     Votre position
                 </Popup>
-            </Marker>
-            <Marker  position={enemyPosition} icon={new L.Icon({
+            </Marker>}
+            {enemyPositionSet && <Marker  position={enemyPosition} icon={new L.Icon({
                 iconUrl: '/icons/target.png',
                 iconSize: [41, 41],
                 iconAnchor: [12, 41],
@@ -49,7 +64,7 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                 <Popup>
                     Position de l'ennemi
                 </Popup>
-            </Marker>
+            </Marker>}
             <MapPan center={currentPosition}/>
         </MapContainer>
     )