209 lines
6.6 KiB
TypeScript
209 lines
6.6 KiB
TypeScript
|
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";
|
||
|
|
||
|
interface EventPropertiesProps {
|
||
|
assetType: string;
|
||
|
selectedPoint: {
|
||
|
name: string;
|
||
|
uuid: string;
|
||
|
actions: {
|
||
|
uuid: string;
|
||
|
name: string;
|
||
|
isUsed: boolean;
|
||
|
}[];
|
||
|
};
|
||
|
selectedItem: {
|
||
|
item: {
|
||
|
uuid: string;
|
||
|
name: string;
|
||
|
isUsed: boolean;
|
||
|
} | null;
|
||
|
};
|
||
|
setSelectedPoint: (value: string) => void;
|
||
|
selectedActionSphere: string;
|
||
|
}
|
||
|
|
||
|
const EventProperties: React.FC<EventPropertiesProps> = ({
|
||
|
assetType,
|
||
|
selectedPoint,
|
||
|
selectedItem,
|
||
|
setSelectedPoint,
|
||
|
selectedActionSphere,
|
||
|
}) => {
|
||
|
const actionsContainerRef = useRef<HTMLDivElement>(null);
|
||
|
|
||
|
const [activeOption, setActiveOption] = useState("default");
|
||
|
const [dummyactiveOption, setTypeOption] = useState("default");
|
||
|
|
||
|
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"],
|
||
|
};
|
||
|
}
|
||
|
};
|
||
|
|
||
|
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={dummyactiveOption}
|
||
|
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>
|
||
|
<div className="add-button" onClick={() => {}}>
|
||
|
<AddIcon /> Add
|
||
|
</div>
|
||
|
</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>
|
||
|
))}
|
||
|
</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 />}
|
||
|
{activeOption === "process" && <ProcessAction />} {/* done */}
|
||
|
{activeOption === "store" && <StorageAction />} {/* done */}
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default EventProperties;
|