Cleaning

traque-front/components/button.jsx

@@ -1,16 +0,0 @@
-export function CustomButton({ color, children, ...props }) {
-    const colorClasses = {
-        blue: 'bg-blue-600 hover:bg-blue-500',
-        red: 'bg-red-600 hover:bg-red-500',
-        green: 'bg-green-600 hover:bg-green-500',
-        yellow: 'bg-yellow-600 hover:bg-yellow-500',
-        purple: 'bg-purple-600 hover:bg-purple-500',
-        gray: 'bg-gray-600 hover:bg-gray-500',
-    };
-
-    return (
-        <button {...props} className={`${colorClasses[color]} text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded`}>
-            {children}
-        </button>
-    );
-}

traque-front/components/input.jsx

@@ -1,12 +1,9 @@
-const className = "block w-full h-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600";
+export function NumberInput({onChange, ...props}) {
+    function customStringToInt(e) {
+        return parseInt(e, 10) || null;
+    }
 
-export function TextInput({...props}) {
-  return (
-    <input {...props} type="text" className={className} />
-  )
-}
-export function TextArea({...props}) {
-  return (
-    <textarea {...props} className={className} />
-  )
+    return (
+        <input className="w-12 h-10 text-center rounded ring-1 ring-inset ring-black placeholder:text-gray-400" onChange={(e) => onChange(customStringToInt(e.target.value))} {...props} />
+    )
 }

traque-front/components/layer.jsx

@@ -1,52 +1,77 @@
 import { useEffect, useState } from "react";
-import { Marker, CircleMarker, Polygon, useMap } from "react-leaflet";
+import { Marker, Tooltip, CircleMarker, Circle, Polygon, useMap } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import 'leaflet-polylinedecorator';
 
-export function Node({pos, nodeSize = 5, color = 'black'}) {
+export function Node({position, nodeSize = 5, color = 'black', display = true}) {
     return (
-        <CircleMarker center={pos} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: 1 }} />
+        display && position && <CircleMarker center={position} radius={nodeSize} pathOptions={{ color: color, fillColor: color, fillOpacity: 1 }} />
     );
 }
 
-export function LabeledPolygon({polygon, label, color = 'black', opacity = '0.5', border = 3, iconSize = 24, iconColor = 'white'}) {
-    const length = polygon.length;
-
-    if (length < 3) return null;
-
-    const sum = polygon.reduce(
-        (acc, coord) => ({
-            lat: acc.lat + coord.lat,
-            lng: acc.lng + coord.lng
-        }),
-        { lat: 0, lng: 0 }
-    );
-
-    // meanPoint can be out of the polygon
-    // Idea : take the mean point of the largest connected subpolygon
-    const meanPoint = {lat: sum.lat / length, lng: sum.lng / length}
-
+export function Label({position, label, color, size = 24, display = true}) {
     const labelIcon = L.divIcon({
         html: `<div style="
             display: flex;
             align-items: center;
             justify-content: center;
-            color: ${iconColor};
+            color: ${color};
             font-weight: bold;
-            font-size: ${iconSize}px;
-        ">${label}</div>`,
+            font-size: ${size}px;
+        ">${label || ""}</div>`,
         className: 'custom-label-icon',
-        iconSize: [iconSize, iconSize],
-        iconAnchor: [iconSize / 2, iconSize / 2]
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2]
     });
 
-    return (<>
-        <Polygon positions={polygon} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }} />
-        <Marker position={meanPoint} icon={labelIcon} />
-    </>);
+    return (
+        display && position && <Marker position={position} icon={labelIcon} />
+    );
 }
 
