diff --git a/app/src/assets/image/categories/office.png b/app/src/assets/image/categories/office.png new file mode 100644 index 0000000..76c7e68 Binary files /dev/null and b/app/src/assets/image/categories/office.png differ diff --git a/app/src/assets/image/categories/safety.png b/app/src/assets/image/categories/safety.png new file mode 100644 index 0000000..4773d23 Binary files /dev/null and b/app/src/assets/image/categories/safety.png differ diff --git a/app/src/assets/image/categories/storage.png b/app/src/assets/image/categories/storage.png new file mode 100644 index 0000000..bfc9a7b Binary files /dev/null and b/app/src/assets/image/categories/storage.png differ diff --git a/app/src/assets/image/localAssets/arch.png b/app/src/assets/image/localAssets/arch.png new file mode 100644 index 0000000..bf14278 Binary files /dev/null and b/app/src/assets/image/localAssets/arch.png differ diff --git a/app/src/assets/image/localAssets/window.png b/app/src/assets/image/localAssets/window.png new file mode 100644 index 0000000..c6dbd54 Binary files /dev/null and b/app/src/assets/image/localAssets/window.png differ diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 7288bb5..12c7ef8 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { useEffect, useState } from "react"; import Search from "../../ui/inputs/Search"; import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset"; import arch from "../../../assets/gltf-glb/arch.glb"; @@ -11,8 +11,13 @@ import { useSelectedItem } from "../../../store/store"; import vehicle from "../../../assets/image/categories/vehicles.png"; import workStation from "../../../assets/image/categories/workStation.png"; import machines from "../../../assets/image/categories/machines.png"; -import feneration from "../../../assets/image/categories/feneration.png"; import worker from "../../../assets/image/categories/worker.png"; +import storage from "../../../assets/image/categories/storage.png"; +import office from "../../../assets/image/categories/office.png"; +import safety from "../../../assets/image/categories/safety.png"; +import feneration from "../../../assets/image/categories/feneration.png"; +import archThumbnail from "../../../assets/image/localAssets/arch.png"; +import windowThumbnail from "../../../assets/image/localAssets/window.png"; // ------------------------------------- interface AssetProp { @@ -21,12 +26,12 @@ interface AssetProp { category: string; description?: string; tags: string; - url?: String; + url?: string; uploadDate?: number; isArchieve?: boolean; animated?: boolean; price?: number; - CreatedBy?: String; + CreatedBy?: string; } interface CategoryListProp { assetImage?: string; @@ -102,6 +107,9 @@ const Assets: React.FC = () => { { category: "Workstation", categoryImage: workStation }, { category: "Machines", categoryImage: machines }, { category: "Workers", categoryImage: worker }, + { category: "Storage", categoryImage: storage }, + { category: "Safety", categoryImage: safety }, + { category: "Office", categoryImage: office }, ]); }, []); const fetchCategoryAssets = async (asset: any) => { @@ -112,6 +120,7 @@ const Assets: React.FC = () => { filename: "arch", category: "Feneration", url: arch, + thumbnail: archThumbnail, tags: "arch", }, { @@ -125,6 +134,7 @@ const Assets: React.FC = () => { filename: "window", category: "Feneration", url: window, + thumbnail: windowThumbnail, tags: "window", }, ]; @@ -135,7 +145,9 @@ const Assets: React.FC = () => { const res = await getCategoryAsset(asset); setCategoryAssets(res); setFiltereredAssets(res); - } catch (error) {} + } catch (error) { + console.log(error); + } } }; return ( @@ -150,52 +162,7 @@ const Assets: React.FC = () => {

Results for {searchValue}

- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( -
- {asset.filename} - -
- {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
-
- ))} -
- - - ) : selectedCategory ? ( -
-

- {selectedCategory}{" "} -
{ - setSelectedCategory(null); - setCategoryAssets([]); - }} - > - ← Back -
-

