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
- .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}
+ ← Back
- );
- })}
-
-
+
+
+ {categoryAssets &&
+ categoryAssets?.map((asset: any, index: number) => (
+
+

{
+ 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}
+
+ );
+ })}
+
+
+ )}
+ >
)}
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;
+ }
+}