Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

This commit is contained in:
Vishnu 2025-05-07 08:57:31 +05:30
parent f7d0151b00
commit cb483b4ded
9 changed files with 120 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/assets/image/categories/office.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
app/src/assets/image/categories/safety.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
app/src/assets/image/categories/storage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
app/src/assets/image/localAssets/arch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
app/src/assets/image/localAssets/window.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

186
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@ -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 = () => {
<p>Results for {searchValue}</p>
</div>
<div className="assets-container">
{categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div
key={index}
className="assets"
id={asset.filename}
title={asset.filename}
>
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
</div>
</div>
</div>
) : selectedCategory ? (
<div className="assets-wrapper">
<h2>
{selectedCategory}{" "}
<div
className="back-button"
id="asset-backButtom"
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
← Back
</div>
</h2>
<div className="assets-container">
{categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
{categoryAssets?.map((asset: any, index: number) => (
<div
key={index}
className="assets"
@ -206,16 +173,6 @@ const Assets: React.FC = () => {
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
});
}}
/>
<div className="asset-name">
@ -229,37 +186,94 @@ const Assets: React.FC = () => {
</div>
</div>
))}
</div>
</div>
</div>
) : (
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<>
{selectedCategory ? (
<div className="assets-wrapper">
<h2>
{selectedCategory}{" "}
<div
key={index}
className="category"
id={category}
onClick={() => fetchCategoryAssets(category)}
className="back-button"
id="asset-backButtom"
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
<img
src={categoryInfo?.categoryImage || ""}
alt={category}
className="category-image"
draggable={false}
/>
<div className="category-name">{category}</div>
← Back
</div>
);
})}
</div>
</div>
</h2>
<div className="assets-container">
{categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div
key={index}
className="assets"
id={asset.filename}
title={asset.filename}
>
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
});
}}
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
</div>
</div>
) : (
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<div
key={index}
className="category"
id={category}
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
alt={category}
className="category-image"
draggable={false}
/>
<div className="category-name">{category}</div>
</div>
);
})}
</div>
</div>
)}
</>
)}
</section>
</div>

1
app/src/styles/components/input.scss
View File

@ -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;

14
app/src/styles/layout/sidebar.scss
View File

@ -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
}

22
app/src/styles/pages/realTimeViz.scss
View File

@ -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);
}
}
}
@keyframes scaleFadeIn {
from {
scale: 0;
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
}