Dwinzo_dev/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

112 lines
3.7 KiB
TypeScript
Raw Normal View History

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, useZones, usezoneTarget } from "../../../../store/store";
2025-04-21 06:23:42 +00:00
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
2025-03-26 06:52:04 +00:00
const ZoneProperties: React.FC = () => {
2025-03-27 06:58:17 +00:00
const { Edit, setEdit } = useEditPosition();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
2025-03-27 06:58:17 +00:00
const { zonePosition, setZonePosition } = usezonePosition();
const { zoneTarget, setZoneTarget } = usezoneTarget();
const { zones, setZones } = useZones();
2025-03-27 06:58:17 +00:00
useEffect(() => {
setZonePosition(selectedZone.zoneViewPortPosition)
setZoneTarget(selectedZone.zoneViewPortTarget)
}, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
2025-03-26 06:52:04 +00:00
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);
2025-04-07 12:29:52 +00:00
if (response.message === "updated successfully") {
setEdit(false);
} else {
2025-04-11 12:22:07 +00:00
// console.log(response);
2025-04-07 12:29:52 +00:00
}
} catch (error) {
}
2025-03-26 06:52:04 +00:00
}
function handleEditView() {
2025-03-27 06:58:17 +00:00
setEdit(!Edit); // This will toggle the `Edit` state correctly
2025-03-26 06:52:04 +00:00
}
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
)
);
2025-04-15 12:58:37 +00:00
} else {
2025-04-11 12:22:07 +00:00
// console.log(response?.message);
}
2025-03-27 06:58:17 +00:00
}
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
}
2025-04-15 12:58:37 +00:00
const checkZoneNameDuplicate = (name: string) => {
return zones.some(
(zone: any) =>
zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
zone.zoneId !== selectedZone.zoneId
);
};
2025-03-26 06:52:04 +00:00
return (
<div className="zone-properties-container">
<div className="header">
2025-04-15 12:58:37 +00:00
<RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} />
2025-03-26 06:52:04 +00:00
<div className="button" onClick={handleEditView}>
{Edit ? "Cancel" : "Edit"}
</div>
</div>
2025-03-27 06:58:17 +00:00
<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}
/>
2025-03-26 06:52:04 +00:00
{Edit && (
<div className="button-save" onClick={handleSetView}>
Set View
</div>
)}
</div>
);
};
export default ZoneProperties;
2025-03-27 06:58:17 +00:00