integrated with dashboard
This commit is contained in:
parent
de19ea9f83
commit
eda618601b
|
@ -95,6 +95,7 @@ function AisleCreator() {
|
||||||
aisleWidth: aisleWidth
|
aisleWidth: aisleWidth
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
console.log('aisle: ', aisle);
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,8 @@ function Point({ point }: { readonly point: Point }) {
|
||||||
const aisleSnappedPosition = snapPosition(newPosition);
|
const aisleSnappedPosition = snapPosition(newPosition);
|
||||||
const finalSnappedPosition = checkSnapForAisle(aisleSnappedPosition.position);
|
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') {
|
} else if (point.pointType === 'Wall') {
|
||||||
if (position) {
|
if (position) {
|
||||||
|
@ -119,6 +120,9 @@ function Point({ point }: { readonly point: Point }) {
|
||||||
if (point.pointType === 'Aisle') {
|
if (point.pointType === 'Aisle') {
|
||||||
const removedAisles = removeAislePoint(point.pointUuid);
|
const removedAisles = removeAislePoint(point.pointUuid);
|
||||||
if (removedAisles.length > 0) {
|
if (removedAisles.length > 0) {
|
||||||
|
removedAisles.forEach(aisle => {
|
||||||
|
// console.log('Removed Aisle: ', aisle);
|
||||||
|
});
|
||||||
setHoveredPoint(null);
|
setHoveredPoint(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,198 +1,240 @@
|
||||||
import { create } from 'zustand';
|
import { create } from "zustand";
|
||||||
import { immer } from 'zustand/middleware/immer';
|
import { immer } from "zustand/middleware/immer";
|
||||||
|
|
||||||
interface AisleStore {
|
interface AisleStore {
|
||||||
aisles: Aisles;
|
aisles: Aisles;
|
||||||
setAisles: (aisles: Aisles) => void;
|
setAisles: (aisles: Aisles) => void;
|
||||||
addAisle: (aisle: Aisle) => void;
|
addAisle: (aisle: Aisle) => void;
|
||||||
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
|
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
|
||||||
removeAisle: (uuid: string) => void;
|
removeAisle: (uuid: string) => void;
|
||||||
removePoint: (uuid: string) => Aisles;
|
removePoint: (uuid: string) => Aisles;
|
||||||
setPosition: (pointUuid: string, position: [number, number, number]) => void;
|
setPosition: (
|
||||||
setLayer: (pointUuid: string, layer: number) => void;
|
pointUuid: string,
|
||||||
setColor: (aisleUuid: string, color: AisleColors) => void;
|
position: [number, number, number]
|
||||||
|
) => Aisle | undefined;
|
||||||
|
setLayer: (pointUuid: string, layer: number) => void;
|
||||||
|
setColor: (aisleUuid: string, color: AisleColors) => void;
|
||||||
|
|
||||||
// Type-specific setters
|
// Type-specific setters
|
||||||
setSolidAisleWidth: (aisleUuid: string, width: number) => void;
|
setSolidAisleWidth: (aisleUuid: string, width: number) => void;
|
||||||
setDashedAisleProperties: (
|
setDashedAisleProperties: (
|
||||||
aisleUuid: string,
|
aisleUuid: string,
|
||||||
props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
|
props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
|
||||||
) => void;
|
) => void;
|
||||||
setDottedAisleProperties: (
|
setDottedAisleProperties: (
|
||||||
aisleUuid: string,
|
aisleUuid: string,
|
||||||
props: { dotRadius?: number; gapLength?: number }
|
props: { dotRadius?: number; gapLength?: number }
|
||||||
) => void;
|
) => void;
|
||||||
setArrowAisleWidth: (aisleUuid: string, width: number) => void;
|
setArrowAisleWidth: (aisleUuid: string, width: number) => void;
|
||||||
setArrowsAisleProperties: (
|
setArrowsAisleProperties: (
|
||||||
aisleUuid: string,
|
aisleUuid: string,
|
||||||
props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
|
props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
|
||||||
) => void;
|
) => void;
|
||||||
setArcAisleWidth: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
|
setArcAisleWidth: (
|
||||||
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
|
aisleUuid: string,
|
||||||
setJunctionAisleProperties: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
|
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;
|
getAisleById: (uuid: string) => Aisle | undefined;
|
||||||
getAislePointById: (uuid: string) => Point | undefined;
|
getAislePointById: (uuid: string) => Point | undefined;
|
||||||
getConnectedPoints: (uuid: string) => Point[] | [];
|
getConnectedPoints: (uuid: string) => Point[] | [];
|
||||||
getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
|
getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useAisleStore = create<AisleStore>()(
|
export const useAisleStore = create<AisleStore>()(
|
||||||
immer((set, get) => ({
|
immer((set, get) => ({
|
||||||
aisles: [],
|
aisles: [],
|
||||||
|
|
||||||
setAisles: (aisles) => set((state) => {
|
setAisles: (aisles) =>
|
||||||
state.aisles = aisles;
|
set((state) => {
|
||||||
}),
|
state.aisles = aisles;
|
||||||
|
}),
|
||||||
|
|
||||||
addAisle: (aisle) => set((state) => {
|
addAisle: (aisle) =>
|
||||||
state.aisles.push(aisle);
|
set((state) => {
|
||||||
}),
|
state.aisles.push(aisle);
|
||||||
|
}),
|
||||||
|
|
||||||
updateAisle: (uuid, updated) => set((state) => {
|
updateAisle: (uuid, updated) =>
|
||||||
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
|
set((state) => {
|
||||||
if (aisle) {
|
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
|
||||||
Object.assign(aisle, updated);
|
if (aisle) {
|
||||||
}
|
Object.assign(aisle, updated);
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
removeAisle: (uuid) => set((state) => {
|
removeAisle: (uuid) =>
|
||||||
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
|
set((state) => {
|
||||||
}),
|
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
|
||||||
|
}),
|
||||||
|
|
||||||
removePoint: (uuid) => {
|
removePoint: (uuid) => {
|
||||||
const removedAisles: Aisle[] = [];
|
const removedAisles: Aisle[] = [];
|
||||||
set((state) => {
|
set((state) => {
|
||||||
state.aisles = state.aisles.filter((aisle) => {
|
state.aisles = state.aisles.filter((aisle) => {
|
||||||
const hasPoint = aisle.points.some((point) => point.pointUuid === uuid);
|
const hasPoint = aisle.points.some(
|
||||||
if (hasPoint) {
|
(point) => point.pointUuid === uuid
|
||||||
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
|
);
|
||||||
return false;
|
if (hasPoint) {
|
||||||
}
|
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
|
||||||
return true;
|
return false;
|
||||||
});
|
}
|
||||||
});
|
return true;
|
||||||
return removedAisles;
|
});
|
||||||
},
|
});
|
||||||
|
return removedAisles;
|
||||||
|
},
|
||||||
|
|
||||||
setPosition: (pointUuid, position) => set((state) => {
|
setPosition: (pointUuid, position) => {
|
||||||
for (const aisle of state.aisles) {
|
let updatedAisle: Aisle | undefined;
|
||||||
const point = aisle.points.find(p => p.pointUuid === pointUuid);
|
set((state) => {
|
||||||
if (point) {
|
for (const aisle of state.aisles) {
|
||||||
point.position = position;
|
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) => {
|
setLayer: (pointUuid, layer) =>
|
||||||
for (const aisle of state.aisles) {
|
set((state) => {
|
||||||
const point = aisle.points.find(p => p.pointUuid === pointUuid);
|
for (const aisle of state.aisles) {
|
||||||
if (point) {
|
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
|
||||||
point.layer = layer;
|
if (point) {
|
||||||
}
|
point.layer = layer;
|
||||||
}
|
}
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setColor: (aisleUuid, color) => set((state) => {
|
setColor: (aisleUuid, color) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle) {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
aisle.type.aisleColor = color;
|
if (aisle) {
|
||||||
}
|
aisle.type.aisleColor = color;
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
// Type-specific property setters
|
// Type-specific property setters
|
||||||
setSolidAisleWidth: (aisleUuid, width) => set((state) => {
|
setSolidAisleWidth: (aisleUuid, width) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'solid-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
aisle.type.aisleWidth = width;
|
if (aisle && aisle.type.aisleType === "solid-aisle") {
|
||||||
}
|
aisle.type.aisleWidth = width;
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setDashedAisleProperties: (aisleUuid, props) => set((state) => {
|
setDashedAisleProperties: (aisleUuid, props) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'dashed-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
|
if (aisle && aisle.type.aisleType === "dashed-aisle") {
|
||||||
if (props.dashLength !== undefined) aisle.type.dashLength = props.dashLength;
|
if (props.aisleWidth !== undefined)
|
||||||
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
|
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) => {
|
setDottedAisleProperties: (aisleUuid, props) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'dotted-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (props.dotRadius !== undefined) aisle.type.dotRadius = props.dotRadius;
|
if (aisle && aisle.type.aisleType === "dotted-aisle") {
|
||||||
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
|
if (props.dotRadius !== undefined)
|
||||||
}
|
aisle.type.dotRadius = props.dotRadius;
|
||||||
}),
|
if (props.gapLength !== undefined)
|
||||||
|
aisle.type.gapLength = props.gapLength;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setArrowAisleWidth: (aisleUuid, width) => set((state) => {
|
setArrowAisleWidth: (aisleUuid, width) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'arrow-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
aisle.type.aisleWidth = width;
|
if (aisle && aisle.type.aisleType === "arrow-aisle") {
|
||||||
}
|
aisle.type.aisleWidth = width;
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setArrowsAisleProperties: (aisleUuid, props) => set((state) => {
|
setArrowsAisleProperties: (aisleUuid, props) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'arrows-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
|
if (aisle && aisle.type.aisleType === "arrows-aisle") {
|
||||||
if (props.aisleLength !== undefined) aisle.type.aisleLength = props.aisleLength;
|
if (props.aisleWidth !== undefined)
|
||||||
if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
|
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) => {
|
setArcAisleWidth: (aisleUuid, props) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'arc-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
|
if (aisle && aisle.type.aisleType === "arc-aisle") {
|
||||||
if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
|
if (props.aisleWidth !== undefined)
|
||||||
}
|
aisle.type.aisleWidth = props.aisleWidth;
|
||||||
}),
|
if (props.isFlipped !== undefined)
|
||||||
|
aisle.type.isFlipped = props.isFlipped;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setCircleAisleWidth: (aisleUuid, width) => set((state) => {
|
setCircleAisleWidth: (aisleUuid, width) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'circle-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
aisle.type.aisleWidth = width;
|
if (aisle && aisle.type.aisleType === "circle-aisle") {
|
||||||
}
|
aisle.type.aisleWidth = width;
|
||||||
}),
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
setJunctionAisleProperties: (aisleUuid, props) => set((state) => {
|
setJunctionAisleProperties: (aisleUuid, props) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
if (aisle && aisle.type.aisleType === 'junction-aisle') {
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
|
if (aisle && aisle.type.aisleType === "junction-aisle") {
|
||||||
if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
|
if (props.aisleWidth !== undefined)
|
||||||
}
|
aisle.type.aisleWidth = props.aisleWidth;
|
||||||
}),
|
if (props.isFlipped !== undefined)
|
||||||
|
aisle.type.isFlipped = props.isFlipped;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
getAisleById: (uuid) => {
|
getAisleById: (uuid) => {
|
||||||
return get().aisles.find((a) => a.aisleUuid === uuid);
|
return get().aisles.find((a) => a.aisleUuid === uuid);
|
||||||
},
|
},
|
||||||
|
|
||||||
getAislePointById: (uuid) => {
|
getAislePointById: (uuid) => {
|
||||||
for (const aisle of get().aisles) {
|
for (const aisle of get().aisles) {
|
||||||
const point = aisle.points.find(p => p.pointUuid === uuid);
|
const point = aisle.points.find((p) => p.pointUuid === uuid);
|
||||||
if (point) {
|
if (point) {
|
||||||
return point;
|
return point;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
|
|
||||||
getConnectedPoints: (uuid) => {
|
getConnectedPoints: (uuid) => {
|
||||||
const connected: Point[] = [];
|
const connected: Point[] = [];
|
||||||
for (const aisle of get().aisles) {
|
for (const aisle of get().aisles) {
|
||||||
for (const point of aisle.points) {
|
for (const point of aisle.points) {
|
||||||
if (point.pointUuid === uuid) {
|
if (point.pointUuid === uuid) {
|
||||||
connected.push(...aisle.points.filter(p => p.pointUuid !== uuid));
|
connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return connected;
|
return connected;
|
||||||
},
|
},
|
||||||
|
|
||||||
getAisleType: <T extends AisleType>(uuid: string) => {
|
getAisleType: <T extends AisleType>(uuid: string) => {
|
||||||
const aisle = get().aisles.find(a => a.aisleUuid === uuid);
|
const aisle = get().aisles.find((a) => a.aisleUuid === uuid);
|
||||||
return aisle?.type as T | undefined;
|
return aisle?.type as T | undefined;
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
);
|
);
|
Loading…
Reference in New Issue