update state for throughput analysis
This commit is contained in:
parent
35496f5571
commit
35c21c60b2
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from "chart.js";
|
||||
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
|
||||
import SkeletonUI from "../../templates/SkeletonUI";
|
||||
import { useMachineUptime } from "../../../store/store";
|
||||
|
||||
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
|
|
@ -19,12 +20,9 @@ const ThroughputSummary = () => {
|
|||
endTime: "09:00 AM",
|
||||
};
|
||||
|
||||
const throughputData = {
|
||||
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
|
||||
data: [5, 10, 8, 10, 12, 10],
|
||||
totalThroughput: 1240,
|
||||
assetUsage: 85,
|
||||
};
|
||||
const { machineActiveTime } = useMachineUptime();
|
||||
|
||||
|
||||
|
||||
const energyConsumption = {
|
||||
energyConsumed: 456,
|
||||
|
|
@ -38,19 +36,7 @@ const ThroughputSummary = () => {
|
|||
{ shift: 3, percentage: 30, color: "#7981F5" },
|
||||
];
|
||||
|
||||
// Chart data configuration
|
||||
const chartData = {
|
||||
labels: throughputData.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Units/hour",
|
||||
data: throughputData.data,
|
||||
borderColor: "#B392F0",
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // Hide points
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
|
|
@ -73,6 +59,35 @@ const ThroughputSummary = () => {
|
|||
},
|
||||
};
|
||||
|
||||
const assetUsage = 85;
|
||||
|
||||
// machineActiveTime => Throughput
|
||||
// shiftUtilization.length => Shifts per day
|
||||
// 8 => Shift length
|
||||
// assetUsage => Yield rate
|
||||
|
||||
const throughtputMachineData = machineActiveTime * shiftUtilization.length * 8
|
||||
|
||||
const throughputData = {
|
||||
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
|
||||
data: [5, 10, 8, 10, 12, 10],
|
||||
totalThroughput: (throughtputMachineData) * assetUsage / 100,
|
||||
assetUsage: assetUsage,
|
||||
};
|
||||
|
||||
// Chart data configuration
|
||||
const chartData = {
|
||||
labels: throughputData.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Units/hour",
|
||||
data: throughputData.data,
|
||||
borderColor: "#B392F0",
|
||||
tension: 0.4,
|
||||
pointRadius: 0, // Hide points
|
||||
},
|
||||
],
|
||||
};
|
||||
const isLoading = false;
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useMachineCount, useMachineUptime } from "../../../store/store";
|
||||
import { useMachineCount, useMachineUptime, useMaterialCycle } from "../../../store/store";
|
||||
import {
|
||||
ProductionCapacityIcon,
|
||||
ThroughputSummaryIcon,
|
||||
|
|
@ -7,26 +7,34 @@ import {
|
|||
import SkeletonUI from "../../templates/SkeletonUI";
|
||||
|
||||
const ProductionCapacity = ({
|
||||
progressPercent = 50,
|
||||
avgProcessTime = "28.4 Secs/unit",
|
||||
machineUtilization = "78%",
|
||||
throughputValue = 128,
|
||||
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
|
||||
}) => {
|
||||
|
||||
|
||||
const { machineCount } = useMachineCount();
|
||||
const { machineActiveTime } = useMachineUptime();
|
||||
const { materialCycleTime } = useMaterialCycle();
|
||||
|
||||
const progressPercent = machineActiveTime;
|
||||
|
||||
|
||||
const totalBars = 6;
|
||||
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
|
||||
const partialFillPercent =
|
||||
((progressPercent / 100) * totalBars - barsToFill) * 100;
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { machineCount, setMachineCount } = useMachineCount()
|
||||
const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
|
||||
// const { machineCount, setMachineCount } = useMachineCount()
|
||||
// const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
machineUtilization = machineActiveTime
|
||||
console.log('machineActiveTime: ', machineActiveTime);
|
||||
}, [machineActiveTime])
|
||||
|
||||
|
||||
return (
|
||||
<div className="throughtputSummary-container analysis-card">
|
||||
<div className="throughtputSummary-wrapper analysis-card-wrapper">
|
||||
|
|
@ -45,7 +53,7 @@ const ProductionCapacity = ({
|
|||
<>
|
||||
<div className="process-container">
|
||||
<div className="throughput-value">
|
||||
<span className="value">{throughputValue}</span> Units/hour
|
||||
<span className="value">{machineActiveTime}</span> Units/hour
|
||||
</div>
|
||||
|
||||
{/* Dynamic Progress Bar */}
|
||||
|
|
@ -68,11 +76,12 @@ const ProductionCapacity = ({
|
|||
<div className="metrics-section">
|
||||
<div className="metric">
|
||||
<span className="label">Avg. Process Time</span>
|
||||
<span className="value">{avgProcessTime}</span>
|
||||
<span className="value">{materialCycleTime} secs/unit </span>
|
||||
</div>
|
||||
<div className="metric">
|
||||
<span className="label">Machine Utilization</span>
|
||||
<span className="value">{machineActiveTime}</span>
|
||||
<span className="value">1</span>
|
||||
{/* <span className="value">{machineActiveTime}</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
// armBots.filter(arm => arm.modelUuid === item.modelUuid)
|
||||
// .forEach(arm => {
|
||||
// if (arm.activeTime >= 0) {
|
||||
// console.log('armBot activeTime:', arm.activeTime);
|
||||
//
|
||||
// }
|
||||
// });
|
||||
// } else if (item.type === "vehicle") {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
// useEffect(() => {
|
||||
// if (totalActiveTime > 0 && materialCycleTime > 0) {
|
||||
// const avgProcessTime = (totalActiveTime / materialCycleTime) * 100;
|
||||
// console.log('Throughput (%):', avgProcessTime.toFixed(2));
|
||||
//
|
||||
// }
|
||||
// }, [totalActiveTime, materialCycleTime]);
|
||||
|
||||
|
|
@ -143,7 +143,8 @@ export default function ThroughPut() {
|
|||
const { materials } = useMaterialStore();
|
||||
|
||||
const { setMachineCount } = useMachineCount();
|
||||
const { setMachineActiveTime } = useMachineUptime();
|
||||
const { machineActiveTime, setMachineActiveTime } = useMachineUptime();
|
||||
console.log('machineActiveTime: ', machineActiveTime);
|
||||
const { setMaterialCycleTime } = useMaterialCycle();
|
||||
|
||||
const [totalActiveTime, setTotalActiveTime] = useState(0);
|
||||
|
|
@ -178,9 +179,9 @@ export default function ThroughPut() {
|
|||
useEffect(() => {
|
||||
let sum = 0;
|
||||
|
||||
console.log('armBots: ', armBots);
|
||||
|
||||
armBots.forEach(arm => {
|
||||
console.log('arm.activeTime: ', arm.activeTime);
|
||||
|
||||
if (arm.activeTime > 0) sum += arm.activeTime;
|
||||
});
|
||||
|
||||
|
|
@ -200,27 +201,33 @@ export default function ThroughPut() {
|
|||
if (storage.activeTime > 0) sum += 8; // static
|
||||
});
|
||||
|
||||
console.log('sum: ', sum);
|
||||
|
||||
|
||||
const avgProcessTime = 100 - 50; // static 50
|
||||
|
||||
const machineUptime = (sum / avgProcessTime) * 100;
|
||||
console.log('machineUptime: ', machineUptime.toFixed(2));
|
||||
console.log('machineUptime: ', machineUptime);
|
||||
|
||||
|
||||
|
||||
const machineCount = 3; // static
|
||||
const throughput = (3600 / avgProcessTime) * machineCount * (machineUptime / 100); // **IMPORTANT divide by 100 for %**
|
||||
console.log('throughPutData: ', throughput.toFixed(2));
|
||||
|
||||
|
||||
|
||||
setTotalActiveTime(sum);
|
||||
setMachineActiveTime(sum);
|
||||
setMachineActiveTime(machineUptime)
|
||||
setMaterialCycleTime(throughput)
|
||||
// setMachineActiveTime(sum);
|
||||
setThroughputData(throughput); // Save it properly here
|
||||
|
||||
}, [armBots, vehicles, machines, conveyors, storageUnits, setMachineActiveTime]);
|
||||
|
||||
// Just display throughput when ready
|
||||
useEffect(() => {
|
||||
console.log('throughputData: ', throughputData);
|
||||
|
||||
if (throughputData > 0) {
|
||||
console.log('Final Throughput (units/hour): ', throughputData.toFixed(2));
|
||||
|
||||
}
|
||||
}, [throughputData]);
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,8 @@ const Throughput: React.FC<ThroughputProps> = ({
|
|||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
|
||||
|
||||
// Sample data for the line graph
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
|
||||
|
|
@ -222,16 +224,15 @@ const Throughput: React.FC<ThroughputProps> = ({
|
|||
transform
|
||||
zIndexRange={[1, 0]}
|
||||
sprite={false}
|
||||
// style={{
|
||||
// transform: transformStyle.transform,
|
||||
// transformStyle: "preserve-3d",
|
||||
// transition: "transform 0.1s ease-out",
|
||||
// }}
|
||||
// style={{
|
||||
// transform: transformStyle.transform,
|
||||
// transformStyle: "preserve-3d",
|
||||
// transition: "transform 0.1s ease-out",
|
||||
// }}
|
||||
>
|
||||
<div
|
||||
className={`throughput-wrapper card ${
|
||||
selectedChartId?.id === id ? "activeChart" : ""
|
||||
}`}
|
||||
className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
|
||||
}`}
|
||||
onClick={() => setSelectedChartId({ id: id, type: type })}
|
||||
onContextMenu={onContextMenu}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -4,448 +4,447 @@ import { create } from "zustand";
|
|||
import { io } from "socket.io-client";
|
||||
|
||||
export const useSocketStore = create<any>((set: any, get: any) => ({
|
||||
socket: null,
|
||||
initializeSocket: (email: string, organization: string) => {
|
||||
const existingSocket = get().socket;
|
||||
if (existingSocket) {
|
||||
return;
|
||||
}
|
||||
socket: null,
|
||||
initializeSocket: (email: string, organization: string) => {
|
||||
const existingSocket = get().socket;
|
||||
if (existingSocket) {
|
||||
return;
|
||||
}
|
||||
|
||||
const socket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
|
||||
{
|
||||
reconnection: true,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
const socket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
|
||||
{
|
||||
reconnection: true,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
|
||||
const visualizationSocket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
|
||||
{
|
||||
reconnection: true,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
const visualizationSocket = io(
|
||||
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
|
||||
{
|
||||
reconnection: true,
|
||||
auth: { email, organization },
|
||||
}
|
||||
);
|
||||
|
||||
set({ socket, visualizationSocket });
|
||||
},
|
||||
disconnectSocket: () => {
|
||||
set((state: any) => {
|
||||
state.socket?.disconnect();
|
||||
state.visualizationSocket?.disconnect();
|
||||
return { socket: null };
|
||||
});
|
||||
},
|
||||
set({ socket, visualizationSocket });
|
||||
},
|
||||
disconnectSocket: () => {
|
||||
set((state: any) => {
|
||||
state.socket?.disconnect();
|
||||
state.visualizationSocket?.disconnect();
|
||||
return { socket: null };
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
export const useLoadingProgress = create<{
|
||||
loadingProgress: number;
|
||||
setLoadingProgress: (x: number) => void;
|
||||
loadingProgress: number;
|
||||
setLoadingProgress: (x: number) => void;
|
||||
}>((set) => ({
|
||||
loadingProgress: 1,
|
||||
setLoadingProgress: (x: number) => set({ loadingProgress: x }),
|
||||
loadingProgress: 1,
|
||||
setLoadingProgress: (x: number) => set({ loadingProgress: x }),
|
||||
}));
|
||||
|
||||
export const useOrganization = create<any>((set: any) => ({
|
||||
organization: "",
|
||||
setOrganization: (x: any) => set(() => ({ organization: x })),
|
||||
organization: "",
|
||||
setOrganization: (x: any) => set(() => ({ organization: x })),
|
||||
}));
|
||||
|
||||
export const useToggleView = create<any>((set: any) => ({
|
||||
toggleView: false,
|
||||
setToggleView: (x: any) => set(() => ({ toggleView: x })),
|
||||
toggleView: false,
|
||||
setToggleView: (x: any) => set(() => ({ toggleView: x })),
|
||||
}));
|
||||
|
||||
export const useUpdateScene = create<any>((set: any) => ({
|
||||
updateScene: false,
|
||||
setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
|
||||
updateScene: false,
|
||||
setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
|
||||
}));
|
||||
|
||||
export const useWalls = create<any>((set: any) => ({
|
||||
walls: [],
|
||||
setWalls: (x: any) => set(() => ({ walls: x })),
|
||||
walls: [],
|
||||
setWalls: (x: any) => set(() => ({ walls: x })),
|
||||
}));
|
||||
|
||||
export const useRoomsState = create<any>((set: any) => ({
|
||||
roomsState: [],
|
||||
setRoomsState: (x: any) => set(() => ({ walls: x })),
|
||||
roomsState: [],
|
||||
setRoomsState: (x: any) => set(() => ({ walls: x })),
|
||||
}));
|
||||
|
||||
export const useZones = create<any>((set: any) => ({
|
||||
zones: [],
|
||||
setZones: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
zones: typeof callback === "function" ? callback(state.zones) : callback,
|
||||
})),
|
||||
zones: [],
|
||||
setZones: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
zones: typeof callback === "function" ? callback(state.zones) : callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
interface ZonePointsState {
|
||||
zonePoints: THREE.Vector3[];
|
||||
setZonePoints: (points: THREE.Vector3[]) => void;
|
||||
zonePoints: THREE.Vector3[];
|
||||
setZonePoints: (points: THREE.Vector3[]) => void;
|
||||
}
|
||||
|
||||
export const useZonePoints = create<ZonePointsState>((set) => ({
|
||||
zonePoints: [],
|
||||
setZonePoints: (points) => set({ zonePoints: points }),
|
||||
zonePoints: [],
|
||||
setZonePoints: (points) => set({ zonePoints: points }),
|
||||
}));
|
||||
|
||||
export const useSelectedItem = create<any>((set: any) => ({
|
||||
selectedItem: { name: "", id: "", type: undefined },
|
||||
setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
|
||||
selectedItem: { name: "", id: "", type: undefined },
|
||||
setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
|
||||
}));
|
||||
|
||||
export const useNavMesh = create<any>((set: any) => ({
|
||||
navMesh: null,
|
||||
setNavMesh: (x: any) => set({ navMesh: x }),
|
||||
navMesh: null,
|
||||
setNavMesh: (x: any) => set({ navMesh: x }),
|
||||
}));
|
||||
|
||||
export const useSelectedAssets = create<any>((set: any) => ({
|
||||
selectedAssets: [],
|
||||
setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
|
||||
selectedAssets: [],
|
||||
setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
|
||||
}));
|
||||
|
||||
export const useLayers = create<any>((set: any) => ({
|
||||
Layers: 1,
|
||||
setLayers: (x: any) => set(() => ({ Layers: x })),
|
||||
Layers: 1,
|
||||
setLayers: (x: any) => set(() => ({ Layers: x })),
|
||||
}));
|
||||
|
||||
export const useCamPosition = create<any>((set: any) => ({
|
||||
camPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
|
||||
camPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
|
||||
}));
|
||||
|
||||
export const useMenuVisible = create<any>((set: any) => ({
|
||||
menuVisible: false,
|
||||
setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
|
||||
menuVisible: false,
|
||||
setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
|
||||
}));
|
||||
|
||||
export const useDeleteTool = create<any>((set: any) => ({
|
||||
deleteTool: false,
|
||||
setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
|
||||
deleteTool: false,
|
||||
setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
|
||||
}));
|
||||
|
||||
export const useToolMode = create<any>((set: any) => ({
|
||||
toolMode: null,
|
||||
setToolMode: (x: any) => set(() => ({ toolMode: x })),
|
||||
toolMode: null,
|
||||
setToolMode: (x: any) => set(() => ({ toolMode: x })),
|
||||
}));
|
||||
|
||||
export const useNewLines = create<any>((set: any) => ({
|
||||
newLines: [],
|
||||
setNewLines: (x: any) => set(() => ({ newLines: x })),
|
||||
newLines: [],
|
||||
setNewLines: (x: any) => set(() => ({ newLines: x })),
|
||||
}));
|
||||
|
||||
export const useDeletedLines = create<any>((set: any) => ({
|
||||
deletedLines: [],
|
||||
setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
|
||||
deletedLines: [],
|
||||
setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
|
||||
}));
|
||||
|
||||
export const useMovePoint = create<any>((set: any) => ({
|
||||
movePoint: false,
|
||||
setMovePoint: (x: any) => set(() => ({ movePoint: x })),
|
||||
movePoint: false,
|
||||
setMovePoint: (x: any) => set(() => ({ movePoint: x })),
|
||||
}));
|
||||
|
||||
export const useTransformMode = create<any>((set: any) => ({
|
||||
transformMode: null,
|
||||
setTransformMode: (x: any) => set(() => ({ transformMode: x })),
|
||||
transformMode: null,
|
||||
setTransformMode: (x: any) => set(() => ({ transformMode: x })),
|
||||
}));
|
||||
|
||||
export const useDeletePointOrLine = create<any>((set: any) => ({
|
||||
deletePointOrLine: false,
|
||||
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
|
||||
deletePointOrLine: false,
|
||||
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
|
||||
}));
|
||||
|
||||
export const useFloorItems = create<any>((set: any) => ({
|
||||
floorItems: null,
|
||||
setFloorItems: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
floorItems:
|
||||
typeof callback === "function" ? callback(state.floorItems) : callback,
|
||||
})),
|
||||
floorItems: null,
|
||||
setFloorItems: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
floorItems:
|
||||
typeof callback === "function" ? callback(state.floorItems) : callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useWallItems = create<any>((set: any) => ({
|
||||
wallItems: [],
|
||||
setWallItems: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
wallItems:
|
||||
typeof callback === "function" ? callback(state.wallItems) : callback,
|
||||
})),
|
||||
wallItems: [],
|
||||
setWallItems: (callback: any) =>
|
||||
set((state: any) => ({
|
||||
wallItems:
|
||||
typeof callback === "function" ? callback(state.wallItems) : callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useSelectedWallItem = create<any>((set: any) => ({
|
||||
selectedWallItem: null,
|
||||
setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
|
||||
selectedWallItem: null,
|
||||
setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
|
||||
}));
|
||||
|
||||
export const useSelectedFloorItem = create<any>((set: any) => ({
|
||||
selectedFloorItem: null,
|
||||
setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
|
||||
selectedFloorItem: null,
|
||||
setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
|
||||
}));
|
||||
|
||||
export const useDeletableFloorItem = create<any>((set: any) => ({
|
||||
deletableFloorItem: null,
|
||||
setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
|
||||
deletableFloorItem: null,
|
||||
setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
|
||||
}));
|
||||
|
||||
export const useSetScale = create<any>((set: any) => ({
|
||||
scale: null,
|
||||
setScale: (x: any) => set(() => ({ scale: x })),
|
||||
scale: null,
|
||||
setScale: (x: any) => set(() => ({ scale: x })),
|
||||
}));
|
||||
|
||||
export const useRoofVisibility = create<any>((set: any) => ({
|
||||
roofVisibility: false,
|
||||
setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
|
||||
roofVisibility: false,
|
||||
setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
|
||||
}));
|
||||
|
||||
export const useWallVisibility = create<any>((set: any) => ({
|
||||
wallVisibility: false,
|
||||
setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
|
||||
wallVisibility: false,
|
||||
setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
|
||||
}));
|
||||
|
||||
export const useShadows = create<any>((set: any) => ({
|
||||
shadows: false,
|
||||
setShadows: (x: any) => set(() => ({ shadows: x })),
|
||||
shadows: false,
|
||||
setShadows: (x: any) => set(() => ({ shadows: x })),
|
||||
}));
|
||||
|
||||
export const useSunPosition = create<any>((set: any) => ({
|
||||
sunPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setSunPosition: (newSuntPosition: any) =>
|
||||
set({ sunPosition: newSuntPosition }),
|
||||
sunPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setSunPosition: (newSuntPosition: any) =>
|
||||
set({ sunPosition: newSuntPosition }),
|
||||
}));
|
||||
|
||||
export const useRemoveLayer = create<any>((set: any) => ({
|
||||
removeLayer: false,
|
||||
setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
|
||||
removeLayer: false,
|
||||
setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
|
||||
}));
|
||||
|
||||
export const useRemovedLayer = create<any>((set: any) => ({
|
||||
removedLayer: null,
|
||||
setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
|
||||
removedLayer: null,
|
||||
setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
|
||||
}));
|
||||
|
||||
export const useActiveLayer = create<any>((set: any) => ({
|
||||
activeLayer: 1,
|
||||
setActiveLayer: (x: any) => set({ activeLayer: x }),
|
||||
activeLayer: 1,
|
||||
setActiveLayer: (x: any) => set({ activeLayer: x }),
|
||||
}));
|
||||
|
||||
interface RefTextUpdateState {
|
||||
refTextupdate: number;
|
||||
setRefTextUpdate: (
|
||||
callback: (currentValue: number) => number | number
|
||||
) => void;
|
||||
refTextupdate: number;
|
||||
setRefTextUpdate: (
|
||||
callback: (currentValue: number) => number | number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
|
||||
refTextupdate: -1000,
|
||||
setRefTextUpdate: (callback) =>
|
||||
set((state) => ({
|
||||
refTextupdate:
|
||||
typeof callback === "function"
|
||||
? callback(state.refTextupdate)
|
||||
: callback,
|
||||
})),
|
||||
refTextupdate: -1000,
|
||||
setRefTextUpdate: (callback) =>
|
||||
set((state) => ({
|
||||
refTextupdate:
|
||||
typeof callback === "function"
|
||||
? callback(state.refTextupdate)
|
||||
: callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useResetCamera = create<any>((set: any) => ({
|
||||
resetCamera: false,
|
||||
setResetCamera: (x: any) => set({ resetCamera: x }),
|
||||
resetCamera: false,
|
||||
setResetCamera: (x: any) => set({ resetCamera: x }),
|
||||
}));
|
||||
|
||||
export const useAddAction = create<any>((set: any) => ({
|
||||
addAction: null,
|
||||
setAddAction: (x: any) => set({ addAction: x }),
|
||||
addAction: null,
|
||||
setAddAction: (x: any) => set({ addAction: x }),
|
||||
}));
|
||||
|
||||
export const useActiveTool = create<any>((set: any) => ({
|
||||
activeTool: "cursor",
|
||||
setActiveTool: (x: any) => set({ activeTool: x }),
|
||||
activeTool: "cursor",
|
||||
setActiveTool: (x: any) => set({ activeTool: x }),
|
||||
}));
|
||||
|
||||
export const useActiveSubTool = create<any>((set: any) => ({
|
||||
activeSubTool: "cursor",
|
||||
setActiveSubTool: (x: any) => set({ activeSubTool: x }),
|
||||
activeSubTool: "cursor",
|
||||
setActiveSubTool: (x: any) => set({ activeSubTool: x }),
|
||||
}));
|
||||
|
||||
export const use2DUndoRedo = create<any>((set: any) => ({
|
||||
is2DUndoRedo: null,
|
||||
set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
|
||||
is2DUndoRedo: null,
|
||||
set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
|
||||
}));
|
||||
|
||||
export const useElevation = create<any>((set: any) => ({
|
||||
elevation: 45,
|
||||
setElevation: (x: any) => set({ elevation: x }),
|
||||
elevation: 45,
|
||||
setElevation: (x: any) => set({ elevation: x }),
|
||||
}));
|
||||
|
||||
export const useAzimuth = create<any>((set: any) => ({
|
||||
azimuth: -160,
|
||||
setAzimuth: (x: any) => set({ azimuth: x }),
|
||||
azimuth: -160,
|
||||
setAzimuth: (x: any) => set({ azimuth: x }),
|
||||
}));
|
||||
|
||||
export const useRenderDistance = create<any>((set: any) => ({
|
||||
renderDistance: 40,
|
||||
setRenderDistance: (x: any) => set({ renderDistance: x }),
|
||||
renderDistance: 40,
|
||||
setRenderDistance: (x: any) => set({ renderDistance: x }),
|
||||
}));
|
||||
|
||||
export const useCamMode = create<any>((set: any) => ({
|
||||
camMode: "ThirdPerson",
|
||||
setCamMode: (x: any) => set({ camMode: x }),
|
||||
camMode: "ThirdPerson",
|
||||
setCamMode: (x: any) => set({ camMode: x }),
|
||||
}));
|
||||
|
||||
export const useUserName = create<any>((set: any) => ({
|
||||
userName: "",
|
||||
setUserName: (x: any) => set({ userName: x }),
|
||||
userName: "",
|
||||
setUserName: (x: any) => set({ userName: x }),
|
||||
}));
|
||||
|
||||
export const useObjectPosition = create<any>((set: any) => ({
|
||||
objectPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectPosition: (newObjectPosition: any) =>
|
||||
set({ objectPosition: newObjectPosition }),
|
||||
objectPosition: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectPosition: (newObjectPosition: any) =>
|
||||
set({ objectPosition: newObjectPosition }),
|
||||
}));
|
||||
|
||||
export const useObjectScale = create<any>((set: any) => ({
|
||||
objectScale: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
|
||||
objectScale: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
|
||||
}));
|
||||
|
||||
export const useObjectRotation = create<any>((set: any) => ({
|
||||
objectRotation: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectRotation: (newObjectRotation: any) =>
|
||||
set({ objectRotation: newObjectRotation }),
|
||||
objectRotation: { x: undefined, y: undefined, z: undefined },
|
||||
setObjectRotation: (newObjectRotation: any) =>
|
||||
set({ objectRotation: newObjectRotation }),
|
||||
}));
|
||||
|
||||
export const useDrieTemp = create<any>((set: any) => ({
|
||||
drieTemp: undefined,
|
||||
setDrieTemp: (x: any) => set({ drieTemp: x }),
|
||||
drieTemp: undefined,
|
||||
setDrieTemp: (x: any) => set({ drieTemp: x }),
|
||||
}));
|
||||
|
||||
export const useActiveUsers = create<any>((set: any) => ({
|
||||
activeUsers: [],
|
||||
setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
|
||||
set((state: { activeUsers: any[] }) => ({
|
||||
activeUsers:
|
||||
typeof callback === "function" ? callback(state.activeUsers) : callback,
|
||||
})),
|
||||
activeUsers: [],
|
||||
setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
|
||||
set((state: { activeUsers: any[] }) => ({
|
||||
activeUsers:
|
||||
typeof callback === "function" ? callback(state.activeUsers) : callback,
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useDrieUIValue = create<any>((set: any) => ({
|
||||
drieUIValue: { touch: null, temperature: null, humidity: null },
|
||||
drieUIValue: { touch: null, temperature: null, humidity: null },
|
||||
|
||||
setDrieUIValue: (x: any) =>
|
||||
set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
|
||||
setDrieUIValue: (x: any) =>
|
||||
set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
|
||||
|
||||
setTouch: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, touch: value },
|
||||
})),
|
||||
setTemperature: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, temperature: value },
|
||||
})),
|
||||
setHumidity: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, humidity: value },
|
||||
})),
|
||||
setTouch: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, touch: value },
|
||||
})),
|
||||
setTemperature: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, temperature: value },
|
||||
})),
|
||||
setHumidity: (value: any) =>
|
||||
set((state: any) => ({
|
||||
drieUIValue: { ...state.drieUIValue, humidity: value },
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useStartSimulation = create<any>((set: any) => ({
|
||||
startSimulation: false,
|
||||
setStartSimulation: (x: any) => set({ startSimulation: x }),
|
||||
startSimulation: false,
|
||||
setStartSimulation: (x: any) => set({ startSimulation: x }),
|
||||
}));
|
||||
|
||||
export const useEyeDropMode = create<any>((set: any) => ({
|
||||
eyeDropMode: false,
|
||||
setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
|
||||
eyeDropMode: false,
|
||||
setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
|
||||
}));
|
||||
|
||||
export const useEditingPoint = create<any>((set: any) => ({
|
||||
editingPoint: false,
|
||||
setEditingPoint: (x: any) => set({ editingPoint: x }),
|
||||
editingPoint: false,
|
||||
setEditingPoint: (x: any) => set({ editingPoint: x }),
|
||||
}));
|
||||
|
||||
export const usezoneTarget = create<any>((set: any) => ({
|
||||
zoneTarget: [],
|
||||
setZoneTarget: (x: any) => set({ zoneTarget: x }),
|
||||
zoneTarget: [],
|
||||
setZoneTarget: (x: any) => set({ zoneTarget: x }),
|
||||
}));
|
||||
|
||||
export const usezonePosition = create<any>((set: any) => ({
|
||||
zonePosition: [],
|
||||
setZonePosition: (x: any) => set({ zonePosition: x }),
|
||||
zonePosition: [],
|
||||
setZonePosition: (x: any) => set({ zonePosition: x }),
|
||||
}));
|
||||
|
||||
interface EditPositionState {
|
||||
Edit: boolean;
|
||||
setEdit: (value: boolean) => void;
|
||||
Edit: boolean;
|
||||
setEdit: (value: boolean) => void;
|
||||
}
|
||||
|
||||
export const useEditPosition = create<EditPositionState>((set) => ({
|
||||
Edit: false,
|
||||
setEdit: (value) => set({ Edit: value }),
|
||||
Edit: false,
|
||||
setEdit: (value) => set({ Edit: value }),
|
||||
}));
|
||||
|
||||
export const useAsset3dWidget = create<any>((set: any) => ({
|
||||
widgetSelect: "",
|
||||
setWidgetSelect: (x: any) => set({ widgetSelect: x }),
|
||||
widgetSelect: "",
|
||||
setWidgetSelect: (x: any) => set({ widgetSelect: x }),
|
||||
}));
|
||||
|
||||
export const useWidgetSubOption = create<any>((set: any) => ({
|
||||
widgetSubOption: "2D",
|
||||
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
|
||||
widgetSubOption: "2D",
|
||||
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
|
||||
}));
|
||||
export const useLimitDistance = create<any>((set: any) => ({
|
||||
limitDistance: true,
|
||||
setLimitDistance: (x: any) => set({ limitDistance: x }),
|
||||
limitDistance: true,
|
||||
setLimitDistance: (x: any) => set({ limitDistance: x }),
|
||||
}));
|
||||
|
||||
export const useTileDistance = create<any>((set: any) => ({
|
||||
gridValue: { size: 300, divisions: 75 },
|
||||
planeValue: { height: 300, width: 300 },
|
||||
gridValue: { size: 300, divisions: 75 },
|
||||
planeValue: { height: 300, width: 300 },
|
||||
|
||||
setGridValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
gridValue: { ...state.gridValue, ...value },
|
||||
})),
|
||||
setGridValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
gridValue: { ...state.gridValue, ...value },
|
||||
})),
|
||||
|
||||
setPlaneValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
planeValue: { ...state.planeValue, ...value },
|
||||
})),
|
||||
setPlaneValue: (value: any) =>
|
||||
set((state: any) => ({
|
||||
planeValue: { ...state.planeValue, ...value },
|
||||
})),
|
||||
}));
|
||||
|
||||
export const usePlayAgv = create<any>((set, get) => ({
|
||||
PlayAgv: [],
|
||||
setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
|
||||
set({ PlayAgv: updateFn(get().PlayAgv) }),
|
||||
PlayAgv: [],
|
||||
setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
|
||||
set({ PlayAgv: updateFn(get().PlayAgv) }),
|
||||
}));
|
||||
// Define the Asset type
|
||||
type Asset = {
|
||||
id: string;
|
||||
name: string;
|
||||
position?: [number, number, number]; // Optional: 3D position
|
||||
rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
|
||||
id: string;
|
||||
name: string;
|
||||
position?: [number, number, number]; // Optional: 3D position
|
||||
rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
|
||||
};
|
||||
|
||||
// Zustand store type
|
||||
type ZoneAssetState = {
|
||||
zoneAssetId: Asset | null;
|
||||
setZoneAssetId: (asset: Asset | null) => void;
|
||||
zoneAssetId: Asset | null;
|
||||
setZoneAssetId: (asset: Asset | null) => void;
|
||||
};
|
||||
|
||||
// Zustand store
|
||||
export const useZoneAssetId = create<ZoneAssetState>((set) => ({
|
||||
zoneAssetId: null,
|
||||
setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
|
||||
zoneAssetId: null,
|
||||
setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
|
||||
}));
|
||||
|
||||
|
||||
export const useMachineCount = create<any>((set: any) => ({
|
||||
machineCount: 0,
|
||||
setMachineCount: (x: any) => set({ activeLayer: x }),
|
||||
machineCount: 0,
|
||||
setMachineCount: (x: any) => set({ machineCount: x }),
|
||||
}));
|
||||
export const useMachineUptime = create<any>((set: any) => ({
|
||||
machineActiveTime: 0,
|
||||
setMachineActiveTime: (x: any) => set({ activeLayer: x }),
|
||||
machineActiveTime: 0,
|
||||
setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
|
||||
}));
|
||||
export const useMaterialCycle = create<any>((set: any) => ({
|
||||
materialCycleTime: 0,
|
||||
setMaterialCycleTime: (x: any) => set({ activeLayer: x }),
|
||||
}));
|
||||
materialCycleTime: 0,
|
||||
setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
|
||||
}));
|
||||
|
|
|
|||
Loading…
Reference in New Issue