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

Refactor user data retrieval across visualization components 

- Replaced direct localStorage access for email and organization with a centralized getUserData function in LineGraphComponent, PieGraphComponent, PolarAreaGraphComponent, ProgressCard1, ProgressCard2, Dropped3dWidgets, ProductionCapacity, ReturnOfInvestment, StateWorking, Throughput, and various floating widgets.
- Improved code readability and maintainability by consolidating user data extraction logic.
- Ensured consistent user data handling across multiple components to reduce redundancy.
This commit is contained in:
Poovizhi99 2025-06-13 17:11:28 +05:30
parent ac78309bcc
commit fcd67f4528
88 changed files with 1954 additions and 1783 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/Dashboard/DashboardCard.tsx
View File

@ -1,7 +1,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 { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useProjectName, useSocketStore } from "../../store/builder/store";
import { viewProject } from "../../services/dashboard/viewProject";
import OuterClick from "../../utils/outerClick";

2
app/src/components/Dashboard/DashboardHome.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import DashboardCard from "./DashboardCard";
import DashboardNavBar from "./DashboardNavBar";
import MarketPlaceBanner from "./MarketPlaceBanner";
import { getUserData } from "./functions/getUserData";
import { getUserData } from "../../functions/getUserData";
import { useSocketStore } from "../../store/builder/store";
import { recentlyViewed } from "../../services/dashboard/recentlyViewed";
import { searchProject } from "../../services/dashboard/searchProjects";

