v3-ui #98
|
@ -226,7 +226,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
className="kebab-wrapper"
|
className="kebab-wrapper"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
console.log("Kebab menu clicked");
|
|
||||||
setIsKebabOpen((prev) => !prev);
|
setIsKebabOpen((prev) => !prev);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -245,7 +244,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
|
||||||
className="option"
|
className="option"
|
||||||
title={""}
|
title={""}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
console.log(option);
|
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleOptionClick(option);
|
handleOptionClick(option);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -6,6 +6,8 @@ import { useAisleStore } from '../../../../store/builder/useAisleStore';
|
||||||
import ReferenceAisle from './referenceAisle';
|
import ReferenceAisle from './referenceAisle';
|
||||||
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
|
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
|
||||||
import ReferencePoint from '../../point/reference/referencePoint';
|
import ReferencePoint from '../../point/reference/referencePoint';
|
||||||
|
import { createAisleApi } from '../../../../services/factoryBuilder/aisle/createAisleApi';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
|
||||||
function AisleCreator() {
|
function AisleCreator() {
|
||||||
const { scene, camera, raycaster, gl, pointer } = useThree();
|
const { scene, camera, raycaster, gl, pointer } = useThree();
|
||||||
|
@ -17,6 +19,7 @@ function AisleCreator() {
|
||||||
const { addAisle, getAislePointById } = useAisleStore();
|
const { addAisle, getAislePointById } = useAisleStore();
|
||||||
const drag = useRef(false);
|
const drag = useRef(false);
|
||||||
const isLeftMouseDown = useRef(false);
|
const isLeftMouseDown = useRef(false);
|
||||||
|
const { projectId } = useParams();
|
||||||
|
|
||||||
const [tempPoints, setTempPoints] = useState<Point[]>([]);
|
const [tempPoints, setTempPoints] = useState<Point[]>([]);
|
||||||
const [isCreating, setIsCreating] = useState(false);
|
const [isCreating, setIsCreating] = useState(false);
|
||||||
|
@ -95,7 +98,11 @@ function AisleCreator() {
|
||||||
aisleWidth: aisleWidth
|
aisleWidth: aisleWidth
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
console.log('aisle: ', aisle);
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'dashed-aisle') {
|
} else if (aisleType === 'dashed-aisle') {
|
||||||
|
@ -116,6 +123,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'dotted-aisle') {
|
} else if (aisleType === 'dotted-aisle') {
|
||||||
|
@ -135,6 +145,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'arrow-aisle') {
|
} else if (aisleType === 'arrow-aisle') {
|
||||||
|
@ -153,6 +166,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'arrows-aisle') {
|
} else if (aisleType === 'arrows-aisle') {
|
||||||
|
@ -173,6 +189,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'arc-aisle') {
|
} else if (aisleType === 'arc-aisle') {
|
||||||
|
@ -192,6 +211,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'circle-aisle') {
|
} else if (aisleType === 'circle-aisle') {
|
||||||
|
@ -210,6 +232,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
} else if (aisleType === 'junction-aisle') {
|
} else if (aisleType === 'junction-aisle') {
|
||||||
|
@ -229,6 +254,9 @@ function AisleCreator() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
addAisle(aisle);
|
addAisle(aisle);
|
||||||
|
if (projectId) {
|
||||||
|
createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
|
||||||
|
}
|
||||||
setTempPoints([newPoint]);
|
setTempPoints([newPoint]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,23 @@
|
||||||
|
import { useEffect } from 'react'
|
||||||
import AisleCreator from './aisleCreator/aisleCreator'
|
import AisleCreator from './aisleCreator/aisleCreator'
|
||||||
import AisleInstances from './Instances/aisleInstances'
|
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() {
|
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 (
|
return (
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,9 @@ import { useBuilderStore } from '../../../store/builder/useBuilderStore';
|
||||||
import { usePointSnapping } from './helpers/usePointSnapping';
|
import { usePointSnapping } from './helpers/usePointSnapping';
|
||||||
import { useAislePointSnapping } from './helpers/useAisleDragSnap';
|
import { useAislePointSnapping } from './helpers/useAisleDragSnap';
|
||||||
import { useWallStore } from '../../../store/builder/useWallStore';
|
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 }) {
|
function Point({ point }: { readonly point: Point }) {
|
||||||
const materialRef = useRef<THREE.ShaderMaterial>(null);
|
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 plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
const { toolMode } = useToolMode();
|
const { toolMode } = useToolMode();
|
||||||
const { setPosition: setAislePosition, removePoint: removeAislePoint } = useAisleStore();
|
const { setPosition: setAislePosition, removePoint: removeAislePoint, getAisleByPointId } = useAisleStore();
|
||||||
const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
|
const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
|
||||||
const { snapPosition } = useAislePointSnapping(point);
|
const { snapPosition } = useAislePointSnapping(point);
|
||||||
const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
|
const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
|
||||||
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
|
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
|
||||||
const { deletePointOrLine } = useDeletePointOrLine();
|
const { deletePointOrLine } = useDeletePointOrLine();
|
||||||
|
const { projectId } = useParams();
|
||||||
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
|
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
|
||||||
const colors = getColor(point);
|
const colors = getColor(point);
|
||||||
|
|
||||||
|
@ -97,7 +100,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);
|
||||||
|
|
||||||
}
|
}
|
||||||
} else if (point.pointType === 'Wall') {
|
} else if (point.pointType === 'Wall') {
|
||||||
if (position) {
|
if (position) {
|
||||||
|
@ -111,7 +115,16 @@ function Point({ point }: { readonly point: Point }) {
|
||||||
|
|
||||||
const handleDragEnd = (point: Point) => {
|
const handleDragEnd = (point: Point) => {
|
||||||
if (deletePointOrLine) return;
|
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) => {
|
const handlePointClick = (point: Point) => {
|
||||||
|
@ -119,6 +132,11 @@ 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);
|
||||||
|
if (projectId)
|
||||||
|
deleteAisleApi(aisle.aisleUuid, projectId)
|
||||||
|
});
|
||||||
setHoveredPoint(null);
|
setHoveredPoint(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -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);
|
||||||
|
}
|
||||||
|
};
|
|
@ -1,5 +1,5 @@
|
||||||
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;
|
||||||
|
@ -8,7 +8,10 @@ interface AisleStore {
|
||||||
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: (
|
||||||
|
pointUuid: string,
|
||||||
|
position: [number, number, number]
|
||||||
|
) => Aisle | undefined;
|
||||||
setLayer: (pointUuid: string, layer: number) => void;
|
setLayer: (pointUuid: string, layer: number) => void;
|
||||||
setColor: (aisleUuid: string, color: AisleColors) => void;
|
setColor: (aisleUuid: string, color: AisleColors) => void;
|
||||||
|
|
||||||
|
@ -27,11 +30,18 @@ interface AisleStore {
|
||||||
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: (
|
||||||
|
aisleUuid: string,
|
||||||
|
props: { aisleWidth?: number; isFlipped: boolean }
|
||||||
|
) => void;
|
||||||
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
|
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
|
||||||
setJunctionAisleProperties: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
|
setJunctionAisleProperties: (
|
||||||
|
aisleUuid: string,
|
||||||
|
props: { aisleWidth?: number; isFlipped: boolean }
|
||||||
|
) => void;
|
||||||
|
|
||||||
getAisleById: (uuid: string) => Aisle | undefined;
|
getAisleById: (uuid: string) => Aisle | undefined;
|
||||||
|
getAisleByPointId: (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;
|
||||||
|
@ -41,22 +51,26 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
immer((set, get) => ({
|
immer((set, get) => ({
|
||||||
aisles: [],
|
aisles: [],
|
||||||
|
|
||||||
setAisles: (aisles) => set((state) => {
|
setAisles: (aisles) =>
|
||||||
|
set((state) => {
|
||||||
state.aisles = aisles;
|
state.aisles = aisles;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
addAisle: (aisle) => set((state) => {
|
addAisle: (aisle) =>
|
||||||
|
set((state) => {
|
||||||
state.aisles.push(aisle);
|
state.aisles.push(aisle);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
updateAisle: (uuid, updated) => set((state) => {
|
updateAisle: (uuid, updated) =>
|
||||||
|
set((state) => {
|
||||||
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
|
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
|
||||||
if (aisle) {
|
if (aisle) {
|
||||||
Object.assign(aisle, updated);
|
Object.assign(aisle, updated);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
removeAisle: (uuid) => set((state) => {
|
removeAisle: (uuid) =>
|
||||||
|
set((state) => {
|
||||||
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
|
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -64,7 +78,9 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
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(
|
||||||
|
(point) => point.pointUuid === uuid
|
||||||
|
);
|
||||||
if (hasPoint) {
|
if (hasPoint) {
|
||||||
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
|
removedAisles.push(JSON.parse(JSON.stringify(aisle)));
|
||||||
return false;
|
return false;
|
||||||
|
@ -75,92 +91,119 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
return removedAisles;
|
return removedAisles;
|
||||||
},
|
},
|
||||||
|
|
||||||
setPosition: (pointUuid, position) => set((state) => {
|
setPosition: (pointUuid, position) => {
|
||||||
|
let updatedAisle: Aisle | undefined;
|
||||||
|
set((state) => {
|
||||||
for (const aisle of state.aisles) {
|
for (const aisle of state.aisles) {
|
||||||
const point = aisle.points.find(p => p.pointUuid === pointUuid);
|
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
|
||||||
if (point) {
|
if (point) {
|
||||||
point.position = position;
|
point.position = position;
|
||||||
|
updatedAisle = JSON.parse(JSON.stringify(aisle));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
});
|
||||||
|
return updatedAisle;
|
||||||
|
},
|
||||||
|
|
||||||
setLayer: (pointUuid, layer) => set((state) => {
|
setLayer: (pointUuid, layer) =>
|
||||||
|
set((state) => {
|
||||||
for (const aisle of state.aisles) {
|
for (const aisle of state.aisles) {
|
||||||
const point = aisle.points.find(p => p.pointUuid === pointUuid);
|
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
|
||||||
if (point) {
|
if (point) {
|
||||||
point.layer = layer;
|
point.layer = layer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setColor: (aisleUuid, color) => set((state) => {
|
setColor: (aisleUuid, color) =>
|
||||||
const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
|
set((state) => {
|
||||||
|
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
|
||||||
if (aisle) {
|
if (aisle) {
|
||||||
aisle.type.aisleColor = color;
|
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);
|
||||||
|
if (aisle && aisle.type.aisleType === "solid-aisle") {
|
||||||
aisle.type.aisleWidth = width;
|
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);
|
||||||
|
if (aisle && aisle.type.aisleType === "arrow-aisle") {
|
||||||
aisle.type.aisleWidth = width;
|
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);
|
||||||
|
if (aisle && aisle.type.aisleType === "circle-aisle") {
|
||||||
aisle.type.aisleWidth = width;
|
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;
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -168,9 +211,15 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
return get().aisles.find((a) => a.aisleUuid === uuid);
|
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) => {
|
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;
|
||||||
}
|
}
|
||||||
|
@ -183,7 +232,7 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -191,7 +240,7 @@ export const useAisleStore = create<AisleStore>()(
|
||||||
},
|
},
|
||||||
|
|
||||||
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;
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
|
|
|
@ -88,7 +88,6 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--background-color-button);
|
background: var(--background-color-button);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -130,7 +129,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 357px);
|
height: calc(100% - 357px);
|
||||||
|
|
||||||
|
|
||||||
.header-wrapper {
|
.header-wrapper {
|
||||||
font-size: var(--font-size-large);
|
font-size: var(--font-size-large);
|
||||||
|
|
||||||
|
@ -140,7 +138,6 @@
|
||||||
border-radius: #{$border-radius-extra-large};
|
border-radius: #{$border-radius-extra-large};
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
|
||||||
background: var(--background-color-button);
|
background: var(--background-color-button);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
@ -159,8 +156,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-card-container {
|
.dashboard-card-container {
|
||||||
|
@ -207,7 +202,7 @@
|
||||||
// backdrop-filter: blur(18px);
|
// backdrop-filter: blur(18px);
|
||||||
|
|
||||||
border-radius: #{$border-radius-xlarge};
|
border-radius: #{$border-radius-xlarge};
|
||||||
// transform: translateY(100%);
|
// transform: translateY(100%);///////hovered
|
||||||
transition: transform 0.25s linear;
|
transition: transform 0.25s linear;
|
||||||
|
|
||||||
.project-details {
|
.project-details {
|
||||||
|
@ -241,10 +236,8 @@
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.kebab-options-wrapper {
|
.kebab-options-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
|
@ -277,22 +270,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
||||||
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
||||||
.kebab-options-wrapper {
|
.kebab-options-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-details-container {
|
.project-details-container {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-place-banner-container {
|
.market-place-banner-container {
|
||||||
|
|
Loading…
Reference in New Issue