Refactor Trigger component: pass selectedPointData and type props, enhance state management for triggers, and streamline rendering logic for better performance.
This commit is contained in:
parent
66b3d75500
commit
439f917884
|
|
@ -271,7 +271,7 @@ function ConveyorMechanics() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
<Trigger selectedPointData={selectedPointData as any} type= {'Conveyor'}/>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,137 +1,132 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
ResizeHeightIcon,
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
ResizeHeightIcon,
|
||||
} from "../../../../../icons/ExportCommonIcons";
|
||||
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
||||
import RenameInput from "../../../../../ui/inputs/RenameInput";
|
||||
import { handleResize } from "../../../../../../functions/handleResizePannel";
|
||||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
|
||||
|
||||
const Trigger: React.FC = () => {
|
||||
// State to hold the list of triggers
|
||||
const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
|
||||
const [activeOption, setActiveOption] = useState("onComplete");
|
||||
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
||||
type TriggerProps = {
|
||||
selectedPointData?: PointsScheme | undefined;
|
||||
type?: 'Conveyor' | 'Vehicle' | 'RoboticArm' | 'Machine' | 'StorageUnit';
|
||||
};
|
||||
|
||||
// States for dropdowns
|
||||
const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
|
||||
const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
|
||||
const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
|
||||
const Trigger = ({ selectedPointData, type }: TriggerProps) => {
|
||||
const [currentAction, setCurrentAction] = useState<string | undefined>();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { getActionByUuid } = useProductStore();
|
||||
const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
|
||||
const [activeOption, setActiveOption] = useState("onComplete");
|
||||
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Function to handle adding a new trigger
|
||||
const addTrigger = (): void => {
|
||||
const newTrigger = `Trigger ${triggers.length + 1}`;
|
||||
setTriggers([...triggers, newTrigger]); // Add new trigger to the state
|
||||
useEffect(() => {
|
||||
if (!selectedPointData) return;
|
||||
if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
|
||||
setCurrentAction((selectedPointData as ConveyorPointSchema).action.actionUuid);
|
||||
}
|
||||
}, [selectedPointData]);
|
||||
|
||||
// Initialize the states for the new trigger
|
||||
setTriggeredModel([...triggeredModel, ""]);
|
||||
setTriggeredPoint([...triggeredPoint, ""]);
|
||||
setTriggeredAction([...triggeredAction, ""]);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!currentAction || !selectedProduct) return;
|
||||
const action = getActionByUuid(selectedProduct.productId, currentAction);
|
||||
setTriggers(action?.triggers || []);
|
||||
setSelectedTrigger(action?.triggers[0] || undefined);
|
||||
}, [currentAction, selectedProduct]);
|
||||
|
||||
// Function to handle removing a trigger
|
||||
const removeTrigger = (index: number): void => {
|
||||
setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
|
||||
setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
|
||||
setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
|
||||
setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
|
||||
};
|
||||
const addTrigger = (): void => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="trigger-wrapper">
|
||||
<div className="header">
|
||||
<div className="title">Trigger</div>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={addTrigger}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<AddIcon /> Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="trigger-list">
|
||||
<div
|
||||
className="lists-main-container"
|
||||
ref={triggersContainerRef}
|
||||
style={{ height: "120px" }}
|
||||
>
|
||||
<div className="list-container">
|
||||
{triggers.map((trigger: any, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`list-item ${
|
||||
selectedTrigger === trigger ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setSelectedTrigger(trigger)}
|
||||
>
|
||||
<button className="value" onClick={() => {}}>
|
||||
<RenameInput value={trigger} onRename={() => {}} />
|
||||
const removeTrigger = (triggerUuid: string): void => {
|
||||
};
|
||||
|
||||
const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
|
||||
const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
|
||||
const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
|
||||
|
||||
return (
|
||||
<div className="trigger-wrapper">
|
||||
<div className="header">
|
||||
<div className="title">Trigger</div>
|
||||
<button
|
||||
className="add-button"
|
||||
onClick={addTrigger}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<AddIcon /> Add
|
||||
</button>
|
||||
{triggers.length > 1 && (
|
||||
<button
|
||||
className="remove-button"
|
||||
onClick={() => removeTrigger(index)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="resize-icon"
|
||||
id="action-resize"
|
||||
onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
|
||||
>
|
||||
<ResizeHeightIcon />
|
||||
</button>
|
||||
</div>
|
||||
<div className="trigger-list">
|
||||
<div
|
||||
className="lists-main-container"
|
||||
ref={triggersContainerRef}
|
||||
style={{ height: "120px" }}
|
||||
>
|
||||
<div className="list-container">
|
||||
{triggers.map((trigger) => (
|
||||
<div
|
||||
key={trigger.triggerUuid}
|
||||
className={`list-item ${selectedTrigger?.triggerUuid === trigger.triggerUuid ? "active" : ""}`}
|
||||
onClick={() => setSelectedTrigger(trigger)}
|
||||
>
|
||||
<button className="value" onClick={() => { }}>
|
||||
<RenameInput value={trigger.triggerName} onRename={() => { }} />
|
||||
</button>
|
||||
{triggers.length > 1 && (
|
||||
<button
|
||||
className="remove-button"
|
||||
onClick={() => removeTrigger(trigger.triggerUuid)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="resize-icon"
|
||||
id="action-resize"
|
||||
onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
|
||||
>
|
||||
<ResizeHeightIcon />
|
||||
</button>
|
||||
</div>
|
||||
<div className="trigger-item">
|
||||
<div className="trigger-name">{selectedTrigger?.triggerName}</div>
|
||||
<LabledDropdown
|
||||
label="Trigger Type"
|
||||
defaultOption={activeOption}
|
||||
options={["onComplete", "onStart", "onStop", "delay"]}
|
||||
onSelect={(option) => setActiveOption(option)}
|
||||
/>
|
||||
<div className="trigger-options">
|
||||
<LabledDropdown
|
||||
label="Triggered Object"
|
||||
defaultOption={triggeredModel.modelName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
<LabledDropdown
|
||||
label="Triggered Point"
|
||||
defaultOption={triggeredPoint.pointName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
<LabledDropdown
|
||||
label="Triggered Action"
|
||||
defaultOption={triggeredAction.actionName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="trigger-item">
|
||||
<div className="trigger-name">{selectedTrigger}</div>
|
||||
<LabledDropdown
|
||||
label="Trigger on"
|
||||
defaultOption={activeOption}
|
||||
options={["onComplete", "onStart", "onStop", "delay"]}
|
||||
onSelect={(option) => setActiveOption(option)}
|
||||
/>
|
||||
<div className="trigger-options">
|
||||
<LabledDropdown
|
||||
label="Triggered Object"
|
||||
defaultOption={triggeredModel[0] || "Select Model"}
|
||||
options={["Model 1", "Model 2", "Model 3"]}
|
||||
onSelect={(option) => {
|
||||
const newModel = [...triggeredModel];
|
||||
newModel[0] = option;
|
||||
setTriggeredModel(newModel);
|
||||
}}
|
||||
/>
|
||||
<LabledDropdown
|
||||
label="Triggered Point"
|
||||
defaultOption={triggeredPoint[0] || "Select Point"}
|
||||
options={["Point 1", "Point 2", "Point 3"]}
|
||||
onSelect={(option) => {
|
||||
const newPoint = [...triggeredPoint];
|
||||
newPoint[0] = option;
|
||||
setTriggeredPoint(newPoint);
|
||||
}}
|
||||
/>
|
||||
<LabledDropdown
|
||||
label="Triggered Action"
|
||||
defaultOption={triggeredAction[0] || "Select Action"}
|
||||
options={["Action 1", "Action 2", "Action 3"]}
|
||||
onSelect={(option) => {
|
||||
const newAction = [...triggeredAction];
|
||||
newAction[0] = option;
|
||||
setTriggeredAction(newAction);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default Trigger;
|
||||
|
|
|
|||
Loading…
Reference in New Issue