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

added front end for uploading photo on waiting screen

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-20 00:35:09 +02:00
parent 1b967eda28
commit b5dd6343d2
3 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
traque-front/components/admin/mapPicker.jsx
View File

@@ -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>)

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

@@ -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>
)