80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
useSelectedEventData,
|
|
useSelectedProduct,
|
|
} from "../../../../../store/simulation/useSimulationStore";
|
|
import { useProductStore } from "../../../../../store/simulation/useProductStore";
|
|
import ConveyorMechanics from "./mechanics/conveyorMechanics";
|
|
import VehicleMechanics from "./mechanics/vehicleMechanics";
|
|
import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
|
|
import MachineMechanics from "./mechanics/machineMechanics";
|
|
import StorageMechanics from "./mechanics/storageMechanics";
|
|
|
|
const EventProperties: React.FC = () => {
|
|
const { selectedEventData } = useSelectedEventData();
|
|
const { getEventByModelUuid } = useProductStore();
|
|
const { selectedProduct } = useSelectedProduct();
|
|
const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
|
|
null
|
|
);
|
|
const [assetType, setAssetType] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const event = getCurrentEventData();
|
|
setCurrentEventData(event);
|
|
|
|
const type = determineAssetType(event);
|
|
setAssetType(type);
|
|
}, [selectedEventData, selectedProduct]);
|
|
|
|
const getCurrentEventData = () => {
|
|
if (!selectedEventData?.data || !selectedProduct) return null;
|
|
return (
|
|
getEventByModelUuid(
|
|
selectedProduct.productId,
|
|
selectedEventData.data.modelUuid
|
|
) ?? null
|
|
);
|
|
};
|
|
|
|
const determineAssetType = (event: EventsSchema | null) => {
|
|
if (!event) return null;
|
|
|
|
switch (event.type) {
|
|
case "transfer":
|
|
return "conveyor";
|
|
case "vehicle":
|
|
return "vehicle";
|
|
case "roboticArm":
|
|
return "roboticArm";
|
|
case "machine":
|
|
return "machine";
|
|
case "storageUnit":
|
|
return "storageUnit";
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="event-proprties-wrapper">
|
|
{currentEventData && (
|
|
<>
|
|
<div className="header">
|
|
<div className="header-value">
|
|
{selectedEventData?.data.modelName}
|
|
</div>
|
|
</div>
|
|
{assetType === "conveyor" && <ConveyorMechanics />}
|
|
{assetType === "vehicle" && <VehicleMechanics />}
|
|
{assetType === "roboticArm" && <RoboticArmMechanics />}
|
|
{assetType === "machine" && <MachineMechanics />}
|
|
{assetType === "storageUnit" && <StorageMechanics />}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EventProperties;
|