mirror of
https://git.rezel.net/LudoTech/traque.git
synced 2026-02-09 10:20:16 +01:00
Added placement zones
This commit is contained in:
Sebastien Riviere
@@ -7,15 +7,24 @@ import { CustomMapContainer, MapEventListener } from "@/components/map";
|
||||
import { TextInput } from "@/components/input";
|
||||
import { Node, LabeledPolygon } from "@/components/layer";
|
||||
import useAdmin from "@/hook/useAdmin";
|
||||
import useMapPolygonDraw from "@/hook/useMapPolygonDraw";
|
||||
import useMapPolygonDraw from "@/hook/usePolygonDraw";
|
||||
import useLocalVariable from "@/hook/useLocalVariable";
|
||||
import { defaultZoneSettings } from "@/util/configurations";
|
||||
import { ZoneTypes } from "@/util/types";
|
||||
|
||||
function Drawings({ polygons, addPolygon, removePolygon }) {
|
||||
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addPolygon, removePolygon);
|
||||
function Drawings({ localZoneSettings, addZone, removeZone }) {
|
||||
const [polygons, setPolygons] = useState([]);
|
||||
const { currentPolygon, highlightNodes, handleLeftClick, handleRightClick, handleMouseMove } = useMapPolygonDraw(polygons, addZone, removeZone);
|
||||
|
||||
useEffect(() => {
|
||||
if (localZoneSettings.type == ZoneTypes.POLYGON) {
|
||||
setPolygons(localZoneSettings.polygons.map(zone => zone.polygon));
|
||||
}
|
||||
}, [localZoneSettings]);
|
||||
|
||||
return (<>
|
||||
<MapEventListener onLeftClick={handleLeftClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} />
|
||||
{polygons.map((polygon, i) => <LabeledPolygon key={i} polygon={polygon} number={i+1} />)}
|
||||
{localZoneSettings.polygons.map((zone, i) => <LabeledPolygon key={i} polygon={zone.polygon} label={zone.id} />)}
|
||||
{ currentPolygon.length > 0 && <>
|
||||
<Node pos={currentPolygon[0]} color={"red"} />
|
||||
<Polyline positions={currentPolygon} pathOptions={{ color: "red", weight: 3 }} />
|
||||
@@ -24,73 +33,87 @@ function Drawings({ polygons, addPolygon, removePolygon }) {
|
||||
</>);
|
||||
}
|
||||
|
||||
export default function PolygonZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
|
||||
export default function PolygonZoneSelector() {
|
||||
const defaultDuration = 10;
|
||||
const [polygons, setPolygons] = useState([]);
|
||||
const {outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const {zoneSettings, outOfZoneDelay, updateSettings} = useAdmin();
|
||||
const [localZoneSettings, setLocalZoneSettings, applyLocalZoneSettings] = useLocalVariable(zoneSettings, (e) => updateSettings({zone: e}));
|
||||
const [localOutOfZoneDelay, setLocalOutOfZoneDelay, applyLocalOutOfZoneDelay] = useLocalVariable(outOfZoneDelay, (e) => updateSettings({outOfZoneDelay: e}));
|
||||
|
||||
useEffect(() => {
|
||||
if (zoneSettings) {
|
||||
setPolygons(zoneSettings.polygons.map((zone) => zone.polygon));
|
||||
if (localZoneSettings.type != ZoneTypes.POLYGON) {
|
||||
setLocalZoneSettings(defaultZoneSettings.polygon);
|
||||
}
|
||||
}, [zoneSettings]);
|
||||
}, [localZoneSettings]);
|
||||
|
||||
function idFromPolygon(polygon) {
|
||||
return (polygon[0].lat + polygon[1].lat + polygon[2].lat).toString() + (polygon[0].lng + polygon[1].lng + polygon[2].lng).toString();
|
||||
function getNewPolygonName() {
|
||||
const existingIds = new Set(localZoneSettings.polygons.map(zone => zone.id));
|
||||
for (let i = 0; i < 26; i++) {
|
||||
const letter = String.fromCharCode(65 + i);
|
||||
if (!existingIds.has(letter)) {
|
||||
return letter;
|
||||
}
|
||||
}
|
||||
return "XXX";
|
||||
}
|
||||
|
||||
function addPolygon(polygon) {
|
||||
const newPolygons = [...zoneSettings.polygons, {id: idFromPolygon(polygon), polygon: polygon, duration: defaultDuration}];
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
function setLocalZoneSettingsPolygons(polygons) {
|
||||
setLocalZoneSettings({type: localZoneSettings.type, polygons: polygons});
|
||||
}
|
||||
|
||||
function removePolygon(i) {
|
||||
const newPolygons = zoneSettings.polygons.filter((_, index) => index !== i);
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
function addZone(polygon) {
|
||||
setLocalZoneSettingsPolygons([...localZoneSettings.polygons, {id: getNewPolygonName(), polygon: polygon, duration: defaultDuration}]);
|
||||
}
|
||||
|
||||
function updateDuration(i, duration) {
|
||||
const newPolygons = zoneSettings.polygons.map((zone, index) => index === i ? {id: zone.id, polygon: zone.polygon, duration: duration} : zone);
|
||||
modifyZoneSettings("polygons", newPolygons);
|
||||
function removeZone(i) {
|
||||
setLocalZoneSettingsPolygons(localZoneSettings.polygons.filter((_, index) => index !== i));
|
||||
}
|
||||
|
||||
function handleSettingsSubmit() {
|
||||
applyZoneSettings();
|
||||
function updateDuration(id, duration) {
|
||||
setLocalZoneSettingsPolygons(localZoneSettings.polygons.map(zone => zone.id === id ? {...zone, duration: duration} : zone));
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
applyLocalZoneSettings();
|
||||
applyLocalOutOfZoneDelay();
|
||||
}
|
||||
|
||||
function customStringToInt(e) {
|
||||
return parseInt(e, 10) || null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='h-full w-full gap-3 flex flex-row'>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings polygons={polygons} addPolygon={addPolygon} removePolygon={removePolygon} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-xl">Reduction order</h2>
|
||||
{localZoneSettings.type == ZoneTypes.POLYGON && <>
|
||||
<div className="h-full flex-1">
|
||||
<CustomMapContainer>
|
||||
<Drawings localZoneSettings={localZoneSettings} addZone={addZone} removeZone={removeZone} />
|
||||
</CustomMapContainer>
|
||||
</div>
|
||||
<ReorderList droppableId="zones-order" array={zoneSettings.polygons} setArray={(polygons) => modifyZoneSettings("polygons", polygons)}>
|
||||
{ (zone, i) =>
|
||||
<div className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
|
||||
<p>Zone {i+1}</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={zone?.duration || ""} onChange={(e) => updateDuration(i, parseInt(e.target.value, 10))}/>
|
||||
<div className="h-full w-1/6 flex flex-col gap-3">
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-xl">Reduction order</h2>
|
||||
</div>
|
||||
<ReorderList droppableId="zones-order" array={localZoneSettings.polygons} setArray={setLocalZoneSettingsPolygons}>
|
||||
{ (zone) =>
|
||||
<div className="w-full p-2 bg-white flex flex-row gap-2 items-center justify-between">
|
||||
<p>Zone {zone.id}</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput value={zone.duration || ""} onChange={(e) => updateDuration(zone.id, customStringToInt(e.target.value))}/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ReorderList>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Timeout</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(customStringToInt(e.target.value))}/>
|
||||
</div>
|
||||
}
|
||||
</ReorderList>
|
||||
<div className="w-full flex flex-row gap-2 items-center justify-between">
|
||||
<p>Timeout</p>
|
||||
<div className="w-16 h-10">
|
||||
<TextInput id="timeout" value={localOutOfZoneDelay ?? ""} onChange={(e) => setLocalOutOfZoneDelay(parseInt(e.target.value, 10))} />
|
||||
</div>
|
||||
<div className="w-full h-15">
|
||||
<CustomButton color="green" onClick={handleSubmit}>Apply</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-15">
|
||||
<CustomButton color="green" onClick={handleSettingsSubmit}>Apply</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user