diff --git a/app/package-lock.json b/app/package-lock.json index ed85f25..d63595f 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -2026,7 +2026,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2038,7 +2038,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4180,25 +4180,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4310,25 +4291,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -9082,7 +9063,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9959,7 +9940,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -15343,7 +15324,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20820,7 +20801,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20863,7 +20844,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20875,7 +20856,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21371,7 +21352,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22430,7 +22411,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/src/app.tsx b/app/src/app.tsx index b545413..6d223be 100644 --- a/app/src/app.tsx +++ b/app/src/app.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Dashboard from "./pages/Dashboard"; import Project from "./pages/Project"; @@ -7,6 +7,7 @@ import "./styles/main.scss"; import { LoggerProvider } from "./components/ui/log/LoggerContext"; const App: React.FC = () => { + return ( diff --git a/app/src/assets/image/wallTextures/defaultTexture.jpg b/app/src/assets/image/wallTextures/defaultTexture.jpg new file mode 100644 index 0000000..97dfb91 Binary files /dev/null and b/app/src/assets/image/wallTextures/defaultTexture.jpg differ diff --git a/app/src/assets/image/wallTextures/wallTexture.png b/app/src/assets/image/wallTextures/wallTexture.png new file mode 100644 index 0000000..d3a7a0a Binary files /dev/null and b/app/src/assets/image/wallTextures/wallTexture.png differ diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx index 951cab1..1a532b9 100644 --- a/app/src/components/Dashboard/DashboardCard.tsx +++ b/app/src/components/Dashboard/DashboardCard.tsx @@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react"; import img from "../../assets/image/image.png"; import { useNavigate } from "react-router-dom"; import { getUserData } from "./functions/getUserData"; -import { useProjectName, useSocketStore } from "../../store/builder/store"; +import { useLoadingProgress, useProjectName, useSocketStore } from "../../store/builder/store"; import { viewProject } from "../../services/dashboard/viewProject"; import OuterClick from "../../utils/outerClick"; import { KebabIcon } from "../icons/ExportCommonIcons"; @@ -13,6 +13,7 @@ interface DashBoardCardProps { thumbnail: any; projectId: string; createdAt?: string; + isViewed?: string; handleDeleteProject?: (projectId: string) => Promise; handleTrashDeleteProject?: (projectId: string) => Promise; handleRestoreProject?: (projectId: string) => Promise; @@ -54,6 +55,7 @@ const DashboardCard: React.FC = ({ const [renameValue, setRenameValue] = useState(projectName); const [isRenaming, setIsRenaming] = useState(false); const { projectSocket } = useSocketStore(); + const { setLoadingProgress } = useLoadingProgress(); const kebabRef = useRef(null); const navigateToProject = async (e: any) => { @@ -64,9 +66,8 @@ const DashboardCard: React.FC = ({ } catch (error) { console.error("Error opening project:", error); } - + setLoadingProgress(1) setProjectName(projectName); - console.log('projectId: ', projectId); navigate(`/${projectId}`); }; @@ -182,12 +183,13 @@ const DashboardCard: React.FC = ({ className="dashboard-card-container" onClick={navigateToProject} title={projectName} + onMouseLeave={() => setIsKebabOpen(false)} >
{thumbnail ? : }
-
+
{ e.stopPropagation() }}>
{isRenaming ? ( = ({
{active && active == "trash" ? `Trashed by you` : `Edited `}{" "} {getRelativeTime(createdAt)} +
)}
@@ -226,7 +229,6 @@ const DashboardCard: React.FC = ({ className="kebab-wrapper" onClick={(e) => { e.stopPropagation(); - console.log("Kebab menu clicked"); setIsKebabOpen((prev) => !prev); }} > @@ -245,7 +247,6 @@ const DashboardCard: React.FC = ({ className="option" title={""} onClick={(e) => { - console.log(option); e.stopPropagation(); handleOptionClick(option); }} diff --git a/app/src/components/Dashboard/DashboardHome.tsx b/app/src/components/Dashboard/DashboardHome.tsx index 2627a65..e82c474 100644 --- a/app/src/components/Dashboard/DashboardHome.tsx +++ b/app/src/components/Dashboard/DashboardHome.tsx @@ -16,6 +16,7 @@ interface Project { createdBy: string; projectUuid?: string; createdAt: string; + isViewed?: string } interface RecentProjectsData { @@ -28,7 +29,7 @@ const DashboardHome: React.FC = () => { const { userId, organization } = getUserData(); const { projectSocket } = useSocketStore(); const [recentDuplicateData, setRecentDuplicateData] = useState({}); - console.log("duplicateData: ", recentDuplicateData); + const fetchRecentProjects = async () => { try { @@ -115,6 +116,7 @@ const DashboardHome: React.FC = () => { const renderProjects = () => { const projectList = recentProjects[Object.keys(recentProjects)[0]]; + console.log('projectList: ', projectList); if (!projectList?.length) { return
No recent projects found
; } @@ -127,7 +129,7 @@ const DashboardHome: React.FC = () => { projectName={project.projectName} thumbnail={project.thumbnail} projectId={project._id} - createdAt={project.createdAt} + createdAt={project.isViewed} handleDeleteProject={handleDeleteProject} handleDuplicateRecentProject={handleDuplicateRecentProject} setRecentDuplicateData={setRecentDuplicateData} diff --git a/app/src/components/Dashboard/functions/getUserData.ts b/app/src/components/Dashboard/functions/getUserData.ts index 132dcc2..e0e97ec 100644 --- a/app/src/components/Dashboard/functions/getUserData.ts +++ b/app/src/components/Dashboard/functions/getUserData.ts @@ -11,7 +11,12 @@ export const getUserData = (): UserData => { const userName = localStorage.getItem("userName"); if (!email || !userId) { - throw new Error("User data not found in localStorage"); + return { + email: '', + userId: '', + userName: '', + organization: '', + }; } const [_, emailDomain] = email.split("@"); diff --git a/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx index 6ab556b..e19a957 100644 --- a/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx +++ b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx @@ -12,6 +12,7 @@ interface Project { createdBy: string; projectUuid?: string; createdAt: string; + isViewed?: string } interface ProjectsData { diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx index d823d5b..635ebec 100644 --- a/app/src/components/layout/scenes/ComparisonScene.tsx +++ b/app/src/components/layout/scenes/ComparisonScene.tsx @@ -6,21 +6,24 @@ import useModuleStore from '../../../store/useModuleStore'; import CompareLayOut from '../../ui/compareVersion/CompareLayOut'; import ComparisonResult from '../../ui/compareVersion/ComparisonResult'; import { useComparisonProduct } from '../../../store/simulation/useSimulationStore'; -import { usePlayButtonStore } from '../../../store/usePlayButtonStore'; +import { usePauseButtonStore, usePlayButtonStore } from '../../../store/usePlayButtonStore'; function ComparisonScene() { - const { isPlaying } = usePlayButtonStore(); + const { isPlaying, setIsPlaying } = usePlayButtonStore(); const { products } = useProductStore(); const { isVersionSaved } = useSaveVersion(); const { activeModule } = useModuleStore(); const { selectedProductStore } = useProductContext(); const { selectedProduct } = selectedProductStore(); const { comparisonProduct, setComparisonProduct } = useComparisonProduct(); + const { setIsPaused } = usePauseButtonStore(); const handleSelectLayout = (option: string) => { const product = products.find((product) => product.productName === option); if (product) { - setComparisonProduct(product.productId, product.productName); + setComparisonProduct(product.productUuid, product.productName); + setIsPlaying(true); + setIsPaused(true); } }; return ( diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index 3101be5..d299dc9 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -1,113 +1,125 @@ -import React from 'react' -import { useLoadingProgress, useSaveVersion, useSocketStore, useWidgetSubOption } from '../../../store/builder/store'; -import useModuleStore, { useThreeDStore } from '../../../store/useModuleStore'; -import { usePlayButtonStore } from '../../../store/usePlayButtonStore'; -import { useSelectedZoneStore } from '../../../store/visualization/useZoneStore'; -import { useFloatingWidget } from '../../../store/visualization/useDroppedObjectsStore'; -import { useSelectedUserStore } from '../../../store/collaboration/useCollabStore'; -import KeyPressListener from '../../../utils/shortcutkeys/handleShortcutKeys'; -import LoadingPage from '../../templates/LoadingPage'; -import ModuleToggle from '../../ui/ModuleToggle'; -import SideBarLeft from '../sidebarLeft/SideBarLeft'; -import SideBarRight from '../sidebarRight/SideBarRight'; -import RealTimeVisulization from '../../../modules/visualization/RealTimeVisulization'; -import MarketPlace from '../../../modules/market/MarketPlace'; -import Tools from '../../ui/Tools'; -import SimulationPlayer from '../../ui/simulation/simulationPlayer'; -import ControlsPlayer from '../controls/ControlsPlayer'; -import SelectFloorPlan from '../../temporary/SelectFloorPlan'; -import { createHandleDrop } from '../../../modules/visualization/functions/handleUiDrop'; -import Scene from '../../../modules/scene/scene'; -import { useMainProduct } from '../../../store/simulation/useSimulationStore'; -import { useProductContext } from '../../../modules/simulation/products/productContext'; -import { useProductStore } from '../../../store/simulation/useProductStore'; -import RegularDropDown from '../../ui/inputs/RegularDropDown'; +import React from "react"; +import { + useLoadingProgress, + useSaveVersion, + useSocketStore, + useWidgetSubOption, +} from "../../../store/builder/store"; +import useModuleStore, { useThreeDStore } from "../../../store/useModuleStore"; +import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; +import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; +import { useFloatingWidget } from "../../../store/visualization/useDroppedObjectsStore"; +import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore"; +import KeyPressListener from "../../../utils/shortcutkeys/handleShortcutKeys"; +import LoadingPage from "../../templates/LoadingPage"; +import ModuleToggle from "../../ui/ModuleToggle"; +import SideBarLeft from "../sidebarLeft/SideBarLeft"; +import SideBarRight from "../sidebarRight/SideBarRight"; +import RealTimeVisulization from "../../../modules/visualization/RealTimeVisulization"; +import MarketPlace from "../../../modules/market/MarketPlace"; +import Tools from "../../ui/Tools"; +import SimulationPlayer from "../../ui/simulation/simulationPlayer"; +import ControlsPlayer from "../controls/ControlsPlayer"; +import SelectFloorPlan from "../../temporary/SelectFloorPlan"; +import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop"; +import Scene from "../../../modules/scene/scene"; +import { + useComparisonProduct, + useMainProduct, +} from "../../../store/simulation/useSimulationStore"; +import { useProductContext } from "../../../modules/simulation/products/productContext"; +import { useProductStore } from "../../../store/simulation/useProductStore"; +import RegularDropDown from "../../ui/inputs/RegularDropDown"; function MainScene() { - const { products } = useProductStore(); - const { setMainProduct } = useMainProduct(); - const { selectedProductStore } = useProductContext(); - const { selectedProduct } = selectedProductStore(); - const { isVersionSaved } = useSaveVersion(); - const { activeModule } = useModuleStore(); - const { selectedUser } = useSelectedUserStore(); - const { loadingProgress } = useLoadingProgress(); - const { toggleThreeD } = useThreeDStore(); - const { isPlaying } = usePlayButtonStore(); - const { widgetSubOption } = useWidgetSubOption(); - const { visualizationSocket } = useSocketStore(); - const { selectedZone } = useSelectedZoneStore(); - const { setFloatingWidget } = useFloatingWidget(); + const { products } = useProductStore(); + const { setMainProduct } = useMainProduct(); + const { selectedProductStore } = useProductContext(); + const { selectedProduct } = selectedProductStore(); + const { isVersionSaved } = useSaveVersion(); + const { activeModule } = useModuleStore(); + const { selectedUser } = useSelectedUserStore(); + const { loadingProgress } = useLoadingProgress(); + const { toggleThreeD } = useThreeDStore(); + const { isPlaying } = usePlayButtonStore(); + const { widgetSubOption } = useWidgetSubOption(); + const { visualizationSocket } = useSocketStore(); + const { selectedZone } = useSelectedZoneStore(); + const { setFloatingWidget } = useFloatingWidget(); + const { comparisonProduct } = useComparisonProduct(); - const handleSelectLayout = (option: string) => { - const product = products.find((product) => product.productName === option); - if (product) { - setMainProduct(product.productId, product.productName); - } - }; + const handleSelectLayout = (option: string) => { + const product = products.find((product) => product.productName === option); + if (product) { + setMainProduct(product.productUuid, product.productName); + } + }; - return ( + return ( + <> + {!selectedUser && ( <> - {!selectedUser && ( - <> - - {loadingProgress > 0 && } - {!isPlaying && ( - <> - {toggleThreeD && } - - - - )} - - {activeModule === "market" && } - {activeModule !== "market" && !isPlaying && !isVersionSaved && ( - - )} - {isPlaying && activeModule === "simulation" && } - {isPlaying && activeModule !== "simulation" && } + + {loadingProgress > 0 && } + {!isPlaying && ( + <> + {toggleThreeD && } + + + + )} + + {activeModule === "market" && } + {activeModule !== "market" && !isPlaying && !isVersionSaved && ( + + )} + {(isPlaying || comparisonProduct !== null) && + activeModule === "simulation" && + loadingProgress == 0 && } + {(isPlaying || comparisonProduct !== null) && + activeModule !== "simulation" && } - {/* remove this later */} - {activeModule === "builder" && !toggleThreeD && } - - )} -
- createHandleDrop({ - widgetSubOption, - visualizationSocket, - selectedZone, - setFloatingWidget, - event, - }) - } - onDragOver={(event) => event.preventDefault()} - > - -
- - {selectedProduct && isVersionSaved && !isPlaying && ( -
- l.productName)} // Pass layout names as options - onSelect={handleSelectLayout} - search={false} - /> -
- )} + {/* remove this later */} + {activeModule === "builder" && !toggleThreeD && } - ) + )} +
+ createHandleDrop({ + widgetSubOption, + visualizationSocket, + selectedZone, + setFloatingWidget, + event, + }) + } + onDragOver={(event) => event.preventDefault()} + > + +
+ + {selectedProduct && isVersionSaved && !isPlaying && activeModule === "simulation" && ( +
+ l.productName)} // Pass layout names as options + onSelect={handleSelectLayout} + search={false} + /> +
+ )} + + ); } -export default MainScene \ No newline at end of file +export default MainScene; diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index c2c1bff..cc803ef 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -2,19 +2,21 @@ import React from "react"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; import FileMenu from "../../ui/FileMenu"; -import {useToggleStore} from "../../../store/useUIToggleStore"; +import { useToggleStore } from "../../../store/useUIToggleStore"; import useModuleStore from "../../../store/useModuleStore"; +import { useNavigate } from "react-router-dom"; const Header: React.FC = () => { const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); const { activeModule } = useModuleStore(); + const navigate = useNavigate(); return (
-
+
+
@@ -34,7 +36,7 @@ const Header: React.FC = () => {
-
+ ); }; diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index e983f9a..30f4778 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -33,11 +33,13 @@ const SideBarLeft: React.FC = () => { console.log(value); }; + console.log('isVersionSaved: ', isVersionSaved); + console.log('toggleUILeft: ', toggleUILeft); + return (
{toggleUILeft && ( diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 44199bc..86c98cb 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -28,6 +28,7 @@ import ZoneProperties from "./properties/ZoneProperties"; import EventProperties from "./properties/eventProperties/EventProperties"; import VersionHistory from "./versionHisory/VersionHistory"; import AisleProperties from "./properties/AisleProperties"; +import WallProperties from "./properties/eventProperties/WallProperties"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); @@ -65,7 +66,7 @@ const SideBarRight: React.FC = () => { return (
@@ -145,10 +146,15 @@ const SideBarRight: React.FC = () => { !selectedFloorItem && (
- {toolMode === "Aisle" ? ( - ) : ( - - )} + {(() => { + if (toolMode === "Aisle") { + return ; + } else if (toolMode === "Wall") { + return ; + } else { + return ; + } + })()}
)} diff --git a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx index 0e88e18..b314f19 100644 --- a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx +++ b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx @@ -14,12 +14,12 @@ const Analysis: React.FC = () => { const AnalysisPresets: AnalysisPresetsType = { "Throughput time": [ - { type: "default", inputs: { label: "Cycle time", activeOption: "s" } }, - { type: "default", inputs: { label: "machines / lines", activeOption: "item" } }, - { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } }, + // { type: "default", inputs: { label: "Cycle time", activeOption: "s" } }, + // { type: "default", inputs: { label: "machines / lines", activeOption: "item" } }, + // { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } }, ], "Production capacity": [ - { type: "default", inputs: { label: "Shift length", activeOption: "hr" } }, + { type: "range", inputs: { label: "Shift length", activeOption: "hr" } }, { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } }, { type: "default", inputs: { label: "Working days / year", activeOption: "days" } }, { type: "default", inputs: { label: "Yield rate", activeOption: "%" } }, diff --git a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx index 0204582..6f52438 100644 --- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx +++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx @@ -31,7 +31,7 @@ const RenderAnalysisInputs: React.FC = ({ keyName, presets,i key={index} label={preset.inputs.label} min={0} - max={0} + max={8} value={5} /> ); diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 3ad8acd..b07192c 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -43,7 +43,7 @@ const GlobalProperties: React.FC = () => { const email = localStorage.getItem("email"); const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; - const data = await setEnvironment( + setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, @@ -62,7 +62,7 @@ const GlobalProperties: React.FC = () => { const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; if (limitDistance) { - let data = await setEnvironment( + setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, @@ -74,7 +74,7 @@ const GlobalProperties: React.FC = () => { ); setRenderDistance(75); } else { - let data = await setEnvironment( + setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, @@ -163,7 +163,7 @@ const GlobalProperties: React.FC = () => { roofVisibility, shadows, renderDistance, - limitDistance,projectId + limitDistance, projectId ); // diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 35f3bb5..2cad712 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -9,6 +9,7 @@ import { usezoneTarget, } from "../../../../store/builder/store"; import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation"; +import { useParams } from "react-router-dom"; const ZoneProperties: React.FC = () => { const { Edit, setEdit } = useEditPosition(); @@ -16,6 +17,7 @@ const ZoneProperties: React.FC = () => { const { zonePosition, setZonePosition } = usezonePosition(); const { zoneTarget, setZoneTarget } = usezoneTarget(); const { zones, setZones } = useZones(); + const { projectId } = useParams() useEffect(() => { setZonePosition(selectedZone.zoneViewPortPosition); @@ -33,7 +35,8 @@ const ZoneProperties: React.FC = () => { viewPortCenter: zoneTarget, }; - let response = await zoneCameraUpdate(zonesdata, organization); + let response = await zoneCameraUpdate(zonesdata, organization,projectId); + console.log('response: ', response); if (response.message === "updated successfully") { setEdit(false); } else { @@ -56,7 +59,8 @@ const ZoneProperties: React.FC = () => { zoneName: newName, }; // Call your API to update the zone - let response = await zoneCameraUpdate(zonesdata, organization); + let response = await zoneCameraUpdate(zonesdata, organization,projectId); + console.log('response: ', response); // console.log("response: ", response); if (response.message === "updated successfully") { setZones((prevZones: any[]) => diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx index c47a169..dd8d7ae 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -13,6 +13,7 @@ import { AddIcon } from "../../../../icons/ExportCommonIcons"; import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct"; import { useEventsStore } from "../../../../../store/simulation/useEventsStore"; import { useProductContext } from "../../../../../modules/simulation/products/productContext"; +import { useParams } from "react-router-dom"; const EventProperties: React.FC = () => { const { selectedEventData } = useSelectedEventData(); @@ -25,6 +26,7 @@ const EventProperties: React.FC = () => { const [assetType, setAssetType] = useState(null); const { products, addEvent } = useProductStore(); const { selectedEventSphere } = useSelectedEventSphere(); + const { projectId } = useParams(); useEffect(() => { const event = getCurrentEventData(); @@ -39,7 +41,7 @@ const EventProperties: React.FC = () => { if (!selectedEventData?.data || !selectedProduct) return null; return ( getEventByModelUuid( - selectedProduct.productId, + selectedProduct.productUuid, selectedEventData.data.modelUuid ) ?? null ); @@ -96,7 +98,7 @@ const EventProperties: React.FC = () => { {products.map((product) => ( +
+ +
+
+
setActiveSide("side1")} + > +
Side 1
+
+ {selectedMaterials.side1 && ( + {selectedMaterials.side1.textureName} + )} +
+
+ +
setActiveSide("side2")} + > +
Side 2
+
+ {selectedMaterials.side2 && ( + {selectedMaterials.side2.textureName} + )} +
+
+
+ +
+ {selectedMaterials[activeSide] && ( + {selectedMaterials[activeSide]!.textureName} + )} +
+
+ +
+ {materials.length === 0 ? ( +
No materials added yet.
+ ) : ( +
+ {materials.map((material, index) => ( +
handleSelectMaterial(material)} + > +
+
+ {material.textureName} +
+
{material.textureName}
+
+
{ + e.stopPropagation(); + handleRemoveMaterial(index); + }} + > + +
+
+ ))} +
+ )} +
+ +
+ ); +}; + +export default WallProperties; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx index 52cd9db..c6f532e 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx @@ -12,6 +12,7 @@ import { import { useProductStore } from "../../../../../../store/simulation/useProductStore"; import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi"; import { useProductContext } from "../../../../../../modules/simulation/products/productContext"; +import { useParams } from "react-router-dom"; interface ActionsListProps { selectedPointData: any; @@ -28,19 +29,17 @@ const ActionsList: React.FC = ({ }) => { const actionsContainerRef = useRef(null); - const email = localStorage.getItem("email"); - const organization = email!.split("@")[1].split(".")[0]; - // store const { renameAction } = useProductStore(); const { selectedProductStore } = useProductContext(); const { selectedProduct } = selectedProductStore(); const { selectedAction, setSelectedAction } = useSelectedAction(); + const { projectId } = useParams(); const handleRenameAction = (newName: string) => { if (!selectedAction.actionId) return; const event = renameAction( - selectedProduct.productId, + selectedProduct.productUuid, selectedAction.actionId, newName ); @@ -48,8 +47,8 @@ const ActionsList: React.FC = ({ if (event) { upsertProductOrEventApi({ productName: selectedProduct.productName, - productId: selectedProduct.productId, - organization: organization, + productUuid: selectedProduct.productUuid, + projectId, eventDatas: event, }); } @@ -89,8 +88,8 @@ const ActionsList: React.FC = ({
-
-
-
-
- {triggers.map((trigger) => ( -
setSelectedTrigger(trigger)} - > - - {triggers.length > 1 && ( - - )} -
- ))} -
- -
- - {selectedTrigger && ( -
-
{selectedTrigger.triggerName}
- - -
- option.modelName)]} - onSelect={(option) => { - handleModelSelect(option, selectedTrigger.triggerUuid); - }} - /> - `Point ${option.uuid.slice(0, 4)}` - ), - ]} - onSelect={(option) => { - handlePointSelect(option, selectedTrigger.triggerUuid); - }} - /> - option.actionName), - ]} - onSelect={(option) => { - handleActionSelect(option, selectedTrigger.triggerUuid); - }} - />
-
- )} -
- - ); +
+
+
+ {triggers.map((trigger) => ( +
setSelectedTrigger(trigger)} + > + + {triggers.length > 1 && ( + + )} +
+ ))} +
+ +
+ + {selectedTrigger && ( +
+
{selectedTrigger.triggerName}
+ + +
+ option.modelName)]} + onSelect={(option) => { + handleModelSelect(option, selectedTrigger.triggerUuid); + }} + /> + `Point ${option.uuid.slice(0, 4)}` + ), + ]} + onSelect={(option) => { + handlePointSelect(option, selectedTrigger.triggerUuid); + }} + /> + option.actionName), + ]} + onSelect={(option) => { + handleActionSelect(option, selectedTrigger.triggerUuid); + }} + /> +
+
+ )} +
+ + ); }; export default Trigger; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index 8e10a28..c6c76b1 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -1,15 +1,8 @@ import React, { useEffect, useRef, useState } from "react"; -import { - AddIcon, - ArrowIcon, - RemoveIcon, - ResizeHeightIcon, -} from "../../../icons/ExportCommonIcons"; +import { AddIcon, ArrowIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons"; import RenameInput from "../../../ui/inputs/RenameInput"; import { handleResize } from "../../../../functions/handleResizePannel"; -import { - useSelectedAsset, -} from "../../../../store/simulation/useSimulationStore"; +import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../store/simulation/useProductStore"; import { generateUUID } from "three/src/math/MathUtils"; import RenderOverlay from "../../../templates/Overlay"; @@ -22,273 +15,264 @@ import { deleteProductApi } from "../../../../services/simulation/products/delet import { renameProductApi } from "../../../../services/simulation/products/renameProductApi"; import { determineExecutionMachineSequences } from "../../../../modules/simulation/simulator/functions/determineExecutionMachineSequences"; import ComparePopUp from "../../../ui/compareVersion/Compare"; -import { - useCompareStore, - useSaveVersion, -} from "../../../../store/builder/store"; -import CompareLayOut from "../../../ui/compareVersion/CompareLayOut"; +import { useCompareStore, useSaveVersion, } from "../../../../store/builder/store"; import { useToggleStore } from "../../../../store/useUIToggleStore"; import { useProductContext } from "../../../../modules/simulation/products/productContext"; +import { useParams } from "react-router-dom"; interface Event { - modelName: string; - modelId: string; + modelName: string; + modelId: string; } interface ListProps { - val: Event; + val: Event; } const List: React.FC = ({ val }) => { - return ( -
-
{val.modelName}
-
- ); + return ( +
+
{val.modelName}
+
+ ); }; const Simulations: React.FC = () => { - const productsContainerRef = useRef(null); - const { - products, - addProduct, - removeProduct, - renameProduct, - addEvent, - removeEvent, - getProductById, - } = useProductStore(); - const { selectedProductStore } = useProductContext(); - const { selectedProduct, setSelectedProduct } = selectedProductStore(); - const { getEventByModelUuid } = useEventsStore(); - const { selectedAsset, clearSelectedAsset } = useSelectedAsset(); - const email = localStorage.getItem("email"); - const organization = email!.split("@")[1].split(".")[0]; - const [openObjects, setOpenObjects] = useState(true); - const [processes, setProcesses] = useState(); - const { setToggleUI } = useToggleStore(); + const productsContainerRef = useRef(null); + const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = useProductStore(); + const { selectedProductStore } = useProductContext(); + const { selectedProduct, setSelectedProduct } = selectedProductStore(); + const { getEventByModelUuid } = useEventsStore(); + const { selectedAsset, clearSelectedAsset } = useSelectedAsset(); + const [openObjects, setOpenObjects] = useState(true); + const [processes, setProcesses] = useState(); + const { setToggleUI } = useToggleStore(); + const { projectId } = useParams(); - const { comparePopUp, setComparePopUp } = useCompareStore(); - const { isVersionSaved, setIsVersionSaved } = useSaveVersion(); + const { comparePopUp, setComparePopUp } = useCompareStore(); + const { setIsVersionSaved } = useSaveVersion(); - const handleSaveVersion = () => { - setIsVersionSaved(true); - setComparePopUp(false); - setToggleUI(false, false); - }; + const handleSaveVersion = () => { + setIsVersionSaved(true); + setComparePopUp(false); + setToggleUI(false, false); + }; - const handleAddProduct = () => { - const id = generateUUID(); - const name = `Product ${products.length + 1}`; - addProduct(name, id); - upsertProductOrEventApi({ - productName: name, - productId: id, - organization: organization, - }); - }; + const handleAddProduct = () => { + const id = generateUUID(); + const name = `Product ${products.length + 1}`; + addProduct(name, id); + upsertProductOrEventApi({ + productName: name, + productUuid: id, + projectId: projectId, + }); + }; - const handleRemoveProduct = (productId: string) => { - const currentIndex = products.findIndex((p) => p.productId === productId); - const isSelected = selectedProduct.productId === productId; + const handleRemoveProduct = (productUuid: string) => { + const currentIndex = products.findIndex((p) => p.productUuid === productUuid); + const isSelected = selectedProduct.productUuid === productUuid; - const updatedProducts = products.filter((p) => p.productId !== productId); + const updatedProducts = products.filter((p) => p.productUuid !== productUuid); - if (isSelected) { - if (updatedProducts.length > 0) { - let newSelectedIndex = currentIndex; - if (currentIndex >= updatedProducts.length) { - newSelectedIndex = updatedProducts.length - 1; + if (isSelected) { + if (updatedProducts.length > 0) { + let newSelectedIndex = currentIndex; + if (currentIndex >= updatedProducts.length) { + newSelectedIndex = updatedProducts.length - 1; + } + setSelectedProduct( + updatedProducts[newSelectedIndex].productUuid, + updatedProducts[newSelectedIndex].productName + ); + } else { + setSelectedProduct("", ""); + } } - setSelectedProduct( - updatedProducts[newSelectedIndex].productId, - updatedProducts[newSelectedIndex].productName - ); - } else { - setSelectedProduct("", ""); - } - } - removeProduct(productId); - deleteProductApi(productId, organization); - }; + removeProduct(productUuid); + deleteProductApi({ + productUuid, + projectId + }); + }; - const handleRenameProduct = (productId: string, newName: string) => { - renameProduct(productId, newName); - renameProductApi({ productName: newName, productId, organization }); - if (selectedProduct.productId === productId) { - setSelectedProduct(productId, newName); - } - }; - - const handleRemoveEventFromProduct = () => { - if (selectedAsset) { - const email = localStorage.getItem("email"); - const organization = email!.split("@")[1].split(".")[0]; - deleteEventDataApi({ - productId: selectedProduct.productId, - modelUuid: selectedAsset.modelUuid, - organization: organization, - }); - removeEvent(selectedProduct.productId, selectedAsset.modelUuid); - clearSelectedAsset(); - } - }; - - useEffect(() => { - const processes: Event[][] = []; - const selectedProductData = getProductById(selectedProduct.productId); - - if (selectedProductData) { - determineExecutionMachineSequences([selectedProductData]).then( - (sequences) => { - sequences.forEach((sequence) => { - const events: Event[] = - sequence.map((event) => ({ - modelName: event.modelName, - modelId: event.modelUuid, - })) || []; - processes.push(events); - }); - setProcesses(processes); + const handleRenameProduct = (productUuid: string, newName: string) => { + renameProduct(productUuid, newName); + renameProductApi({ productName: newName, productUuid, projectId: projectId || '' }); + if (selectedProduct.productUuid === productUuid) { + setSelectedProduct(productUuid, newName); } - ); - } - }, [selectedProduct.productId, products]); + }; - return ( -
-
Simulations
-
-
-
-
Products
- -
-
-
- {products.map((product, index) => ( -
- {/* eslint-disable-next-line */} -
- setSelectedProduct(product.productId, product.productName) - } - > - - - handleRenameProduct(product.productId, newName) - } - /> -
- {products.length > 1 && ( - +
+
- - - )} +
+ {products.map((product, index) => ( +
+ {/* eslint-disable-next-line */} +
+ setSelectedProduct(product.productUuid, product.productName) + } + > + + + handleRenameProduct(product.productUuid, newName) + } + /> +
+ {products.length > 1 && ( + + )} +
+ ))} +
+ +
+
+ +
+ + {openObjects && + processes?.map((process, index) => ( +
+ {process.map((event, index) => ( + + ))} +
+ ))} +
+ +
+
+ Need to Compare Layout? +
+
+ Click 'Compare' to review and analyze the layout + differences between them. +
+
- ))}
- -
+ + {selectedAsset && ( + + { + if (option === "Add to Product") { + handleAddEventToProduct({ + event: getEventByModelUuid(selectedAsset.modelUuid), + addEvent, + selectedProduct, + clearSelectedAsset, + projectId: projectId || '' + }); + } else { + handleRemoveEventFromProduct(); + } + }} + /> + + )} + + {comparePopUp && ( + + + + )}
- -
- - {openObjects && - processes?.map((process, index) => ( -
- {process.map((event, index) => ( - - ))} -
- ))} -
- -
-
- Need to Compare Layout? -
-
- Click 'Compare' to review and analyze the layout - differences between them. -
- -
-
- - {selectedAsset && ( - - { - if (option === "Add to Product") { - handleAddEventToProduct({ - event: getEventByModelUuid(selectedAsset.modelUuid), - addEvent, - selectedProduct, - clearSelectedAsset, - }); - } else { - handleRemoveEventFromProduct(); - } - }} - /> - - )} - - {comparePopUp && ( - - - - )} - - ); + ); }; export default Simulations; diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx index 9ec8196..4e2ff22 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx @@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore"; import axios from "axios"; import RenameInput from "../../../../ui/inputs/RenameInput"; import { useParams } from "react-router-dom"; +import { useSocketStore } from "../../../../../store/builder/store"; type Props = {}; @@ -26,6 +27,7 @@ const BarChartInput = (props: Props) => { const organization = email?.split("@")[1]?.split(".")[0]; const [isLoading, setLoading] = useState(true); const { projectId } = useParams(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { @@ -56,9 +58,9 @@ const BarChartInput = (props: Props) => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, } @@ -92,14 +94,33 @@ const BarChartInput = (props: Props) => { inputDuration: any, inputName: any ) => { + // const userId = localStorage.getItem("userId"); + // let newWidget = { + // id: selectedChartId.id, + // panel: selectedChartId.panel, + // widgetName: inputName, + // Data: { + // measurements: inputMeasurement, + // duration: inputDuration, + // } + // } + // const adding3dWidget = { + // organization: organization, + // widget: newWidget, + // zoneUuid: selectedZone.zoneUuid, + // projectId, userId + // }; + // if (visualizationSocket) { + // visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget); + // } try { const response = await axios.post( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, }, diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx index 63cc3be..be67fcd 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx @@ -124,6 +124,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore"; import axios from "axios"; import RenameInput from "../../../../ui/inputs/RenameInput"; import { useParams } from "react-router-dom"; +import { useSocketStore } from "../../../../../store/builder/store"; type Props = {}; @@ -142,6 +143,7 @@ const LineGrapInput = (props: Props) => { const organization = email?.split("@")[1]?.split(".")[0]; const [isLoading, setLoading] = useState(true); const { projectId } = useParams(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { const fetchZoneData = async () => { @@ -171,9 +173,9 @@ const LineGrapInput = (props: Props) => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, } @@ -207,14 +209,33 @@ const LineGrapInput = (props: Props) => { inputDuration: any, inputName: any ) => { + // const userId = localStorage.getItem("userId"); + // let newWidget = { + // id: selectedChartId.id, + // panel: selectedChartId.panel, + // widgetName: inputName, + // Data: { + // measurements: inputMeasurement, + // duration: inputDuration, + // } + // } + // const adding3dWidget = { + // organization: organization, + // widget: newWidget, + // zoneUuid: selectedZone.zoneUuid, + // projectId, userId + // }; + // if (visualizationSocket) { + // visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget); + // } try { const response = await axios.post( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, }, diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx index 98167b7..875baa2 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx @@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore"; import axios from "axios"; import RenameInput from "../../../../ui/inputs/RenameInput"; import { useParams } from "react-router-dom"; +import { useSocketStore } from "../../../../../store/builder/store"; type Props = {}; @@ -26,6 +27,7 @@ const PieChartInput = (props: Props) => { const organization = email?.split("@")[1]?.split(".")[0]; const [isLoading, setLoading] = useState(true); const { projectId } = useParams(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { @@ -56,9 +58,9 @@ const PieChartInput = (props: Props) => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, } @@ -92,14 +94,34 @@ const PieChartInput = (props: Props) => { inputDuration: any, inputName: any ) => { + + // const userId = localStorage.getItem("userId"); + // let newWidget = { + // id: selectedChartId.id, + // panel: selectedChartId.panel, + // widgetName: inputName, + // Data: { + // measurements: inputMeasurement, + // duration: inputDuration, + // }, + // } + // const adding3dWidget = { + // organization: organization, + // widget: newWidget, + // zoneUuid: selectedZone.zoneUuid, + // projectId, userId + // }; + // if (visualizationSocket) { + // visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget); + // } try { const response = await axios.post( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, }, diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx index b873e4e..1f4832e 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx @@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore"; import axios from "axios"; import RenameInput from "../../../../ui/inputs/RenameInput"; import { useParams } from "react-router-dom"; +import { useSocketStore } from "../../../../../store/builder/store"; type Props = {}; @@ -26,6 +27,7 @@ const Progress1Input = (props: Props) => { const organization = email?.split("@")[1]?.split(".")[0]; const [isLoading, setLoading] = useState(true); const { projectId } = useParams(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { @@ -56,9 +58,9 @@ const Progress1Input = (props: Props) => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, } @@ -92,14 +94,33 @@ const Progress1Input = (props: Props) => { inputDuration: any, inputName: any ) => { + // const userId = localStorage.getItem("userId"); + // let newWidget = { + // id: selectedChartId.id, + // panel: selectedChartId.panel, + // widgetName: inputName, + // Data: { + // measurements: inputMeasurement, + // duration: inputDuration, + // }, + // } + // const adding3dWidget = { + // organization: organization, + // widget: newWidget, + // zoneUuid: selectedZone.zoneUuid, + // projectId, userId + // }; + // if (visualizationSocket) { + // visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget); + // } try { const response = await axios.post( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, }, diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx index efbdd6d..06a4282 100644 --- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx +++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx @@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore"; import axios from "axios"; import RenameInput from "../../../../ui/inputs/RenameInput"; import { useParams } from "react-router-dom"; +import { useSocketStore } from "../../../../../store/builder/store"; type Props = {}; @@ -26,6 +27,7 @@ const Progress2Input = (props: Props) => { const organization = email?.split("@")[1]?.split(".")[0]; const [isLoading, setLoading] = useState(true); const { projectId } = useParams(); + const { visualizationSocket } = useSocketStore(); useEffect(() => { @@ -56,9 +58,9 @@ const Progress2Input = (props: Props) => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, } @@ -92,14 +94,33 @@ const Progress2Input = (props: Props) => { inputDuration: any, inputName: any ) => { + // const userId = localStorage.getItem("userId"); + // let newWidget = { + // id: selectedChartId.id, + // panel: selectedChartId.panel, + // widgetName: inputName, + // Data: { + // measurements: inputMeasurement, + // duration: inputDuration, + // } + // } + // const adding3dWidget = { + // organization: organization, + // widget: newWidget, + // zoneUuid: selectedZone.zoneUuid, + // projectId, userId + // }; + // if (visualizationSocket) { + // visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget); + // } try { const response = await axios.post( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`, { headers: { - Authorization: "Bearer ", // Replace with actual token + Authorization: "Bearer ", "Content-Type": "application/json", - token: localStorage.getItem("token") || "", // Coerce null to empty string + token: localStorage.getItem("token") || "", refresh_token: localStorage.getItem("refreshToken") || "", }, }, diff --git a/app/src/components/templates/CollaborationPopup.tsx b/app/src/components/templates/CollaborationPopup.tsx index ec62fb5..9e35427 100644 --- a/app/src/components/templates/CollaborationPopup.tsx +++ b/app/src/components/templates/CollaborationPopup.tsx @@ -140,7 +140,7 @@ const CollaborationPopup: React.FC = ({
-
{userName[0]}
+
{userName[0].toUpperCase()}
{userName}
you
diff --git a/app/src/components/templates/LoadingPage.tsx b/app/src/components/templates/LoadingPage.tsx index 329c19f..7e25c51 100644 --- a/app/src/components/templates/LoadingPage.tsx +++ b/app/src/components/templates/LoadingPage.tsx @@ -4,6 +4,7 @@ import { LogoIconLarge } from "../icons/Logo"; import { useParams } from "react-router-dom"; import { useProjectName } from "../../store/builder/store"; import { getAllProjects } from "../../services/dashboard/getAllProjects"; +import { useComparisonProduct } from "../../store/simulation/useSimulationStore"; interface LoadingPageProps { progress: number; // Expect progress as a percentage (0-100) @@ -12,6 +13,8 @@ interface LoadingPageProps { const LoadingPage: React.FC = ({ progress }) => { const { projectName, setProjectName } = useProjectName(); const { projectId } = useParams(); + const { comparisonProduct } = useComparisonProduct(); + const validatedProgress = Math.min(100, Math.max(0, progress)); const generateThumbnail = async () => { const email = localStorage.getItem("email"); @@ -30,25 +33,24 @@ const LoadingPage: React.FC = ({ progress }) => { const domainParts = emailParts[1].split("."); const Organization = domainParts[0]; - const projects = await getAllProjects( - userId, Organization + const projects = await getAllProjects(userId, Organization); + const filterProject = projects?.Projects.find( + (val: any) => val.projectUuid === projectId || val._id === projectId ); - const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id - === projectId) - setProjectName(filterProject.projectName) - - } - catch { - - } - } + setProjectName(filterProject.projectName); + } catch {} + }; useEffect(() => { generateThumbnail(); }, []); return ( -
+
{projectName}
diff --git a/app/src/components/temporary/SelectFloorPlan.tsx b/app/src/components/temporary/SelectFloorPlan.tsx index 6c45f08..310b2b0 100644 --- a/app/src/components/temporary/SelectFloorPlan.tsx +++ b/app/src/components/temporary/SelectFloorPlan.tsx @@ -4,12 +4,14 @@ import { useDfxUpload } from "../../store/builder/store"; import DxfParser from "dxf-parser"; import { getWallPointsFromBlueprint } from "../../modules/builder/dfx/functions/getWallPointsFromBlueprint"; import { convertDXFToThree } from "../../modules/builder/dfx/functions/convertDxfToThree"; -type DXFData = any +import { AIIcon } from "../icons/ExportCommonIcons"; +type DXFData = any; const SelectFloorPlan: React.FC = () => { // Access layout state and state setters const { currentLayout, setLayout } = useLayoutStore(); // Access DXF-related states and setters - const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } = useDfxUpload(); + const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } = + useDfxUpload(); // Local state to store the parsed DXF file const [parsedFile, setParsedFile] = useState(undefined); @@ -18,7 +20,9 @@ const SelectFloorPlan: React.FC = () => { const [generate, setGenerate] = useState(false); // Handles file upload and DXF parsing - const handleFileUpload = async (event: React.ChangeEvent) => { + const handleFileUpload = async ( + event: React.ChangeEvent + ) => { setLayout(null); // Reset current layout setParsedFile(undefined); // Clear any previously parsed file const file = event.target.files?.[0]; @@ -52,15 +56,54 @@ const SelectFloorPlan: React.FC = () => { // Trigger wall point generation when `generate` flag changes useEffect(() => { if (parsedFile !== undefined) { - getWallPointsFromBlueprint({ parsedData: parsedFile, setDfxGenerate, objValue }); + getWallPointsFromBlueprint({ + parsedData: parsedFile, + setDfxGenerate, + objValue, + }); } }, [generate]); - return (
- Preset Layouts + Upload Layouts +
+ + + + {parsedFile && ( + + )} +
+ or
- - - - - -
); }; -export default SelectFloorPlan; \ No newline at end of file +export default SelectFloorPlan; diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 0bc8b91..7c64c86 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -9,7 +9,7 @@ import { } from "chart.js"; import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis"; import SkeletonUI from "../../templates/SkeletonUI"; -import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store"; +import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); @@ -34,6 +34,7 @@ const ThroughputSummary: React.FC = () => { ]; const { productionCapacityData } = useProductionCapacityData() + const { throughputData: data } = useThroughPutData() const chartOptions = { @@ -91,7 +92,8 @@ const ThroughputSummary: React.FC = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { - if (productionCapacityData >= 0) { + // console.log('productionCapacityData > 0: ', productionCapacityData > 0); + if (productionCapacityData > 0) { setIsLoading(false); console.log("productionCapacityData: ", productionCapacityData); } else { @@ -99,92 +101,95 @@ const ThroughputSummary: React.FC = () => { } }, [productionCapacityData]); + return ( -
-
-
-
-
Production Capacity
-
- {timeRange.startTime} - {timeRange.endTime} + <> + {!isLoading &&
+
+
+
+
Production Capacity
+
+ {timeRange.startTime} - {timeRange.endTime} +
+
+
+
-
- -
-
- {!isLoading ? ( - <> -
-
- {productionCapacityData}{" "} - Units/hour -
-
-
-
Asset usage
-
{parseFloat(inputValues["Yield rate"])}%
+ {!isLoading ? ( + <> +
+
+ {productionCapacityData}{" "} + Units/hour
- -
-
- -
-
-
Energy Consumption
-
-
- +
+
+
Asset usage
+
{parseFloat(inputValues["Yield rate"])}%
-
-
- {energyConsumption.energyConsumed} + +
+
+ +
+
+
Energy Consumption
+
+
+
-
{energyConsumption.unit}
-
-
-
-
-
Shift Utilization
-
-
{throughputData.assetUsage}%
- -
- {/* Dynamically create progress bars based on shiftUtilization array */} - {shiftUtilization.map((shift, index) => ( -
- ))} -
- -
- {/* Dynamically create shift indicators with random colors */} - {shiftUtilization.map((shift, index) => ( -
- - +
+
+ {energyConsumption.energyConsumed}
- ))} +
{energyConsumption.unit}
+
+
+
+
+
Shift Utilization
+
+
{throughputData.assetUsage}%
+ +
+ {/* Dynamically create progress bars based on shiftUtilization array */} + {shiftUtilization.map((shift, index) => ( +
+ ))} +
+ +
+ {/* Dynamically create shift indicators with random colors */} + {shiftUtilization.map((shift, index) => ( +
+ + +
+ ))} +
-
- - ) : ( - - )} -
-
+ + ) : ( + + )} +
+
} + ); }; diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index dc33663..a03b15c 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -83,136 +83,142 @@ const ROISummary = ({ const [isLoading, setIsLoading] = useState(false); const { roiSummary } = useROISummaryData(); + useEffect(() => { - if (roiSummary && typeof roiSummary === "object") { - setIsLoading(false); // Data loaded + if (roiSummary.productName) { + // If productName is set, assume data is loaded + setIsLoading(false); } else { - setIsLoading(true); // Show skeleton while loading + // If productName is empty, assume still loading + setIsLoading(true); } }, [roiSummary]); return ( -
-
-
-
-
ROI Summary
-
From {getCurrentDate()}
-
-
- -
-
- {!isLoading ? ( - <> -
- -
Product :
-
{roiSummary.productName}
-
-
- -
-
- {roiSummary.roiPercentage}% ROI with payback - in just {roiSummary.paybackPeriod} months + <> + + { + !isLoading &&
+
+
+
+
ROI Summary
+
From {getCurrentDate()}
+
+
+
-
-
- -
- you're on track to hit it by -
July 2029
+ {!isLoading ? ( + <> +
+ +
Product :
+
{roiSummary.productName}
-
-
-
-
- Total Cost Incurred - - ₹ - {roiSummary.totalCost} +
+ +
+
+ {roiSummary.roiPercentage}% ROI with payback + in just {roiSummary.paybackPeriod} months +
+
+
+
+ +
+ you're on track to hit it by +
July 2029
+
+
+
+
+
+ Total Cost Incurred + + ₹ + {roiSummary.totalCost} + +
+
+ Revenue Generated + + ₹ + + {roiSummary.revenueGenerated} + +
+
+
0 ? "profit" : "loss"}`} + > +
+ ↑ + Net Profit +
+
+ ₹ + {roiSummary.netProfit > 0 + ? roiSummary.netProfit + : roiSummary.netLoss} +
+
+
+
+
+
+
+ + Cost Breakdown +
+ + +
-
- Revenue Generated - - ₹ - - {roiSummary.revenueGenerated} - +
+ + + + + + + + + + + + {roiSummaryData.costBreakdown.map((row, index) => ( + + + + + + + + ))} + +
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
-
0 ? "profit" : "loss"}`} - > -
- ↑ - Net Profit -
-
- ₹ - {roiSummary.netProfit > 0 - ? roiSummary.netProfit - : roiSummary.netLoss} -
-
-
-
-
-
-
- - Cost Breakdown -
- - - - -
-
- - - - - - - - - - - - {roiSummaryData.costBreakdown.map((row, index) => ( - - - - - - - - ))} - -
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
-
-
- {/*
+ {/*
@@ -232,13 +238,14 @@ const ROISummary = ({
Get ROI Boost Tips
*/} - - ) : ( - - //
No Data
- )} -
-
+ + ) : ( + + //
No Data
+ )} +
+
} + ); }; diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index bf570f9..2d150a2 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -17,7 +17,6 @@ const ProductionCapacity = ({ const { machineActiveTime } = useMachineUptime(); const { materialCycleTime } = useMaterialCycle(); const { throughputData } = useThroughPutData() - const { productionCapacityData } = useProductionCapacityData() const progressPercent = machineActiveTime; @@ -30,72 +29,79 @@ const ProductionCapacity = ({ const [isLoading, setIsLoading] = useState(false); useEffect(() => { - if (throughputData >= 0) { + console.log('typeof throughputData:', typeof throughputData); + console.log('throughputData > 0: ', throughputData > 0); + if (throughputData > 0) { // console.log('machineActiveTime: ', machineActiveTime); // console.log('materialCycleTime: ', materialCycleTime); // console.log('throughputData: ', throughputData); // console.log('productionCapacityData: ', productionCapacityData); + setIsLoading(false); + } else { setIsLoading(true); } }, [throughputData]) return ( -
-
-
-
-
Throughput Summary
-
- {timeRange.startTime} - {timeRange.endTime} + <> + + {!isLoading &&
+
+
+
+
Throughput Summary
+
+ {timeRange.startTime} - {timeRange.endTime} +
+
+
+
-
- -
+ {isLoading ? ( + <> +
+
+ {throughputData} Units/hour + +
+ + {/* Dynamic Progress Bar */} +
+ {[...Array(totalBars)].map((_, i) => ( +
+ {i < barsToFill ? ( +
+ ) : i === barsToFill ? ( +
+ ) : null} +
+ ))} +
+
+ +
+
+ Avg. Process Time + {materialCycleTime} secs/unit +
+
+ Machine Utilization + {machineActiveTime} + {/* {machineActiveTime} */} +
+
+ + ) : ( + + )}
- {isLoading ? ( - <> -
-
- {throughputData} Units/hour - -
- - {/* Dynamic Progress Bar */} -
- {[...Array(totalBars)].map((_, i) => ( -
- {i < barsToFill ? ( -
- ) : i === barsToFill ? ( -
- ) : null} -
- ))} -
-
- -
-
- Avg. Process Time - {materialCycleTime} secs/unit -
-
- Machine Utilization - {machineActiveTime} - {/* {machineActiveTime} */} -
-
- - ) : ( - - )} -
-
+
} + ); }; diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx index e492cf5..6cce453 100644 --- a/app/src/components/ui/compareVersion/CompareLayOut.tsx +++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx @@ -4,15 +4,20 @@ import { LayoutIcon, ResizerIcon, } from "../../icons/SimulationIcons"; -import { useLoadingProgress, useSaveVersion } from "../../../store/builder/store"; +import { + useLoadingProgress, + useSaveVersion, +} from "../../../store/builder/store"; import Search from "../inputs/Search"; import OuterClick from "../../../utils/outerClick"; import { useProductStore } from "../../../store/simulation/useProductStore"; import Scene from "../../../modules/scene/scene"; import { useComparisonProduct } from "../../../store/simulation/useSimulationStore"; +import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore"; const CompareLayOut = () => { - const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct(); + const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = + useComparisonProduct(); const { products } = useProductStore(); const { setLoadingProgress } = useLoadingProgress(); const [width, setWidth] = useState("50vw"); @@ -22,6 +27,9 @@ const CompareLayOut = () => { const startWidthRef = useRef(0); const startXRef = useRef(0); const { setIsVersionSaved } = useSaveVersion(); + const { loadingProgress } = useLoadingProgress(); + const { setIsPlaying } = usePlayButtonStore(); + const { setIsPaused } = usePauseButtonStore(); OuterClick({ contextClassName: ["displayLayouts-container", "selectLayout"], @@ -64,6 +72,7 @@ const CompareLayOut = () => { setWidth("0px"); setIsVersionSaved(false); clearComparisonProduct(); + setIsPlaying(false); } else { setWidth(`${finalWidthVw}vw`); } @@ -107,8 +116,10 @@ const CompareLayOut = () => { const handleSelectLayout = (option: string) => { const product = products.find((product) => product.productName === option); if (product) { - setComparisonProduct(product.productId, product.productName); + setComparisonProduct(product.productUuid, product.productName); setLoadingProgress(1); + setIsPlaying(true); + setIsPaused(true); } }; @@ -118,14 +129,16 @@ const CompareLayOut = () => { ref={wrapperRef} style={{ width }} > - + {loadingProgress == 0 && ( + + )}
{comparisonProduct && (
@@ -152,11 +165,11 @@ const CompareLayOut = () => { {showLayoutDropdown && (
Layouts
- { }} /> + {}} />
{products.map((layout) => (
+
Overall Downtime
@@ -101,10 +140,7 @@ const ComparisonResult = () => {
-
-
-
-
+
@@ -114,16 +150,15 @@ const ComparisonResult = () => {
Layout 1
-
- Total scrap produced by -
+
Total scrap produced by
2.7 ton
- +
+
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index a6aaa10..8136a18 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -125,7 +125,8 @@ const List: React.FC = ({ items = [], remove }) => { zoneName: newName, }; - const response = await zoneCameraUpdate(zonesdata, organization); + const response = await zoneCameraUpdate(zonesdata, organization,projectId); + console.log('response: ', response); if (response.message === "updated successfully") { setSelectedZone((prev) => ({ ...prev, zoneName: newName })); diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 2825014..1cff053 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -1,6 +1,10 @@ import React, { useState, useRef, useEffect } from "react"; import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons"; -import { useActiveTool, useProcessBar } from "../../../store/builder/store"; +import { + useActiveTool, + useProcessBar, + useViewSceneStore, +} from "../../../store/builder/store"; import { useAnimationPlaySpeed, usePauseButtonStore, @@ -19,11 +23,15 @@ import { StartIcon, } from "../../icons/ExportCommonIcons"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; -import { useSubModuleStore } from "../../../store/useModuleStore"; +import useModuleStore, { + useSubModuleStore, +} from "../../../store/useModuleStore"; import ProductionCapacity from "../analysis/ThroughputSummary"; import ThroughputSummary from "../analysis/ProductionCapacity"; import ROISummary from "../analysis/ROISummary"; import { usePlayerStore } from "../../../store/useUIToggleStore"; +import { useComparisonProduct } from "../../../store/simulation/useSimulationStore"; +import InputToggle from "../inputs/InputToggle"; const SimulationPlayer: React.FC = () => { const MAX_SPEED = 4; // Maximum speed @@ -31,7 +39,6 @@ const SimulationPlayer: React.FC = () => { const isDragging = useRef(false); const sliderRef = useRef(null); const [expand, setExpand] = useState(true); - const [playSimulation, setPlaySimulation] = useState(false); const { hidePlayer, setHidePlayer } = usePlayerStore(); const { speed, setSpeed } = useAnimationPlaySpeed(); @@ -40,7 +47,11 @@ const SimulationPlayer: React.FC = () => { const { isPaused, setIsPaused } = usePauseButtonStore(); const { isReset, setReset } = useResetButtonStore(); const { subModule } = useSubModuleStore(); + const { clearComparisonProduct } = useComparisonProduct(); + const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore(); + const { isPlaying } = usePlayButtonStore(); + const { activeModule } = useModuleStore(); useEffect(() => { if (isReset) { setTimeout(() => { @@ -55,17 +66,15 @@ const SimulationPlayer: React.FC = () => { setIsPaused(false); setSpeed(1); echo.info("Simulation RESET....."); - setPlaySimulation(false); // local state reset }; const handlePlayStop = () => { setIsPaused(!isPaused); echo.warn(`Simulation is ${isPaused ? "Resumed" : "Paused"}`); - setPlaySimulation(!playSimulation); }; const handleExit = () => { - setPlaySimulation(false); setIsPlaying(false); setIsPaused(false); + clearComparisonProduct(); setActiveTool("cursor"); echo.info("Exit Simulation"); }; @@ -111,11 +120,10 @@ const SimulationPlayer: React.FC = () => { // UI-Part const hourlySimulation = 25; const dailyProduction = 75; - const monthlyROI = 50; + const monthlyROI = 10; const { processBar } = useProcessBar(); - useEffect(() => { - }, [processBar]) + useEffect(() => { }, [processBar]); const intervals = [50, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; @@ -155,6 +163,16 @@ const SimulationPlayer: React.FC = () => { return ( <> + {isPlaying && activeModule === "simulation" && ( +
+ setViewSceneLabels(!viewSceneLabels)} + /> +
+ )}
@@ -166,7 +184,7 @@ const SimulationPlayer: React.FC = () => {
-
Hourly Simulation
+
ThroughPut Data
{
{" "}
@@ -210,9 +228,7 @@ const SimulationPlayer: React.FC = () => { {!hidePlayer && subModule !== "analysis" && (
- {playSimulation - ? "Paused - system idle." - : "Running simulation..."} + {isPaused ? "Paused - system idle." : "Running simulation..."}
)}
@@ -237,7 +253,7 @@ const SimulationPlayer: React.FC = () => { }} > - {playSimulation ? "Play" : "Stop"} + {isPaused ? "Play" : "Stop"} )}
{index < intervals.length - 1 && (
= ((index + 1) / totalSegments) * 100 - ? "filled" - : "" - }`} + className={`line ${progress >= ((index + 1) / totalSegments) * 100 + ? "filled" + : "" + }`} >
)} @@ -342,9 +357,8 @@ const SimulationPlayer: React.FC = () => {