diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx index 175a824..5331d9e 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx @@ -1,25 +1,28 @@ import React from "react"; -import EyeDropInput from "../../../../../ui/inputs/EyeDropInput"; interface PickAndPlaceActionProps { - pickPointValue: string; - pickPointOnChange: (value: string) => void; - placePointValue: string; - placePointOnChange: (value: string) => void; + clearPoints: () => void; } const PickAndPlaceAction: React.FC = ({ - pickPointValue, - pickPointOnChange, - placePointValue, - placePointOnChange, + clearPoints, }) => { - return ( - <> - - - - ); + return ( +
+
+
Reset
+ +
+
+ ); }; export default PickAndPlaceAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx index 49eb683..e53cdc7 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx @@ -3,76 +3,92 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; import EyeDropInput from "../../../../../ui/inputs/EyeDropInput"; interface TravelActionProps { - loadCapacity: { - value: string; - min: number; - max: number; - defaultValue: string; - onChange: (value: string) => void; - }; - unloadDuration: { - value: string; - min: number; - max: number; - defaultValue: string; - onChange: (value: string) => void; - }; - pickPoint?: { - value: string; - onChange: (value: string) => void; - }; - unloadPoint?: { - value: string; - onChange: (value: string) => void; - }; + loadCapacity: { + value: string; + min: number; + max: number; + defaultValue: string; + onChange: (value: string) => void; + }; + unloadDuration: { + value: string; + min: number; + max: number; + defaultValue: string; + onChange: (value: string) => void; + }; + pickPoint?: { + value: string; + onChange: (value: string) => void; + }; + unloadPoint?: { + value: string; + onChange: (value: string) => void; + }; + clearPoints: () => void; } const TravelAction: React.FC = ({ - loadCapacity, - unloadDuration, - pickPoint, - unloadPoint, + loadCapacity, + unloadDuration, + pickPoint, + unloadPoint, + clearPoints, }) => { - return ( - <> - { }} - onChange={loadCapacity.onChange} - /> - { }} - onChange={unloadDuration.onChange} - /> - {pickPoint && ( - - )} - {unloadPoint && ( - - )} - - ); + return ( + <> + {}} + onChange={loadCapacity.onChange} + /> + {}} + onChange={unloadDuration.onChange} + /> +
+
+
Reset
+ +
+
+ {pickPoint && ( + + )} + {unloadPoint && ( + + )} + + ); }; export default TravelAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx index 152bbfe..2295161 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx @@ -4,286 +4,304 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; import RenameInput from "../../../../../ui/inputs/RenameInput"; import LabledDropdown from "../../../../../ui/inputs/LabledDropdown"; import Trigger from "../trigger/Trigger"; -import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore"; +import { + useSelectedEventData, + useSelectedProduct, + useSelectedAction, +} from "../../../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../../../store/simulation/useProductStore"; import PickAndPlaceAction from "../actions/PickAndPlaceAction"; import ActionsList from "../components/ActionsList"; import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi"; function RoboticArmMechanics() { - const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default"); - const [selectedPointData, setSelectedPointData] = useState(); - const { selectedEventData } = useSelectedEventData(); - const { getPointByUuid, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore(); - const { selectedProduct } = useSelectedProduct(); - const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction(); + const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">( + "default" + ); + const [selectedPointData, setSelectedPointData] = useState< + RoboticArmPointSchema | undefined + >(); + const { selectedEventData } = useSelectedEventData(); + const { + getPointByUuid, + getEventByModelUuid, + updateEvent, + updateAction, + addAction, + removeAction, + } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); + const { selectedAction, setSelectedAction, clearSelectedAction } = + useSelectedAction(); - const email = localStorage.getItem('email') - const organization = (email!.split("@")[1]).split(".")[0]; + const email = localStorage.getItem("email"); + const organization = email!.split("@")[1].split(".")[0]; - useEffect(() => { - if (selectedEventData) { - const point = getPointByUuid( - selectedProduct.productId, - selectedEventData.data.modelUuid, - selectedEventData.selectedPoint - ) as RoboticArmPointSchema | undefined; - if (point?.actions) { - setSelectedPointData(point); - if (point.actions.length > 0) { - setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace"); - setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName); - } - } - } else { - clearSelectedAction(); + useEffect(() => { + if (selectedEventData) { + const point = getPointByUuid( + selectedProduct.productId, + selectedEventData.data.modelUuid, + selectedEventData.selectedPoint + ) as RoboticArmPointSchema | undefined; + if (point?.actions) { + setSelectedPointData(point); + if (point.actions.length > 0) { + setActiveOption( + point.actions[0].actionType as "default" | "pickAndPlace" + ); + setSelectedAction( + point.actions[0].actionUuid, + point.actions[0].actionName + ); } - }, [selectedEventData, selectedProduct]); + } + } else { + clearSelectedAction(); + } + }, [selectedEventData, selectedProduct]); - const updateBackend = ( - productName: string, - productId: string, - organization: string, - eventData: EventsSchema - ) => { - upsertProductOrEventApi({ - productName: productName, - productId: productId, - organization: organization, - eventDatas: eventData - }) + const updateBackend = ( + productName: string, + productId: string, + organization: string, + eventData: EventsSchema + ) => { + upsertProductOrEventApi({ + productName: productName, + productId: productId, + organization: organization, + eventDatas: eventData, + }); + }; + + const handleRenameAction = (newName: string) => { + if (!selectedAction.actionId) return; + const event = updateAction( + selectedProduct.productId, + selectedAction.actionId, + { actionName: newName } + ); + + if (selectedPointData) { + const updatedActions = selectedPointData.actions.map((action) => + action.actionUuid === selectedAction.actionId + ? { ...action, actionName: newName } + : action + ); + setSelectedPointData({ + ...selectedPointData, + actions: updatedActions, + }); } - const handleRenameAction = (newName: string) => { - if (!selectedAction.actionId) return; - const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName }); + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; - if (selectedPointData) { - const updatedActions = selectedPointData.actions.map((action) => - action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action - ); - setSelectedPointData({ - ...selectedPointData, - actions: updatedActions, - }); - } - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handleSpeedChange = (value: string) => { - if (!selectedEventData) return; - const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, { - speed: parseFloat(value), - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handlePickPointChange = (value: string) => { - if (!selectedAction.actionId || !selectedPointData) return; - const [x, y, z] = value.split(",").map(Number); - - const event = updateAction(selectedProduct.productId, selectedAction.actionId, { - process: { - startPoint: [x, y, z] as [number, number, number], - endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null, - }, - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handlePlacePointChange = (value: string) => { - if (!selectedAction.actionId || !selectedPointData) return; - const [x, y, z] = value.split(",").map(Number); - - const event = updateAction(selectedProduct.productId, selectedAction.actionId, { - process: { - startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null, - endPoint: [x, y, z] as [number, number, number], - }, - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - - const handleAddAction = () => { - if (!selectedEventData || !selectedPointData) return; - - const newAction = { - actionUuid: MathUtils.generateUUID(), - actionName: `Action ${selectedPointData.actions.length + 1}`, - actionType: "pickAndPlace" as const, - process: { - startPoint: null, - endPoint: null, - }, - triggers: [] as TriggerSchema[], - }; - - const event = addAction( - selectedProduct.productId, - selectedEventData.data.modelUuid, - selectedEventData.selectedPoint, - newAction - ); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - - const updatedPoint = { - ...selectedPointData, - actions: [...selectedPointData.actions, newAction], - }; - setSelectedPointData(updatedPoint); - setSelectedAction(newAction.actionUuid, newAction.actionName); - }; - - const handleDeleteAction = (actionUuid: string) => { - if (!selectedPointData) return; - - const event = removeAction(selectedProduct.productId, actionUuid); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - - const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid); - const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid); - - const updatedPoint = { - ...selectedPointData, - actions: newActions, - }; - setSelectedPointData(updatedPoint); - - if (selectedAction.actionId === actionUuid) { - const nextAction = newActions[index] || newActions[index - 1]; - if (nextAction) { - setSelectedAction(nextAction.actionUuid, nextAction.actionName); - } else { - clearSelectedAction(); - } - } - }; - - const availableActions = { - defaultOption: "pickAndPlace", - options: ["pickAndPlace"], - }; - - const currentSpeed = (getEventByModelUuid( - selectedProduct.productId, selectedEventData?.data.modelUuid || "" - ) as RoboticArmEventSchema | undefined)?.speed?.toString() || "0.5"; - - const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId); - - const currentPickPoint = currentAction?.process.startPoint - ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}` - : ""; - const currentPlacePoint = currentAction?.process.endPoint - ? `${currentAction.process.endPoint[0]},${currentAction.process.endPoint[1]},${currentAction.process.endPoint[2]}` - : ""; - - return ( - <> -
-
-
- { }} - onChange={handleSpeedChange} - /> -
-
-
-
- - - - {selectedAction.actionId && currentAction && ( -
-
- -
-
- { }} - disabled={true} - /> - -
-
- -
-
- )} -
- + const handleSpeedChange = (value: string) => { + if (!selectedEventData) return; + const event = updateEvent( + selectedProduct.productId, + selectedEventData.data.modelUuid, + { + speed: parseFloat(value), + } ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + const handleClearPoints = () => { + if (!selectedAction.actionId || !selectedPointData) return; + + const event = updateAction( + selectedProduct.productId, + selectedAction.actionId, + { + process: { + startPoint: null, + endPoint: null, + }, + } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handleAddAction = () => { + if (!selectedEventData || !selectedPointData) return; + + const newAction = { + actionUuid: MathUtils.generateUUID(), + actionName: `Action ${selectedPointData.actions.length + 1}`, + actionType: "pickAndPlace" as const, + process: { + startPoint: null, + endPoint: null, + }, + triggers: [] as TriggerSchema[], + }; + + const event = addAction( + selectedProduct.productId, + selectedEventData.data.modelUuid, + selectedEventData.selectedPoint, + newAction + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + + const updatedPoint = { + ...selectedPointData, + actions: [...selectedPointData.actions, newAction], + }; + setSelectedPointData(updatedPoint); + setSelectedAction(newAction.actionUuid, newAction.actionName); + }; + + const handleDeleteAction = (actionUuid: string) => { + if (!selectedPointData) return; + + const event = removeAction(selectedProduct.productId, actionUuid); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + + const index = selectedPointData.actions.findIndex( + (a) => a.actionUuid === actionUuid + ); + const newActions = selectedPointData.actions.filter( + (a) => a.actionUuid !== actionUuid + ); + + const updatedPoint = { + ...selectedPointData, + actions: newActions, + }; + setSelectedPointData(updatedPoint); + + if (selectedAction.actionId === actionUuid) { + const nextAction = newActions[index] || newActions[index - 1]; + if (nextAction) { + setSelectedAction(nextAction.actionUuid, nextAction.actionName); + } else { + clearSelectedAction(); + } + } + }; + + const availableActions = { + defaultOption: "pickAndPlace", + options: ["pickAndPlace"], + }; + + const currentSpeed = + ( + getEventByModelUuid( + selectedProduct.productId, + selectedEventData?.data.modelUuid || "" + ) as RoboticArmEventSchema | undefined + )?.speed?.toString() || "0.5"; + + const currentAction = selectedPointData?.actions.find( + (a) => a.actionUuid === selectedAction.actionId + ); + + const currentPickPoint = currentAction?.process.startPoint + ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}` + : ""; + const currentPlacePoint = currentAction?.process.endPoint + ? `${currentAction.process.endPoint[0]},${currentAction.process.endPoint[1]},${currentAction.process.endPoint[2]}` + : ""; + + return ( + <> +
+
+
+ {}} + onChange={handleSpeedChange} + /> +
+
+
+
+ + + {selectedAction.actionId && currentAction && ( +
+
+ +
+
+ {}} + disabled={true} + /> + +
+
+ +
+
+ )} +
+ + ); } export default RoboticArmMechanics; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx index d362679..baa7541 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx @@ -4,249 +4,319 @@ import RenameInput from "../../../../../ui/inputs/RenameInput"; import LabledDropdown from "../../../../../ui/inputs/LabledDropdown"; import Trigger from "../trigger/Trigger"; import { - useSelectedAction, - useSelectedEventData, - useSelectedProduct, + useSelectedAction, + useSelectedEventData, + useSelectedEventSphere, + useSelectedProduct, } from "../../../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../../../store/simulation/useProductStore"; import TravelAction from "../actions/TravelAction"; import ActionsList from "../components/ActionsList"; import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi"; +import { useVehicleStore } from "../../../../../../store/simulation/useVehicleStore"; function VehicleMechanics() { - const [activeOption, setActiveOption] = useState<"default" | "travel">("default"); - const [selectedPointData, setSelectedPointData] = useState(); - const { selectedEventData } = useSelectedEventData(); - const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore(); - const { selectedProduct } = useSelectedProduct(); - const { setSelectedAction, clearSelectedAction } = useSelectedAction(); + const [activeOption, setActiveOption] = useState<"default" | "travel">( + "default" + ); + const [selectedPointData, setSelectedPointData] = useState< + VehiclePointSchema | undefined + >(); + const { selectedEventData } = useSelectedEventData(); + const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = + useProductStore(); + const { selectedProduct } = useSelectedProduct(); + const { setSelectedAction, clearSelectedAction } = useSelectedAction(); + const { getVehicleById } = useVehicleStore(); - const email = localStorage.getItem('email') - const organization = (email!.split("@")[1]).split(".")[0]; + const email = localStorage.getItem("email"); + const organization = email!.split("@")[1].split(".")[0]; - useEffect(() => { - if (selectedEventData && selectedEventData.data.type === 'vehicle') { - const point = getPointByUuid( - selectedProduct.productId, - selectedEventData.data.modelUuid, - selectedEventData.selectedPoint - ) as VehiclePointSchema | undefined; + useEffect(() => { + if (selectedEventData && selectedEventData.data.type === "vehicle") { + const point = getPointByUuid( + selectedProduct.productId, + selectedEventData.data.modelUuid, + selectedEventData.selectedPoint + ) as VehiclePointSchema | undefined; - if (point) { - setSelectedPointData(point); - setActiveOption(point.action.actionType as "travel"); - setSelectedAction(point.action.actionUuid, point.action.actionName); - } - } else { - clearSelectedAction(); - } - }, [selectedProduct, selectedEventData]); - - const updateBackend = ( - productName: string, - productId: string, - organization: string, - eventData: EventsSchema - ) => { - upsertProductOrEventApi({ - productName: productName, - productId: productId, - organization: organization, - eventDatas: eventData - }) + if (point) { + setSelectedPointData(point); + setActiveOption(point.action.actionType as "travel"); + setSelectedAction(point.action.actionUuid, point.action.actionName); + } + } else { + clearSelectedAction(); } + }, [selectedProduct, selectedEventData]); - const handleSpeedChange = (value: string) => { - if (!selectedEventData) return; - const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, { - speed: parseFloat(value), - }); + const updateBackend = ( + productName: string, + productId: string, + organization: string, + eventData: EventsSchema + ) => { + upsertProductOrEventApi({ + productName: productName, + productId: productId, + organization: organization, + eventDatas: eventData, + }); + }; - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handleActionTypeChange = (option: string) => { - if (!selectedEventData || !selectedPointData) return; - const validOption = option as "travel"; - setActiveOption(validOption); - - const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { - actionType: validOption, - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handleRenameAction = (newName: string) => { - if (!selectedPointData) return; - const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handleLoadCapacityChange = (value: string) => { - if (!selectedPointData) return; - const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { - loadCapacity: parseFloat(value), - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handleUnloadDurationChange = (value: string) => { - if (!selectedPointData) return; - const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { - unLoadDuration: parseFloat(value), - }); - - if (event) { - updateBackend( - selectedProduct.productName, - selectedProduct.productId, - organization, - event - ); - } - }; - - const handlePickPointChange = (value: string) => { - if (!selectedPointData) return; - }; - - const handleUnloadPointChange = (value: string) => { - if (!selectedPointData) return; - }; - - // Get current values from store - - const currentSpeed = (getEventByModelUuid( - selectedProduct.productId, selectedEventData?.data.modelUuid || "" - ) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5"; - - const currentActionName = selectedPointData - ? selectedPointData.action.actionName - : "Action Name"; - - const currentLoadCapacity = selectedPointData - ? selectedPointData.action.loadCapacity.toString() - : "1"; - - const currentUnloadDuration = selectedPointData - ? selectedPointData.action.unLoadDuration.toString() - : "1"; - - const currentPickPoint = selectedPointData?.action.pickUpPoint; - - const currentUnloadPoint = selectedPointData?.action.unLoadPoint; - - const availableActions = { - defaultOption: "travel", - options: ["travel"], - }; - - return ( - <> - {selectedEventData && ( - <> -
-
-
- { }} - onChange={handleSpeedChange} - /> -
-
-
-
- -
-
- -
-
- - - {activeOption === "travel" && ( - - )} -
-
-
- -
-
- - )} - + const handleSpeedChange = (value: string) => { + if (!selectedEventData) return; + const event = updateEvent( + selectedProduct.productId, + selectedEventData.data.modelUuid, + { + speed: parseFloat(value), + } ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handleActionTypeChange = (option: string) => { + if (!selectedEventData || !selectedPointData) return; + const validOption = option as "travel"; + setActiveOption(validOption); + + const event = updateAction( + selectedProduct.productId, + selectedPointData.action.actionUuid, + { + actionType: validOption, + } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handleRenameAction = (newName: string) => { + if (!selectedPointData) return; + const event = updateAction( + selectedProduct.productId, + selectedPointData.action.actionUuid, + { actionName: newName } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handleLoadCapacityChange = (value: string) => { + if (!selectedPointData) return; + const event = updateAction( + selectedProduct.productId, + selectedPointData.action.actionUuid, + { + loadCapacity: parseFloat(value), + } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handleUnloadDurationChange = (value: string) => { + if (!selectedPointData) return; + const event = updateAction( + selectedProduct.productId, + selectedPointData.action.actionUuid, + { + unLoadDuration: parseFloat(value), + } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + }; + + const handlePickPointChange = (value: string) => { + if (!selectedPointData) return; + }; + + const handleUnloadPointChange = (value: string) => { + if (!selectedPointData) return; + }; + + // Get current values from store + + const currentSpeed = + ( + getEventByModelUuid( + selectedProduct.productId, + selectedEventData?.data.modelUuid || "" + ) as VehicleEventSchema | undefined + )?.speed?.toString() || "0.5"; + + const currentActionName = selectedPointData + ? selectedPointData.action.actionName + : "Action Name"; + + const currentLoadCapacity = selectedPointData + ? selectedPointData.action.loadCapacity.toString() + : "1"; + + const currentUnloadDuration = selectedPointData + ? selectedPointData.action.unLoadDuration.toString() + : "1"; + + const { selectedEventSphere } = useSelectedEventSphere(); + + function handleClearPoints() { + const updatedVehicle = getVehicleById( + selectedEventSphere?.userData.modelUuid + ); + + if ( + !selectedProduct?.productId || + !selectedEventSphere?.userData?.modelUuid || + !updatedVehicle?.point + ) + return; + + const event = updateEvent( + selectedProduct.productId, + selectedEventSphere.userData.modelUuid, + { + point: { + ...updatedVehicle.point, + action: { + ...updatedVehicle.point?.action, + pickUpPoint: null, + unLoadPoint: null, + steeringAngle: 0, + }, + }, + } + ); + + if (event) { + updateBackend( + selectedProduct.productName, + selectedProduct.productId, + organization, + event + ); + } + } + + const availableActions = { + defaultOption: "travel", + options: ["travel"], + }; + + return ( + <> + {selectedEventData && ( + <> +
+
+
+ {}} + onChange={handleSpeedChange} + /> +
+
+
+
+ +
+
+ +
+
+ + + {activeOption === "travel" && ( + + )} +
+
+
+ +
+
+ + )} + + ); } export default VehicleMechanics; diff --git a/app/src/components/ui/inputs/EyeDropInput.tsx b/app/src/components/ui/inputs/EyeDropInput.tsx index 72c5ded..c6fe3ca 100644 --- a/app/src/components/ui/inputs/EyeDropInput.tsx +++ b/app/src/components/ui/inputs/EyeDropInput.tsx @@ -1,21 +1,18 @@ import React from "react"; import { EyeDroperIcon } from "../../icons/ExportCommonIcons"; -import RegularDropDown from "./RegularDropDown"; interface EyeDropInputProps { label: string; value: string; onChange: (value: string) => void; - options?: string[]; } const EyeDropInput: React.FC = ({ label = "Object", + value, onChange, }) => { const handleEyeDropClick = () => { - // Here you would typically implement the eye dropper functionality - // For now, we'll just simulate selecting a value const simulatedValue = "picked_value"; // Replace with actual eye dropper logic onChange(simulatedValue); }; @@ -24,18 +21,15 @@ const EyeDropInput: React.FC = ({
{label}
- {/* */} - { }} - /> -
+ + {/* */} + {/* */} +
+
); }; -export default EyeDropInput; \ No newline at end of file +export default EyeDropInput; diff --git a/app/src/components/ui/simulation/AssetDetailsCard.tsx b/app/src/components/ui/simulation/AssetDetailsCard.tsx index 08eb280..5a4b4da 100644 --- a/app/src/components/ui/simulation/AssetDetailsCard.tsx +++ b/app/src/components/ui/simulation/AssetDetailsCard.tsx @@ -1,6 +1,5 @@ import React, { useState } from "react"; import { - CartBagIcon, ExpandIcon, IndicationArrow, SimulationStatusIcon, @@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC = ({
{[...Array(5)].map((_, i) => { - const percentage = (count ?? 0 / totalCapacity) * 100; + const percentage = (count! / totalCapacity) * 100; const start = i * 20; const end = (i + 1) * 20; // fill amount: 0 to 100 @@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC = ({ fillPercent = ((percentage - start) / 20) * 100; } return ( -
+
= ({ })}
- {Math.round((count ?? 0 / totalCapacity) * 100).toString()}% + {Math.round((count! / totalCapacity) * 100).toString()}%
diff --git a/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx b/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx index 7e2adf8..55e511a 100644 --- a/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx +++ b/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx @@ -3,6 +3,7 @@ import { useSelectedAction, useSelectedEventSphere, useSelectedProduct } from '. import { useGLTF } from '@react-three/drei'; import { useThree } from '@react-three/fiber'; import { useProductStore } from '../../../../store/simulation/useProductStore'; +import { useArmBotStore } from '../../../../store/simulation/useArmBotStore'; import PickDropPoints from './PickDropPoints'; import useDraggableGLTF from './useDraggableGLTF'; import * as THREE from 'three'; @@ -23,6 +24,7 @@ const ArmBotUI = () => { const { selectedProduct } = useSelectedProduct(); const { scene } = useThree(); const { selectedAction } = useSelectedAction(); + const { armBots } = useArmBotStore(); const armUiPick = useGLTF(armPick) as any; const armUiDrop = useGLTF(armDrop) as any; @@ -73,7 +75,7 @@ const ArmBotUI = () => { } } } - }, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]); + }, [armBots, selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]); function getDefaultPositions(modelUuid: string): Positions { const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid); diff --git a/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx b/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx index 843b81b..bb690d4 100644 --- a/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx +++ b/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx @@ -23,7 +23,7 @@ const VehicleUI = () => { const prevMousePos = useRef({ x: 0, y: 0 }); const { selectedEventSphere } = useSelectedEventSphere(); const { selectedProduct } = useSelectedProduct(); - const { getVehicleById } = useVehicleStore(); + const { vehicles, getVehicleById } = useVehicleStore(); const { updateEvent } = useProductStore(); const [startPosition, setStartPosition] = useState<[number, number, number]>([ 0, 1, 0, @@ -144,7 +144,7 @@ const VehicleUI = () => { setSteeringRotation([0, steeringAngle, 0]); } }, 10); - }, [selectedEventSphere, outerGroup.current]); + }, [selectedEventSphere, outerGroup.current, vehicles]); const handlePointerDown = ( e: any, diff --git a/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx b/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx index 8839704..39b34b3 100644 --- a/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx +++ b/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx @@ -58,7 +58,7 @@ const MaterialAnimator = ({ }, [storageModel, storage.currentMaterials]); return ( - + {hasLoad && storage.currentMaterials.map((mat, index) => (