public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 18:20:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added placement zones

Browse Source
This commit is contained in:
Sebastien Riviere
2025-09-07 17:24:29 +02:00
parent 93f9a05b1a
commit 75f8b10ecd
17 changed files with 436 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
traque-front/app/admin/parameters/components/circleZoneSelector.jsx
View File

@@ -5,8 +5,10 @@ import { CustomButton } from "@/components/button";
import { CustomMapContainer, MapEventListener } from "@/components/map";
import { TextInput } from "@/components/input";
import useAdmin from "@/hook/useAdmin";
import useMapCircleDraw from "@/hook/useMapCircleDraw";
import useMapCircleDraw from "@/hook/useCircleDraw";
import useLocalVariable from "@/hook/useLocalVariable";
import { defaultZoneSettings } from "@/util/configurations";
import { ZoneTypes } from "@/util/types";
const EditMode = {
MIN: 0,
@@ -28,17 +30,40 @@ function Drawings({ minZone, setMinZone, maxZone, setMaxZone, editMode }) {
</>);
}
export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, applyZoneSettings}) {
const {outOfZoneDelay, updateSettings} = useAdmin();
export default function CircleZoneSelector() {
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}));
const [editMode, setEditMode] = useState(EditMode.MIN);
useEffect(() => {
setEditMode(editMode == EditMode.MIN ? EditMode.MAX : EditMode.MIN);
}, [zoneSettings.min, zoneSettings.max]);
if (localZoneSettings.type != ZoneTypes.CIRCLE) {
setLocalZoneSettings(defaultZoneSettings.circle);
}
}, [localZoneSettings]);
function handleSettingsSubmit() {
applyZoneSettings();
useEffect(() => {
setEditMode(editMode == EditMode.MIN ? EditMode.MAX : EditMode.MIN);
}, [localZoneSettings.min, localZoneSettings.max]);
function setMinZone(minZone) {
setLocalZoneSettings({...localZoneSettings, min: minZone});
}
function setMaxZone(maxZone) {
setLocalZoneSettings({...localZoneSettings, max: maxZone});
}
function updateReductionCount(reductionCount) {
setLocalZoneSettings({...localZoneSettings, reductionCount: reductionCount});
}
function updateDuration(duration) {
setLocalZoneSettings({...localZoneSettings, duration: duration});
}
function handleSubmit() {
applyLocalZoneSettings();
applyLocalOutOfZoneDelay();
}
@@ -48,38 +73,40 @@ export default function CircleZoneSelector({zoneSettings, modifyZoneSettings, ap
return (
<div className='h-full w-full gap-3 flex flex-row'>
<div className="h-full flex-1">
<CustomMapContainer>
<Drawings minZone={zoneSettings.min} setMinZone={(e) => modifyZoneSettings("min", e)} maxZone={zoneSettings.max} setMaxZone={(e) => modifyZoneSettings("max", e)} editMode={editMode} />
</CustomMapContainer>
</div>
<div className="h-full w-1/6 flex flex-col gap-3">
<div className="w-full h-15">
{editMode == EditMode.MIN && <CustomButton color="blue" onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</CustomButton>}
{editMode == EditMode.MAX && <CustomButton color="red" onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</CustomButton>}
{localZoneSettings.type == ZoneTypes.CIRCLE && <>
<div className="h-full flex-1">
<CustomMapContainer>
<Drawings minZone={localZoneSettings.min} setMinZone={setMinZone} maxZone={localZoneSettings.max} setMaxZone={setMaxZone} editMode={editMode} />
</CustomMapContainer>
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Reduction number</p>
<div className="w-16 h-10">
<TextInput id="reduction-number" value={zoneSettings?.reductionCount ?? ""} onChange={(e) => modifyZoneSettings("reductionCount", customStringToInt(e.target.value))} />
<div className="h-full w-1/6 flex flex-col gap-3">
<div className="w-full h-15">
{editMode == EditMode.MIN && <CustomButton color="blue" onClick={() => setEditMode(EditMode.MAX)}>Click to edit first zone</CustomButton>}
{editMode == EditMode.MAX && <CustomButton color="red" onClick={() => setEditMode(EditMode.MIN)}>Click to edit last zone</CustomButton>}
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Reduction number</p>
<div className="w-16 h-10">
<TextInput id="reduction-number" value={localZoneSettings.reductionCount ?? ""} onChange={(e) => updateReductionCount(customStringToInt(e.target.value))} />
</div>
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Zone duration</p>
<div className="w-16 h-10">
<TextInput id="duration" value={localZoneSettings.duration ?? ""} onChange={(e) => updateDuration(customStringToInt(e.target.value))} />
</div>
</div>
<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>
</div>
<div className="w-full h-15">
<CustomButton color="green" onClick={handleSubmit}>Apply</CustomButton>
</div>
</div>
<div className="w-full flex flex-row gap-2 items-center justify-between">
<p>Zone duration</p>
<div className="w-16 h-10">
<TextInput id="duration" value={zoneSettings?.duration ?? ""} onChange={(e) => modifyZoneSettings("duration", customStringToInt(e.target.value))} />
</div>
</div>
<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>
</div>
<div className="w-full h-15">
<CustomButton color="green" onClick={handleSettingsSubmit}>Apply</CustomButton>
</div>
</div>
</>}
</div>
);
}