4
app/src/components/Dashboard/DashboardProjects.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import DashboardNavBar from "./DashboardNavBar";
import DashboardCard from "./DashboardCard";
import { getUserData } from "./functions/getUserData";
import { getUserData } from "../../functions/getUserData";
import { useSocketStore } from "../../store/builder/store";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { searchProject } from "../../services/dashboard/searchProjects";
@ -65,7 +65,7 @@ const DashboardProjects: React.FC = () => {
// console.log('deletedProject: ', deletedProject);
const deleteProjects = {
projectId,
organization: organization,
organization,
userId,
};

2
app/src/components/Dashboard/DashboardTrash.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import DashboardCard from "./DashboardCard";
import DashboardNavBar from "./DashboardNavBar";
import { getUserData } from "./functions/getUserData";
import { getUserData } from "../../functions/getUserData";
import { trashSearchProject } from "../../services/dashboard/trashSearchProject";
import { restoreTrash } from "../../services/dashboard/restoreTrash";
import { getTrash } from "../../services/dashboard/getTrash";

2
app/src/components/Dashboard/SidePannel.tsx
View File

@ -12,7 +12,7 @@ import { useNavigate } from "react-router-dom";
import darkThemeImage from "../../assets/image/darkThemeProject.png";
import lightThemeImage from "../../assets/image/lightThemeProject.png";
import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
import { getUserData } from "./functions/getUserData";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { createProject } from "../../services/dashboard/createProject";

2
app/src/components/Dashboard/socket/projectSocketRes.dev.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { useSocketStore } from '../../../store/builder/store';
import { getUserData } from '../functions/getUserData';
import { getUserData } from '../../../functions/getUserData';
import { getAllProjects } from '../../../services/dashboard/getAllProjects';
import { recentlyViewed } from '../../../services/dashboard/recentlyViewed';

4
app/src/components/layout/scenes/MainScene.tsx
View File

@ -36,6 +36,7 @@ import RenameTooltip from "../../ui/features/RenameTooltip";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
function MainScene() {
const { products } = useProductStore();
@ -57,6 +58,7 @@ function MainScene() {
const { setName } = useAssetsStore();
const { projectId } = useParams()
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
if (activeModule !== 'simulation') {
@ -73,8 +75,6 @@ function MainScene() {
};
const handleObjectRename = async (newName: string) => {
if (!projectId) return
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await setFloorItemApi(
organization,
selectedFloorItem.userData.modelUuid,

5
app/src/components/layout/sidebarRight/Header.tsx
View File

@ -8,10 +8,11 @@ import { useSelectedUserStore } from "../../../store/collaboration/useCollabStor
import { useToggleStore } from "../../../store/useUIToggleStore";
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
import useModuleStore from "../../../store/useModuleStore";
import { getUserData } from "../../../functions/getUserData";
const Header: React.FC = () => {
const { activeUsers } = useActiveUsers();
const userName = localStorage.getItem("userName") ?? "Anonymous";
const { userName } = getUserData();
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore();
@ -113,7 +114,7 @@ const Header: React.FC = () => {
))}
</div>
<div className="user-profile-container">
<div className="user-profile">{userName[0]}</div>
<div className="user-profile">{userName}</div>
<div className="user-organization">
<img src={orgImg} alt="" />
</div>

28
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@ -20,6 +20,7 @@ import {
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
import * as CONSTANTS from "../../../../types/world/worldConstants";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
const GlobalProperties: React.FC = () => {
const { toggleView, setToggleView } = useToggleView();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@ -38,14 +39,13 @@ const GlobalProperties: React.FC = () => {
const [limitGridDistance, setLimitGridDistance] = useState(false);
const [gridDistance, setGridDistance] = useState<number>(3);
const { projectId } = useParams();
const { email, userId, organization } = getUserData();
const optimizeScene = async (value: any) => {
const email = localStorage.getItem("email");
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
roofVisibility,
shadows,
@ -58,13 +58,11 @@ const GlobalProperties: React.FC = () => {
};
const limitRenderDistance = async () => {
const email = localStorage.getItem("email");
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
if (limitDistance) {
setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
roofVisibility,
shadows,
@ -76,7 +74,7 @@ const GlobalProperties: React.FC = () => {
} else {
setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
roofVisibility,
shadows,
@ -104,13 +102,11 @@ const GlobalProperties: React.FC = () => {
}
const updatedDist = async (value: number) => {
const email = localStorage.getItem("email");
const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
setRenderDistance(value);
// setDistance(value);
const data = await setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
roofVisibility,
shadows,
@ -122,13 +118,11 @@ const GlobalProperties: React.FC = () => {
// Function to toggle roof visibility
const changeRoofVisibility = async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
//using REST
const data = await setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
!roofVisibility,
shadows,
@ -153,12 +147,10 @@ const GlobalProperties: React.FC = () => {
};
// Function to toggle wall visibility
const changeWallVisibility = async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
//using REST
const data = await setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
!wallVisibility,
roofVisibility,
shadows,
@ -182,12 +174,10 @@ const GlobalProperties: React.FC = () => {
};
const shadowVisibility = async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
//using REST
const data = await setEnvironment(
organization,
localStorage.getItem("userId")!,
userId,
wallVisibility,
roofVisibility,
!shadows,

8
app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
View File

@ -10,6 +10,7 @@ import {
} from "../../../../store/builder/store";
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
const ZoneProperties: React.FC = () => {
const { Edit, setEdit } = useEditPosition();
@ -17,7 +18,8 @@ const ZoneProperties: React.FC = () => {
const { zonePosition, setZonePosition } = usezonePosition();
const { zoneTarget, setZoneTarget } = usezoneTarget();
const { zones, setZones } = useZones();
const { projectId } = useParams()
const { projectId } = useParams();
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
setZonePosition(selectedZone.zoneViewPortPosition);
@ -26,8 +28,6 @@ const ZoneProperties: React.FC = () => {
async function handleSetView() {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let zonesdata = {
zoneUuid: selectedZone.zoneUuid,
@ -52,8 +52,6 @@ const ZoneProperties: React.FC = () => {
}
async function handleZoneNameChange(newName: string) {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const zonesdata = {
zoneUuid: selectedZone.zoneUuid,
zoneName: newName,

5
app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
View File

@ -9,9 +9,10 @@ import {
import RenameInput from "../../../ui/inputs/RenameInput";
import { useVersionStore } from "../../../../store/builder/store";
import { generateUniqueId } from "../../../../functions/generateUniqueId";
import { getUserData } from "../../../../functions/getUserData";
const VersionHistory = () => {
const userName = localStorage.getItem("userName") ?? "Anonymous";
const { userName, userId, organization, email } = getUserData();
const { versions, addVersion, setVersions, updateVersion } =
useVersionStore();
const [selectedVersion, setSelectedVersion] = useState(
@ -28,7 +29,7 @@ const VersionHistory = () => {
month: "long",
day: "2-digit",
}),
savedBy: userName,
savedBy: userName ?? "Anonymous",
};
const newVersions = [newVersion, ...versions];

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
View File

@ -9,6 +9,7 @@ import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -23,8 +24,7 @@ const BarChartInput = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
@ -125,7 +125,7 @@ const BarChartInput = (props: Props) => {
},
},
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

8
app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -22,11 +23,10 @@ const FleetEfficiencyInputComponent = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const isSelected = () => {};
const isSelected = () => { };
useEffect(() => {
const fetchZoneData = async () => {
@ -89,7 +89,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -22,8 +23,7 @@ const FlotingWidgetInput = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
@ -88,7 +88,7 @@ const FlotingWidgetInput = (props: Props) => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
View File

@ -125,6 +125,7 @@ import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -139,8 +140,7 @@ const LineGrapInput = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
@ -240,7 +240,7 @@ const LineGrapInput = (props: Props) => {
},
},
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
View File

@ -9,6 +9,7 @@ import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -23,8 +24,7 @@ const PieChartInput = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
@ -126,7 +126,7 @@ const PieChartInput = (props: Props) => {
},
},
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
View File

@ -9,6 +9,7 @@ import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -23,8 +24,7 @@ const Progress1Input = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
@ -125,7 +125,7 @@ const Progress1Input = (props: Props) => {
},
},
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
View File

@ -9,6 +9,7 @@ import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { useSocketStore } from "../../../../../store/builder/store";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -23,8 +24,7 @@ const Progress2Input = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
const { projectId } = useParams();
const { visualizationSocket } = useSocketStore();
@ -125,7 +125,7 @@ const Progress2Input = (props: Props) => {
},
},
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -22,8 +23,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
const { selectedZone } = useSelectedZoneStore();
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
@ -86,7 +86,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -21,8 +22,7 @@ const Widget2InputCard3D = (props: Props) => {
>({});
const { selectedZone } = useSelectedZoneStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
@ -85,7 +85,7 @@ const Widget2InputCard3D = (props: Props) => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
const Widget3InputCard3D = () => {
const { selectedChartId } = useWidgetStore();
@ -19,8 +20,7 @@ const Widget3InputCard3D = () => {
>({});
const { selectedZone } = useSelectedZoneStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
@ -82,7 +82,7 @@ const Widget3InputCard3D = () => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

6
app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
View File

@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
import { getUserData } from "../../../../../functions/getUserData";
type Props = {};
@ -21,8 +22,7 @@ const Widget4InputCard3D = (props: Props) => {
>({});
const { selectedZone } = useSelectedZoneStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const [isLoading, setLoading] = useState<boolean>(true);
useEffect(() => {
@ -85,7 +85,7 @@ const Widget4InputCard3D = (props: Props) => {
const response = await axios.post(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
{
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: {
id: selectedChartId.id,

5
app/src/components/templates/CollaborationPopup.tsx
View File

@ -6,6 +6,7 @@ import RegularDropDown from "../ui/inputs/RegularDropDown";
import { access } from "fs";
import MultiEmailInvite from "../ui/inputs/MultiEmailInvite";
import { useActiveUsers } from "../../store/builder/store";
import { getUserData } from "../../functions/getUserData";
interface UserListTemplateProps {
user: User;
@ -59,10 +60,10 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
setUserManagement,
}) => {
const { activeUsers } = useActiveUsers();
const { userName } = getUserData();
useEffect(() => {
console.log("activeUsers: ", activeUsers);
}, [activeUsers]);
const userName = localStorage.getItem("userName") || "Anonymous";
const users = [
{
name: "Alice Johnson",
@ -140,7 +141,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
<div className="users-list-container">
<div className="you-container">
<div className="your-name">
<div className="user-profile">{userName[0].toUpperCase()}</div>
<div className="user-profile">{userName && userName[0].toUpperCase()}</div>
{userName}
</div>
<div className="indicater">you</div>

19
app/src/components/templates/LoadingPage.tsx
View File

@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
import { useProjectName } from "../../store/builder/store";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
import { getUserData } from "../../functions/getUserData";
interface LoadingPageProps {
progress: number; // Expect progress as a percentage (0-100)
@ -14,32 +15,23 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
const { projectName, setProjectName } = useProjectName();
const { projectId } = useParams();
const { comparisonProduct } = useComparisonProduct();
const { userId, organization, email } = getUserData();
const validatedProgress = Math.min(100, Math.max(0, progress));
const generateThumbnail = async () => {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
try {
if (!email || !userId) {
console.error("User data not found in localStorage");
return;
}
const emailParts = email.split("@");
if (emailParts.length < 2) {
console.error("Invalid email format");
return;
}
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
);
setProjectName(filterProject.projectName);
} catch {}
} catch { }
};
useEffect(() => {
generateThumbnail();
@ -47,8 +39,7 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
return (
<RenderOverlay>
<div
className={`loading-wrapper ${
comparisonProduct != null ? "comparisionLoading" : ""
className={`loading-wrapper ${comparisonProduct != null ? "comparisionLoading" : ""
}`}
>
<div className="loading-container">

21
app/src/components/ui/FileMenu.tsx
View File

@ -7,6 +7,7 @@ import { useProjectName, useSocketStore } from "../../store/builder/store";
import { useParams } from "react-router-dom";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { updateProject } from "../../services/dashboard/updateProject";
import { getUserData } from "../../functions/getUserData";
const FileMenu: React.FC = () => {
const [openMenu, setOpenMenu] = useState(false);
@ -15,6 +16,7 @@ const FileMenu: React.FC = () => {
const { projectName, setProjectName } = useProjectName();
const { dashBoardSocket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
const handleClick = () => {
if (clickTimeout) return;
@ -58,31 +60,20 @@ const FileMenu: React.FC = () => {
if (!projectId) return
// localStorage.setItem("projectName", newName);
try {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
if (!email || !userId) {
return;
}
const emailParts = email.split("@");
if (emailParts.length < 2) {
return;
}
const domainParts = emailParts[1].split(".");
const Organization = domainParts[0];
const projects = await getAllProjects(
userId, Organization
userId, organization
);
console.log('projects: ', projects);
let projectUuid = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id
=== projectId)
const updateProjects = {
projectId: projectUuid,
organization: Organization,
organization,
userId,
projectName,
thumbnail: undefined
@ -101,12 +92,12 @@ const FileMenu: React.FC = () => {
const updatedProjectName = await updateProject(
projectId,
userId,
Organization,
organization,
undefined,
projectName
);
//
} catch (error) {}
} catch (error) { }
};
return (
<button

10
app/src/components/ui/list/List.tsx
View File

@ -20,6 +20,7 @@ import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCamera
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
import { getUserData } from "../../../functions/getUserData";
interface Asset {
id: string;
@ -52,7 +53,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { projectId } = useParams();
const { setName } = useAssetsStore();
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@ -81,8 +82,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
setSubModule("zoneProperties");
const email = localStorage.getItem("email");
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
let response = await getZoneData(id, organization, projectId);
setSelectedZone({
@ -105,9 +104,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
async function handleZoneNameChange(newName: string) {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const isDuplicate = zones.some(
(zone: any) =>
zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
@ -136,8 +132,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
async function handleZoneAssetName(newName: string) {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
if (zoneAssetId?.id) {
let response = await setFloorItemApi(

5
app/src/components/ui/menu/menu.tsx
View File

@ -8,6 +8,7 @@ import useVersionHistoryStore, {
} from "../../../store/builder/store";
import { useSubModuleStore } from "../../../store/useModuleStore";
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { getUserData } from "../../../functions/getUserData";
interface MenuBarProps {
setOpenMenu: (isOpen: boolean) => void;
@ -22,7 +23,7 @@ interface MenuItem {
}
const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
const userName = localStorage.getItem("userName") ?? "Anonymous";
const { userName } = getUserData();
const navigate = useNavigate();
const [activeMenu, setActiveMenu] = useState<string | null>(null);
@ -82,7 +83,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
day: "2-digit",
})}`,
savedBy: userName,
savedBy: userName ?? "Anonymous",
};
console.log("newVersion: ", newVersion);

0
app/src/components/Dashboard/functions/getUserData.ts → app/src/functions/getUserData.ts
View File

31
app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
View File

@ -1,21 +1,22 @@
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import * as THREE from 'three';
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
import { getWallItems } from '../../../services/factoryBuilder/assest/wallAsset/getWallItemsApi';
import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
import { getWallItems } from "../../../services/factoryBuilder/assest/wallAsset/getWallItemsApi";
import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
import { getUserData } from "../../../functions/getUserData";
async function loadInitialWallItems(
setWallItems: Types.setWallItemSetState,
projectId?: string
): Promise<void> {
try {
const email = localStorage.getItem('email');
const { userId, organization, email } = getUserData();
if (!email) {
throw new Error('No email found in localStorage');
throw new Error("No email found in localStorage");
}
const organization = email.split("@")[1].split(".")[0];
const items = await getWallItems(organization, projectId);
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@ -29,10 +30,13 @@ async function loadInitialWallItems(
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
dracoLoader.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
);
loader.setDRACOLoader(dracoLoader);
const loadedWallItems = await Promise.all(items.map(async (item: Types.WallItem) => {
const loadedWallItems = await Promise.all(
items.map(async (item: Types.WallItem) => {
// Check THREE.js cache first
const cachedModel = THREE.Cache.get(item.assetId!);
if (cachedModel) {
@ -63,16 +67,17 @@ async function loadInitialWallItems(
THREE.Cache.add(item.assetId!, gltf);
resolve(processModel(gltf, item));
} catch (error) {
console.error('Failed to cache model:', error);
console.error("Failed to cache model:", error);
resolve(processModel(gltf, item));
}
});
});
}));
})
);
setWallItems(loadedWallItems);
} catch (error) {
console.error('Failed to load wall items:', error);
console.error("Failed to load wall items:", error);
}
}

5
app/src/modules/builder/asset/assetsGroup.tsx
View File

@ -14,6 +14,7 @@ import { CameraControls } from "@react-three/drei";
import addAssetModel from "./functions/addAssetModel";
import { useParams } from "react-router-dom";
import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
import { getUserData } from "../../../functions/getUserData";
const gltfLoaderWorker = new Worker(
new URL(
@ -33,9 +34,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
const { selectedItem, setSelectedItem } = useSelectedItem();
const { projectId } = useParams();
const { isRenameMode, setIsRenameMode } = useRenameModeStore();
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const userId = localStorage.getItem("userId")!;
const { userId, organization, email } = getUserData();
const { setTop } = useTopData();
const { setLeft } = useLeftData();

100
app/src/modules/builder/asset/functions/addAssetModel.ts
View File

@ -7,6 +7,7 @@ import { retrieveGLTF, storeGLTF } from "../../../../utils/indexDB/idbUtils";
import { Socket } from "socket.io-client";
import * as CONSTANTS from "../../../../types/world/worldConstants";
import PointsCalculator from "../../../simulation/events/points/functions/pointsCalculator";
import { getUserData } from "../../../../functions/getUserData";
async function addAssetModel(
raycaster: THREE.Raycaster,
@ -30,12 +31,19 @@ async function addAssetModel(
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/");
dracoLoader.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
);
loader.setDRACOLoader(dracoLoader);
raycaster.setFromCamera(pointer, camera);
const floorIntersections = raycaster.intersectObjects(floorGroup.current.children, true);
const intersectedFloor = floorIntersections.find((intersect) => intersect.object.name.includes("Floor"));
const floorIntersections = raycaster.intersectObjects(
floorGroup.current.children,
true
);
const intersectedFloor = floorIntersections.find((intersect) =>
intersect.object.name.includes("Floor")
);
const planeIntersections = raycaster.intersectObject(plane.current!, true);
const intersectedPlane = planeIntersections[0];
@ -45,21 +53,50 @@ async function addAssetModel(
if (intersectedFloor && intersectedPlane) {
intersectPoint =
intersectedFloor.distance < intersectedPlane.distance
? new THREE.Vector3(intersectedFloor.point.x, Math.round(intersectedFloor.point.y), intersectedFloor.point.z)
: new THREE.Vector3(intersectedPlane.point.x, 0, intersectedPlane.point.z);
? new THREE.Vector3(
intersectedFloor.point.x,
Math.round(intersectedFloor.point.y),
intersectedFloor.point.z
)
: new THREE.Vector3(
intersectedPlane.point.x,
0,
intersectedPlane.point.z
);
} else if (intersectedFloor) {
intersectPoint = new THREE.Vector3(intersectedFloor.point.x, Math.round(intersectedFloor.point.y), intersectedFloor.point.z);
intersectPoint = new THREE.Vector3(
intersectedFloor.point.x,
Math.round(intersectedFloor.point.y),
intersectedFloor.point.z
);
} else if (intersectedPlane) {
intersectPoint = new THREE.Vector3(intersectedPlane.point.x, 0, intersectedPlane.point.z);
intersectPoint = new THREE.Vector3(
intersectedPlane.point.x,
0,
intersectedPlane.point.z
);
}
if (intersectPoint) {
if (intersectPoint.y < 0) {
intersectPoint = new THREE.Vector3(intersectPoint.x, 0, intersectPoint.z);
intersectPoint = new THREE.Vector3(
intersectPoint.x,
0,
intersectPoint.z
);
}
const cachedModel = THREE.Cache.get(selectedItem.id);
if (cachedModel) {
handleModelLoad(cachedModel, intersectPoint!, selectedItem, addEvent, addAsset, socket, projectId, userId);
handleModelLoad(
cachedModel,
intersectPoint!,
selectedItem,
addEvent,
addAsset,
socket,
projectId,
userId
);
return;
} else {
const cachedModelBlob = await retrieveGLTF(selectedItem.id);
@ -69,14 +106,36 @@ async function addAssetModel(
URL.revokeObjectURL(blobUrl);
THREE.Cache.remove(blobUrl);
THREE.Cache.add(selectedItem.id, gltf);
handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, socket, projectId, userId);
handleModelLoad(
gltf,
intersectPoint!,
selectedItem,
addEvent,
addAsset,
socket,
projectId,
userId
);
});
} else {
loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`, async (gltf) => {
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`).then((res) => res.blob());
loader.load(
`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`,
async (gltf) => {
const modelBlob = await fetch(
`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`
).then((res) => res.blob());
await storeGLTF(selectedItem.id, modelBlob);
THREE.Cache.add(selectedItem.id, gltf);
await handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, socket, projectId, userId);
await handleModelLoad(
gltf,
intersectPoint!,
selectedItem,
addEvent,
addAsset,
socket,
projectId,
userId
);
}
);
}
@ -99,6 +158,7 @@ async function handleModelLoad(
projectId?: string,
userId?: string
) {
const { userName, organization, email } = getUserData();
const model = gltf.scene.clone();
model.userData = {
name: selectedItem.name,
@ -127,8 +187,6 @@ async function handleModelLoad(
opacity: 1,
};
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
// API
@ -216,8 +274,10 @@ async function handleModelLoad(
const nextPoint = ConveyorEvent.points[i + 1];
if (currentPoint.action.triggers.length > 0) {
currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint!.pointUuid = nextPoint.uuid;
currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid = nextPoint.action.actionUuid;
currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint!.pointUuid =
nextPoint.uuid;
currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid =
nextPoint.action.actionUuid;
}
}
addEvent(ConveyorEvent);
@ -413,7 +473,11 @@ async function handleModelLoad(
modelName: data.modelName,
assetId: data.assetId,
position: data.position,
rotation: [data.rotation.x, data.rotation.y, data.rotation.z] as [number, number, number],
rotation: [data.rotation.x, data.rotation.y, data.rotation.z] as [
number,
number,
number
],
isLocked: data.isLocked,
isCollidable: false,
isVisible: data.isVisible,

8
app/src/modules/builder/asset/models/model/model.tsx
View File

@ -15,6 +15,7 @@ import { useLeftData, useTopData } from '../../../../../store/visualization/useZ
import { useSelectedAsset } from '../../../../../store/simulation/useSimulationStore';
import { useProductContext } from '../../../../simulation/products/productContext';
import { useParams } from 'react-router-dom';
import { getUserData } from '../../../../../functions/getUserData';
function Model({ asset }: { readonly asset: Asset }) {
const { camera, controls, gl } = useThree();
@ -41,6 +42,7 @@ function Model({ asset }: { readonly asset: Asset }) {
const groupRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
setDeletableFloorItem(null);
@ -162,9 +164,7 @@ function Model({ asset }: { readonly asset: Asset }) {
const handleClick = (asset: Asset) => {
if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
@ -173,7 +173,7 @@ function Model({ asset }: { readonly asset: Asset }) {
//SOCKET
const data = {
organization: organization,
organization,
modelUuid: asset.modelUuid,
modelName: asset.modelName,
socketId: socket.id,

4
app/src/modules/builder/builder.tsx
View File

@ -51,6 +51,7 @@ import { useParams } from "react-router-dom";
import AislesGroup from "./aisle/aislesGroup";
import WallGroup from "./wall/wallGroup";
import { useBuilderStore } from "../../store/builder/useBuilderStore";
import { getUserData } from "../../functions/getUserData";
export default function Builder() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@ -104,6 +105,7 @@ export default function Builder() {
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
const { projectId } = useParams();
const { setHoveredPoint } = useBuilderStore();
const { userId, organization, email } = getUserData();
// const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader();
@ -134,8 +136,6 @@ export default function Builder() {
}, [toggleView]);
useEffect(() => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
async function fetchVisibility() {
const data = await findEnvironment(organization, localStorage.getItem("userId")!, projectId);

7
app/src/modules/builder/dfx/LoadBlueprint.tsx
View File

@ -8,6 +8,7 @@ import { getWallPointsFromBlueprint } from './functions/getWallPointsFromBluepri
import * as Types from '../../../types/world/worldTypes';
import arrayLineToObject from '../geomentries/lines/lineConvertions/arrayLineToObject';
import { useParams } from 'react-router-dom';
import { getUserData } from '../../../functions/getUserData';
// Interface defining the props for the DxfFile component
interface DxfFileProps {
@ -36,6 +37,7 @@ const DxfFile = ({
const { toggleView } = useToggleView();
const { socket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
// Refs for storing line objects
const lineRefs = useRef<Line[]>([]);
@ -56,9 +58,6 @@ const DxfFile = ({
lines.current.push(...dfxWallGenerate);
dfxWallGenerate.map((line: any) => {
const lineData = arrayLineToObject(line as Types.Line);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
@ -67,7 +66,7 @@ const DxfFile = ({
//SOCKET
const input = {
organization: organization,
organization,
layer: lineData.layer,
line: lineData.line,
type: lineData.type,

68
app/src/modules/builder/eventDeclaration/dragControlDeclaration.ts
View File

@ -1,11 +1,12 @@
import * as THREE from 'three';
import { DragControls } from 'three/examples/jsm/controls/DragControls';
import * as CONSTANTS from '../../../types/world/worldConstants';
import DragPoint from '../geomentries/points/dragPoint';
import * as THREE from "three";
import { DragControls } from "three/examples/jsm/controls/DragControls";
import * as CONSTANTS from "../../../types/world/worldConstants";
import DragPoint from "../geomentries/points/dragPoint";
import * as Types from "../../../types/world/worldTypes";
// import { updatePoint } from '../../../services/factoryBuilder/lines/updatePointApi';
import { Socket } from 'socket.io-client';
import { Socket } from "socket.io-client";
import { getUserData } from "../../../functions/getUserData";
export default async function addDragControl(
dragPointControls: Types.RefDragControl,
@ -16,32 +17,38 @@ export default async function addDragControl(
lines: Types.RefLines,
onlyFloorlines: Types.RefOnlyFloorLines,
socket: Socket<any>,
projectId?:string
projectId?: string
) {
////////// Dragging Point and also change the size to indicate during hover //////////
dragPointControls.current = new DragControls(currentLayerPoint.current, state.camera, state.gl.domElement);
dragPointControls.current = new DragControls(
currentLayerPoint.current,
state.camera,
state.gl.domElement
);
dragPointControls.current.enabled = false;
dragPointControls.current.addEventListener('drag', function (event) {
const { userId, organization, email } = getUserData();
dragPointControls.current.addEventListener("drag", function (event) {
const object = event.object;
if (object.visible) {
(state.controls as any).enabled = false;
DragPoint(event as any, floorPlanGroupPoint, floorPlanGroupLine, state.scene, lines, onlyFloorlines)
DragPoint(
event as any,
floorPlanGroupPoint,
floorPlanGroupLine,
state.scene,
lines,
onlyFloorlines
);
} else {
(state.controls as any).enabled = true;
}
});
dragPointControls.current.addEventListener('dragstart', function (event) {
});
dragPointControls.current.addEventListener("dragstart", function (event) {});
dragPointControls.current.addEventListener('dragend', async function (event) {
dragPointControls.current.addEventListener("dragend", async function (event) {
if (!dragPointControls.current) return;
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
@ -54,31 +61,38 @@ export default async function addDragControl(
//SOCKET
const data = {
organization: organization,
position: { "x": event.object.position.x, "y": 0.01, "z": event.object.position.z },
organization,
position: {
x: event.object.position.x,
y: 0.01,
z: event.object.position.z,
},
uuid: event.object.uuid,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:update', data);
socket.emit("v1:Line:update", data);
if (state.controls) {
(state.controls as any).enabled = true;
}
});
dragPointControls.current.addEventListener('hoveron', function (event: any) {
dragPointControls.current.addEventListener("hoveron", function (event: any) {
if ((event.object as Types.Mesh).name === "point") {
event.object.material.uniforms.uInnerColor.value.set(event.object.userData.color)
event.object.material.uniforms.uInnerColor.value.set(
event.object.userData.color
);
}
});
dragPointControls.current.addEventListener('hoveroff', function (event: any) {
dragPointControls.current.addEventListener("hoveroff", function (event: any) {
if ((event.object as Types.Mesh).name === "point") {
event.object.material.uniforms.uInnerColor.value.set(new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor))
event.object.material.uniforms.uInnerColor.value.set(
new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor)
);
}
});
}

188
app/src/modules/builder/geomentries/floors/drawOnlyFloor.ts
View File

@ -1,16 +1,17 @@
import * as THREE from 'three';
import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes";
import * as CONSTANTS from '../../../../types/world/worldConstants';
import * as CONSTANTS from "../../../../types/world/worldConstants";
import addPointToScene from '../points/addPointToScene';
import addLineToScene from '../lines/addLineToScene';
import splitLine from '../lines/splitLine';
import removeReferenceLine from '../lines/removeReferenceLine';
import getClosestIntersection from '../lines/getClosestIntersection';
import arrayLineToObject from '../lines/lineConvertions/arrayLineToObject';
import addPointToScene from "../points/addPointToScene";
import addLineToScene from "../lines/addLineToScene";
import splitLine from "../lines/splitLine";
import removeReferenceLine from "../lines/removeReferenceLine";
import getClosestIntersection from "../lines/getClosestIntersection";
import arrayLineToObject from "../lines/lineConvertions/arrayLineToObject";
// import { setLine } from '../../../../services/factoryBuilder/lines/setLineApi';
import { Socket } from 'socket.io-client';
import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
async function drawOnlyFloor(
raycaster: THREE.Raycaster,
@ -38,54 +39,107 @@ async function drawOnlyFloor(
setDeletedLines: any,
activeLayer: Types.Number,
socket: Socket<any>,
projectId?:string
projectId?: string
): Promise<void> {
////////// Creating lines Based on the positions clicked //////////
if (!plane.current) return
if (!plane.current) return;
const { userId, organization, email } = getUserData();
const intersects = raycaster.intersectObject(plane.current, true);
const intersectsLines = raycaster.intersectObjects(floorPlanGroupLine.current.children, true);
const intersectsPoint = raycaster.intersectObjects(floorPlanGroupPoint.current.children, true);
const VisibleintersectsPoint = intersectsPoint.find(intersect => intersect.object.visible);
const visibleIntersect = intersectsLines.find(intersect => intersect.object.visible && intersect.object.name !== CONSTANTS.lineConfig.referenceName);
if ((intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) && intersectsLines.length > 0 && !isSnapped.current && !ispreSnapped.current) {
const intersectsLines = raycaster.intersectObjects(
floorPlanGroupLine.current.children,
true
);
const intersectsPoint = raycaster.intersectObjects(
floorPlanGroupPoint.current.children,
true
);
const VisibleintersectsPoint = intersectsPoint.find(
(intersect) => intersect.object.visible
);
const visibleIntersect = intersectsLines.find(
(intersect) =>
intersect.object.visible &&
intersect.object.name !== CONSTANTS.lineConfig.referenceName
);
if (
(intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) &&
intersectsLines.length > 0 &&
!isSnapped.current &&
!ispreSnapped.current
) {
////////// Clicked on a preexisting Line //////////
if (visibleIntersect && (intersectsLines[0].object.userData.linePoints[0][3] === CONSTANTS.lineConfig.floorName || intersectsLines[0].object.userData.linePoints[0][3] === CONSTANTS.lineConfig.wallName)) {
if (
visibleIntersect &&
(intersectsLines[0].object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.floorName ||
intersectsLines[0].object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.wallName)
) {
let pointColor, lineColor;
if (intersectsLines[0].object.userData.linePoints[0][3] === CONSTANTS.lineConfig.wallName) {
if (
intersectsLines[0].object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.wallName
) {
pointColor = CONSTANTS.pointConfig.wallOuterColor;
lineColor = CONSTANTS.lineConfig.wallColor;
} else {
pointColor = CONSTANTS.pointConfig.floorOuterColor;
lineColor = CONSTANTS.lineConfig.floorColor;
}
let IntersectsPoint = new THREE.Vector3(intersects[0].point.x, 0.01, intersects[0].point.z);
if (isAngleSnapped.current && line.current.length > 0 && anglesnappedPoint.current) {
let IntersectsPoint = new THREE.Vector3(
intersects[0].point.x,
0.01,
intersects[0].point.z
);
if (
isAngleSnapped.current &&
line.current.length > 0 &&
anglesnappedPoint.current
) {
IntersectsPoint = anglesnappedPoint.current;
}
if (visibleIntersect.object instanceof THREE.Mesh) {
const ThroughPoint = (visibleIntersect.object.geometry.parameters.path).getPoints(CONSTANTS.lineConfig.lineIntersectionPoints);
let intersectionPoint = getClosestIntersection(ThroughPoint, IntersectsPoint);
const ThroughPoint =
visibleIntersect.object.geometry.parameters.path.getPoints(
CONSTANTS.lineConfig.lineIntersectionPoints
);
let intersectionPoint = getClosestIntersection(
ThroughPoint,
IntersectsPoint
);
if (intersectionPoint) {
const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, pointColor, lineColor, intersectsLines[0].object.userData.linePoints[0][3],projectId);
const newLines = splitLine(
visibleIntersect,
intersectionPoint,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
lines,
setDeletedLines,
floorPlanGroupLine,
socket,
pointColor,
lineColor,
intersectsLines[0].object.userData.linePoints[0][3],
projectId
);
setNewLines([newLines[0], newLines[1]]);
(line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.floorName]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.floorName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
lines.current.push(line.current as Types.Line);
const data = arrayLineToObject(line.current as Types.Line);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
@ -93,25 +147,36 @@ async function drawOnlyFloor(
//SOCKET
const input = {
organization: organization,
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input);
socket.emit("v1:Line:create", input);
setNewLines([newLines[0], newLines[1], line.current]);
onlyFloorline.current.push(line.current as Types.Line);
onlyFloorlines.current.push(onlyFloorline.current);
onlyFloorline.current = [];
addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.lineConfig.floorColor, line.current, floorPlanGroupLine);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.floorColor,
line.current,
floorPlanGroupLine
);
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
removeReferenceLine(
floorPlanGroup,
ReferenceLineMesh,
LineCreated,
line
);
}
return;
}
@ -119,12 +184,15 @@ async function drawOnlyFloor(
}
}
if (intersects.length > 0 && intersectsLines.length === 0) {
////////// Clicked on an empty place or a point //////////
let intersectionPoint = intersects[0].point;
if (isAngleSnapped.current && line.current.length > 0 && anglesnappedPoint.current) {
if (
isAngleSnapped.current &&
line.current.length > 0 &&
anglesnappedPoint.current
) {
intersectionPoint = anglesnappedPoint.current;
}
if (isSnapped.current && line.current.length > 0 && snappedPoint.current) {
@ -135,23 +203,32 @@ async function drawOnlyFloor(
}
if (!isSnapped.current && !ispreSnapped.current) {
addPointToScene(intersectionPoint, CONSTANTS.pointConfig.floorOuterColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, CONSTANTS.lineConfig.floorName);
addPointToScene(
intersectionPoint,
CONSTANTS.pointConfig.floorOuterColor,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
CONSTANTS.lineConfig.floorName
);
} else {
ispreSnapped.current = false;
isSnapped.current = false;
}
(line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.floorName]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.floorName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
onlyFloorline.current.push(line.current as Types.Line);
lines.current.push(line.current as Types.Line);
const data = arrayLineToObject(line.current as Types.Line);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
@ -159,23 +236,30 @@ async function drawOnlyFloor(
//SOCKET
const input = {
organization: organization,
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input);
socket.emit("v1:Line:create", input);
setNewLines([line.current]);
addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.lineConfig.floorColor, line.current, floorPlanGroupLine);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.floorColor,
line.current,
floorPlanGroupLine
);
const lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
if (isSnapped.current) { ////////// Add this to stop the drawing mode after snapping //////////
if (isSnapped.current) {
////////// Add this to stop the drawing mode after snapping //////////
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
onlyFloorlines.current.push(onlyFloorline.current);
onlyFloorline.current = [];

51
app/src/modules/builder/geomentries/layers/deleteLayer.ts
View File

@ -1,8 +1,9 @@
import { toast } from 'react-toastify';
import RemoveConnectedLines from '../lines/removeConnectedLines';
import { toast } from "react-toastify";
import RemoveConnectedLines from "../lines/removeConnectedLines";
import * as Types from '../../../../types/world/worldTypes';
import { Socket } from 'socket.io-client';
import * as Types from "../../../../types/world/worldTypes";
import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
// import { deleteLayer } from '../../../../services/factoryBuilder/lines/deleteLayerApi';
async function DeleteLayer(
@ -15,16 +16,14 @@ async function DeleteLayer(
setDeletedLines: any,
setRemovedLayer: Types.setRemoveLayerSetState,
socket: Socket<any>,
projectId?:string
projectId?: string
): Promise<void> {
////////// Remove the Lines from the lines.current based on the removed layer and rearrange the layer number that are higher than the removed layer //////////
const removedLines: Types.Lines = lines.current.filter(line => line[0][2] === removedLayer);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
const removedLines: Types.Lines = lines.current.filter(
(line) => line[0][2] === removedLayer
);
const { userId, organization, email } = getUserData();
//REST
@ -33,35 +32,45 @@ async function DeleteLayer(
//SOCKET
const data = {
organization: organization,
organization,
layer: removedLayer,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:delete:layer', data);
socket.emit("v1:Line:delete:layer", data);
////////// Remove Points and lines from the removed layer //////////
removedLines.forEach((line) => {
line.forEach((removedPoint) => {
RemoveConnectedLines(removedPoint[1], floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, lines);
RemoveConnectedLines(
removedPoint[1],
floorPlanGroupLine,
floorPlanGroupPoint,
setDeletedLines,
lines
);
});
});
////////// Update the remaining lines layer values in the userData and in lines.current //////////
let remaining = lines.current.filter(line => line[0][2] !== removedLayer);
let remaining = lines.current.filter((line) => line[0][2] !== removedLayer);
let updatedLines: Types.Lines = [];
remaining.forEach(line => {
remaining.forEach((line) => {
let newLines: Types.Line = [...line];
if (newLines[0][2] > removedLayer) {
newLines[0][2] -= 1;
newLines[1][2] -= 1;
}
const matchingLine = floorPlanGroupLine.current.children.find(l => l.userData.linePoints[0][1] === line[0][1] && l.userData.linePoints[1][1] === line[1][1]);
const matchingLine = floorPlanGroupLine.current.children.find(
(l) =>
l.userData.linePoints[0][1] === line[0][1] &&
l.userData.linePoints[1][1] === line[1][1]
);
if (matchingLine) {
const updatedUserData = matchingLine.userData;
updatedUserData.linePoints[0][2] = newLines[0][2];
@ -78,8 +87,8 @@ async function DeleteLayer(
onlyFloorlines.current = onlyFloorlines.current.filter((floor) => {
return floor[0][0][2] !== removedLayer;
});
const meshToRemove: any = floorGroup.current?.children.find((mesh) =>
mesh.name === `Only_Floor_Line_${removedLayer}`
const meshToRemove: any = floorGroup.current?.children.find(
(mesh) => mesh.name === `Only_Floor_Line_${removedLayer}`
);
if (meshToRemove) {
(<any>meshToRemove.material).dispose();

36
app/src/modules/builder/geomentries/lines/deleteLine.ts
View File

@ -2,7 +2,8 @@ import { Socket } from "socket.io-client";
// import { deleteLineApi } from "../../../../services/factoryBuilder/lines/deleteLineApi";
import * as Types from "../../../../types/world/worldTypes";
import { toast } from 'react-toastify';
import { toast } from "react-toastify";
import { getUserData } from "../../../../functions/getUserData";
function deleteLine(
hoveredDeletableLine: Types.RefMesh,
@ -14,7 +15,7 @@ function deleteLine(
socket: Socket<any>,
projectId?: string
): void {
const { userId, organization, email } = getUserData();
////////// Deleting a line and the points if they are not connected to any other line //////////
if (!hoveredDeletableLine.current) {
@ -24,10 +25,6 @@ function deleteLine(
const linePoints = hoveredDeletableLine.current.userData.linePoints;
const connectedpoints = [linePoints[0][1], linePoints[1][1]];
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// deleteLineApi(
@ -41,24 +38,25 @@ function deleteLine(
//SOCKET
const data = {
organization: organization,
line: [
{ "uuid": linePoints[0][1] },
{ "uuid": linePoints[1][1] }
],
organization,
line: [{ uuid: linePoints[0][1] }, { uuid: linePoints[1][1] }],
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:delete', data);
socket.emit("v1:Line:delete", data);
onlyFloorlines.current = onlyFloorlines.current
.map((floorline) =>
floorline.filter(
(line) =>
line[0][1] !== connectedpoints[0] && line[1][1] !== connectedpoints[1]
)
)
.filter((floorline) => floorline.length > 0);
onlyFloorlines.current = onlyFloorlines.current.map(floorline =>
floorline.filter(line => line[0][1] !== connectedpoints[0] && line[1][1] !== connectedpoints[1])
).filter(floorline => floorline.length > 0);
lines.current = lines.current.filter(item => item !== linePoints);
lines.current = lines.current.filter((item) => item !== linePoints);
(<any>hoveredDeletableLine.current.material).dispose();
(<any>hoveredDeletableLine.current.geometry).dispose();
floorPlanGroupLine.current.remove(hoveredDeletableLine.current);

7
app/src/modules/builder/geomentries/lines/distanceText/distanceText.tsx
View File

@ -15,6 +15,7 @@ import * as Types from "../../../../../types/world/worldTypes";
import getRoomsFromLines from "../getRoomsFromLines";
import * as turf from '@turf/turf';
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
const DistanceText = () => {
const [lines, setLines] = useState<
@ -32,7 +33,7 @@ const DistanceText = () => {
const [linesState, setLinesState] = useState<Types.Lines>([]);
const { roomsState, setRoomsState } = useRoomsState();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (linesState.length === 0) return;
@ -93,11 +94,9 @@ const DistanceText = () => {
useEffect(() => {
const email = localStorage.getItem("email");
if (!email) return;
const organization = email.split("@")[1].split(".")[0];
getLines(organization,projectId).then((data) => {
getLines(organization, projectId).then((data) => {
data = objectLinesToArray(data);
setLinesState(data);

161
app/src/modules/builder/geomentries/lines/drawWall.ts
View File

@ -1,16 +1,17 @@
import * as THREE from 'three';
import * as CONSTANTS from '../../../../types/world/worldConstants';
import * as THREE from "three";
import * as CONSTANTS from "../../../../types/world/worldConstants";
import addPointToScene from '../points/addPointToScene';
import addLineToScene from './addLineToScene';
import splitLine from './splitLine';
import removeReferenceLine from './removeReferenceLine';
import getClosestIntersection from './getClosestIntersection';
import addPointToScene from "../points/addPointToScene";
import addLineToScene from "./addLineToScene";
import splitLine from "./splitLine";
import removeReferenceLine from "./removeReferenceLine";
import getClosestIntersection from "./getClosestIntersection";
import * as Types from "../../../../types/world/worldTypes";
import arrayLineToObject from './lineConvertions/arrayLineToObject';
import arrayLineToObject from "./lineConvertions/arrayLineToObject";
// import { setLine } from '../../../../services/factoryBuilder/lines/setLineApi';
import { Socket } from 'socket.io-client';
import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
async function drawWall(
raycaster: THREE.Raycaster,
@ -36,49 +37,91 @@ async function drawWall(
socket: Socket<any>,
projectId?: string
): Promise<void> {
const { userId, organization, email } = getUserData();
////////// Creating lines Based on the positions clicked //////////
////////// Allows the user lines that represents walls and roof, floor if forms a polygon //////////
if (!plane.current) return
if (!plane.current) return;
let intersects = raycaster.intersectObject(plane.current, true);
let intersectsLines = raycaster.intersectObjects(floorPlanGroupLine.current.children, true);
let intersectsPoint = raycaster.intersectObjects(floorPlanGroupPoint.current.children, true);
let intersectsLines = raycaster.intersectObjects(
floorPlanGroupLine.current.children,
true
);
let intersectsPoint = raycaster.intersectObjects(
floorPlanGroupPoint.current.children,
true
);
const VisibleintersectsPoint = intersectsPoint.find(intersect => intersect.object.visible);
const visibleIntersect = intersectsLines.find(intersect => intersect.object.visible && intersect.object.name !== CONSTANTS.lineConfig.referenceName && intersect.object.userData.linePoints[0][3] === CONSTANTS.lineConfig.wallName);
if ((intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) && intersectsLines.length > 0 && !isSnapped.current && !ispreSnapped.current) {
const VisibleintersectsPoint = intersectsPoint.find(
(intersect) => intersect.object.visible
);
const visibleIntersect = intersectsLines.find(
(intersect) =>
intersect.object.visible &&
intersect.object.name !== CONSTANTS.lineConfig.referenceName &&
intersect.object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.wallName
);
if (
(intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) &&
intersectsLines.length > 0 &&
!isSnapped.current &&
!ispreSnapped.current
) {
////////// Clicked on a preexisting Line //////////
if (visibleIntersect && intersects) {
let IntersectsPoint = new THREE.Vector3(intersects[0].point.x, 0.01, intersects[0].point.z);
let IntersectsPoint = new THREE.Vector3(
intersects[0].point.x,
0.01,
intersects[0].point.z
);
if (isAngleSnapped.current && anglesnappedPoint.current) {
IntersectsPoint = anglesnappedPoint.current;
}
if (visibleIntersect.object instanceof THREE.Mesh) {
const ThroughPoint = (visibleIntersect.object.geometry.parameters.path).getPoints(CONSTANTS.lineConfig.lineIntersectionPoints);
let intersectionPoint = getClosestIntersection(ThroughPoint, IntersectsPoint);
const ThroughPoint =
visibleIntersect.object.geometry.parameters.path.getPoints(
CONSTANTS.lineConfig.lineIntersectionPoints
);
let intersectionPoint = getClosestIntersection(
ThroughPoint,
IntersectsPoint
);
if (intersectionPoint) {
const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, CONSTANTS.pointConfig.wallOuterColor, CONSTANTS.lineConfig.wallColor, CONSTANTS.lineConfig.wallName,projectId);
const newLines = splitLine(
visibleIntersect,
intersectionPoint,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
lines,
setDeletedLines,
floorPlanGroupLine,
socket,
CONSTANTS.pointConfig.wallOuterColor,
CONSTANTS.lineConfig.wallColor,
CONSTANTS.lineConfig.wallName,
projectId
);
setNewLines([newLines[0], newLines[1]]);
(line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.wallName,]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
@ -86,20 +129,26 @@ async function drawWall(
//SOCKET
const input = {
organization: organization,
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input);
socket.emit("v1:Line:create", input);
setNewLines([newLines[0], newLines[1], line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.lineConfig.wallColor, line.current, floorPlanGroupLine);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
@ -110,12 +159,15 @@ async function drawWall(
}
if (intersects && intersects.length > 0) {
////////// Clicked on a emply place or a point //////////
let intersectionPoint = intersects[0].point;
if (isAngleSnapped.current && line.current.length > 0 && anglesnappedPoint.current) {
if (
isAngleSnapped.current &&
line.current.length > 0 &&
anglesnappedPoint.current
) {
intersectionPoint = anglesnappedPoint.current;
}
if (isSnapped.current && line.current.length > 0 && snappedPoint.current) {
@ -126,21 +178,30 @@ async function drawWall(
}
if (!isSnapped.current && !ispreSnapped.current) {
addPointToScene(intersectionPoint, CONSTANTS.pointConfig.wallOuterColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, CONSTANTS.lineConfig.wallName);
addPointToScene(
intersectionPoint,
CONSTANTS.pointConfig.wallOuterColor,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
CONSTANTS.lineConfig.wallName
);
} else {
ispreSnapped.current = false;
isSnapped.current = false;
}
(line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.wallName,]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
@ -148,20 +209,26 @@ async function drawWall(
//SOCKET
const input = {
organization: organization,
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input);
socket.emit("v1:Line:create", input);
setNewLines([line.current])
setNewLines([line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.lineConfig.wallColor, line.current, floorPlanGroupLine);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}

81
app/src/modules/builder/geomentries/lines/splitLine.ts
View File

@ -1,11 +1,12 @@
import * as THREE from 'three';
import * as THREE from "three";
import addLineToScene from './addLineToScene';
import addPointToScene from '../points/addPointToScene';
import addLineToScene from "./addLineToScene";
import addPointToScene from "../points/addPointToScene";
import * as Types from "../../../../types/world/worldTypes";
import arrayLineToObject from '../lines/lineConvertions/arrayLineToObject';
import { Socket } from 'socket.io-client';
import arrayLineToObject from "../lines/lineConvertions/arrayLineToObject";
import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
// import { deleteLineApi } from '../../../../services/factoryBuilder/lines/deleteLineApi';
// import { setLine } from '../../../../services/factoryBuilder/lines/setLineApi';
@ -25,19 +26,14 @@ function splitLine(
lineType: Types.String,
projectId?: string
): [Types.Line, Types.Line] {
////////// Removing the clicked line and splitting it with the clicked position adding a new point and two new lines //////////
((visibleIntersect.object as any).material).dispose();
((visibleIntersect.object as any).geometry).dispose();
const { userId, organization, email } = getUserData();
(visibleIntersect.object as any).material.dispose();
(visibleIntersect.object as any).geometry.dispose();
floorPlanGroupLine.current.remove(visibleIntersect.object);
setDeletedLines([visibleIntersect.object.userData.linePoints]);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// deleteLineApi(
@ -50,30 +46,37 @@ function splitLine(
//SOCKET
const data = {
organization: organization,
organization,
line: [
{ "uuid": visibleIntersect.object.userData.linePoints[0][1] },
{ "uuid": visibleIntersect.object.userData.linePoints[1][1] }
{ uuid: visibleIntersect.object.userData.linePoints[0][1] },
{ uuid: visibleIntersect.object.userData.linePoints[1][1] },
],
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:delete', data);
socket.emit("v1:Line:delete", data);
const point = addPointToScene(intersectionPoint, pointColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lineType);
const point = addPointToScene(
intersectionPoint,
pointColor,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
lineType
);
const oldLinePoints = visibleIntersect.object.userData.linePoints;
lines.current = lines.current.filter(item => item !== oldLinePoints);
lines.current = lines.current.filter((item) => item !== oldLinePoints);
const clickedPoint: Types.Point = [
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
point.uuid,
oldLinePoints[0][2],
lineType
lineType,
];
const start = oldLinePoints[0];
@ -92,16 +95,16 @@ function splitLine(
//SOCKET
const input1 = {
organization: organization,
organization,
layer: line1.layer,
line: line1.line,
type: line1.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input1);
socket.emit("v1:Line:create", input1);
//REST
@ -110,21 +113,33 @@ function splitLine(
//SOCKET
const input2 = {
organization: organization,
organization,
layer: line2.layer,
line: line2.line,
type: line2.type,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:Line:create', input2);
socket.emit("v1:Line:create", input2);
lines.current.push(newLine1, newLine2);
addLineToScene(newLine1[0][0], newLine1[1][0], lineColor, newLine1, floorPlanGroupLine);
addLineToScene(newLine2[0][0], newLine2[1][0], lineColor, newLine2, floorPlanGroupLine);
addLineToScene(
newLine1[0][0],
newLine1[1][0],
lineColor,
newLine1,
floorPlanGroupLine
);
addLineToScene(
newLine2[0][0],
newLine2[1][0],
lineColor,
newLine2,
floorPlanGroupLine
);
return [newLine1, newLine2];
}

38
app/src/modules/builder/geomentries/points/deletePoint.ts
View File

@ -1,10 +1,11 @@
import * as Types from "../../../../types/world/worldTypes";
import { toast } from 'react-toastify';
import { toast } from "react-toastify";
import RemoveConnectedLines from "../lines/removeConnectedLines";
// import { deletePointApi } from "../../../../services/factoryBuilder/lines/deletePointApi";
import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
function deletePoint(
hoveredDeletablePoint: Types.RefMesh,
@ -14,23 +15,19 @@ function deletePoint(
lines: Types.RefLines,
setDeletedLines: any,
socket: Socket<any>,
projectId?:string
projectId?: string
): void {
////////// Deleting a Point and the lines that are connected to it //////////
if (!hoveredDeletablePoint.current) {
return;
}
const { userId, organization, email } = getUserData();
(<any>hoveredDeletablePoint.current.material).dispose();
(<any>hoveredDeletablePoint.current.geometry).dispose();
floorPlanGroupPoint.current.remove(hoveredDeletablePoint.current);
const DeletedPointUUID = hoveredDeletablePoint.current.uuid;
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// deletePointApi(organization, DeletedPointUUID);
@ -38,23 +35,34 @@ function deletePoint(
//SOCKET
const data = {
organization: organization,
organization,
uuid: DeletedPointUUID,
socketId: socket.id,
projectId,
userId
}
userId,
};
// console.log('data: ', data);
socket.emit('v1:Line:delete:point', data);
socket.emit("v1:Line:delete:point", data);
////////// Update onlyFloorlines.current to remove references to the deleted point //////////
onlyFloorlines.current = onlyFloorlines.current.map(floorline =>
floorline.filter(line => line[0][1] !== DeletedPointUUID && line[1][1] !== DeletedPointUUID)
).filter(floorline => floorline.length > 0);
onlyFloorlines.current = onlyFloorlines.current
.map((floorline) =>
floorline.filter(
(line) =>
line[0][1] !== DeletedPointUUID && line[1][1] !== DeletedPointUUID
)
)
.filter((floorline) => floorline.length > 0);
RemoveConnectedLines(DeletedPointUUID, floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, lines);
RemoveConnectedLines(
DeletedPointUUID,
floorPlanGroupLine,
floorPlanGroupPoint,
setDeletedLines,
lines
);
echo.success("Point Removed!");
}

71
app/src/modules/builder/geomentries/walls/addWallItems.ts
View File

@ -1,11 +1,12 @@
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { toast } from 'react-toastify';
import * as THREE from 'three';
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { toast } from "react-toastify";
import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes";
import * as CONSTANTS from '../../../../types/world/worldConstants';
import { Socket } from 'socket.io-client';
import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import * as CONSTANTS from "../../../../types/world/worldConstants";
import { Socket } from "socket.io-client";
import { retrieveGLTF, storeGLTF } from "../../../../utils/indexDB/idbUtils";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { getUserData } from "../../../../functions/getUserData";
async function AddWallItems(
selected: any,
@ -15,8 +16,11 @@ async function AddWallItems(
socket: Socket<any>,
projectId?: string
): Promise<void> {
const { userId, organization, email } = getUserData();
let intersects = raycaster?.intersectObject(CSGGroup.current!, true);
const wallRaycastIntersection = intersects?.find((child) => child.object.name.includes("WallRaycastReference"));
const wallRaycastIntersection = intersects?.find((child) =>
child.object.name.includes("WallRaycastReference")
);
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
if (!wallRaycastIntersection) return;
@ -25,7 +29,9 @@ async function AddWallItems(
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
dracoLoader.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
);
loader.setDRACOLoader(dracoLoader);
// Check THREE.js cache first
@ -49,17 +55,22 @@ async function AddWallItems(
}
// Load from backend if not in any cache
loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${selected.id}`, async (gltf) => {
loader.load(
`${url_Backend_dwinzo}/api/v2/AssetFile/${selected.id}`,
async (gltf) => {
try {
const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${selected.id}`).then((res) => res.blob());
const modelBlob = await fetch(
`${url_Backend_dwinzo}/api/v2/AssetFile/${selected.id}`
).then((res) => res.blob());
await storeGLTF(selected.id, modelBlob);
THREE.Cache.add(selected.id, gltf);
await handleModelLoad(gltf);
} catch (error) {
console.error('Failed to cache model:', error);
console.error("Failed to cache model:", error);
handleModelLoad(gltf);
}
});
}
);
async function handleModelLoad(gltf: GLTF) {
const model = gltf.scene.clone();
@ -80,11 +91,18 @@ async function AddWallItems(
const center = new THREE.Vector3();
boundingBox.getCenter(center);
const csgposition = [center.x, center.y, center.z] as [number, number, number];
const csgposition = [center.x, center.y, center.z] as [
number,
number,
number
];
let positionY = selected.subCategory === 'fixed-move' ? 0 : intersectionPoint.point.y;
let positionY =
selected.subCategory === "fixed-move" ? 0 : intersectionPoint.point.y;
if (positionY === 0) {
positionY = Math.floor(intersectionPoint.point.y / CONSTANTS.wallConfig.height) * CONSTANTS.wallConfig.height;
positionY =
Math.floor(intersectionPoint.point.y / CONSTANTS.wallConfig.height) *
CONSTANTS.wallConfig.height;
}
const newWallItem = {
@ -95,16 +113,17 @@ async function AddWallItems(
scale: [1, 1, 1] as [number, number, number],
csgscale: csgscale,
csgposition: csgposition,
position: [intersectionPoint.point.x, positionY, intersectionPoint.point.z] as [number, number, number],
quaternion: intersectionPoint.object.quaternion.clone() as Types.QuaternionType
position: [
intersectionPoint.point.x,
positionY,
intersectionPoint.point.z,
] as [number, number, number],
quaternion:
intersectionPoint.object.quaternion.clone() as Types.QuaternionType,
};
const email = localStorage.getItem('email');
const organization = email ? (email.split("@")[1]).split(".")[0] : 'default';
const userId = localStorage.getItem("userId");
const data = {
organization: organization,
organization,
modelUuid: model.uuid,
modelName: newWallItem.modelName,
assetId: selected.id,
@ -116,15 +135,15 @@ async function AddWallItems(
scale: newWallItem.scale,
socketId: socket.id,
projectId,
userId
userId,
};
socket.emit('v1:wallItems:set', data);
socket.emit("v1:wallItems:set", data);
setWallItems((prevItems) => {
const updatedItems = [...prevItems, newWallItem];
const WallItemsForStorage = updatedItems.map(item => {
const WallItemsForStorage = updatedItems.map((item) => {
const { model, ...rest } = item;
return {
...rest,

28
app/src/modules/builder/geomentries/walls/deleteWallItems.ts
View File

@ -1,6 +1,7 @@
import { getUserData } from "../../../../functions/getUserData";
import * as Types from "../../../../types/world/worldTypes";
// import { deleteWallItem } from '../../../../services/factoryBuilder/assest/wallAsset/deleteWallItemApi';
import { Socket } from 'socket.io-client';
import { Socket } from "socket.io-client";
function DeleteWallItems(
hoveredDeletableWallItem: Types.RefMesh,
@ -9,23 +10,22 @@ function DeleteWallItems(
socket: Socket<any>,
projectId?: string
): void {
////////// Deleting the hovered Wall GLTF from thewallItems and also update it in the localstorage //////////
const { userId, organization, email } = getUserData();
if (hoveredDeletableWallItem.current && hoveredDeletableWallItem.current) {
setWallItems([]);
let WallItemsRef = wallItems;
const removedItem = WallItemsRef.find((item) => item.model?.uuid === hoveredDeletableWallItem.current?.uuid);
const Items = WallItemsRef.filter((item) => item.model?.uuid !== hoveredDeletableWallItem.current?.uuid);
const removedItem = WallItemsRef.find(
(item) => item.model?.uuid === hoveredDeletableWallItem.current?.uuid
);
const Items = WallItemsRef.filter(
(item) => item.model?.uuid !== hoveredDeletableWallItem.current?.uuid
);
setTimeout(async () => {
WallItemsRef = Items;
setWallItems(WallItemsRef);
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
//REST
// await deleteWallItem(organization, removedItem?.model?.uuid!, removedItem?.modelName!)
@ -33,17 +33,17 @@ function DeleteWallItems(
//SOCKET
const data = {
organization: organization,
organization,
modelUuid: removedItem?.model?.uuid!,
modelName: removedItem?.modelName!,
socketId: socket.id,
projectId,
userId
}
userId,
};
socket.emit('v1:wallItems:delete', data);
socket.emit("v1:wallItems:delete", data);
const WallItemsForStorage = WallItemsRef.map(item => {
const WallItemsForStorage = WallItemsRef.map((item) => {
const { model, ...rest } = item;
return {
...rest,

5
app/src/modules/builder/groups/floorPlanGroup.tsx
View File

@ -17,6 +17,7 @@ import drawWall from "../geomentries/lines/drawWall";
import drawOnlyFloor from "../geomentries/floors/drawOnlyFloor";
import addDragControl from "../eventDeclaration/dragControlDeclaration";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoint, floorGroup, currentLayerPoint, dragPointControls, hoveredDeletablePoint, hoveredDeletableLine, plane, line, lines, onlyFloorline, onlyFloorlines, ReferenceLineMesh, LineCreated, isSnapped, ispreSnapped, snappedPoint, isSnappedUUID, isAngleSnapped, anglesnappedPoint }: any) => {
const state = useThree();
@ -30,6 +31,8 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
const { setDeletedLines } = useDeletedLines();
const { socket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (toolMode === 'move') {
@ -44,8 +47,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
}, [toolMode, state]);
useEffect(() => {
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
// Load data from localStorage if available
getLines(organization, projectId).then((data) => {

7
app/src/modules/builder/groups/wallItemsGroup.tsx
View File

@ -19,6 +19,7 @@ import loadInitialWallItems from "../IntialLoad/loadInitialWallItems";
import AddWallItems from "../geomentries/walls/addWallItems";
import useModuleStore from "../../../store/useModuleStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
const WallItemsGroup = ({
currentWallItem,
@ -38,6 +39,7 @@ const WallItemsGroup = ({
const { activeModule } = useModuleStore();
const { selectedItem } = useSelectedItem();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
// Load Wall Items from the backend
@ -120,9 +122,6 @@ const WallItemsGroup = ({
});
setTimeout(async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const userId = localStorage.getItem("userId");
//REST
@ -142,7 +141,7 @@ const WallItemsGroup = ({
//SOCKET
const data = {
organization: organization,
organization,
modelUuid: currentItem.model?.uuid!,
assetId: currentItem.assetId,
modelName: currentItem.modelName!,

6
app/src/modules/builder/groups/wallsMesh.tsx
View File

@ -10,18 +10,18 @@ import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLines
import loadWalls from "../geomentries/walls/loadWalls";
import texturePath from "../../../assets/textures/floor/wall-tex.png";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
const WallsMeshComponent = ({ lines }: any) => {
const { walls, setWalls } = useWalls();
const { updateScene, setUpdateScene } = useUpdateScene();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (updateScene) {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
getLines(organization,projectId).then((data) => {
getLines(organization, projectId).then((data) => {
const Lines: Types.Lines = objectLinesToArray(data);
localStorage.setItem("Lines", JSON.stringify(Lines));

19
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -18,6 +18,7 @@ import * as turf from "@turf/turf";
import { computeArea } from "../functions/computeArea";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
const ZoneGroup: React.FC = () => {
const { camera, pointer, gl, raycaster, scene, controls } = useThree();
@ -40,6 +41,7 @@ const ZoneGroup: React.FC = () => {
const { activeLayer } = useActiveLayer();
const { socket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
const groupsRef = useRef<any>();
@ -73,10 +75,8 @@ const ZoneGroup: React.FC = () => {
useEffect(() => {
const fetchZones = async () => {
const email = localStorage.getItem("email");
if (!email) return;
const organization = email.split("@")[1].split(".")[0];
const data = await getZonesApi(organization, projectId);
// console.log('data: ', data);
@ -142,9 +142,6 @@ const ZoneGroup: React.FC = () => {
points: [number, number, number][];
layer: string;
}) => {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
const organization = email!.split("@")[1].split(".")[0];
const calculateCenter = (points: number[][]) => {
if (!points || points.length === 0) return null;
@ -172,7 +169,7 @@ const ZoneGroup: React.FC = () => {
const input = {
userId: userId,
projectId,
organization: organization,
organization,
zoneData: {
zoneName: zone.zoneName,
zoneUuid: zone.zoneUuid,
@ -193,9 +190,6 @@ const ZoneGroup: React.FC = () => {
points: [number, number, number][];
layer: string;
}) => {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
const organization = email!.split("@")[1].split(".")[0];
const calculateCenter = (points: number[][]) => {
if (!points || points.length === 0) return null;
@ -223,7 +217,7 @@ const ZoneGroup: React.FC = () => {
const input = {
userId: userId,
projectId,
organization: organization,
organization,
zoneData: {
zoneName: zone.zoneName,
zoneUuid: zone.zoneUuid,
@ -238,14 +232,11 @@ const ZoneGroup: React.FC = () => {
};
const deleteZoneFromBackend = async (zoneUuid: string) => {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
const organization = email!.split("@")[1].split(".")[0];
const input = {
userId: userId,
projectId,
organization: organization,
organization,
zoneUuid: zoneUuid,
};

6
app/src/modules/collaboration/camera/collabCams.tsx
View File

@ -14,17 +14,17 @@ import { getAvatarColor } from "../functions/getAvatarColor";
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import setCameraView from "../functions/setCameraView";
import { getUserData } from "../../../functions/getUserData";
const CamModelsGroup = () => {
const navigate = useNavigate();
const groupRef = useRef<THREE.Group>(null);
const email = localStorage.getItem("email");
const { userId, organization, email } = getUserData();
const { setActiveUsers } = useActiveUsers();
const { socket } = useSocketStore();
const { activeModule } = useModuleStore();
const { selectedUser, setSelectedUser } = useSelectedUserStore();
const { isPlaying } = usePlayButtonStore();
// eslint-disable-next-line react-hooks/exhaustive-deps
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
@ -87,7 +87,6 @@ const CamModelsGroup = () => {
if (!email) navigate("/");
if (!socket) return;
const organization = email!.split("@")[1].split(".")[0];
socket.on("userConnectResponse", (data: any) => {
if (!groupRef.current) return;
@ -222,7 +221,6 @@ const CamModelsGroup = () => {
useEffect(() => {
if (!groupRef.current) return;
const organization = email!.split("@")[1].split(".")[0];
getActiveUsersData(organization).then((data) => {
const filteredData = data.cameraDatas.filter(

11
app/src/modules/collaboration/socket/socketResponses.dev.tsx
View File

@ -35,6 +35,7 @@ import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../store/builder/useAssetStore";
import { useEventsStore } from "../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../store/simulation/useProductStore";
import { getUserData } from "../../../functions/getUserData";
export default function SocketResponses({
floorPlanGroup,
@ -59,10 +60,8 @@ export default function SocketResponses({
const { zonePoints, setZonePoints } = useZonePoints();
const { projectId } = useParams();
const { addAsset, updateAsset, removeAsset } = useAssetsStore();
const { userId, organization, email } = getUserData();
useEffect(() => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
if (!socket) return;
@ -464,8 +463,6 @@ export default function SocketResponses({
useEffect(() => {
if (!socket) return;
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
socket.on("v1:wallItem:Response:Delete", (data: any) => {
@ -660,8 +657,6 @@ export default function SocketResponses({
useEffect(() => {
if (!socket) return;
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
socket.on("v1:Line:response:create", async (data: any) => {
//
@ -778,8 +773,6 @@ export default function SocketResponses({
useEffect(() => {
if (!socket) return;
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
socket.on("v1:zone:response:updates", (data: any) => {
// console.log('data: ', data);

6
app/src/modules/scene/camera/switchView.tsx
View File

@ -5,6 +5,7 @@ import { useThree } from "@react-three/fiber";
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
import * as CONSTANTS from '../../../types/world/worldConstants';
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
export default function SwitchView() {
const { toggleView } = useToggleView();
@ -15,6 +16,7 @@ export default function SwitchView() {
orthoCamera.current = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.01, 1000);
perspectiveCamera.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (!perspectiveCamera.current || !orthoCamera.current) return;
@ -38,9 +40,7 @@ export default function SwitchView() {
state.controls.mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
} else {
try {
const email = localStorage.getItem('email');
const organization = (email!.split("@")[1]).split(".")[0];
getCamera(organization, localStorage.getItem('userId')!,projectId).then((data) => {
getCamera(organization, localStorage.getItem('userId')!, projectId).then((data) => {
if (data && data.position && data.target) {
state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
state.controls?.setTarget(data.target.x, data.target.y, data.target.z);

19
app/src/modules/scene/camera/updateCameraPosition.ts
View File

@ -1,29 +1,32 @@
import { Socket } from "socket.io-client";
import * as THREE from 'three';
import * as THREE from "three";
import { getUserData } from "../../../functions/getUserData";
export default function updateCamPosition(
controls: any,
socket: Socket,
position: THREE.Vector3,
rotation: THREE.Euler,
projectId?:string
projectId?: string
) {
const { userId, organization, email } = getUserData();
if (!controls.current) return;
const target = controls.current.getTarget(new THREE.Vector3());
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const camData = {
organization: organization,
userId: localStorage.getItem("userId")!,
organization,
userId: userId,
position: position,
target: new THREE.Vector3(target.x, 0, target.z),
rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
socketId: socket.id,
projectId
projectId,
};
// console.log('CameracamData: ', camData);
socket.emit("v1:Camera:set", camData);
localStorage.setItem("cameraPosition", JSON.stringify(position));
localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(target.x, 0, target.z)));
localStorage.setItem(
"controlTarget",
JSON.stringify(new THREE.Vector3(target.x, 0, target.z))
);
}

12
app/src/modules/scene/controls/controls.tsx
View File

@ -12,6 +12,7 @@ import SwitchView from "../camera/switchView";
import SelectionControls from "./selectionControls/selectionControls";
import TransformControl from "./transformControls/transformControls";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
export default function Controls() {
const controlsRef = useRef<CameraControls>(null);
@ -21,16 +22,14 @@ export default function Controls() {
const { socket } = useSocketStore();
const state = useThree();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (controlsRef.current) {
(controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
(controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
}
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const userId = localStorage.getItem("userId")!;
getCamera(organization, userId, projectId).then((data) => {
// console.log('data: ', data);
@ -54,12 +53,9 @@ export default function Controls() {
localStorage.setItem("cameraPosition", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition)));
localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget)));
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
const camData = {
organization: organization,
organization,
userId: userId,
position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),

8
app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
View File

@ -8,6 +8,7 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { getUserData } from "../../../../functions/getUserData";
const CopyPasteControls = ({
copiedObjects,
@ -30,6 +31,7 @@ const CopyPasteControls = ({
const { addEvent } = useEventsStore();
const { projectId } = useParams();
const { assets, addAsset } = useAssetsStore();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (!camera || !scene || toggleView) return;
@ -146,8 +148,6 @@ const CopyPasteControls = ({
const addPastedObjects = () => {
if (pastedObjects.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
pastedObjects.forEach(async (obj: THREE.Object3D) => {
if (obj) {
@ -332,8 +332,7 @@ const CopyPasteControls = ({
}
newFloorItem.eventData = eventData;
const userId = localStorage.getItem("userId"); //REST
//REST
// await setFloorItemApi(
// organization,
@ -404,7 +403,6 @@ const CopyPasteControls = ({
// );
//SOCKET
const userId = localStorage.getItem("userId");
const data = {
organization,
modelUuid: newFloorItem.modelUuid,

6
app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
View File

@ -8,6 +8,7 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { getUserData } from "../../../../functions/getUserData";
const DuplicationControls = ({
duplicatedObjects,
@ -28,6 +29,7 @@ const DuplicationControls = ({
const { addEvent } = useEventsStore();
const { projectId } = useParams();
const { assets, addAsset } = useAssetsStore();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (!camera || !scene || toggleView) return;
@ -121,8 +123,6 @@ const DuplicationControls = ({
const addDuplicatedAssets = () => {
if (duplicatedObjects.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
duplicatedObjects.forEach(async (obj: THREE.Object3D) => {
if (obj) {
@ -307,7 +307,6 @@ const DuplicationControls = ({
newFloorItem.eventData = eventData;
const userId = localStorage.getItem("userId");
//REST
// await setFloorItemApi(
@ -358,7 +357,6 @@ const DuplicationControls = ({
} else {
const userId = localStorage.getItem("userId");
//REST
// await setFloorItemApi(

5
app/src/modules/scene/controls/selectionControls/moveControls.tsx
View File

@ -13,6 +13,7 @@ import DistanceFindingControls from "./distanceFindingControls";
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { useProductContext } from "../../../simulation/products/productContext";
import { getUserData } from "../../../../functions/getUserData";
function MoveControls({
movedObjects,
@ -35,9 +36,7 @@ function MoveControls({
const { selectedProduct } = selectedProductStore();
const { socket } = useSocketStore();
const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("");
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
const { projectId } = useParams();
const { updateAsset } = useAssetsStore();
const AssetGroup = useRef<THREE.Group | undefined>(undefined);

6
app/src/modules/scene/controls/selectionControls/rotateControls.tsx
View File

@ -10,6 +10,7 @@ import { upsertProductOrEventApi } from "../../../../services/simulation/product
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { useProductContext } from "../../../simulation/products/productContext";
import { getUserData } from "../../../../functions/getUserData";
function RotateControls({
rotatedObjects,
@ -31,10 +32,7 @@ function RotateControls({
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { socket } = useSocketStore();
const email = localStorage.getItem('email')
const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
const { projectId } = useParams();
const { updateAsset } = useAssetsStore();
const AssetGroup = useRef<THREE.Group | undefined>(undefined);

7
app/src/modules/scene/controls/selectionControls/selectionControls.tsx
View File

@ -17,6 +17,7 @@ import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { getUserData } from "../../../../functions/getUserData";
const SelectionControls: React.FC = () => {
const { camera, controls, gl, scene, raycaster, pointer } = useThree();
@ -43,6 +44,7 @@ const SelectionControls: React.FC = () => {
const rightClickMoved = useRef(false);
const isCtrlSelecting = useRef(false);
const isShiftSelecting = useRef(false);
const { userId, organization, email } = getUserData();
useEffect(() => {
if (!camera || !scene || toggleView) return;
@ -251,9 +253,6 @@ const SelectionControls: React.FC = () => {
const deleteSelection = () => {
if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const userId = localStorage.getItem("userId");
const storedItems = JSON.parse(localStorage.getItem("FloorItems") ?? "[]");
const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
@ -269,7 +268,7 @@ const SelectionControls: React.FC = () => {
//SOCKET
const data = {
organization: organization,
organization,
modelUuid: selectedMesh.userData.modelUuid,
modelName: selectedMesh.userData.modelName,
socketId: socket.id,

6
app/src/modules/scene/controls/transformControls/transformControls.tsx
View File

@ -12,6 +12,7 @@ import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floo
import { useParams } from "react-router-dom";
import { useAssetsStore } from "../../../../store/builder/useAssetStore";
import { useProductContext } from "../../../simulation/products/productContext";
import { getUserData } from "../../../../functions/getUserData";
export default function TransformControl() {
const state = useThree();
@ -24,10 +25,7 @@ export default function TransformControl() {
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { updateAsset, getAssetById } = useAssetsStore();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
const { projectId } = useParams();
const updateBackend = (

2
app/src/modules/scene/scene.tsx
View File

@ -11,7 +11,7 @@ import Collaboration from "../collaboration/collaboration";
import useModuleStore from "../../store/useModuleStore";
import { useParams } from "react-router-dom";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { getUserData } from "../../components/Dashboard/functions/getUserData";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { useAssetsStore } from "../../store/builder/useAssetStore";

5
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@ -15,6 +15,7 @@ import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected, } f
import OuterClick from "../../utils/outerClick";
import { useWidgetStore } from "../../store/useWidgetStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../functions/getUserData";
type Side = "top" | "bottom" | "left" | "right";
@ -72,11 +73,9 @@ const RealTimeVisulization: React.FC = () => {
],
setMenuVisible: () => setSelectedChartId(null),
});
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
async function GetZoneData() {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
try {
const response = await getZone2dData(organization, projectId);
// console.log('responseRt: ', response);

16
app/src/modules/visualization/functions/handleSaveTemplate.ts
View File

@ -1,3 +1,4 @@
import { getUserData } from "../../../functions/getUserData";
import { Template } from "../../../store/useTemplateStore";
import { captureVisualization } from "./captureVisualization";
@ -11,7 +12,7 @@ type HandleSaveTemplateProps = {
};
templates?: Template[];
visualizationSocket: any;
projectId?:string
projectId?: string;
};
// Generate a unique ID
@ -26,9 +27,10 @@ export const handleSaveTemplate = async ({
selectedZone,
templates = [],
visualizationSocket,
projectId
projectId,
}: HandleSaveTemplateProps): Promise<void> => {
try {
const { userId, organization, email } = getUserData();
// Check if the selected zone has any widgets
if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
return;
@ -66,18 +68,14 @@ export const handleSaveTemplate = async ({
};
// Extract organization from email
const email = localStorage.getItem("email") || "";
const organization = email.includes("@")
? email.split("@")[1]?.split(".")[0]
: "";
const userId = localStorage.getItem("userId");
if (!organization) {
return;
}
let saveTemplate = {
organization: organization,
organization,
template: newTemplate,
userId,projectId
userId,
projectId,
};
if (visualizationSocket) {
visualizationSocket.emit("v1:viz-template:add", saveTemplate);

19
app/src/modules/visualization/functions/handleUiDrop.ts
View File

@ -1,5 +1,5 @@
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { getUserData } from "../../../functions/getUserData";
import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
import { determinePosition } from "./determinePosition";
import { getActiveProperties } from "./getActiveProperties";
@ -10,7 +10,7 @@ interface HandleDropProps {
selectedZone: any;
setFloatingWidget: (value: any) => void;
event: React.DragEvent<HTMLDivElement>;
projectId?:string
projectId?: string;
}
export const createHandleDrop = ({
@ -18,14 +18,12 @@ export const createHandleDrop = ({
visualizationSocket,
selectedZone,
setFloatingWidget,
event,projectId
event,
projectId,
}: HandleDropProps) => {
event.preventDefault();
try {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
const data = event.dataTransfer.getData("text/plain");
if (widgetSubOption === "3D") return;
@ -98,11 +96,12 @@ export const createHandleDrop = ({
organization,
widget: newObject,
zoneUuid: selectedZone.zoneUuid,
projectId,userId
projectId,
userId,
};
console.log('addFloatingWidget: ', addFloatingWidget);
console.log("addFloatingWidget: ", addFloatingWidget);
console.log('visualizationSocket: ', visualizationSocket);
console.log("visualizationSocket: ", visualizationSocket);
if (visualizationSocket) {
visualizationSocket.emit("v1:viz-float:add", addFloatingWidget);
}

22
app/src/modules/visualization/template/Templates.tsx
View File

@ -6,6 +6,7 @@ import { getTemplateData } from "../../../services/visulization/zone/getTemplate
import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
import RenameInput from "../../../components/ui/inputs/RenameInput";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
const Templates = () => {
@ -13,13 +14,12 @@ const Templates = () => {
const { setSelectedZone, selectedZone } = useSelectedZoneStore();
const { visualizationSocket } = useSocketStore();
const { projectId } = useParams();
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
async function templateData() {
try {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getTemplateData(organization,projectId);
let response = await getTemplateData(organization, projectId);
setTemplates(response);
} catch (error) {
echo.error("Failed to fetching template data");
@ -36,13 +36,11 @@ const Templates = () => {
) => {
try {
e.stopPropagation();
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
let deleteTemplate = {
organization: organization,
organization,
templateID: id,
userId,projectId
userId, projectId
};
if (visualizationSocket) {
visualizationSocket.emit(
@ -60,15 +58,13 @@ const Templates = () => {
const handleLoadTemplate = async (template: any) => {
try {
if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
let loadingTemplate = {
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
templateID: template.id,
projectId,userId
projectId, userId
};
if (visualizationSocket) {

27
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@ -19,6 +19,7 @@ import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import OuterClick from "../../../../utils/outerClick";
import useChartStore from "../../../../store/visualization/useChartStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
type Side = "top" | "bottom" | "left" | "right";
@ -83,13 +84,13 @@ export const DraggableWidget = ({
}>({});
const { measurements, duration, name } = useChartStore();
const { isPlaying } = usePlayButtonStore();
const { userId, organization, email } = getUserData();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
const { projectId } = useParams();
useEffect(() => {}, [measurements, duration, name]);
useEffect(() => { }, [measurements, duration, name]);
const handlePointerDown = () => {
if (selectedChartId?.id !== widget.id) {
setSelectedChartId(widget);
@ -100,14 +101,12 @@ export const DraggableWidget = ({
const deleteSelectedChart = async () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
let deleteWidget = {
zoneUuid: selectedZone.zoneUuid,
widgetID: widget.id,
organization: organization,
projectId,userId
organization,
projectId, userId
};
if (visualizationSocket) {
@ -173,9 +172,7 @@ export const DraggableWidget = ({
const duplicateWidget = async () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const duplicatedWidget: Widget = {
...widget,
@ -188,10 +185,10 @@ export const DraggableWidget = ({
};
let duplicateWidget = {
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: duplicatedWidget,
projectId,userId
projectId, userId
};
if (visualizationSocket) {
@ -297,8 +294,7 @@ export const DraggableWidget = ({
<div
draggable
key={widget.id}
className={`chart-container ${
selectedChartId?.id === widget.id && !isPlaying && "activeChart"
className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
}`}
onPointerDown={handlePointerDown}
onDragStart={handleDragStart}
@ -327,8 +323,7 @@ export const DraggableWidget = ({
{openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}>
<div
className={`edit btn ${
isPanelFull(widget.panel) ? "btn-blur" : ""
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={duplicateWidget}
>

4
app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
View File

@ -10,6 +10,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
interface ChartComponentProps {
id: string;
@ -47,11 +48,10 @@ const BarGraphComponent = ({
const { selectedChartId } = useWidgetStore();
const { selectedZone } = useSelectedZoneStore();
const { projectId } = useParams();
const { userName, userId, organization, email } = getUserData();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [

10
app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
View File

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { useParams } from "react-router-dom";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { getUserData } from "../../../../../functions/getUserData";
interface ChartComponentProps {
id: string;
@ -41,8 +42,7 @@ const DoughnutGraphComponent = ({
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const { userName, userId, organization, email } = getUserData();
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
@ -58,7 +58,7 @@ const DoughnutGraphComponent = ({
useEffect(() => {
},[])
}, [])
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
@ -160,7 +160,7 @@ const DoughnutGraphComponent = ({
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (id !== "") {
try {
@ -198,7 +198,7 @@ const DoughnutGraphComponent = ({
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
, [chartMeasurements, chartDuration, widgetName])
return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};

6
app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx
View File

@ -8,6 +8,7 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { useParams } from "react-router-dom";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { getUserData } from "../../../../../functions/getUserData";
interface ChartComponentProps {
id: string;
@ -48,8 +49,7 @@ const LineGraphComponent = ({
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
@ -63,7 +63,7 @@ const LineGraphComponent = ({
],
};
useEffect(() => {}, []);
useEffect(() => { }, []);
// Memoize Theme Colors
const buttonActionColor = useMemo(

6
app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
View File

@ -8,6 +8,7 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
interface ChartComponentProps {
id: string;
@ -47,8 +48,7 @@ const PieChartComponent = ({
const { projectId } = useParams();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
@ -62,7 +62,7 @@ const PieChartComponent = ({
],
};
useEffect(() => {}, []);
useEffect(() => { }, []);
// Memoize Theme Colors
const buttonActionColor = useMemo(

6
app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx
View File

@ -8,6 +8,7 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
interface ChartComponentProps {
id: string;
@ -47,8 +48,7 @@ const PolarAreaGraphComponent = ({
const { projectId } = useParams();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
@ -62,7 +62,7 @@ const PolarAreaGraphComponent = ({
],
};
useEffect(() => {}, []);
useEffect(() => { }, []);
// Memoize Theme Colors
const buttonActionColor = useMemo(

4
app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx
View File

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
const {
@ -24,8 +25,7 @@ const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
const { projectId } = useParams();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
const socket = io(`http://${iotApiUrl}`);

4
app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx
View File

@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
const {
@ -25,8 +26,7 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
const { projectId } = useParams();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)

21
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@ -27,6 +27,7 @@ import Throughput from "./cards/Throughput";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/visualization/useChartStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
type WidgetData = {
id: string;
@ -78,13 +79,11 @@ export default function Dropped3dWidgets() {
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneUuid] || [];
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
useEffect(() => {
if (activeModule !== "visualization") return;
if (!selectedZone.zoneUuid) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
async function get3dWidgetData() {
const result = await get3dWidgetZoneData(
@ -208,9 +207,6 @@ export default function Dropped3dWidgets() {
hasEntered.current = false;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const newWidget = createdWidgetRef.current;
if (!newWidget || !widgetSelect.startsWith("ui")) return;
@ -283,9 +279,7 @@ export default function Dropped3dWidgets() {
useEffect(() => {
if (!rightClickSelected) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
if (rightSelect === "Duplicate") {
async function duplicateWidget() {
@ -310,7 +304,7 @@ export default function Dropped3dWidgets() {
},
};
const adding3dWidget = {
organization: organization,
organization,
widget: newWidget,
zoneUuid: selectedZone.zoneUuid,
projectId, userId
@ -380,9 +374,6 @@ export default function Dropped3dWidgets() {
const [prevX, setPrevX] = useState(0);
useEffect(() => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedzoneUuid = Object.keys(zoneWidgetData).find(
@ -634,7 +625,7 @@ export default function Dropped3dWidgets() {
// }
// })();
let updatingPosition = {
organization: organization,
organization,
zoneUuid: selectedzoneUuid,
id: rightClickSelected,
position: lastPosition,
@ -659,7 +650,7 @@ export default function Dropped3dWidgets() {
// }
// })();
let updatingRotation = {
organization: organization,
organization,
zoneUuid: selectedzoneUuid,
id: rightClickSelected,
rotation: lastRotation,

6
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@ -16,6 +16,7 @@ import axios from "axios";
import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { getUserData } from "../../../../../functions/getUserData";
// Register ChartJS components
ChartJS.register(
@ -67,8 +68,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
datasets: [],
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
// Chart data for a week
const defaultChartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@ -197,7 +197,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}
}, [chartMeasurements, chartDuration, widgetName]);
useEffect(() => {}, [rotation]);
useEffect(() => { }, [rotation]);
return (
<>

7
app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@ -17,6 +17,7 @@ import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
import { getUserData } from "../../../../../functions/getUserData";
// Register Chart.js components
ChartJS.register(
@ -77,8 +78,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
datasets: [],
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
// Improved sample data for the smooth curve graph (single day)
const graphData: ChartData<"line"> = {
labels: [
@ -250,8 +250,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
>
<div
className={`returnOfInvestment card ${
selectedChartId?.id === id ? "activeChart" : ""
className={`returnOfInvestment card ${selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

7
app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@ -5,6 +5,7 @@ import axios from "axios";
import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { getUserData } from "../../../../../functions/getUserData";
// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
@ -38,8 +39,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({
const [name, setName] = useState("Widget");
const [datas, setDatas] = useState<any>({});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
// const datas = [
// { key: "Oil Tank:", value: "24/341" },
// { key: "Oil Refin:", value: 36.023 },
@ -131,8 +131,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({
// }}
>
<div
className={`stateWorking-wrapper card ${
selectedChartId?.id === id ? "activeChart" : ""
className={`stateWorking-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}

4
app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@ -19,6 +19,7 @@ import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
import { getUserData } from "../../../../../functions/getUserData";
// Register Chart.js components
ChartJS.register(
@ -80,8 +81,7 @@ const Throughput: React.FC<ThroughputProps> = ({
datasets: [],
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();

36
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@ -19,6 +19,7 @@ import { useSocketStore } from "../../../../store/builder/store";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
interface DraggingState {
zone: string;
index: number;
@ -78,7 +79,7 @@ const DroppedObjects: React.FC = () => {
const chartWidget = useRef<HTMLDivElement>(null);
const kebabRef = useRef<HTMLDivElement>(null);
const { userId, organization, email } = getUserData();
// Clean up animation frame on unmount
useEffect(() => {
return () => {
@ -112,22 +113,19 @@ const DroppedObjects: React.FC = () => {
function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null);
duplicateObject(zoneName, index,projectId); // Call the duplicateObject method from the store
duplicateObject(zoneName, index, projectId); // Call the duplicateObject method from the store
setSelectedChartId(null);
}
async function handleDelete(zoneName: string, id: string) {
try {
setSelectedChartId(null);
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
let deleteFloatingWidget = {
floatWidgetID: id,
organization: organization,
organization,
zoneUuid: zone.zoneUuid,
userId,projectId
userId, projectId
};
if (visualizationSocket) {
@ -296,8 +294,6 @@ const DroppedObjects: React.FC = () => {
try {
// Save to backend
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const response = await addingFloatingWidgets(
zone.zoneUuid,
organization,
@ -432,10 +428,8 @@ const DroppedObjects: React.FC = () => {
};
// Save to backend
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let updateFloatingWidget = {
organization: organization,
organization,
widget: {
...zone.objects[draggingIndex.index],
position: boundedPosition,
@ -491,8 +485,7 @@ const DroppedObjects: React.FC = () => {
{zone?.objects?.map((obj, index) => {
const topPosition =
typeof obj?.position?.top === "number"
? `calc(${obj?.position?.top}px + ${
isPlaying && selectedZone?.activeSides?.includes("top")
? `calc(${obj?.position?.top}px + ${isPlaying && selectedZone?.activeSides?.includes("top")
? `${heightMultiplier - 55}px`
: "0px"
})`
@ -500,8 +493,7 @@ const DroppedObjects: React.FC = () => {
const leftPosition =
typeof obj?.position?.left === "number"
? `calc(${obj?.position?.left}px + ${
isPlaying && selectedZone?.activeSides?.includes("left")
? `calc(${obj?.position?.left}px + ${isPlaying && selectedZone?.activeSides?.includes("left")
? `${widthMultiplier - 150}px`
: "0px"
})`
@ -509,16 +501,14 @@ const DroppedObjects: React.FC = () => {
const rightPosition =
typeof obj?.position?.right === "number"
? `calc(${obj?.position?.right}px + ${
isPlaying && selectedZone?.activeSides?.includes("right")
? `calc(${obj?.position?.right}px + ${isPlaying && selectedZone?.activeSides?.includes("right")
? `${widthMultiplier - 150}px`
: "0px"
})`
: "auto";
const bottomPosition =
typeof obj?.position?.bottom === "number"
? `calc(${obj?.position?.bottom}px + ${
isPlaying && selectedZone?.activeSides?.includes("bottom")
? `calc(${obj?.position?.bottom}px + ${isPlaying && selectedZone?.activeSides?.includes("bottom")
? `${heightMultiplier - 55}px`
: "0px"
})`
@ -527,8 +517,7 @@ const DroppedObjects: React.FC = () => {
return (
<div
key={`${obj.id}-${index}`}
className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart"
className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"
} `}
ref={chartWidget}
style={{
@ -538,8 +527,7 @@ const DroppedObjects: React.FC = () => {
right: rightPosition,
bottom: bottomPosition,
pointerEvents: isPlaying ? "none" : "auto",
minHeight: `${
obj.className === "warehouseThroughput" && "150px !important"
minHeight: `${obj.className === "warehouseThroughput" && "150px !important"
} `,
}}
onPointerDown={(event) => {

4
app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
View File

@ -5,14 +5,14 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import io from "socket.io-client";
import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
import { getUserData } from "../../../../../functions/getUserData";
const FleetEfficiencyComponent = ({ object }: any) => {
const [progress, setProgress] = useState<any>(0);
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [name, setName] = useState(object.header ? object.header : "");
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore();
const { isPlaying } = usePlayButtonStore();

7
app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
View File

@ -10,15 +10,14 @@ import {
GlobeIcon,
WalletIcon,
} from "../../../../../components/icons/3dChartIcons";
import { getUserData } from "../../../../../functions/getUserData";
const TotalCardComponent = ({ object }: any) => {
const [progress, setProgress] = useState<any>(0);
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [name, setName] = useState(object.header ? object.header : "");
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore();
@ -70,7 +69,7 @@ const TotalCardComponent = ({ object }: any) => {
} else {
echo.error("Failed to fetch saved inputs");
}
} catch (error) {}
} catch (error) { }
}
};

4
app/src/modules/visualization/widgets/floating/cards/WarehouseThroughputComponent.tsx
View File

@ -4,6 +4,7 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import io from "socket.io-client";
import { getUserData } from "../../../../../functions/getUserData";
const WarehouseThroughputComponent = ({ object }: any) => {
const [measurements, setmeasurements] = useState<any>({});
@ -16,8 +17,7 @@ const WarehouseThroughputComponent = ({ object }: any) => {
labels: [],
datasets: [],
});
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { userName, userId, organization, email } = getUserData();
const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore();

22
app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@ -7,6 +7,7 @@ import {
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/builder/store";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@ -70,6 +71,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
}) => {
const { visualizationSocket } = useSocketStore();
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
// Function to toggle visibility of a panel
const toggleVisibility = (side: Side) => {
@ -97,9 +100,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to toggle lock/unlock a panel
const toggleLockPanel = async (side: Side) => {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
const userId = localStorage.getItem("userId");
//add api
const newLockedPanels = selectedZone.lockedPanels.includes(side)
? selectedZone.lockedPanels.filter((panel) => panel !== side)
@ -111,7 +111,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
let lockedPanel = {
organization: organization,
organization,
lockedPanel: newLockedPanels,
zoneUuid: selectedZone.zoneUuid,
userId, projectId
@ -133,12 +133,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
)
return;
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
const userId = localStorage.getItem("userId");
let clearPanel = {
organization: organization,
organization,
panelName: side,
zoneUuid: selectedZone.zoneUuid,
userId, projectId
@ -169,10 +167,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
setTimeout(() => {
console.log("Removing after wait...");
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
const userId = localStorage.getItem("userId");
// Remove widgets for that side
const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side
@ -215,10 +209,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
} else {
// Panel does not exist: Add it
try {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
const userId = localStorage.getItem("userId");
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
: [...selectedZone.activeSides, side];

9
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@ -6,6 +6,7 @@ import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import { DraggableWidget } from "../2d/DraggableWidget";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
type Side = "top" | "bottom" | "left" | "right";
@ -69,6 +70,8 @@ const Panel: React.FC<PanelProps> = ({
height: 0,
});
const { projectId } = useParams();
const { userId, organization, email } = getUserData();
// Track canvas dimensions
useEffect(() => {
@ -182,9 +185,7 @@ const Panel: React.FC<PanelProps> = ({
// Add widget to panel
const addWidgetToPanel = async (asset: any, panel: Side) => {
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const newWidget = {
...asset,
@ -193,7 +194,7 @@ const Panel: React.FC<PanelProps> = ({
};
let addWidget = {
organization: organization,
organization,
zoneUuid: selectedZone.zoneUuid,
widget: newWidget,
projectId, userId

5
app/src/modules/visualization/zone/DisplayZone.tsx
View File

@ -15,6 +15,7 @@ import {
import { InfoIcon } from "../../../components/icons/ExportCommonIcons";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@ -91,7 +92,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const [showRightArrow, setShowRightArrow] = useState(false);
const { floatingWidget, setFloatingWidget } = useFloatingWidget();
const { isPlaying } = usePlayButtonStore();
const { userName, userId, organization, email } = getUserData();
const { setSelectedChartId } = useWidgetStore();
const { projectId } = useParams();
// Function to calculate overflow state
@ -174,8 +175,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
return;
}
// setSelectedChartId(null);
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneUuid, organization, projectId);
// console.log('response2d: ', response);

2
app/src/pages/Dashboard.tsx
View File

@ -5,7 +5,7 @@ import {
import DashboardHome from "../components/Dashboard/DashboardHome";
import DashboardProjects from "../components/Dashboard/DashboardProjects";
import DashboardTrash from "../components/Dashboard/DashboardTrash";
import { getUserData } from "../components/Dashboard/functions/getUserData";
import { getUserData } from "../functions/getUserData";
import SidePannel from "../components/Dashboard/SidePannel";
import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
import { useProductStore } from "../store/simulation/useProductStore";

27
app/src/pages/Project.tsx
View File

@ -34,6 +34,7 @@ import { setFloorItemApi } from "../services/factoryBuilder/assest/floorAsset/se
import { useAssetsStore } from "../store/builder/useAssetStore";
import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
import MainSceneProvider from "../components/layout/scenes/MainSceneProvider";
import { getUserData } from "../functions/getUserData";
const Project: React.FC = () => {
let navigate = useNavigate();
@ -49,31 +50,22 @@ const Project: React.FC = () => {
const { setProducts } = useProductStore();
const { projectId } = useParams();
const { setProjectName } = useProjectName();
const { userId, email, organization, userName } = getUserData();
const generateThumbnail = async () => {
const email = localStorage.getItem("email");
const userId = localStorage.getItem("userId");
try {
if (!email || !userId) {
console.error("User data not found in localStorage");
return;
}
const emailParts = email.split("@");
if (emailParts.length < 2) {
console.error("Invalid email format");
return;
}
const domainParts = emailParts[1].split(".");
const Organization = domainParts[0];
const projects = await getAllProjects(
userId, Organization
userId, organization
);
const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
=== projectId)
const viewedProject = await viewProject(
Organization,
organization,
filterProject._id,
userId,
);
@ -106,17 +98,14 @@ const Project: React.FC = () => {
setZones([]);
setProducts([]);
setActiveModule("builder");
const email = localStorage.getItem("email");
if (email) {
const Organization = email.split("@")[1].split(".")[0];
const token = localStorage.getItem("token");
if (token) {
useSocketStore.getState().initializeSocket(email, Organization, token);
useSocketStore.getState().initializeSocket(email, organization, token);
}
const name = localStorage.getItem("userName");
if (Organization && name) {
setOrganization(Organization);
setUserName(name);
if (organization && userName) {
setOrganization(organization);
setUserName(userName);
}
echo.success("Log in successful");
} else {

10
app/src/pages/UserAuth.tsx
View File

@ -11,7 +11,7 @@ import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
import FingerprintJS from "@fingerprintjs/fingerprintjs";
import { recentlyViewed } from "../services/dashboard/recentlyViewed";
import { getUserData } from "../components/Dashboard/functions/getUserData";
import { getUserData } from "../functions/getUserData";
const UserAuth: React.FC = () => {
const [email, setEmail] = useState("");
@ -56,16 +56,16 @@ const UserAuth: React.FC = () => {
localStorage.setItem("refreshToken", res.message.refreshToken);
try {
// console.log('res.message.userId: ', res.message.userId);
// console.log('organization: ', organization);
const projects = await recentlyViewed(organization, res.message.userId);
// console.log('projects: ', projects);
if (res.message.isShare) {
if (Object.values(projects.RecentlyViewed).length > 0) {
const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == firstId)) {
setLoadingProgress(1)
navigate(`/${firstId}`)
} else {
navigate("/Dashboard")
}
} else {
setLoadingProgress(1);
navigate("/Dashboard");

32
app/src/store/visualization/useDroppedObjectsStore.ts
View File

@ -1,6 +1,7 @@
import { create } from "zustand";
import { useSocketStore } from "../builder/store";
import useChartStore from "./useChartStore";
import { getUserData } from "../../functions/getUserData";
type DroppedObject = {
className: string;
@ -38,7 +39,11 @@ type DroppedObjectsState = {
}
) => void;
deleteObject: (zoneName: string, id: string) => void; // Add this line
duplicateObject: (zoneName: string, index: number, projectId?: string) => void; // Add this line
duplicateObject: (
zoneName: string,
index: number,
projectId?: string
) => void; // Add this line
};
export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
@ -47,7 +52,11 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
setZone: (zoneName: string, zoneUuid: string) =>
set((state) => ({
zones: {
[zoneName]: state.zones[zoneName] || { zoneName, zoneUuid, objects: [] }, // Keep existing zone if it exists
[zoneName]: state.zones[zoneName] || {
zoneName,
zoneUuid,
objects: [],
}, // Keep existing zone if it exists
},
})),
@ -92,7 +101,11 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
},
};
}),
duplicateObject: async (zoneName: string, index: number, projectId?: string) => {
duplicateObject: async (
zoneName: string,
index: number,
projectId?: string
) => {
const state = useDroppedObjectsStore.getState(); // Get the current state
const zone = state.zones[zoneName];
let socketState = useSocketStore.getState();
@ -100,16 +113,13 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
let visualizationSocket = socketState.visualizationSocket;
let iotMeasurements = iotData.flotingMeasurements;
let iotDuration = iotData.flotingDuration;
let iotHeader = iotData.header
let iotHeader = iotData.header;
if (!zone) return;
const originalObject = zone.objects[index];
if (!originalObject) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const userId = localStorage.getItem("userId");
const { userId, organization, email } = getUserData();
// Create a shallow copy of the object with a unique ID and slightly adjusted position
const duplicatedObject: DroppedObject = {
@ -135,12 +145,12 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
console.log("duplicated object", duplicatedObject);
let duplicateFloatingWidget = {
organization: organization,
organization,
widget: duplicatedObject,
zoneUuid: zone.zoneUuid,
index: index,
projectId, userId
projectId,
userId,
};
if (visualizationSocket) {