From 11d5962e70663f946d16cedf20b038a0640211b2 Mon Sep 17 00:00:00 2001
From: Quentin Roussel <contact@quentinrsl.com>
Date: Sat, 20 Apr 2024 13:48:23 +0200
Subject: [PATCH] show team images admin interfaces

---
 traque-front/app/admin/teams/page.js       |  4 ++--
 traque-front/components/admin/teamEdit.jsx | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/traque-front/app/admin/teams/page.js b/traque-front/app/admin/teams/page.js
index 8e1bd12..a44758e 100644
--- a/traque-front/app/admin/teams/page.js
+++ b/traque-front/app/admin/teams/page.js
@@ -15,12 +15,12 @@ export default function TeamAdminPage() {
 
   return (
       <div className='h-full bg-gray-200 p-10 flex flex-row justify-between'> 
-        <div className='w-1/2 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
+        <div className='w-1/3 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
           <h2 className='text-2xl text-center'>Team list</h2>
           <TeamAddForm onAddTeam={addTeam}/>
           <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
         </div>
-        <div className='w-1/2 p-5 mx-5 bg-white h-full p-4 shadow-2xl rounded'>
+        <div className='w-2/3 p-5 mx-5 bg-white h-full p-4 shadow-2xl rounded'>
           {selectedTeamId && <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>}
         </div>
       </div>
diff --git a/traque-front/components/admin/teamEdit.jsx b/traque-front/components/admin/teamEdit.jsx
index 986e3b4..d7ac1a9 100644
--- a/traque-front/components/admin/teamEdit.jsx
+++ b/traque-front/components/admin/teamEdit.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import TextInput from '../util/textInput'
 import BlueButton, { RedButton } from '../util/button';
 import useAdmin from '@/hook/useAdmin';
@@ -9,9 +9,11 @@ const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod
 });
 
 export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
+    const teamImage = useRef(null);
     const [newTeamName, setNewTeamName] = React.useState('');
     const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin();
     const [team, setTeam] = useState({})
+    const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
 
     useEffect(() => {
         let team = getTeam(selectedTeamId);
@@ -19,6 +21,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
             setNewTeamName(team.name);
             setTeam(team);
         }
+        teamImage.current.src = SERVER_URL + "/photo/my?team=" + selectedTeamId + "&t=" + new Date().getTime();
     }, [selectedTeamId, teams])
 
     function handleRename(e) {
@@ -74,9 +77,19 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                     </div>
                 </div>
             </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 })} markerPosition={team?.currentLocation}/>
+            <div className='flex flex-row h-full w-full'>
+                <div className='w-1/2 h-full p-5 flex flex-col'>
+                    <h2 className='text-2xl text-center'>Starting area</h2>
+                    <div className='h-full p-5'>
+                        <CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation} />
+                    </div>
+                </div>
+                <div className='w-1/2 h-full p-5 flex flex-col'>
+                    <h2 className='text-2xl text-center'>Team photo</h2>
+                    <div className='h-full p-5'>
+                    <img ref={teamImage} className='w-full h-full object-contain' />
+                    </div>
+                </div>
             </div>
         </div>
     )