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

show team images admin interfaces

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 13:48:23 +02:00
parent 643343b903
commit 11d5962e70
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
traque-front/app/admin/teams/page.js
View File

@@ -15,12 +15,12 @@ export default function TeamAdminPage() {
return ( return (
<div className='h-full bg-gray-200 p-10 flex flex-row justify-between'> <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> <h2 className='text-2xl text-center'>Team list</h2>
<TeamAddForm onAddTeam={addTeam}/> <TeamAddForm onAddTeam={addTeam}/>
<TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/> <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
</div> </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}/>} {selectedTeamId && <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>}
</div> </div>
</div> </div>

17
traque-front/components/admin/teamEdit.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import TextInput from '../util/textInput' import TextInput from '../util/textInput'
import BlueButton, { RedButton } from '../util/button'; import BlueButton, { RedButton } from '../util/button';
import useAdmin from '@/hook/useAdmin'; import useAdmin from '@/hook/useAdmin';
@@ -9,9 +9,11 @@ const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod
}); });
export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) { export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
const teamImage = useRef(null);
const [newTeamName, setNewTeamName] = React.useState(''); const [newTeamName, setNewTeamName] = React.useState('');
const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin(); const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin();
const [team, setTeam] = useState({}) const [team, setTeam] = useState({})
const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
useEffect(() => { useEffect(() => {
let team = getTeam(selectedTeamId); let team = getTeam(selectedTeamId);
@@ -19,6 +21,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
setNewTeamName(team.name); setNewTeamName(team.name);
setTeam(team); setTeam(team);
} }
teamImage.current.src = SERVER_URL + "/photo/my?team=" + selectedTeamId + "&t=" + new Date().getTime();
}, [selectedTeamId, teams]) }, [selectedTeamId, teams])
function handleRename(e) { function handleRename(e) {
@@ -74,10 +77,20 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
</div> </div>
</div> </div>
</div> </div>
<div className='m-5 h-full flex flex-col'> <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> <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} /> <CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} markerPosition={team?.currentLocation} />
</div> </div>
</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>
) )
} }