diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 17a4df3..66e185a 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -73,7 +73,7 @@ const Assets: React.FC = () => { try { const filt = await fetchAssets(); setFiltereredAssets(filt); - } catch { } + } catch {} }; filteredAssets(); }, [categoryAssets]); @@ -135,7 +135,7 @@ const Assets: React.FC = () => { const res = await getCategoryAsset(asset); setCategoryAssets(res); setFiltereredAssets(res); - } catch (error) { } + } catch (error) {} } }; return ( @@ -151,7 +151,12 @@ const Assets: React.FC = () => {
{categoryAssets && categoryAssets?.map((asset: any, index: number) => ( -
+
{asset.filename} {
{categoryAssets && categoryAssets?.map((asset: any, index: number) => ( -
+
{asset.filename} { setSelectedItem({ name: asset.filename, id: asset.AssetID, - type: asset.type === "undefined" ? undefined : asset.type - }) + type: + asset.type === "undefined" ? undefined : asset.type, + }); }} /> diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 125cef9..277637a 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -13,24 +13,58 @@ import useToggleStore from "../../../store/useUIToggleStore"; import Visualization from "./visualization/Visualization"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; -import { - useSelectedFloorItem, -} from "../../../store/store"; +import { useSelectedFloorItem } from "../../../store/store"; import GlobalProperties from "./properties/GlobalProperties"; import AsstePropertiies from "./properties/AssetProperties"; import ZoneProperties from "./properties/ZoneProperties"; +import EventProperties from "./properties/eventProperties/EventProperties"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); const { toggleUI } = useToggleStore(); const { subModule, setSubModule } = useSubModuleStore(); const { selectedFloorItem } = useSelectedFloorItem(); + // Reset activeList whenever activeModule changes useEffect(() => { if (activeModule !== "simulation") setSubModule("properties"); if (activeModule === "simulation") setSubModule("mechanics"); }, [activeModule]); + // romove late + const dummyData = { + assetType: "store", + selectedPoint: { + name: "Point A", + uuid: "123e4567-e89b-12d3-a456-426614174000", + actions: [ + { + uuid: "action-1", + name: "Action One", + }, + { + uuid: "action-2", + name: "Action Two", + }, + { + uuid: "action-3", + name: "Action Three", + }, + ], + }, + selectedItem: { + item: { + uuid: "item-1", + name: "Item One", + isUsed: false, + }, + }, + setSelectedPoint: (value: string) => { + console.log(`Selected point updated to: ${value}`); + }, + selectedActionSphere: "Sphere A", + }; + return (
@@ -38,8 +72,9 @@ const SideBarRight: React.FC = () => {
{/* {activeModule === "builder" && ( */}
setSubModule("properties")} > @@ -48,22 +83,25 @@ const SideBarRight: React.FC = () => { {activeModule === "simulation" && ( <>
setSubModule("mechanics")} >
setSubModule("simulations")} >
setSubModule("analysis")} > @@ -109,6 +147,7 @@ const SideBarRight: React.FC = () => { {subModule === "mechanics" && (
+
)} diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx new file mode 100644 index 0000000..c3ec6e7 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -0,0 +1,210 @@ +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"; + +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 = ({ + assetType, + selectedPoint, + selectedItem, + setSelectedPoint, + selectedActionSphere, +}) => { + const actionsContainerRef = useRef(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 ( +
+
+
{selectedPoint.name}
+
+
+
+ {/*
+ setTypeOption(option)} + /> +
*/} +
+ {}} + onChange={(value) => console.log(value)} + /> +
+
+ {}} + onChange={(value) => console.log(value)} + /> +
+
+
+
+
+
+
Actions
+
{}}> + Add +
+
+
+
+ {selectedPoint?.actions.map((action) => ( +
+
handleActionToggle(action.uuid)} + > + +
+ {selectedPoint?.actions.length > 1 && ( +
handleDeleteAction(action.uuid)} + > + +
+ )} +
+ ))} +
+
handleResize(e, actionsContainerRef)} + > + +
+
+
+
+
+
+ +
+
+ setActiveOption(option)} + /> + {activeOption === "default" && } {/* done */} + {activeOption === "spawn" && } {/* done */} + {activeOption === "swap" && } {/* done */} + {activeOption === "despawn" && } {/* done */} + {activeOption === "travel" && } {/* done */} + {activeOption === "pickAndPlace" && } {/* done */} + {activeOption === "process" && } {/* done */} + {activeOption === "store" && } {/* done */} +
+
+
+ +
+
+ ); +}; + +export default EventProperties; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DefaultAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DefaultAction.tsx new file mode 100644 index 0000000..88f515e --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DefaultAction.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const DefaultAction:React.FC = () => { + return <>; +}; + +export default DefaultAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx new file mode 100644 index 0000000..a0f081f --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; + +const DespawnAction: React.FC = () => { + return ( + <> + {}} + onChange={(value) => console.log(value)} + /> + + ); +}; + +export default DespawnAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx new file mode 100644 index 0000000..9574669 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import EyeDropInput from "../../../../../ui/inputs/EyeDropInput"; + +const PickAndPlaceAction: React.FC = () => { + return ( + <> + {}} /> + {}} /> + + ); +}; + +export default PickAndPlaceAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/ProcessAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/ProcessAction.tsx new file mode 100644 index 0000000..a27894e --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/ProcessAction.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; +import SwapAction from "./SwapAction"; + +const ProcessAction: React.FC = () => { + return ( + <> + {}} + onChange={(value) => console.log(value)} + /> + + + ); +}; + +export default ProcessAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SpawnAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SpawnAction.tsx new file mode 100644 index 0000000..0c37cdb --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SpawnAction.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; + +const SpawnAction: React.FC = () => { + return ( + <> + {}} + onChange={(value) => console.log(value)} + /> + {}} + onChange={(value) => console.log(value)} + /> + + + ); +}; + +export default SpawnAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx new file mode 100644 index 0000000..ab2109b --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; + +const StorageAction: React.FC = () => { + return ( + {}} + onChange={(value) => console.log(value)} + /> + ); +}; + +export default StorageAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx new file mode 100644 index 0000000..2e18d80 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload"; + +const SwapAction: React.FC = () => { + return ( + <> + + + ); +}; + +export default SwapAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx new file mode 100644 index 0000000..ee4bda0 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; +import EyeDropInput from "../../../../../ui/inputs/EyeDropInput"; + +const TravelAction: React.FC = () => { + return ( + <> + {}} + onChange={(value) => console.log(value)} + /> + {}} + onChange={(value) => console.log(value)} + /> + {}} /> + {}} /> + + ); +}; + +export default TravelAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleActionToggle.ts b/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleActionToggle.ts new file mode 100644 index 0000000..96e986a --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleActionToggle.ts @@ -0,0 +1,6 @@ +export function handleActionToggle(uuid: string) { + // This function handles the action toggle for the event properties. + // It updates the selected action and its properties based on the provided UUID. + // The function is currently empty and needs to be implemented. + // You can add your logic here to handle the action toggle. +} \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleDeleteAction.ts b/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleDeleteAction.ts new file mode 100644 index 0000000..6a367d5 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleDeleteAction.ts @@ -0,0 +1,6 @@ +export function handleDeleteAction(uuid: string) { + // This function handles the action toggle for the event properties. + // It updates the selected action and its properties based on the provided UUID. + // The function is currently empty and needs to be implemented. + // You can add your logic here to handle the action toggle. +} \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx new file mode 100644 index 0000000..f287b63 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx @@ -0,0 +1,107 @@ +import React, { useState } from "react"; +import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons"; +import LabledDropdown from "../../../../../ui/inputs/LabledDropdown"; + +const Trigger: React.FC = () => { + // State to hold the list of triggers + const [triggers, setTriggers] = useState([]); + const [activeOption, setActiveOption] = useState("onComplete"); + + // States for dropdowns + const [triggeredModel, setTriggeredModel] = useState([]); + const [triggeredPoint, setTriggeredPoint] = useState([]); + const [triggeredAction, setTriggeredAction] = useState([]); + + // 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 + + // Initialize the states for the new trigger + setTriggeredModel([...triggeredModel, ""]); + setTriggeredPoint([...triggeredPoint, ""]); + setTriggeredAction([...triggeredAction, ""]); + }; + + // 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)); + }; + + return ( +
+
+
Trigger
+
+ Add +
+
+
+ {/* Map over triggers and render them */} + {triggers.map((trigger, index) => ( +
+
+ {trigger} +
removeTrigger(index)} + style={{ cursor: "pointer" }} + > + +
+
+ setActiveOption(option)} + /> +
+
+ { + const newModel = [...triggeredModel]; + newModel[index] = option; + setTriggeredModel(newModel); + }} + /> +
+
+ { + const newPoint = [...triggeredPoint]; + newPoint[index] = option; + setTriggeredPoint(newPoint); + }} + /> +
+
+ { + const newAction = [...triggeredAction]; + newAction[index] = option; + setTriggeredAction(newAction); + }} + /> +
+
+
+ ))} +
+
+ ); +}; + +export default Trigger; diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx index b672313..3d42917 100644 --- a/app/src/components/ui/inputs/InputWithDropDown.tsx +++ b/app/src/components/ui/inputs/InputWithDropDown.tsx @@ -5,6 +5,7 @@ type InputWithDropDownProps = { label: string; value: string; min?: number; + max?: number; step?: number; defaultValue?: string; options?: string[]; // Array of dropdown options @@ -19,6 +20,7 @@ const InputWithDropDown: React.FC = ({ label, value, min, + max, step, defaultValue, options, @@ -47,6 +49,7 @@ const InputWithDropDown: React.FC = ({
{ + const [showPreview, setSetshowPreview] = useState(false); + return ( +
+
setSetshowPreview(!showPreview)} + > +
Preview
+
+ +
+
+ {showPreview && ( +
+
+
+ )} +
+
+
Upload Product
+ + +
+ console.log(option)} + /> +
+
+ ); +}; + +export default PreviewSelectionWithUpload; diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 883f6c2..21554e8 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -7,8 +7,8 @@ input { width: 100%; padding: 2px 4px; border-radius: #{$border-radius-small}; - outline: 2px solid var(--border-color); - outline-offset: -2px; + outline: 1px solid var(--border-color); + outline-offset: -1px; border: none; background: transparent; color: var(--input-text-color); @@ -30,6 +30,24 @@ input { background-color: var(--background-color) !important; -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important; } + + // File input specific style adjustments + &::file-selector-button { + font-size: 14px; + color: var(--accent-color); + background-color: var(--background-color-secondary); + border: none; + outline: none; + border-radius: #{$border-radius-small}; + padding: 2px; + cursor: pointer; + + // Hover effect for the file button + &:hover { + color: var(--primary-color); + background-color: var(--accent-color); + } + } } .input-value { @@ -712,3 +730,47 @@ input { border: 1px solid var(--accent-color); } } + +.preview-selection-with-upload-wrapper { + .input-header-container { + padding: 6px 12px; + @include flex-space-between; + .arrow-container { + transition: all 0.2s; + @include flex-center; + } + } + .upload-custom-asset-button{ + padding: 6px 12px; + @include flex-space-between; + .title{ + white-space: nowrap; + width: 40%; + } + input{ + display: none; + } + .upload-button{ + width: 60%; + background: var(--highlight-accent-color); + color: var(--accent-color); + padding: 3px 6px; + border-radius: #{$border-radius-small}; + text-align: center; + } + } + .canvas-wrapper { + height: 150px; + width: 100%; + padding: 8px; + padding-right: 4px; + overflow: hidden; + position: relative; + .canvas-container { + width: 100%; + height: 100%; + border-radius: #{$border-radius-small}; + background-color: var(--background-color-gray); + } + } +} diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 305206a..cab078e 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -7,6 +7,7 @@ top: 32px; left: 8px; background-color: var(--background-color); + backdrop-filter: blur(150px); border-radius: #{$border-radius-extra-large}; box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; @@ -131,15 +132,12 @@ } .widgets-wrapper { - min-height: 50vh; max-height: 60vh; overflow: auto; } .widget-left-sideBar { - - .widget2D { overflow: auto; @@ -246,6 +244,7 @@ top: 32px; right: 8px; background-color: var(--background-color); + backdrop-filter: blur(150px); border-radius: #{$border-radius-extra-large}; box-shadow: #{$box-shadow-medium}; z-index: #{$z-index-tools}; @@ -643,7 +642,7 @@ path { stroke: var(--accent-color); - strokewidth: 1.5px; + stroke-width: 1.5px; } &:hover { @@ -658,7 +657,8 @@ } .machine-mechanics-content-container, - .simulations-container { + .simulations-container, + .event-proprties-wrapper { max-height: calc(60vh - (47px - 35px)); overflow: auto; overflow-y: scroll; @@ -682,6 +682,52 @@ } } + .global-props { + .property-list-container { + .property-item { + .value-field-container { + margin: 0; + input { + padding: 5px 4px; + } + .dropdown { + top: 4px; + right: 4px; + } + } + } + } + } + + .selected-actions-details { + .selected-actions-header .input-value { + padding: 8px 12px; + color: var(--accent-color); + } + .selected-actions-list { + margin-bottom: 8px; + .eye-dropper-input-container{ + padding: 6px 12px; + .regularDropdown-container { + padding: 5px 8px; + outline: 2px solid var(--border-color); + outline-offset: -2px; + border: none; + } + } + .value-field-container { + margin: 0; + input { + padding: 5px 4px; + } + .dropdown { + top: 4px; + right: 4px; + } + } + } + } + .lists-main-container { margin: 2px 8px; width: calc(100% - 12px); @@ -712,6 +758,7 @@ input { width: fit-content; + outline: none; accent-color: var(--accent-color); } } @@ -1183,25 +1230,21 @@ z-index: 3; padding: 8px; width: 100%; + max-height: 38px; font-size: var(--font-size-regular); - background: color-mix(in srgb, - var(--background-color) 40%, - transparent); + background: color-mix( + in srgb, + var(--background-color) 40%, + transparent + ); backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease; - - /* Added properties for ellipsis */ display: -webkit-box; - /* Necessary for multiline truncation */ -webkit-line-clamp: 2; - /* Number of lines to show */ -webkit-box-orient: vertical; - /* Box orientation for the ellipsis */ overflow: hidden; - /* Hide overflowing content */ text-overflow: ellipsis; - /* Add ellipsis for truncated content */ } .asset-image { @@ -1271,4 +1314,4 @@ .assets-wrapper { margin: 0; } -} \ No newline at end of file +} diff --git a/app/src/types/simulationTypes.d.ts b/app/src/types/simulationTypes.d.ts index fe24cda..1b99456 100644 --- a/app/src/types/simulationTypes.d.ts +++ b/app/src/types/simulationTypes.d.ts @@ -59,7 +59,7 @@ interface RoboticArmPointSchema { actionUuid: string; actionName: string; actionType: "pickAndPlace"; - process: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null }; + process: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null; }; triggers: TriggerSchema[]; }[]; } @@ -85,7 +85,7 @@ interface StoragePointSchema { action: { actionUuid: string; actionName: string; - actionType: "storage"; + actionType: "store"; materials: { materialName: string; materialId: string; }[]; storageCapacity: number; };