Merge remote-tracking branch 'origin/v2' into v2-ui
This commit is contained in:
@@ -1,210 +1,62 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
|
||||
import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
|
||||
import {
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
ResizeHeightIcon,
|
||||
} from "../../../../icons/ExportCommonIcons";
|
||||
import RenameInput from "../../../../ui/inputs/RenameInput";
|
||||
import { handleResize } from "../../../../../functions/handleResizePannel";
|
||||
import { handleActionToggle } from "./functions/handleActionToggle";
|
||||
import { handleDeleteAction } from "./functions/handleDeleteAction";
|
||||
import DefaultAction from "./actions/DefaultAction";
|
||||
import SpawnAction from "./actions/SpawnAction";
|
||||
import SwapAction from "./actions/SwapAction";
|
||||
import DespawnAction from "./actions/DespawnAction";
|
||||
import TravelAction from "./actions/TravelAction";
|
||||
import PickAndPlaceAction from "./actions/PickAndPlaceAction";
|
||||
import ProcessAction from "./actions/ProcessAction";
|
||||
import StorageAction from "./actions/StorageAction";
|
||||
import Trigger from "./trigger/Trigger";
|
||||
import React, { useEffect, useRef, 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";
|
||||
|
||||
interface EventPropertiesProps {
|
||||
assetType: string;
|
||||
selectedPoint: {
|
||||
name: string;
|
||||
uuid: string;
|
||||
actions: {
|
||||
uuid: string;
|
||||
name: string;
|
||||
}[];
|
||||
};
|
||||
selectedItem: {
|
||||
item: {
|
||||
uuid: string;
|
||||
name: string;
|
||||
} | null;
|
||||
};
|
||||
setSelectedPoint: (value: string) => void;
|
||||
selectedActionSphere: string;
|
||||
}
|
||||
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);
|
||||
|
||||
const EventProperties: React.FC<EventPropertiesProps> = ({
|
||||
assetType,
|
||||
selectedPoint,
|
||||
selectedItem,
|
||||
setSelectedPoint,
|
||||
selectedActionSphere,
|
||||
}) => {
|
||||
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
const event = getCurrentEventData();
|
||||
setCurrentEventData(event);
|
||||
|
||||
const [activeOption, setActiveOption] = useState("default");
|
||||
const type = determineAssetType(event);
|
||||
setAssetType(type);
|
||||
|
||||
const getAvailableActions = () => {
|
||||
if (assetType === "conveyor") {
|
||||
return {
|
||||
defaultOption: "default",
|
||||
options: ["default", "spawn", "swap", "despawn"],
|
||||
};
|
||||
}
|
||||
if (assetType === "vehicle") {
|
||||
return {
|
||||
defaultOption: "travel",
|
||||
options: ["travel"],
|
||||
};
|
||||
}
|
||||
if (assetType === "roboticArm") {
|
||||
return {
|
||||
defaultOption: "pickAndPlace",
|
||||
options: ["pickAndPlace"],
|
||||
};
|
||||
}
|
||||
if (assetType === "machine") {
|
||||
return {
|
||||
defaultOption: "process",
|
||||
options: ["process"],
|
||||
};
|
||||
}
|
||||
if (assetType === "store") {
|
||||
return {
|
||||
defaultOption: "store",
|
||||
options: ["store", "spawn"],
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
defaultOption: "default",
|
||||
options: ["default"],
|
||||
};
|
||||
}
|
||||
};
|
||||
}, [selectedEventData, selectedProduct]);
|
||||
|
||||
return (
|
||||
<div className="event-proprties-wrapper">
|
||||
<div className="header">
|
||||
<div className="header-value">{selectedPoint.name}</div>
|
||||
</div>
|
||||
<div className="global-props">
|
||||
<div className="property-list-container">
|
||||
{/* <div className="property-item">
|
||||
<LabledDropdown
|
||||
defaultOption={assetType}
|
||||
options={[]}
|
||||
onSelect={(option) => setTypeOption(option)}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
label="Speed"
|
||||
value="0.5"
|
||||
min={0}
|
||||
step={0.1}
|
||||
defaultValue="0.5"
|
||||
max={10}
|
||||
activeOption="s"
|
||||
onClick={() => {}}
|
||||
onChange={(value) => console.log(value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
label="Delay"
|
||||
value="0.5"
|
||||
min={0}
|
||||
step={0.1}
|
||||
defaultValue="0.5"
|
||||
max={10}
|
||||
activeOption="s"
|
||||
onClick={() => {}}
|
||||
onChange={(value) => console.log(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions-list-container">
|
||||
<div className="actions">
|
||||
<div className="header">
|
||||
<div className="header-value">Actions</div>
|
||||
<button className="add-button" onClick={() => {}}>
|
||||
<AddIcon /> Add
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="lists-main-container"
|
||||
ref={actionsContainerRef}
|
||||
style={{ height: "120px" }}
|
||||
>
|
||||
<div className="list-container">
|
||||
{selectedPoint?.actions.map((action) => (
|
||||
<div
|
||||
key={action.uuid}
|
||||
className={`list-item ${
|
||||
selectedItem.item?.uuid === action.uuid ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="value"
|
||||
onClick={() => handleActionToggle(action.uuid)}
|
||||
>
|
||||
<RenameInput value={action.name} />
|
||||
</div>
|
||||
{selectedPoint?.actions.length > 1 && (
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleDeleteAction(action.uuid)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
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>
|
||||
<div
|
||||
className="resize-icon"
|
||||
id="action-resize"
|
||||
onMouseDown={(e) => handleResize(e, actionsContainerRef)}
|
||||
>
|
||||
<ResizeHeightIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput value="Action Name" />
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption={getAvailableActions().defaultOption}
|
||||
options={getAvailableActions().options}
|
||||
onSelect={(option) => setActiveOption(option)}
|
||||
/>
|
||||
{activeOption === "default" && <DefaultAction />} {/* done */}
|
||||
{activeOption === "spawn" && <SpawnAction />} {/* done */}
|
||||
{activeOption === "swap" && <SwapAction />} {/* done */}
|
||||
{activeOption === "despawn" && <DespawnAction />} {/* done */}
|
||||
{activeOption === "travel" && <TravelAction />} {/* done */}
|
||||
{activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
|
||||
{/* done */}
|
||||
{activeOption === "process" && <ProcessAction />} {/* done */}
|
||||
{activeOption === "store" && <StorageAction />} {/* done */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default EventProperties;
|
||||
export default EventProperties;
|
||||
Reference in New Issue
Block a user