diff --git a/app/src/components/icons/AssetTypeIcons.tsx b/app/src/components/icons/AssetTypeIcons.tsx new file mode 100644 index 0000000..2f32358 --- /dev/null +++ b/app/src/components/icons/AssetTypeIcons.tsx @@ -0,0 +1,353 @@ +export const ForkLiftIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const ConveyorIcon = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +export const RoboticArmIcon = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export const MachineIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +type TypeBasedAssetIconsProps = { + assetType: string; +}; + +export function TypeBasedAssetIcons({ assetType }: TypeBasedAssetIconsProps) { + console.log("assetType: ", assetType); + return ( +
+ {assetType === "machine" && } + {assetType === "vehicle" && } + {assetType === "transfer" && } + {assetType === "roboticArm" && } +
+ ); +} diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 72f9ca0..eaf1cf4 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -1697,93 +1697,6 @@ export const TargetIcon = () => { ); }; -export const ForkLiftIcon = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; export const RightHalfFillCircleIcon = () => { return ( {

- Results for '{searchValue}' + Results for{" "} + '{searchValue}'

@@ -256,7 +257,6 @@ const Assets: React.FC = () => {
)} - {selectedCategory !== "Decals" && !selectedSubCategory ? (
{categoryAssets?.map((asset: any, index: number) => ( diff --git a/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx index c343805..2fb8042 100644 --- a/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx @@ -28,13 +28,13 @@ const AisleProperties: React.FC = () => { const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore(); const aisleTextureList: TextureItem[] = [ - { color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" }, - { color: "gray", id: "gray", brief: "basic", texture: "" }, - { color: "green", id: "green", brief: "pedestrian walkways", texture: "" }, - { color: "orange", id: "orange", brief: "material flow", texture: "" }, - { color: "blue", id: "blue", brief: "vehicle paths", texture: "" }, - { color: "purple", id: "purple", brief: "material flow", texture: "" }, - { color: "red", id: "red", brief: "safety zone", texture: "" }, + { color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" }, + { color: "gray", id: "#6F6F7A", brief: "basic", texture: "" }, + { color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" }, + { color: "orange", id: "#FF711B", brief: "material flow", texture: "" }, + { color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" }, + { color: "purple", id: "#AF52DE", brief: "material flow", texture: "" }, + { color: "red", id: "#FF3B30", brief: "safety zone", texture: "" }, { color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" }, { color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" }, { color: "white-black", id: "white-black", brief: "utility aisles", texture: "" }, @@ -285,7 +285,12 @@ const AisleProperties: React.FC = () => { onClick={() => setAisleColor(val.id)} aria-pressed={aisleColor === val.id} > -
{val.texture}
+
+ {val.texture} +
{val.color}
{`( ${val.brief} )`}
diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx index faa6015..718915c 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx +++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx @@ -1,18 +1,19 @@ import { useEffect, useState } from 'react' // import NavigateCatagory from '../../NavigateCatagory' -import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons'; +import { EyeIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons'; import assetImage from "../../../../../../assets/image/asset-image.png" import { useSceneContext } from '../../../../../../modules/scene/sceneContext'; import { useProductContext } from '../../../../../../modules/simulation/products/productContext'; import RenameInput from '../../../../../ui/inputs/RenameInput'; import { useResourceManagementId } from '../../../../../../store/builder/store'; +import { TypeBasedAssetIcons } from '../../../../../icons/AssetTypeIcons'; const AssetManagement = () => { // const [selectedCategory, setSelectedCategory] = useState("All Assets"); const [expandedAssetId, setExpandedAssetId] = useState(null); const [assets, setAssets] = useState([]); const { productStore } = useSceneContext(); - const { products, getProductById } = productStore(); + const { getProductById } = productStore(); const { selectedProductStore } = useProductContext(); const { selectedProduct } = selectedProductStore(); const { setResourceManagementId } = useResourceManagementId(); @@ -30,6 +31,7 @@ const AssetManagement = () => { grouped[asset.modelName] = { id: asset.modelUuid, name: asset.modelName, + type: asset.type, model: asset.modelCode || "N/A", status: asset.status || "Online", usageRate: asset.usageRate || 15, @@ -46,6 +48,7 @@ const AssetManagement = () => { setAssets(Object.values(grouped)); } + // eslint-disable-next-line }, [selectedProduct]); function handleRenameAsset(newName: string) { @@ -130,7 +133,7 @@ const AssetManagement = () => { : -
+
}
@@ -210,16 +213,10 @@ const AssetManagement = () => {
{expandedAssetId === asset.id ? "View Less" : "View More"}
-
- -
- )} -
- ))} diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index b89f2ea..4d29ad0 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -374,7 +374,7 @@ const Tools: React.FC = () => { )} - {activeModule !== "visualization" && ( + {toggleThreeD && activeModule !== "visualization" && ( <>
diff --git a/app/src/store/builder/useBuilderStore.ts b/app/src/store/builder/useBuilderStore.ts index 476631d..efda83a 100644 --- a/app/src/store/builder/useBuilderStore.ts +++ b/app/src/store/builder/useBuilderStore.ts @@ -158,7 +158,7 @@ export const useBuilderStore = create()( selectedAisle: null, aisleType: 'solid-aisle', aisleWidth: 0.1, - aisleColor: 'yellow', + aisleColor: '#FBE50E', dashLength: 0.5, gapLength: 0.3, diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index e3dd706..34f5b6d 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1500,6 +1500,28 @@ border-radius: #{$border-radius-large}; margin-right: 4px; overflow: hidden; + &.yellow-black { + background-color: black; + background-size: 10px 10px; + background-image: repeating-linear-gradient( + 45deg, + #FBE50E 0, + #FBE50E 2px, + black 0, + black 50% + ); + } + &.white-black { + background-color: black; + background-size: 10px 10px; + background-image: repeating-linear-gradient( + 45deg, + white 0, + white 2px, + black 0, + black 50% + ); + } } .aisle-color { @@ -1997,7 +2019,7 @@ background: var(--background-color); border-radius: 0 0 12px 12px; backdrop-filter: blur(4px); - .search-for{ + .search-for { display: inline-block; color: var(--accent-color); max-width: 238px; diff --git a/app/src/types/builderTypes.d.ts b/app/src/types/builderTypes.d.ts index e0440ec..7d5eefb 100644 --- a/app/src/types/builderTypes.d.ts +++ b/app/src/types/builderTypes.d.ts @@ -151,7 +151,7 @@ type Zones = Zone[]; type AisleTypes = 'solid-aisle' | 'dashed-aisle' | 'stripped-aisle' | 'dotted-aisle' | 'arrow-aisle' | 'arrows-aisle' | 'arc-aisle' | 'circle-aisle' | 'junction-aisle'; -type AisleColors = 'gray' | 'yellow' | 'green' | 'orange' | 'blue' | 'purple' | 'red' | '#66FF00' | 'yellow-black' | 'white-black' +type AisleColors = '#6F6F7A' | '#FBE50E' | '#43C06D' | '#FF711B' | '#488EF6' | '#AF52DE' | '#FF3B30' | '#66FF00' | 'yellow-black' | 'white-black' interface SolidAisle { aisleType: 'solid-aisle';