From 284dccb702da32bfb01209dadb84fa8a66d8fbdd Mon Sep 17 00:00:00 2001
From: Mathieu Oriol <mathieu.oriol@telecom-paris.fr>
Date: Mon, 9 Sep 2024 23:11:10 +0200
Subject: [PATCH] front: msg avertissement si zones invalides creees (issue
 #23)

---
 traque-front/components/admin/mapPicker.jsx   | 29 ++++++++++++-------
 .../components/admin/zoneSelector.jsx         |  4 +--
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/traque-front/components/admin/mapPicker.jsx b/traque-front/components/admin/mapPicker.jsx
index e511c3b..c9d7993 100644
--- a/traque-front/components/admin/mapPicker.jsx
+++ b/traque-front/components/admin/mapPicker.jsx
@@ -80,17 +80,26 @@ export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode,
             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"
-            />
-            {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>
+        <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'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                {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>
+        </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>
+        
     )
 }
 
diff --git a/traque-front/components/admin/zoneSelector.jsx b/traque-front/components/admin/zoneSelector.jsx
index 2ef1781..5b00205 100644
--- a/traque-front/components/admin/zoneSelector.jsx
+++ b/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>
+        <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
         <div>
             <p>Number of reductions</p>
             <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>