88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import RenameInput from "../../../ui/inputs/RenameInput";
|
|
import Vector3Input from "../customInput/Vector3Input";
|
|
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
|
|
import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
|
|
import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
|
|
|
|
const ZoneProperties: React.FC = () => {
|
|
const { Edit, setEdit } = useEditPosition();
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
|
const { zonePosition, setZonePosition } = usezonePosition();
|
|
const { zoneTarget, setZoneTarget } = usezoneTarget();
|
|
|
|
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);
|
|
console.log('response: ', response);
|
|
|
|
|
|
setEdit(false);
|
|
} catch (error) {
|
|
console.error("Error in handleSetView:", error);
|
|
}
|
|
}
|
|
|
|
function handleEditView() {
|
|
setEdit(!Edit); // This will toggle the `Edit` state correctly
|
|
}
|
|
|
|
function handleZoneNameChange(newName: string) {
|
|
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
|
}
|
|
|
|
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
|
|
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
}, [selectedZone]);
|
|
|
|
return (
|
|
<div className="zone-properties-container">
|
|
<div className="header">
|
|
<RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
|
|
<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>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ZoneProperties;
|
|
|