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

traque-front/components/admin/mapPicker.jsx

@@ -80,7 +80,10 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
             minHover(e);
         }
     }
+
     return (
+        <div>
+            <div className='h-96'>
             <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'
@@ -91,6 +94,12 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
                 <MapPan center={location} zoom={DEFAULT_ZOOM} />
                 <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
             </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>
+        
     )
 }
 

traque-front/components/admin/zoneSelector.jsx

@@ -41,9 +41,7 @@ export function ZoneSelector() {
         <h2 className="text-2xl">Edit zones</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>
             <p>Number of reductions</p>
             <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>