126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import RenameInput from "../../../ui/inputs/RenameInput";
|
|
import Vector3Input from "../customInput/Vector3Input";
|
|
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
|
|
import {
|
|
useEditPosition,
|
|
usezonePosition,
|
|
useZones,
|
|
usezoneTarget,
|
|
} from "../../../../store/store";
|
|
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
|
|
|
|
const ZoneProperties: React.FC = () => {
|
|
const { Edit, setEdit } = useEditPosition();
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
|
const { zonePosition, setZonePosition } = usezonePosition();
|
|
const { zoneTarget, setZoneTarget } = usezoneTarget();
|
|
const { zones, setZones } = useZones();
|
|
|
|
useEffect(() => {
|
|
setZonePosition(selectedZone.zoneViewPortPosition);
|
|
setZoneTarget(selectedZone.zoneViewPortTarget);
|
|
}, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]);
|
|
|
|
async function handleSetView() {
|
|
try {
|
|
const email = localStorage.getItem("email") || "";
|
|
const organization = email?.split("@")[1]?.split(".")[0];
|
|
|
|
let zonesdata = {
|
|
zoneId: selectedZone.zoneId,
|
|
viewPortposition: zonePosition,
|
|
viewPortCenter: zoneTarget,
|
|
};
|
|
|
|
let response = await zoneCameraUpdate(zonesdata, organization);
|
|
if (response.message === "updated successfully") {
|
|
setEdit(false);
|
|
} else {
|
|
// console.log(response);
|
|
}
|
|
} catch (error) {
|
|
echo.error("Failed to set zone view");
|
|
}
|
|
}
|
|
|
|
function handleEditView() {
|
|
setEdit(!Edit); // This will toggle the `Edit` state correctly
|
|
}
|
|
|
|
async function handleZoneNameChange(newName: string) {
|
|
const email = localStorage.getItem("email") || "";
|
|
const organization = email?.split("@")[1]?.split(".")[0];
|
|
const zonesdata = {
|
|
zoneId: selectedZone.zoneId,
|
|
zoneName: newName,
|
|
};
|
|
// Call your API to update the zone
|
|
let response = await zoneCameraUpdate(zonesdata, organization);
|
|
console.log("response: ", response);
|
|
if (response.message === "updated successfully") {
|
|
setZones((prevZones: any[]) =>
|
|
prevZones.map((zone) =>
|
|
zone.zoneId === selectedZone.zoneId
|
|
? { ...zone, zoneName: newName }
|
|
: zone
|
|
)
|
|
);
|
|
} else {
|
|
// console.log(response?.message);
|
|
}
|
|
}
|
|
function handleVectorChange(
|
|
key: "zoneViewPortTarget" | "zoneViewPortPosition",
|
|
newValue: [number, number, number]
|
|
) {
|
|
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
|
|
}
|
|
const checkZoneNameDuplicate = (name: string) => {
|
|
return zones.some(
|
|
(zone: any) =>
|
|
zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
|
|
zone.zoneId !== selectedZone.zoneId
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="zone-properties-container">
|
|
<section>
|
|
<div className="header">
|
|
<RenameInput
|
|
value={selectedZone.zoneName}
|
|
onRename={handleZoneNameChange}
|
|
checkDuplicate={checkZoneNameDuplicate}
|
|
/>
|
|
<div className="button" onClick={handleEditView}>
|
|
{Edit ? "Cancel" : "Edit"}
|
|
</div>
|
|
</div>
|
|
<Vector3Input
|
|
onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
|
|
header="Viewport Target"
|
|
value={zoneTarget as [number, number, number]}
|
|
disabled={!Edit}
|
|
/>
|
|
<Vector3Input
|
|
onChange={(value) =>
|
|
handleVectorChange("zoneViewPortPosition", value)
|
|
}
|
|
header="Viewport Position"
|
|
value={zonePosition as [number, number, number]}
|
|
disabled={!Edit}
|
|
/>
|
|
|
|
{Edit && (
|
|
<div className="button-save" onClick={handleSetView}>
|
|
Set View
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ZoneProperties;
|