-
- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( + {categoryAssets?.map((asset: any, index: number) => (
{ src={asset?.thumbnail} alt={asset.filename} className="asset-image" - onPointerDown={() => { - setSelectedItem({ - name: asset.filename, - id: asset.AssetID, - type: - asset.type === "undefined" - ? undefined - : asset.type, - }); - }} />
@@ -229,37 +186,94 @@ const Assets: React.FC = () => {
))} +
) : ( -
-

Categories

-
- {Array.from( - new Set(categoryList.map((asset) => asset.category)) - ).map((category, index) => { - const categoryInfo = categoryList.find( - (asset) => asset.category === category - ); - return ( + <> + {selectedCategory ? ( +
+

+ {selectedCategory}{" "}
fetchCategoryAssets(category)} + className="back-button" + id="asset-backButtom" + onClick={() => { + setSelectedCategory(null); + setCategoryAssets([]); + }} > - {category} -
{category}
+ ← Back
- ); - })} -

-
+ +
+ {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} { + setSelectedItem({ + name: asset.filename, + id: asset.AssetID, + type: + asset.type === "undefined" + ? undefined + : asset.type, + }); + }} + /> +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ ))} +
+
+ ) : ( +
+

Categories

+
+ {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
fetchCategoryAssets(category)} + > + {category} +
{category}
+
+ ); + })} +
+
+ )} + )} diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 5277b7f..fbeb270 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -516,7 +516,6 @@ input[type="number"] { -webkit-appearance: none; width: 100%; height: 6px; - background: var(--background-color-secondary); border-radius: #{$border-radius-medium}; outline: none; margin: 12px 8px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 9fc9990..e4655f3 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1275,49 +1275,49 @@ } &:nth-child(1), - &:nth-child(9) { + &:nth-child(8) { &::after { @include gradient-by-child(1); // First child uses the first color } } &:nth-child(2), - &:nth-child(10) { + &:nth-child(9) { &::after { @include gradient-by-child(2); // Second child uses the second color } } &:nth-child(3), - &:nth-child(11) { + &:nth-child(10) { &::after { @include gradient-by-child(3); // Third child uses the third color } } &:nth-child(4), - &:nth-child(12) { + &:nth-child(11) { &::after { @include gradient-by-child(4); // Fourth child uses the fourth color } } &:nth-child(5), - &:nth-child(13) { + &:nth-child(12) { &::after { @include gradient-by-child(5); // Fifth child uses the fifth color } } &:nth-child(6), - &:nth-child(14) { + &:nth-child(13) { &::after { @include gradient-by-child(6); // Fifth child uses the fifth color } } &:nth-child(7), - &:nth-child(15) { + &:nth-child(14) { &::after { @include gradient-by-child(7); // Fifth child uses the fifth color } diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index b34054b..b3eafc2 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -212,7 +212,7 @@ background: var(--background-color); position: relative; padding: 0 10px; - + animation: scaleFadeIn 0.4s forwards; .kebab { width: 30px; height: 30px; @@ -237,7 +237,6 @@ gap: 6px; border-radius: #{$border-radius-small}; - box-shadow: var(--box-shadow-medium); .btn { @@ -390,7 +389,6 @@ width: 18px; height: 18px; border-radius: #{$border-radius-small}; - } .active { @@ -414,7 +412,6 @@ color: var(--background-color); border-radius: #{$border-radius-small}; - .add-icon { @include flex-center; transition: rotate 0.2s; @@ -434,7 +431,7 @@ path { stroke: #f65648; - strokeWidth: 1.3; + strokewidth: 1.3; } } } @@ -530,7 +527,6 @@ height: 10px; background: var(--primary-color); border-radius: #{$border-radius-circle}; - } } } @@ -553,7 +549,6 @@ border: none; outline: none; border-radius: #{$border-radius-circle}; - } } } @@ -615,7 +610,6 @@ gap: 6px; border-radius: #{$border-radius-small}; - box-shadow: var(--box-shadow-medium); .icon { @@ -953,4 +947,14 @@ opacity: 0; transform: scaleY(0); } -} \ No newline at end of file +} +@keyframes scaleFadeIn { + from { + scale: 0; + opacity: 0; + } + to { + scale: 1; + opacity: 1; + } +}