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

feat: Implement API integration for aisle management and enhance dashboard components

This commit is contained in:
Poovizhi99 2025-06-05 15:38:16 +05:30
parent eda618601b
commit 3970479930
9 changed files with 164 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/Dashboard/DashboardCard.tsx
View File

@ -226,7 +226,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
className="kebab-wrapper"
onClick={(e) => {
e.stopPropagation();
console.log("Kebab menu clicked");
setIsKebabOpen((prev) => !prev);
}}
>
@ -245,7 +244,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
className="option"
title={""}
onClick={(e) => {
console.log(option);
e.stopPropagation();
handleOptionClick(option);
}}

27
app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx
View File

@ -6,6 +6,8 @@ import { useAisleStore } from '../../../../store/builder/useAisleStore';
import ReferenceAisle from './referenceAisle';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import ReferencePoint from '../../point/reference/referencePoint';
import { createAisleApi } from '../../../../services/factoryBuilder/aisle/createAisleApi';
import { useParams } from 'react-router-dom';
function AisleCreator() {
const { scene, camera, raycaster, gl, pointer } = useThree();
@ -17,6 +19,7 @@ function AisleCreator() {
const { addAisle, getAislePointById } = useAisleStore();
const drag = useRef(false);
const isLeftMouseDown = useRef(false);
const { projectId } = useParams();
const [tempPoints, setTempPoints] = useState<Point[]>([]);
const [isCreating, setIsCreating] = useState(false);
@ -97,6 +100,9 @@ function AisleCreator() {
};
console.log('aisle: ', aisle);
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'dashed-aisle') {
@ -117,6 +123,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'dotted-aisle') {
@ -136,6 +145,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'arrow-aisle') {
@ -154,6 +166,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'arrows-aisle') {
@ -174,6 +189,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'arc-aisle') {
@ -193,6 +211,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'circle-aisle') {
@ -211,6 +232,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
} else if (aisleType === 'junction-aisle') {
@ -230,6 +254,9 @@ function AisleCreator() {
}
};
addAisle(aisle);
if (projectId) {
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
setTempPoints([newPoint]);
}
}

18
app/src/modules/builder/aisle/aislesGroup.tsx
View File