-export function Arrow({ pos1, pos2, color = 'black', weight = 5, arrowSize = 20, insetPixels = 25 }) {
+export function Tag({text, display = true}) {
+    return (
+        display && <Tooltip permanent direction="top" offset={[0.5, -15]} className="custom-tooltip">{text || ""}</Tooltip>
+    );
+}
+
+export function CircleZone({circle, color, opacity = '0.1', border = 3, display = true, children}) {
+    return (
+        display && circle && 
+        <Circle center={circle.center} radius={circle.radius}  pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }}>
+            {children}
+        </Circle>
+    );
+}
+
+export function PolygonZone({polygon, color, opacity = '0.1', border = 3, display = true, children}) {
+    return (
+        display && polygon && polygon.length >= 3 &&
+        <Polygon positions={polygon} pathOptions={{ color: color, fillColor: color, fillOpacity: opacity, weight: border }}>
+            {children}
+        </Polygon>
+    );
+}
+
+export function Position({position, color, onClick, display = true, children}) {
+
+    const positionIcon = new L.Icon({
+        iconUrl: `/icons/marker/${color}.png`,
+        iconSize: [30, 30],
+        iconAnchor: [15, 15],
+        popupAnchor: [0, -15],
+        shadowSize: [30, 30],
+    });
+
+    return (
+        display && position &&
+        <Marker position={position} icon={positionIcon} eventHandlers={{click: onClick}}>
+            {children}
+        </Marker>
+    );
+}
+
+export function Arrow({ pos1, pos2, color = 'black', weight = 5, arrowSize = 20, insetPixels = 25, display = true }) {
     const map = useMap();
     const [insetPositions, setInsetPositions] = useState(null);
     
@@ -103,7 +128,7 @@ export function Arrow({ pos1, pos2, color = 'black', weight = 5, arrowSize = 20,
     }, [pos1, pos2]);
 
     useEffect(() => {
-        if (!insetPositions) return;
+        if (!display || !insetPositions) return;
 
         // Create the base polyline
         const polyline = L.polyline(insetPositions, {

traque-front/components/list.jsx

@@ -9,14 +9,14 @@ export function List({array, selectedId, onSelected, children}) {
     return (
         <div className='w-full h-full bg-gray-300 overflow-y-scroll'>
             <ul className="w-full p-1 pb-0">
-                {array.map((elem, i) => (
+                {array?.map((elem, i) => (
                     <li className="w-full" key={elem.id}>
                         <div className={"w-full" + cursor() + outline(elem.id)} onClick={() => canSelect && onSelected(elem.id)}>
                             {children(elem, i)}
                         </div>
                         <div className="w-full h-1"/>
                     </li>
-                ))}
+                )) ?? null}
             </ul>
         </div>
     );
@@ -50,7 +50,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
                 {provided => (
                     <div className='w-full h-full bg-gray-300 overflow-y-scroll' ref={provided.innerRef} {...provided.droppableProps}>
                         <ul className="w-full p-1 pb-0">
-                            {localArray.map((elem, i) => (
+                            {localArray?.map((elem, i) => (
                                 <li className='w-full' key={elem.id}>
                                     <Draggable draggableId={elem.id.toString()} index={i}>
                                         {provided => (
@@ -61,7 +61,7 @@ export function ReorderList({droppableId, array, setArray, children}) {
                                         )}
                                     </Draggable>
                                 </li>
-                            ))}
+                            )) ?? null}
                         </ul>
                         {provided.placeholder}
                     </div>

traque-front/components/map.jsx

@@ -17,6 +17,7 @@ export function MapPan({center, zoom, animate=false}) {
 
 export function MapEventListener({ onLeftClick, onRightClick, onMouseMove, onDragStart }) {
     const map = useMap();
+    // TODO use useMapEvents instead of this + detect when zoom
 
     // Handle the mouse click left
     useEffect(() => {

traque-front/components/section.jsx

@@ -2,9 +2,11 @@ export function Section({title, outerClassName, innerClassName, children}) {
     return (
         <div className={outerClassName}>
             <div className='w-full h-full flex flex-col shadow-2xl'>
-                <div className='w-full p-1 bg-custom-light-blue text-center'>
-                    <h2 className="text-l">{title}</h2>
-                </div>
+                {title &&
+                    <div className='w-full p-1 bg-custom-light-blue text-center'>
+                        <h2 className="text-l">{title}</h2>
+                    </div>
+                }
                 <div className='w-full flex-1 min-h-0 p-3 bg-white'>
                     <div className={`w-full h-full ${innerClassName}`}>
                         {children}