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

1. Integerated Dashboard. #96

Closed
Jerald_Golden wants to merge 19 commits from v3 into main
pull from: v3
merge into: Dwinzo-Beta:main
Conversation 0 Commits 19 Files Changed 135 +219 -172
3 changed files with 219 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eda618601b - Show all commits

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

@ -95,6 +95,7 @@ function AisleCreator() {
aisleWidth: aisleWidth
}
};
console.log('aisle: ', aisle);
addAisle(aisle);
setTempPoints([newPoint]);
}

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

@ -97,7 +97,8 @@ function Point({ point }: { readonly point: Point }) {
const aisleSnappedPosition = snapPosition(newPosition);
const finalSnappedPosition = checkSnapForAisle(aisleSnappedPosition.position);
setAislePosition(point.pointUuid, finalSnappedPosition.position);
const aislePoints = setAislePosition(point.pointUuid, finalSnappedPosition.position);
// console.log('aislePoints: ', aislePoints);for backend
}
} else if (point.pointType === 'Wall') {
if (position) {
@ -119,6 +120,9 @@ function Point({ point }: { readonly point: Point }) {
if (point.pointType === 'Aisle') {
const removedAisles = removeAislePoint(point.pointUuid);
if (removedAisles.length > 0) {
removedAisles.forEach(aisle => {
// console.log('Removed Aisle: ', aisle);
});
setHoveredPoint(null);
}
}

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

@ -1,198 +1,240 @@
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
interface AisleStore {
aisles: Aisles;
setAisles: (aisles: Aisles) => void;
addAisle: (aisle: Aisle) => void;
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
removeAisle: (uuid: string) => void;
removePoint: (uuid: string) => Aisles;
setPosition: (pointUuid: string, position: [number, number, number]) => void;
setLayer: (pointUuid: string, layer: number) => void;
setColor: (aisleUuid: string, color: AisleColors) => void;
aisles: Aisles;
setAisles: (aisles: Aisles) => void;
addAisle: (aisle: Aisle) => void;
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
removeAisle: (uuid: string) => void;
removePoint: (uuid: string) => Aisles;
setPosition: (
pointUuid: string,
position: [number, number, number]
) => Aisle | undefined;
setLayer: (pointUuid: string, layer: number) => void;
setColor: (aisleUuid: string, color: AisleColors) => void;
// Type-specific setters
setSolidAisleWidth: (aisleUuid: string, width: number) => void;
setDashedAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
) => void;
setDottedAisleProperties: (
aisleUuid: string,
props: { dotRadius?: number; gapLength?: number }
) => void;
setArrowAisleWidth: (aisleUuid: string, width: number) => void;
setArrowsAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
) => void;
setArcAisleWidth: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
setJunctionAisleProperties: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
// Type-specific setters
setSolidAisleWidth: (aisleUuid: string, width: number) => void;
setDashedAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
) => void;
setDottedAisleProperties: (
aisleUuid: string,
props: { dotRadius?: number; gapLength?: number }
) => void;
setArrowAisleWidth: (aisleUuid: string, width: number) => void;
setArrowsAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
) => void;
setArcAisleWidth: (
aisleUuid: string,
props: { aisleWidth?: number; isFlipped: boolean }
) => void;
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
setJunctionAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; isFlipped: boolean }
) => void;
getAisleById: (uuid: string) => Aisle | undefined;
getAislePointById: (uuid: string) => Point | undefined;
getConnectedPoints: (uuid: string) => Point[] | [];
getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
getAisleById: (uuid: string) => Aisle | undefined;
getAislePointById: (uuid: string) => Point | undefined;
getConnectedPoints: (uuid: string) => Point[] | [];
getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
}
export const useAisleStore = create<AisleStore>()(
immer((set, get) => ({
aisles: [],
immer((set, get) => ({
aisles: [],
setAisles: (aisles) => set((state) => {
state.aisles = aisles;
}),
setAisles: (aisles) =>
set((state) => {
state.aisles = aisles;
}),
addAisle: (aisle) => set((state) => {
state.aisles.push(aisle);
}),
addAisle: (aisle) =>
set((state) => {
state.aisles.push(aisle);
}),
updateAisle: (uuid, updated) => set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
if (aisle) {
Object.assign(aisle, updated);
}
}),
updateAisle: (uuid, updated) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
if (aisle) {
Object.assign(aisle, updated);
}
}),
removeAisle: (uuid) => set((state) => {
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
}),
removeAisle: (uuid) =>
set((state) => {
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
}),
removePoint: (uuid) => {
const removedAisles: Aisle[] = [];
set((state) => {
state.aisles = state.aisles.filter((aisle) => {
const hasPoint = aisle.points.some((point) => point.pointUuid === uuid);
if (hasPoint) {
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
return false;
}
return true;
});
});
return removedAisles;
},
removePoint: (uuid) => {
const removedAisles: Aisle[] = [];
set((state) => {
state.aisles = state.aisles.filter((aisle) => {
const hasPoint = aisle.points.some(
(point) => point.pointUuid === uuid
);
if (hasPoint) {
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
return false;
}
return true;
});
});
return removedAisles;
},
setPosition: (pointUuid, position) => set((state) => {
for (const aisle of state.aisles) {
const point = aisle.points.find(p => p.pointUuid === pointUuid);
if (point) {
point.position = position;
}
}
}),
setPosition: (pointUuid, position) => {
let updatedAisle: Aisle | undefined;
set((state) => {
for (const aisle of state.aisles) {
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
if (point) {
point.position = position;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}
});
return updatedAisle;
},
setLayer: (pointUuid, layer) => set((state) => {
for (const aisle of state.aisles) {
const point = aisle.points.find(p => p.pointUuid === pointUuid);
if (point) {
point.layer = layer;
}
}
}),
setLayer: (pointUuid, layer) =>
set((state) => {
for (const aisle of state.aisles) {
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
if (point) {
point.layer = layer;
}
}
}),
setColor: (aisleUuid, color) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle) {
aisle.type.aisleColor = color;
}
}),
setColor: (aisleUuid, color) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle) {
aisle.type.aisleColor = color;
}
}),
// Type-specific property setters
setSolidAisleWidth: (aisleUuid, width) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'solid-aisle') {
aisle.type.aisleWidth = width;
}
}),
// Type-specific property setters
setSolidAisleWidth: (aisleUuid, width) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "solid-aisle") {
aisle.type.aisleWidth = width;
}
}),
setDashedAisleProperties: (aisleUuid, props) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'dashed-aisle') {
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
if (props.dashLength !== undefined) aisle.type.dashLength = props.dashLength;
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
}
}),
setDashedAisleProperties: (aisleUuid, props) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "dashed-aisle") {
if (props.aisleWidth !== undefined)
aisle.type.aisleWidth = props.aisleWidth;
if (props.dashLength !== undefined)
aisle.type.dashLength = props.dashLength;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
}
}),
setDottedAisleProperties: (aisleUuid, props) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'dotted-aisle') {
if (props.dotRadius !== undefined) aisle.type.dotRadius = props.dotRadius;
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
}
}),
setDottedAisleProperties: (aisleUuid, props) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "dotted-aisle") {
if (props.dotRadius !== undefined)
aisle.type.dotRadius = props.dotRadius;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
}
}),
setArrowAisleWidth: (aisleUuid, width) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'arrow-aisle') {
aisle.type.aisleWidth = width;
}
}),
setArrowAisleWidth: (aisleUuid, width) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arrow-aisle") {
aisle.type.aisleWidth = width;
}
}),
setArrowsAisleProperties: (aisleUuid, props) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'arrows-aisle') {
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
if (props.aisleLength !== undefined) aisle.type.aisleLength = props.aisleLength;
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
}
}),
setArrowsAisleProperties: (aisleUuid, props) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arrows-aisle") {
if (props.aisleWidth !== undefined)
aisle.type.aisleWidth = props.aisleWidth;
if (props.aisleLength !== undefined)
aisle.type.aisleLength = props.aisleLength;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
}
}),
setArcAisleWidth: (aisleUuid, props) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'arc-aisle') {
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
}
}),
setArcAisleWidth: (aisleUuid, props) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arc-aisle") {
if (props.aisleWidth !== undefined)
aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined)
aisle.type.isFlipped = props.isFlipped;
}
}),
setCircleAisleWidth: (aisleUuid, width) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'circle-aisle') {
aisle.type.aisleWidth = width;
}
}),
setCircleAisleWidth: (aisleUuid, width) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "circle-aisle") {
aisle.type.aisleWidth = width;
}
}),
setJunctionAisleProperties: (aisleUuid, props) => set((state) => {
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === 'junction-aisle') {
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
}
}),
setJunctionAisleProperties: (aisleUuid, props) =>
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "junction-aisle") {
if (props.aisleWidth !== undefined)
aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined)
aisle.type.isFlipped = props.isFlipped;
}
}),
getAisleById: (uuid) => {
return get().aisles.find((a) => a.aisleUuid === uuid);
},
getAisleById: (uuid) => {
return get().aisles.find((a) => a.aisleUuid === uuid);
},
getAislePointById: (uuid) => {
for (const aisle of get().aisles) {
const point = aisle.points.find(p => p.pointUuid === uuid);
if (point) {
return point;
}
}
return undefined;
},
getAislePointById: (uuid) => {
for (const aisle of get().aisles) {
const point = aisle.points.find((p) => p.pointUuid === uuid);
if (point) {
return point;
}
}
return undefined;
},
getConnectedPoints: (uuid) => {
const connected: Point[] = [];
for (const aisle of get().aisles) {
for (const point of aisle.points) {
if (point.pointUuid === uuid) {
connected.push(...aisle.points.filter(p => p.pointUuid !== uuid));
}
}
}
return connected;
},
getConnectedPoints: (uuid) => {
const connected: Point[] = [];
for (const aisle of get().aisles) {
for (const point of aisle.points) {
if (point.pointUuid === uuid) {
connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
}
}
}
return connected;
},
getAisleType: <T extends AisleType>(uuid: string) => {
const aisle = get().aisles.find(a => a.aisleUuid === uuid);
return aisle?.type as T | undefined;
},
}))
getAisleType: <T extends AisleType>(uuid: string) => {
const aisle = get().aisles.find((a) => a.aisleUuid === uuid);
return aisle?.type as T | undefined;
},
}))
);