From cacb23ea5a2533a314467f9d06453a10a24569d0 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Mon, 31 Mar 2025 12:59:12 +0530 Subject: [PATCH] added feneration assets --- .../components/layout/sidebarLeft/Assets.tsx | 149 ++++++++++-------- app/src/components/ui/Tools.tsx | 4 +- app/src/modules/market/AssetPreview.tsx | 2 +- app/src/modules/market/CardsContainer.tsx | 3 +- app/src/modules/market/FilterSearch.tsx | 1 + app/src/modules/market/MarketPlace.tsx | 2 + .../assest/assets/getCategoryAsset.ts | 4 - app/src/styles/layout/sidebar.scss | 10 +- 8 files changed, 100 insertions(+), 75 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 5cd32f1..f8733dc 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import Search from "../../ui/inputs/Search"; import vehicle from "../../../assets/image/vehicles.png"; import workStation from "../../../assets/image/workStation.png"; @@ -6,19 +6,21 @@ import machines from "../../../assets/image/machines.png"; import feneration from "../../../assets/image/feneration.png"; import worker from "../../../assets/image/worker.png"; import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset"; - +import arch from "../../../assets/gltf-glb/arch.glb"; +import door from "../../../assets/gltf-glb/door.glb"; +import window from "../../../assets/gltf-glb/window.glb"; interface AssetProp { filename: string; - thumbnail: string; + thumbnail?: string; category: string; - description: string; - tags: string; - url: String; - uploadDate: number; - isArchieve: boolean; - animated: boolean; - price: number; - CreatedBy: String; + description?: string; + tags?: string; + url?: String; + uploadDate?: number; + isArchieve?: boolean; + animated?: boolean; + price?: number; + CreatedBy?: String; } const Assets: React.FC = () => { const [searchValue, setSearchValue] = useState(""); @@ -30,55 +32,64 @@ const Assets: React.FC = () => { setSelectedCategory(null); // Reset selected category when search changes }; - const categoryList = [ - { - assetName: "Doors", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - assetName: "Windows", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - assetName: "Pillars", - assetImage: "", - category: "Feneration", - categoryImage: feneration, - }, - { - category: "Vehicles", - categoryImage: vehicle, - }, - { - category: "Workstation", - categoryImage: workStation, - }, - { - category: "Machines", - categoryImage: machines, - }, - { - category: "Workers", - categoryImage: worker, - }, - ]; - - // Get unique categories - const uniqueCategories = Array.from( - new Set(categoryList.map((asset) => asset.category)) + const categoryList = useMemo( + () => [ + { + assetName: "Doors", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Windows", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { + assetName: "Pillars", + assetImage: "", + category: "Feneration", + categoryImage: feneration, + }, + { category: "Vehicles", categoryImage: vehicle }, + { category: "Workstation", categoryImage: workStation }, + { category: "Machines", categoryImage: machines }, + { category: "Workers", categoryImage: worker }, + ], + [] ); const fetchCategoryAssets = async (asset: any) => { - try { - setSelectedCategory(asset); - const res = await getCategoryAsset(asset); - setFilteredAsset(res); - } catch (error) {} + setSelectedCategory(asset); + if (asset === "Feneration") { + const localAssets: AssetProp[] = [ + { + filename: "arch", + category: "Feneration", + url: arch, + }, + { + filename: "door", + category: "Feneration", + url: door, + }, + { + filename: "window", + category: "Feneration", + url: window, + }, + ]; + setFilteredAsset(localAssets); + } else { + try { + const res = await getCategoryAsset(asset); + setFilteredAsset(res || []); // Ensure it's always an array + } catch (error) {} + } }; + + useEffect(() => {}, [filteredAsset]); return (
@@ -100,12 +111,22 @@ const Assets: React.FC = () => { {filteredAsset && filteredAsset?.map((asset: any, index: number) => (
- {asset.filename} -
{asset.filename}
+ {asset?.thumbnail && ( + {asset.filename} + )} +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
))}
@@ -114,7 +135,9 @@ const Assets: React.FC = () => {

Categories

- {uniqueCategories.map((category, index) => { + {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { const categoryInfo = categoryList.find( (asset) => asset.category === category ); diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 89f1553..9e7dd1b 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -68,9 +68,7 @@ const Tools: React.FC = () => { : true ); }, []); - useEffect(() => { - console.log("activeModule", activeModule); - }, [activeModule]); + useEffect(() => {}, [activeModule]); useEffect(() => { setActiveTool(activeSubTool); setActiveSubTool(activeSubTool); diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx index 854ebc4..1d39920 100644 --- a/app/src/modules/market/AssetPreview.tsx +++ b/app/src/modules/market/AssetPreview.tsx @@ -94,7 +94,7 @@ const AssetPreview: React.FC = ({
{selectedCard.assetName}
- {`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`} + {`${selectedCard.description}`}
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index c2a7e6d..cdbce81 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -14,6 +14,7 @@ interface ModelData { thumbnail: string; uploadDate: number; _id: string; + price: number; } interface ModelsProps { models: ModelData[]; @@ -50,7 +51,7 @@ const CardsContainer: React.FC = ({ models }) => { key={assetDetail._id} assetName={assetDetail?.filename} uploadedOn={assetDetail.uploadDate} - price={36500} + price={assetDetail?.price} rating={4.5} views={800} onSelectCard={handleCardSelect} diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index 84074b8..630942d 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -17,6 +17,7 @@ interface ModelData { thumbnail: string; uploadDate: number; _id: string; + price: number; } interface ModelsProps { models: ModelData[]; diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index d830576..cd2e0e9 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -15,6 +15,7 @@ interface ModelData { thumbnail: string; uploadDate: number; _id: string; + price: number; } const MarketPlace = () => { const [models, setModels] = useState([]); @@ -24,6 +25,7 @@ const MarketPlace = () => { const filteredAssets = async () => { try { const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6"); + setModels(filt.items); setFilteredModels(filt.items); } catch {} diff --git a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts index 9620fce..522e54c 100644 --- a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts +++ b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts @@ -1,6 +1,5 @@ let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; export const getCategoryAsset = async (categoryName: any) => { - console.log("categoryName:api ", categoryName); try { const response = await fetch( `${BackEnd_url}/api/v2/getCatagoryAssets/${categoryName}`, @@ -9,15 +8,12 @@ export const getCategoryAsset = async (categoryName: any) => { headers: { "Content-Type": "application/json", }, - // body: JSON.stringify({ filename }), } ); const result = await response.json(); - console.log("result: ", result); return result; } catch (error: any) { - // console.error("Error fetching category:", error.message); throw new Error(error.message); } }; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 1e2de3c..e8175c5 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1029,10 +1029,14 @@ } .asset-image { + height: 100%; + width: 100%; position: absolute; - top: 50%; - right: 5px; - transform: translate(0, -50%); + // top: 50%; + // right: 5px; + // transform: translate(0, -50%); + top: 0; + left: 0; z-index: 2; } }