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

front end design for zone selection

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-03 22:02:18 +02:00
parent 846d12078d
commit 738b453e9c
5 changed files with 52 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,18 +50,36 @@ export function CircularAreaPicker({area, setArea, ...props}) {
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)
}
export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
export const EditMode = {
MIN: 0,
MAX: 1
}
export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea,editMode, ...props}) {
const location = useLocation(Infinity);
const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
function handleClick(e) {
if (editMode == EditMode.MAX) {
maxClick(e);
} else {
minClick(e);
}
}
function handleMouseMove(e) {
if (editMode == EditMode.MAX) {
maxHover(e);
} else {
minHover(e);
}
}
return (
<MapContainer {...props} className='min-h-full w-full ' 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"
/>
{center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
{minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue"/>}
{maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red"/>}
<MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer>)

17
traque-front/components/admin/zoneSelector.jsx Normal file
View File

@@ -0,0 +1,17 @@
import { useState } from "react";
import BlueButton, { RedButton } from "../util/button";
import { EditMode, ZonePicker } from "./mapPicker";
export function ZoneSelector() {
const [editMode, setEditMode] = useState(EditMode.MIN);
const [minZone, setMinZone] = useState(null);
const [maxZone, setMaxZone] = useState(null);
return <div className='w-2/5 h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
<h2 className="text-2xl">Teams ready status</h2>
{editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
{editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>}
<div className='h-96'>
<ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
</div>
</div>
}