From 1b967eda287329e9244f1a59dd19e3979dc7c844 Mon Sep 17 00:00:00 2001
From: Quentin Roussel <contact@quentinrsl.com>
Date: Fri, 19 Apr 2024 19:00:11 +0200
Subject: [PATCH] improved zone selector

---
 traque-front/components/admin/teamEdit.jsx     |  2 +-
 traque-front/components/admin/zoneSelector.jsx | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/traque-front/components/admin/teamEdit.jsx b/traque-front/components/admin/teamEdit.jsx
index 45cecae..95fc4f9 100644
--- a/traque-front/components/admin/teamEdit.jsx
+++ b/traque-front/components/admin/teamEdit.jsx
@@ -68,7 +68,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                         <div className='flex flex-row'>
                             <p>Penalties :</p>
                             <button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(-1)}>-</button>
-                            <p> {team.penalties}</p>
+                            <p>{team.penalties}</p>
                             <button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(1)}>+</button>
                         </div>
                     </div>
diff --git a/traque-front/components/admin/zoneSelector.jsx b/traque-front/components/admin/zoneSelector.jsx
index c572c75..dfe9387 100644
--- a/traque-front/components/admin/zoneSelector.jsx
+++ b/traque-front/components/admin/zoneSelector.jsx
@@ -27,6 +27,16 @@ export function ZoneSelector() {
         changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
     }
 
+    //When the user set one zone, switch to the other
+    useEffect(() => {
+        if(editMode == EditMode.MIN) {
+            setEditMode(EditMode.MAX);
+        }else {
+            setEditMode(EditMode.MIN);
+        }
+
+    }, [minZone, maxZone]);
+
     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">Edit zones</h2>
         {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}