front: msg avertissement si zones invalides creees (issue #23)

This commit is contained in:
Mathieu Oriol
2024-09-09 23:11:10 +02:00
parent 7c2f02188d
commit 284dccb702
2 changed files with 20 additions and 13 deletions

View File

@@ -80,7 +80,10 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
minHover(e); minHover(e);
} }
} }
return ( return (
<div>
<div className='h-96'>
<MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}> <MapContainer {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
<TileLayer <TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -91,6 +94,12 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
<MapPan center={location} zoom={DEFAULT_ZOOM} /> <MapPan center={location} zoom={DEFAULT_ZOOM} />
<MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} /> <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
</MapContainer> </MapContainer>
</div>
{ maxCenter && minCenter && typeof maxCenter.distanceTo === 'function'
&& maxRadius + maxCenter.distanceTo(minCenter) >= minRadius
&& <p className="text-red-500">La zone de fin doit être incluse dans celle de départ</p>}
</div>
) )
} }

View File

@@ -41,9 +41,7 @@ export function ZoneSelector() {
<h2 className="text-2xl">Edit zones</h2> <h2 className="text-2xl">Edit zones</h2>
{editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>} {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
{editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>} {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} /> <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
</div>
<div> <div>
<p>Number of reductions</p> <p>Number of reductions</p>
<TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput> <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>