v3-ui #98

Merged
Vishnu merged 51 commits from v3-ui into main 2025-06-10 06:46:08 +00:00
9 changed files with 381 additions and 194 deletions
Showing only changes of commit 1a27bb7922 - Show all commits

View File

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

View File

@ -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]);
} }
} }

View File

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

View File

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

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");
}
}
};

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");
}
}
};

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);
}
};

View File

@ -1,198 +1,247 @@
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; getAisleByPointId: (uuid: string) => Aisle | undefined;
getConnectedPoints: (uuid: string) => Point[] | []; getAislePointById: (uuid: string) => Point | undefined;
getAisleType: <T extends AisleType>(uuid: string) => T | undefined; getConnectedPoints: (uuid: string) => Point[] | [];
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) => { getAisleByPointId: (uuid) => {
for (const aisle of get().aisles) { return get().aisles.find((a) => {
const point = aisle.points.find(p => p.pointUuid === uuid); return a.points.some((p) => p.pointUuid === uuid);
if (point) { });
return point; },
}
}
return undefined;
},
getConnectedPoints: (uuid) => { getAislePointById: (uuid) => {
const connected: Point[] = []; for (const aisle of get().aisles) {
for (const aisle of get().aisles) { const point = aisle.points.find((p) => p.pointUuid === uuid);
for (const point of aisle.points) { if (point) {
if (point.pointUuid === uuid) { return point;
connected.push(...aisle.points.filter(p => p.pointUuid !== uuid)); }
} }
} return undefined;
} },
return connected;
},
getAisleType: <T extends AisleType>(uuid: string) => { getConnectedPoints: (uuid) => {
const aisle = get().aisles.find(a => a.aisleUuid === uuid); const connected: Point[] = [];
return aisle?.type as T | undefined; 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;
},
}))
); );

View File

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