@ -1,7 +1,23 @@
import { useEffect } from 'react'
import AisleCreator from './aisleCreator/aisleCreator'
import AisleInstances from './Instances/aisleInstances'
import { useParams } from 'react-router-dom';
import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
import { useAisleStore } from '../../../store/builder/useAisleStore';
function AislesGroup() {
const { projectId } = useParams();
const { setAisles } = useAisleStore();
useEffect(() => {
const fetchAisle = async () => {
if (projectId) {
const aisles = await getAisleApi(projectId);
setAisles(aisles);
// console.log('aisles: ', aisles);
}
}
fetchAisle()
}, [])
return (
@ -9,7 +25,7 @@ function AislesGroup() {
<AisleCreator />
<AisleInstances />
</>

24
app/src/modules/builder/point/point.tsx
View File

@ -9,6 +9,9 @@ import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { usePointSnapping } from './helpers/usePointSnapping';
import { useAislePointSnapping } from './helpers/useAisleDragSnap';
import { useWallStore } from '../../../store/builder/useWallStore';
import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAisleApi';
import { useParams } from 'react-router-dom';
import { createAisleApi } from '../../../services/factoryBuilder/aisle/createAisleApi';
function Point({ point }: { readonly point: Point }) {
const materialRef = useRef<THREE.ShaderMaterial>(null);
@ -16,13 +19,13 @@ function Point({ point }: { readonly point: Point }) {
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode();
const { setPosition: setAislePosition, removePoint: removeAislePoint } = useAisleStore();
const { setPosition: setAislePosition, removePoint: removeAislePoint, getAisleByPointId } = useAisleStore();
const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
const { snapPosition } = useAislePointSnapping(point);
const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
const { deletePointOrLine } = useDeletePointOrLine();
const { projectId } = useParams();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const colors = getColor(point);
@ -98,7 +101,7 @@ function Point({ point }: { readonly point: Point }) {
const finalSnappedPosition = checkSnapForAisle(aisleSnappedPosition.position);
const aislePoints = setAislePosition(point.pointUuid, finalSnappedPosition.position);
// console.log('aislePoints: ', aislePoints);for backend
}
} else if (point.pointType === 'Wall') {
if (position) {
@ -112,7 +115,16 @@ function Point({ point }: { readonly point: Point }) {
const handleDragEnd = (point: Point) => {
if (deletePointOrLine) return;
console.log('point: ', point);
if (point.pointType === 'Aisle') {
const aisle = getAisleByPointId(point.pointUuid);
if (aisle && projectId) {
// console.log('Aisle after drag: ', aisle);
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
}
} else if (point.pointType === 'Wall') {
// console.log('Wall after drag: ', point);
}
}
const handlePointClick = (point: Point) => {
@ -121,7 +133,9 @@ function Point({ point }: { readonly point: Point }) {
const removedAisles = removeAislePoint(point.pointUuid);
if (removedAisles.length > 0) {
removedAisles.forEach(aisle => {
// console.log('Removed Aisle: ', aisle);
console.log('Removed Aisle: ', aisle);
if (projectId)
deleteAisleApi(aisle.aisleUuid, projectId)
});
setHoveredPoint(null);
}

35
app/src/services/factoryBuilder/aisle/createAisleApi.ts Normal file
View File

@ -0,0 +1,35 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const createAisleApi = async (
aisleUuid: string,
points: any,
type: Object,
projectId: string
) => {
try {
const response = await fetch(`${url_Backend_dwinzo}/api/V1/UpsertAisle`, {
method: "POST",
headers: {
Authorization: "Bearer <access_token>", // Replace with actual token
"Content-Type": "application/json",
token: localStorage.getItem("token") || "", // Coerce null to empty string
refresh_token: localStorage.getItem("refreshToken") || "",
},
body: JSON.stringify({ aisleUuid, points, type, projectId }),
});
if (!response.ok) {
throw new Error("Failed to add project");
}
const result = await response.json();
// console.log("result: ", result);
return result;
} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error("An unknown error occurred");
}
}
};

29
app/src/services/factoryBuilder/aisle/deleteAisleApi.ts Normal file
View File

@ -0,0 +1,29 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const deleteAisleApi = async (aisleUuid: string, projectId: string) => {
try {
const response = await fetch(`${url_Backend_dwinzo}/api/V1/DeleteAisle`, {
method: "PATCH",
headers: {
Authorization: "Bearer <access_token>", // Replace with actual token
"Content-Type": "application/json",
token: localStorage.getItem("token") || "", // Coerce null to empty string
refresh_token: localStorage.getItem("refreshToken") || "",
},
body: JSON.stringify({ aisleUuid, projectId }),
});
if (!response.ok) {
throw new Error("Failed to clearPanel in the zone");
}
const result = await response.json();
// console.log('result: ', result);
return result;
} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error("An unknown error occurred");
}
}
};

28
app/src/services/factoryBuilder/aisle/getAisleApi.ts Normal file
View File

@ -0,0 +1,28 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const getAisleApi = async (projectId: string) => {
try {
const response = await fetch(
`${url_Backend_dwinzo}/api/V1/Aisles/${projectId}`,
{
method: "GET",
headers: {
Authorization: "Bearer <access_token>", // Replace with actual token
"Content-Type": "application/json",
token: localStorage.getItem("token") || "", // Coerce null to empty string
refresh_token: localStorage.getItem("refreshToken") || "",
},
}
);
// console.log("response: ", response);
if (!response.ok) {
throw new Error("Failed to fetch");
}
return await response.json();
} catch (error: any) {
console.error("Failed to get asset image:", error);
throw new Error(error.message);
}
};

7
app/src/store/builder/useAisleStore.ts
View File

@ -41,6 +41,7 @@ interface AisleStore {
) => void;
getAisleById: (uuid: string) => Aisle | undefined;
getAisleByPointId: (uuid: string) => Aisle | undefined;
getAislePointById: (uuid: string) => Point | undefined;
getConnectedPoints: (uuid: string) => Point[] | [];
getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
@ -210,6 +211,12 @@ export const useAisleStore = create<AisleStore>()(
return get().aisles.find((a) => a.aisleUuid === uuid);
},
getAisleByPointId: (uuid) => {
return get().aisles.find((a) => {
return a.points.some((p) => p.pointUuid === uuid);
});
},
getAislePointById: (uuid) => {
for (const aisle of get().aisles) {
const point = aisle.points.find((p) => p.pointUuid === uuid);

18
app/src/styles/pages/dashboard.scss
View File

@ -88,7 +88,6 @@
&:hover {
background: var(--background-color-button);
}
}
}
}
@ -130,7 +129,6 @@
width: 100%;
height: calc(100% - 357px);
.header-wrapper {
font-size: var(--font-size-large);
@ -140,7 +138,6 @@
border-radius: #{$border-radius-extra-large};
&.active {
background: var(--background-color-button);
color: var(--text-color);
}
@ -159,8 +156,6 @@
}
}
}
}
.dashboard-card-container {
@ -207,7 +202,7 @@
// backdrop-filter: blur(18px);
border-radius: #{$border-radius-xlarge};
// transform: translateY(100%);
// transform: translateY(100%);///////hovered
transition: transform 0.25s linear;
.project-details {
@ -241,10 +236,8 @@
transform: rotate(90deg);
}
}
}
.kebab-options-wrapper {
position: absolute;
bottom: 40px;
@ -277,22 +270,15 @@
}
}
&:hover {
overflow: visible;
.kebab-options-wrapper {
display: flex;
}
.project-details-container {
transform: translateY(0);
}
}
}
.market-place-banner-container {
@ -348,4 +334,4 @@
font-family: #{$font-roboto};
cursor: pointer;
}
}
}