added front end for uploading photo on waiting screen

traque-front/components/admin/mapPicker.jsx

@@ -2,7 +2,7 @@
 import { useLocation } from "@/hook/useLocation";
 import { useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
+import { Circle, MapContainer, Marker, TileLayer, useMap } from "react-leaflet";
 import { useMapCircleDraw } from "@/hook/mapDrawing";
 
 function MapPan(props) {
@@ -36,7 +36,7 @@ function MapEventListener({ onClick, onMouseMove }) {
 }
 
 const DEFAULT_ZOOM = 17;
-export function CircularAreaPicker({ area, setArea, ...props }) {
+export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
     const location = useLocation(Infinity);
     const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
     return (
@@ -46,6 +46,13 @@ export function CircularAreaPicker({ area, setArea, ...props }) {
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
             {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
+            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}></Marker>}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
         </MapContainer>)

traque-front/components/admin/teamEdit.jsx

@@ -76,7 +76,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
             </div>
             <div className='m-5 h-full flex flex-col'>
                 <h2 className='text-2xl text-center'>Starting area</h2>
-                <CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} />
+                <CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation}/>
             </div>
         </div>
     )

traque-front/components/team/waitingScreen.jsx

@@ -1,20 +1,49 @@
 import { useTeamConnexion } from "@/context/teamConnexionContext";
 import useGame from "@/hook/useGame"
+import { GreenButton } from "../util/button";
+import { useRef } from "react";
 
 export function WaitingScreen() {
-    const { name } = useGame();
+    const { name, teamId } = useGame();
+    const imageRef = useRef(null);
     const { logout } = useTeamConnexion();
+    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
+
+    function sendImage() {
+        let data = new FormData();
+        data.append('file', document.querySelector('input[type="file"]').files[0]);
+
+        fetch(SERVER_URL + "/upload?team=" + teamId.toString() , {
+            method: 'POST',
+            body: data
+        }).then((response) => {
+            console.log(response);
+            refreshImage();
+        });
+    }
+
+    function refreshImage() {
+        imageRef.current.src = "";
+        imageRef.current.src = SERVER_URL + "/photo/my?team=" + teamId.toString() + "&t=" + new Date().getTime();
+    }
+
+
     return (
         <div className='h-full flex flex-col items-center justify-center'>
-            <div className='text-4xl text-center'>
+            <div className='text-4xl mt-10 text-center'>
                 Equipe : {name}
             </div>
             <div className='text-2xl text-center'>
                 Jeu en préparation, veuillez patienter...
             </div>
-            <div className="bottom-0 absolute text-sm text-center">
+            <div className='text-2xl text-center my-10'>
-                Vous avez perdu Le Jeu
+                <p>Uploadez une photo où tous les membres de l'équipe sont visibles</p>
+                <input type="file" name="file" accept="image/*" className=" my-5 block w-full text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
+                <div className="h-20">
+                <GreenButton onClick={sendImage}>Envoyer</GreenButton>
                 </div>
+            </div>
+            {teamId && <img ref={imageRef} src={SERVER_URL + "/photo/my?team=" + teamId.toString()} className='w-screen h-1/2 object-contain' />}
             <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
         </div>
     )