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

changed marketplace assets

Browse Source
This commit is contained in:
Poovizhi99
2025-04-01 14:27:08 +05:30
parent 21d96a31bc 6f483baf8d
commit a9bfef7693
92 changed files with 4152 additions and 2071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/src/components/layout/Dashboard/DashboardCard.tsx
View File

@@ -1,25 +1,25 @@
import React from "react";
import { KebabIcon } from "../../icons/ExportCommonIcons";
import img from "../../../assets/image/image.png"
const DashboardCard:React.FC = () => {
return (
<div className="dashboard-card-container">
<div className="preview-container">
<img src={img} alt="" />
</div>
<div className="project-details-container">
<div className="project-details">
<div className="project-name">Untitled</div>
<div className="project-data">24-12-2025</div>
</div>
<div className="users-list-container">
<div className="user-profile">V</div>
<KebabIcon />
</div>
</div>
</div>
);
};
export default DashboardCard;
import React from "react";
import { KebabIcon } from "../../icons/ExportCommonIcons";
import img from "../../../assets/image/image.png"
const DashboardCard:React.FC = () => {
return (
<div className="dashboard-card-container">
<div className="preview-container">
<img src={img} alt="" />
</div>
<div className="project-details-container">
<div className="project-details">
<div className="project-name">Untitled</div>
<div className="project-data">24-12-2025</div>
</div>
<div className="users-list-container">
<div className="user-profile">V</div>
<KebabIcon />
</div>
</div>
</div>
);
};
export default DashboardCard;

42
app/src/components/layout/Dashboard/DashboardHome.tsx
View File

@@ -1,21 +1,21 @@
import React from "react";
import DashboardCard from "./DashboardCard";
import DashboardNavBar from "./DashboardNavBar";
import MarketPlaceBanner from "./MarketPlaceBanner";
const DashboardHome: React.FC = () => {
return (
<div className="dashboard-home-container">
<DashboardNavBar page={"home"} />
<MarketPlaceBanner />
<div className="container">
<div className="header">Recents</div>
<div className="cards-container">
<DashboardCard />
</div>
</div>
</div>
);
};
export default DashboardHome;
import React from "react";
import DashboardCard from "./DashboardCard";
import DashboardNavBar from "./DashboardNavBar";
import MarketPlaceBanner from "./MarketPlaceBanner";
const DashboardHome: React.FC = () => {
return (
<div className="dashboard-home-container">
<DashboardNavBar page={"home"} />
<MarketPlaceBanner />
<div className="container">
<div className="header">Recents</div>
<div className="cards-container">
<DashboardCard />
</div>
</div>
</div>
);
};
export default DashboardHome;

42
app/src/components/layout/Dashboard/DashboardNavBar.tsx
View File

@@ -1,21 +1,21 @@
import React from "react";
import { CartIcon } from "../../icons/ExportModuleIcons";
import Search from "../../ui/inputs/Search";
interface DashboardNavBarProps {
page: React.ReactNode;
}
const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
return (
<div className="dashboard-navbar-container">
<div className="title">{page}</div>
<div className="market-place-button">
<CartIcon isActive /> Market Place
</div>
<Search onChange={() => {}} />
</div>
);
};
export default DashboardNavBar;
import React from "react";
import { CartIcon } from "../../icons/ExportModuleIcons";
import Search from "../../ui/inputs/Search";
interface DashboardNavBarProps {
page: React.ReactNode;
}
const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
return (
<div className="dashboard-navbar-container">
<div className="title">{page}</div>
<div className="market-place-button">
<CartIcon isActive /> Market Place
</div>
<Search onChange={() => {}} />
</div>
);
};
export default DashboardNavBar;

88
app/src/components/layout/Dashboard/MarketPlaceBanner.tsx
View File

@@ -1,44 +1,44 @@
import React from "react";
import banner from "../../../assets/image/banner.png";
const MarketPlaceBanner = () => {
return (
<div className="market-place-banner-container">
{/* market place banner */}
<img src={banner} alt="" />
<div className="hero-text">
NEW
<br /> FALL
<br /> COLLECTION
</div>
<div className="context">Unlock Creativity with Premium 3D Assets!</div>
<div className="arrow-context">
<svg
width="169"
height="120"
viewBox="0 0 169 120"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="explore-button">Explore Now</div>
</div>
);
};
export default MarketPlaceBanner;
import React from "react";
import banner from "../../../assets/image/banner.png";
const MarketPlaceBanner = () => {
return (
<div className="market-place-banner-container">
{/* market place banner */}
<img src={banner} alt="" />
<div className="hero-text">
NEW
<br /> FALL
<br /> COLLECTION
</div>
<div className="context">Unlock Creativity with Premium 3D Assets!</div>
<div className="arrow-context">
<svg
width="169"
height="120"
viewBox="0 0 169 120"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
stroke="white"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div className="explore-button">Explore Now</div>
</div>
);
};
export default MarketPlaceBanner;

138
app/src/components/layout/Dashboard/SidePannel.tsx
View File

@@ -1,69 +1,69 @@
import React from "react";
import {
DocumentationIcon,
HelpIcon,
HomeIcon,
LogoutIcon,
NotificationIcon,
ProjectsIcon,
TutorialsIcon,
} from "../../icons/DashboardIcon";
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
const SidePannel: React.FC = () => {
const userName = localStorage.getItem("userName") || "Anonymous";
return (
<div className="side-pannel-container">
<div className="side-pannel-header">
<div className="user-container">
<div className="user-profile">{userName[0]}</div>
<div className="user-name">{userName}</div>
</div>
<div className="notifications-container">
<NotificationIcon />
</div>
</div>
<div className="new-project-button">+ New project</div>
<div className="side-bar-content-container">
<div className="side-bar-options-container">
<div className="option-list active">
<HomeIcon />
Home
</div>
<div className="option-list" title="coming soon">
<ProjectsIcon />
Projects
</div>
<div className="option-list" title="coming soon">
<TrashIcon />
Trash
</div>
<div className="option-list" title="coming soon">
<TutorialsIcon />
Tutorials
</div>
<div className="option-list" title="coming soon">
<DocumentationIcon />
Documentation
</div>
</div>
<div className="side-bar-options-container" title="coming soon">
<div className="option-list">
<SettingsIcon />
Settings
</div>
<div className="option-list" style={{cursor: "pointer"}}>
<LogoutIcon />
Log out
</div>
<div className="option-list">
<HelpIcon />
Help & Feedback
</div>
</div>
</div>
</div>
);
};
export default SidePannel;
import React from "react";
import {
DocumentationIcon,
HelpIcon,
HomeIcon,
LogoutIcon,
NotificationIcon,
ProjectsIcon,
TutorialsIcon,
} from "../../icons/DashboardIcon";
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
const SidePannel: React.FC = () => {
const userName = localStorage.getItem("userName") || "Anonymous";
return (
<div className="side-pannel-container">
<div className="side-pannel-header">
<div className="user-container">
<div className="user-profile">{userName[0]}</div>
<div className="user-name">{userName}</div>
</div>
<div className="notifications-container">
<NotificationIcon />
</div>
</div>
<div className="new-project-button">+ New project</div>
<div className="side-bar-content-container">
<div className="side-bar-options-container">
<div className="option-list active">
<HomeIcon />
Home
</div>
<div className="option-list" title="coming soon">
<ProjectsIcon />
Projects
</div>
<div className="option-list" title="coming soon">
<TrashIcon />
Trash
</div>
<div className="option-list" title="coming soon">
<TutorialsIcon />
Tutorials
</div>
<div className="option-list" title="coming soon">
<DocumentationIcon />
Documentation
</div>
</div>
<div className="side-bar-options-container" title="coming soon">
<div className="option-list">
<SettingsIcon />
Settings
</div>
<div className="option-list" style={{cursor: "pointer"}}>
<LogoutIcon />
Log out
</div>
<div className="option-list">
<HelpIcon />
Help & Feedback
</div>
</div>
</div>
</div>
);
};
export default SidePannel;

69
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@@ -10,6 +10,7 @@ import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
import { useSelectedItem } from "../../../store/store";
interface AssetProp {
filename: string;
thumbnail?: string;
@@ -24,6 +25,7 @@ interface AssetProp {
CreatedBy?: String;
}
const Assets: React.FC = () => {
const { setSelectedItem } = useSelectedItem();
const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
@@ -32,9 +34,17 @@ const Assets: React.FC = () => {
const handleSearchChange = (value: string) => {
setSearchValue(value);
setSelectedCategory(null);
const filteredModels = filtereredAssets?.filter((model) =>
model.filename.toLowerCase().includes(value.toLowerCase())
);
const searchTerm = value.toLowerCase(); // Convert input to lowercase
const filteredModels = filtereredAssets?.filter((model) => {
if (!model?.tags || !model?.filename) return false;
if (searchTerm.startsWith(":") && searchTerm.length > 1) {
const tagSearchTerm = searchTerm.slice(1);
return model.tags.toLowerCase().includes(tagSearchTerm);
} else if (!searchTerm.startsWith(":")) {
return model.filename.toLowerCase().includes(searchTerm);
}
return false;
});
setCategoryAssets(filteredModels);
};
@@ -105,12 +115,11 @@ const Assets: React.FC = () => {
} else {
try {
const res = await getCategoryAsset(asset);
setCategoryAssets(res || []); // Ensure it's always an array
setFiltereredAssets(res || []);
setCategoryAssets(res);
setFiltereredAssets(res);
} catch (error) {}
}
};
return (
<div className="assets-container">
<Search onChange={handleSearchChange} />
@@ -149,36 +158,38 @@ const Assets: React.FC = () => {
{/* Back Button */}
<div
className="back-button"
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
onClick={() => setSelectedCategory(null)}
>
← Back
</div>
<h2>{selectedCategory}</h2>
<div className="assets-container">
{searchValue ||
(categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div key={index} className="assets">
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
/>
{categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div key={index} className="assets">
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() =>
setSelectedItem({
name: asset.filename,
id: asset.modelfileID,
})
}
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
)))}
</div>
))}
</div>
</div>
) : (

78
app/src/components/layout/sidebarLeft/visualization/Templates.tsx
View File

@@ -1,25 +1,76 @@
import { useEffect } from "react";
import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore";
import useTemplateStore from "../../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
import { deleteTemplateApi } from "../../../../services/realTimeVisulization/zoneData/deleteTemplate";
import { loadTempleteApi } from "../../../../services/realTimeVisulization/zoneData/loadTemplate";
const Templates = () => {
const { templates, removeTemplate } = useTemplateStore();
const { setSelectedZone } = useSelectedZoneStore();
const { setTemplates } = useTemplateStore();
const { setSelectedZone, selectedZone } = useSelectedZoneStore();
const handleDeleteTemplate = (id: string) => {
removeTemplate(id);
useEffect(() => {
async function templateData() {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getTemplateData(organization);
setTemplates(response);
} catch (error) {
console.error("Error fetching template data:", error);
}
}
templateData();
}, []);
const handleDeleteTemplate = async (id: string) => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await deleteTemplateApi(id, organization);
if (response.message === "Template deleted successfully") {
removeTemplate(id);
}
} catch (error) {
console.error("Error deleting template:", error);
}
};
const handleLoadTemplate = (template: any) => {
setSelectedZone((prev) => ({
...prev,
panelOrder: template.panelOrder,
activeSides: Array.from(
new Set([...prev.activeSides, ...template.panelOrder])
),
widgets: template.widgets,
}));
const handleLoadTemplate = async (template: any) => {
try {
if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);
if (response.message === "Template placed in Zone") {
setSelectedZone({
panelOrder: template.panelOrder,
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
widgets: template.widgets,
});
useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
if (Array.isArray(template.floatingWidget)) {
template.floatingWidget.forEach((val: any) => {
useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
});
}
}
} catch (error) {
console.error("Error loading template:", error);
}
};
return (
<div
className="template-list"
@@ -41,7 +92,7 @@ const Templates = () => {
transition: "box-shadow 0.3s ease",
}}
>
{template.snapshot && (
{template?.snapshot && (
<div style={{ position: "relative", paddingBottom: "56.25%" }}>
{" "}
{/* 16:9 aspect ratio */}
@@ -122,3 +173,4 @@ const Templates = () => {
};
export default Templates;

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

@@ -13,7 +13,7 @@ const Header: React.FC = () => {
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
);
const [userManagement, setUserManagement] = useState(false);
return (
@@ -31,9 +31,9 @@ const Header: React.FC = () => {
>
Share
</div>
<div className="app-docker-button">
{/* <div className="app-docker-button">
<AppDockIcon />
</div>
</div> */}
</div>
<div className="split"></div>
<div className="users-container">
@@ -52,12 +52,7 @@ const Header: React.FC = () => {
))}
</div>
<div className="user-profile-container">
<div
className="user-profile"
style={{ background: "var(--accent-color)" }}
>
{userName[0]}
</div>
<div className="user-profile">{userName[0]}</div>
<div className="user-organization">
<img src={orgImg} alt="" />
</div>

22
app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
View File

@@ -1,23 +1,32 @@
import React from "react";
import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
interface PositionInputProps {
label?: string; // Optional label for the input
onChange: (value: string) => void; // Callback for value change
placeholder?: string; // Optional placeholder
type?: string; // Input type (e.g., text, number, email)
value1?: number;
value2?: number;
disabled?: boolean; // Optional disabled property
isEyedrop?: boolean; // Optional eyedrop property
handleEyeDropClick?: () => void; // Optional function for eye drop click
}
const PositionInput: React.FC<PositionInputProps> = ({
onChange,
label = "Position", // Default label
placeholder = "Enter value", // Default placeholder
type = "number", // Default type
value1 = "number",
value2 = "number",
disabled = false, // Default disabled value
isEyedrop = false, // Default isEyedrop value
handleEyeDropClick = () => { }, // Default function for eye drop click
}) => {
return (
<div className="custom-input-container">
<div className="header">Position</div>
<div className="header">{label}</div>
<div className="inputs-container">
<div className="input-container">
<div className="custom-input-label">X : </div>
@@ -26,7 +35,8 @@ const PositionInput: React.FC<PositionInputProps> = ({
type={type}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
value={value2}
value={value1}
disabled={disabled} // Apply disabled prop
/>
</div>
<div className="input-container">
@@ -36,10 +46,16 @@ const PositionInput: React.FC<PositionInputProps> = ({
type={type}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
value={value1}
value={value2}
disabled={disabled} // Apply disabled prop
/>
</div>
</div>
{isEyedrop && (
<div className="eye-picker-button" onClick={handleEyeDropClick}>
<EyeDroperIcon isActive={false} />
</div>
)}
</div>
);
};

485
app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
View File

@@ -9,9 +9,13 @@ import RenameInput from "../../../ui/inputs/RenameInput";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import { handleResize } from "../../../../functions/handleResizePannel";
import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
import * as THREE from 'three';
import * as Types from '../../../../types/world/worldTypes';
import {
useSelectedActionSphere,
useSelectedPath,
useSimulationPaths,
} from "../../../../store/store";
import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes";
import InputToggle from "../../../ui/inputs/InputToggle";
const ConveyorMechanics: React.FC = () => {
@@ -25,7 +29,9 @@ const ConveyorMechanics: React.FC = () => {
const selectedPoint = useMemo(() => {
if (!selectedActionSphere) return null;
return simulationPaths
.filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
.filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.point.uuid);
}, [selectedActionSphere, simulationPaths]);
@@ -43,11 +49,11 @@ const ConveyorMechanics: React.FC = () => {
const newAction = {
uuid: THREE.MathUtils.generateUUID(),
name: `Action ${actionIndex + 1}`,
type: 'Inherit',
material: 'Inherit',
delay: 'Inherit',
spawnInterval: 'Inherit',
isUsed: false
type: "Inherit",
material: "Inherit",
delay: "Inherit",
spawnInterval: "Inherit",
isUsed: false,
};
return { ...point, actions: [...point.actions, newAction] };
@@ -68,13 +74,18 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.filter(
(action) => action.uuid !== uuid
),
}
: point
),
}
: path
);
@@ -87,26 +98,33 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid
? {
...action,
type: actionType,
material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
delay: actionType === 'Delay' ? 'Inherit' : action.delay,
spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
}
: action
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid
? {
...action,
type: actionType,
material:
actionType === "Spawn" || actionType === "Swap"
? "Inherit"
: action.material,
delay:
actionType === "Delay" ? "Inherit" : action.delay,
spawnInterval:
actionType === "Spawn"
? "Inherit"
: action.spawnInterval,
}
: action
),
}
: point
),
}
: path
);
@@ -115,15 +133,17 @@ const ConveyorMechanics: React.FC = () => {
// Update the selected item to reflect changes
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
const updatedAction = updatedPaths
.filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
.flatMap(path => path.points)
.find(p => p.uuid === selectedActionSphere.point.uuid)
?.actions.find(a => a.uuid === uuid);
.filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
)
.flatMap((path) => path.points)
.find((p) => p.uuid === selectedActionSphere.point.uuid)
?.actions.find((a) => a.uuid === uuid);
if (updatedAction) {
setSelectedItem({
type: "action",
item: updatedAction
item: updatedAction,
});
}
}
@@ -136,21 +156,21 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid &&
(action.type === 'Spawn' || action.type === 'Swap')
? { ...action, material }
: action
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid &&
(action.type === "Spawn" || action.type === "Swap")
? { ...action, material }
: action
),
}
: point
),
}
: path
);
@@ -162,8 +182,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
material
}
material,
},
});
}
};
@@ -174,42 +194,47 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid ? { ...action, delay } : action
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid ? { ...action, delay } : action
),
}
: point
),
}
: path
);
setSimulationPaths(updatedPaths);
};
const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
const handleSpawnIntervalChange = (
uuid: string,
spawnInterval: number | string
) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid ? { ...action, spawnInterval } : action
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid
? { ...action, spawnInterval }
: action
),
}
: point
),
}
: path
);
@@ -233,23 +258,23 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
const triggerIndex = point.triggers.length;
const newTrigger = {
uuid: THREE.MathUtils.generateUUID(),
name: `Trigger ${triggerIndex + 1}`,
type: '',
bufferTime: 0,
isUsed: false
};
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
const triggerIndex = point.triggers.length;
const newTrigger = {
uuid: THREE.MathUtils.generateUUID(),
name: `Trigger ${triggerIndex + 1}`,
type: "",
bufferTime: 0,
isUsed: false,
};
return { ...point, triggers: [...point.triggers, newTrigger] };
}
return point;
}),
}
return { ...point, triggers: [...point.triggers, newTrigger] };
}
return point;
}),
}
: path
);
@@ -262,13 +287,18 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.filter(
(trigger) => trigger.uuid !== uuid
),
}
: point
),
}
: path
);
@@ -281,18 +311,20 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid
? { ...trigger, type: triggerType }
: trigger
),
}
: point
),
}
: path
);
@@ -309,26 +341,25 @@ const ConveyorMechanics: React.FC = () => {
}
};
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) => ({
...action,
isUsed: action.uuid === uuid ? !action.isUsed : false,
})),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
actions: point.actions.map((action) => ({
...action,
isUsed: action.uuid === uuid ? !action.isUsed : false,
})),
}
: point
),
}
: path
);
@@ -340,8 +371,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
isUsed: !selectedItem.item.isUsed,
},
});
}
};
@@ -353,19 +384,19 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) => ({
...trigger,
isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
})),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) => ({
...trigger,
isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
})),
}
: point
),
}
: path
);
@@ -377,8 +408,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
isUsed: !selectedItem.item.isUsed,
},
});
}
};
@@ -389,18 +420,20 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
),
}
: point
),
}
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid
? { ...trigger, bufferTime }
: trigger
),
}
: point
),
}
: path
);
@@ -412,13 +445,16 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
bufferTime
}
bufferTime,
},
});
}
};
const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
const [selectedItem, setSelectedItem] = useState<{
type: "action" | "trigger";
item: any;
} | null>(null);
useEffect(() => {
setSelectedItem(null);
@@ -426,21 +462,20 @@ const ConveyorMechanics: React.FC = () => {
return (
<div className="machine-mechanics-container">
{!selectedPath &&
{!selectedPath && (
<div className="machine-mechanics-header">
{selectedActionSphere?.path?.modelName || "point name not found"}
</div>
}
{selectedPath &&
)}
{selectedPath && (
<div className="machine-mechanics-header">
{selectedPath.path.modelName || "path name not found"}
</div>
}
)}
<div className="machine-mechanics-content-container">
{!selectedPath &&
{!selectedPath && (
<>
<div className="actions">
<div className="header">
@@ -458,16 +493,20 @@ const ConveyorMechanics: React.FC = () => {
{selectedPoint?.actions.map((action) => (
<div
key={action.uuid}
className={`list-item ${selectedItem?.type === "action" &&
className={`list-item ${
selectedItem?.type === "action" &&
selectedItem.item?.uuid === action.uuid
? "active"
: ""
}`}
? "active"
: ""
}`}
>
<div
className="value"
onClick={() => setSelectedItem({ type: "action", item: action })}
onClick={() =>
setSelectedItem({ type: "action", item: action })
}
>
<input type="radio" name="action" id="action" defaultChecked={action.isUsed}/>
<RenameInput value={action.name} />
</div>
<div
@@ -504,16 +543,20 @@ const ConveyorMechanics: React.FC = () => {
{selectedPoint?.triggers.map((trigger) => (
<div
key={trigger.uuid}
className={`list-item ${selectedItem?.type === "trigger" &&
className={`list-item ${
selectedItem?.type === "trigger" &&
selectedItem.item?.uuid === trigger.uuid
? "active"
: ""
}`}
? "active"
: ""
}`}
>
<div
className="value"
onClick={() => setSelectedItem({ type: "trigger", item: trigger })}
onClick={() =>
setSelectedItem({ type: "trigger", item: trigger })
}
>
<input type="radio" name="trigger" id="trigger" defaultChecked={trigger.isUsed} />
<RenameInput value={trigger.name} />
</div>
<div
@@ -535,7 +578,7 @@ const ConveyorMechanics: React.FC = () => {
</div>
</div>
</>
}
)}
<div className="selected-properties-container">
{selectedItem && (
@@ -553,48 +596,69 @@ const ConveyorMechanics: React.FC = () => {
<LabledDropdown
defaultOption={selectedItem.item.type}
options={["Inherit", "Spawn", "Swap", "Despawn", "Delay"]}
onSelect={(option) => handleActionSelect(selectedItem.item.uuid, option)}
onSelect={(option) =>
handleActionSelect(selectedItem.item.uuid, option)
}
/>
{/* Only show material dropdown for Spawn/Swap actions */}
{(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
{(selectedItem.item.type === "Spawn" ||
selectedItem.item.type === "Swap") && (
<LabledDropdown
label={selectedItem.item.type === 'Spawn' ? 'Spawn Material' : 'Swap Material'}
label={
selectedItem.item.type === "Spawn"
? "Spawn Material"
: "Swap Material"
}
defaultOption={selectedItem.item.material}
options={["Inherit", "Crate", "Box"]}
onSelect={(option) => handleMaterialSelect(selectedItem.item.uuid, option)}
onSelect={(option) =>
handleMaterialSelect(selectedItem.item.uuid, option)
}
/>
)}
{/* Only show delay input for Delay actions */}
{selectedItem.item.type === 'Delay' && (
{selectedItem.item.type === "Delay" && (
<InputWithDropDown
label="Delay Time"
value={selectedItem.item.delay === 'Inherit'
? undefined
: selectedItem.item.delay}
value={
selectedItem.item.delay === "Inherit"
? undefined
: selectedItem.item.delay
}
onChange={(value) => {
const numValue = parseInt(value);
handleDelayChange(
selectedItem.item.uuid,
!value ? 'Inherit' : numValue
!value ? "Inherit" : numValue
);
}}
/>
)}
{/* Only show spawn interval for Spawn actions */}
{selectedItem.item.type === 'Spawn' && (
{selectedItem.item.type === "Spawn" && (
<InputWithDropDown
label="Spawn Interval"
min={0}
defaultValue={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
value={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
defaultValue={
selectedItem.item.spawnInterval === "Inherit"
? ""
: selectedItem.item.spawnInterval.toString()
}
value={
selectedItem.item.spawnInterval === "Inherit"
? ""
: selectedItem.item.spawnInterval.toString()
}
onChange={(value) => {
handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
handleSpawnIntervalChange(
selectedItem.item.uuid,
value === "" ? "Inherit" : parseInt(value)
);
}}
/>
)}
</>
)}
@@ -609,9 +673,13 @@ const ConveyorMechanics: React.FC = () => {
/>
<LabledDropdown
defaultOption={selectedItem.item.type || "Select Trigger Type"}
defaultOption={
selectedItem.item.type || "Select Trigger Type"
}
options={["On-Hit", "Buffer"]}
onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
onSelect={(option) =>
handleTriggerSelect(selectedItem.item.uuid, option)
}
/>
{selectedItem.item.type === "Buffer" && (
@@ -619,23 +687,34 @@ const ConveyorMechanics: React.FC = () => {
label="Buffer Time"
value={selectedItem.item.bufferTime.toString()}
onChange={(value) => {
handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
handleTriggerBufferTimeChange(
selectedItem.item.uuid,
parseInt(value)
);
}}
/>
)}
</>
)}
</>
)}
{selectedPath && !selectedItem && (
<div key={selectedPath?.path.modeluuid || "none"} className="speed-control">
<div
key={selectedPath?.path.modeluuid || "none"}
className="speed-control"
>
<InputWithDropDown
label="Conveyor Speed"
min={0}
value={selectedPath.path.speed === "Inherit" ? "" : selectedPath.path.speed.toString()}
onChange={(value) => handleSpeedChange((value === "") ? "Inherit" : parseInt(value))}
value={
selectedPath.path.speed === "Inherit"
? ""
: selectedPath.path.speed.toString()
}
onChange={(value) =>
handleSpeedChange(value === "" ? "Inherit" : parseInt(value))
}
/>
</div>
)}
@@ -657,4 +736,4 @@ const ConveyorMechanics: React.FC = () => {
);
};
export default ConveyorMechanics;
export default ConveyorMechanics;

72
app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
View File

@@ -1,13 +1,16 @@
import React, { useRef, useMemo } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes';
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import PositionInput from "../customInput/PositionInputs";
const VehicleMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const { eyeDropMode, setEyeDropMode } = useEyeDropMode();
const { editingPoint, setEditingPoint } = useEditingPoint();
const { previewPosition, setPreviewPosition } = usePreviewPosition();
const propertiesContainerRef = useRef<HTMLDivElement>(null);
@@ -59,12 +62,10 @@ const VehicleMechanics: React.FC = () => {
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const handleStartPointChange = React.useCallback((uuid: string) => {
handleActionUpdate({ start: uuid });
const handleStartPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
const handleEndPointChange = React.useCallback((uuid: string) => {
handleActionUpdate({ end: uuid });
const handleEndPointChange = React.useCallback((position: { x: number, y: number }) => {
}, [handleActionUpdate]);
const handleHitCountChange = React.useCallback((hitCount: number) => {
@@ -94,6 +95,16 @@ const VehicleMechanics: React.FC = () => {
setSimulationPaths(updatedPaths);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const handleStartEyeDropClick = () => {
setEditingPoint('start');
setEyeDropMode(true);
};
const handleEndEyeDropClick = () => {
setEditingPoint('end');
setEyeDropMode(true);
};
return (
<div className="machine-mechanics-container" key={selectedPoint?.uuid}>
<div className="machine-mechanics-header">
@@ -106,20 +117,49 @@ const VehicleMechanics: React.FC = () => {
{selectedPoint && (
<>
<LabledDropdown
key={`start-${selectedPoint.uuid}`}
<PositionInput
label="Start Point"
defaultOption={selectedPoint.actions.start || "Select start point"}
options={connectedPointUuids}
onSelect={handleStartPointChange}
onChange={() => { }}
disabled={true}
value1={
editingPoint === 'start' && previewPosition
? parseFloat(previewPosition.x.toFixed(4))
: selectedPoint.actions.start && 'x' in selectedPoint.actions.start
? parseFloat(selectedPoint.actions.start.x.toFixed(4))
: 0
}
value2={
editingPoint === 'start' && previewPosition
? parseFloat(previewPosition.y.toFixed(4))
: selectedPoint.actions.start && 'y' in selectedPoint.actions.start
? parseFloat(selectedPoint.actions.start.y.toFixed(4))
: 0
}
isEyedrop={true}
handleEyeDropClick={handleStartEyeDropClick}
/>
<LabledDropdown
key={`end-${selectedPoint.uuid}`}
<PositionInput
label="End Point"
defaultOption={selectedPoint.actions.end || "Select end point"}
options={connectedPointUuids}
onSelect={handleEndPointChange}
onChange={() => { }}
disabled={true}
value1={
editingPoint === 'end' && previewPosition
? parseFloat(previewPosition.x.toFixed(4))
: selectedPoint.actions.end && 'x' in selectedPoint.actions.end
? parseFloat(selectedPoint.actions.end.x.toFixed(4))
: 0
}
value2={
editingPoint === 'end' && previewPosition
? parseFloat(previewPosition.y.toFixed(4))
: selectedPoint.actions.end && 'y' in selectedPoint.actions.end
? parseFloat(selectedPoint.actions.end.y.toFixed(4))
: 0
}
isEyedrop={true}
handleEyeDropClick={handleEndEyeDropClick}
/>
<InputWithDropDown

2
app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
View File

@@ -49,8 +49,6 @@ const AssetProperties: React.FC = () => {
{/* Name */}
<div className="header">{selectedFloorItem.userData.name}</div>
<div className="split"></div>
<PositionInput
onChange={() => {}}
value1={selectedFloorItem.position.x.toFixed(5)}

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

@@ -20,17 +20,16 @@ const ZoneProperties: React.FC = () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let zonesdata = {
zoneId: selectedZone.zoneId,
viewPortposition: zonePosition,
viewPortCenter: zoneTarget
};
let response = await zoneCameraUpdate(zonesdata, organization);
console.log('response: ', response);
setEdit(false);
} catch (error) {
console.error("Error in handleSetView:", error);

177
app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx Normal file
View File

@@ -0,0 +1,177 @@
import React, { useEffect, useState } from "react";
import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
import { AddIcon } from "../../../../icons/ExportCommonIcons";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
import useChartStore from "../../../../../store/useChartStore";
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
type Props = {};
const FlotingWidgetInput = (props: Props) => {
const [widgetName, setWidgetName] = useState('Widget');
const { setMeasurements, updateDuration, updateName } = useChartStore();
const [duration, setDuration] = useState('1h')
const [dropDowndata, setDropDownData] = useState({});
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
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]
useEffect(() => {
const fetchZoneData = async () => {
try {
const response = await axios.get(`http://${iotApiUrl}/getinput`);
if (response.status === 200) {
// console.log("dropdown data:", response.data);
setDropDownData(response.data);
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
};
fetchZoneData();
}, []);
useEffect(() => {
const fetchSavedInputes = async () => {
if (selectedChartId.id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setWidgetName(response.data.widgetName)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
}
fetchSavedInputes();
}, [selectedChartId.id]);
// Sync Zustand state when component mounts
useEffect(() => {
setMeasurements(selections);
updateDuration(duration);
updateName(widgetName);
}, [selections, duration, widgetName]);
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
try {
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
organization: organization,
zoneId: selectedZone.zoneId,
widget: {
id: selectedChartId.id,
panel: selectedChartId.panel,
widgetName: inputName,
Data: {
measurements: inputMeasurement,
duration: inputDuration
}
}
} as any);
if (response.status === 200) {
return true
} else {
console.log("Unexpected response:", response);
return false
}
} catch (error) {
console.error("There was an error!", error);
return false
}
}
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
// async() => {
const newSelections = { ...selections };
if (selectedData === null) {
delete newSelections[inputKey];
} else {
newSelections[inputKey] = selectedData;
}
// setMeasurements(newSelections); // Update Zustand store
console.log(newSelections);
if (await sendInputes(newSelections, duration, widgetName)) {
setSelections(newSelections);
}
// sendInputes(newSelections, duration); // Send data to server
// return newSelections;
// };
};
const handleSelectDuration = async (option: string) => {
if (await sendInputes(selections, option, widgetName)) {
setDuration(option);
}
// setDuration(option);
};
const handleNameChange = async (name:any) => {
console.log('name change requested',name);
if (await sendInputes(selections, duration, name)) {
setWidgetName(name);
}
}
return (
<>
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
</div>
{[...Array(6)].map((_, index) => {
const inputKey = `input${index + 1}`;
return (
<div key={index} className="datas">
<div className="datas__label">Input {index + 1}</div>
<div className="datas__class">
<MultiLevelDropdown
data={dropDowndata}
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
onUnselect={() => handleSelect(inputKey, null)}
selectedValue={selections[inputKey]} // Load from Zustand
/>
<div className="icon">
<AddIcon />
</div>
</div>
</div>
);
})}
</div>
<div>
<div className="datas">
<div className="datas__label">Duration</div>
<div className="datas__class">
<RegularDropDown
header={duration}
options={["1h", "2h", "12h"]}
onSelect={handleSelectDuration}
search={false}
/>
</div>
</div>
</div>
</>
);
};
export default FlotingWidgetInput;

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

@@ -58,11 +58,11 @@
// name: string;
// fields: string;
// }
// interface InputData {
// [key: string]: Measurement;
// }
// const extractMeasurements = (input: InputData): Measurement[] => {
// return Object.values(input);
// };
@@ -71,7 +71,7 @@
// const measurementsData = extractMeasurements(selections);
// setMeasurements(measurementsData);
// }, [selections]);
// return (
// <>
@@ -125,20 +125,22 @@ import useChartStore from "../../../../../store/useChartStore";
import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios";
import RenameInput from "../../../../ui/inputs/RenameInput";
type Props = {};
const LineGrapInput = (props: Props) => {
const { setMeasurements, updateDuration } = useChartStore();
const [widgetName, setWidgetName] = useState('Widget');
const { setMeasurements, updateDuration, updateName } = useChartStore();
const [duration, setDuration] = useState('1h')
const [dropDowndata, setDropDownData] = useState({});
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
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]
useEffect(() => {
const fetchZoneData = async () => {
try {
@@ -157,13 +159,14 @@ const LineGrapInput = (props: Props) => {
}, []);
useEffect(() => {
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (selectedChartId.id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
if (response.status === 200) {
setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setWidgetName(response.data.widgetName)
} else {
console.log("Unexpected response:", response);
}
@@ -181,17 +184,19 @@ const LineGrapInput = (props: Props) => {
useEffect(() => {
setMeasurements(selections);
updateDuration(duration);
}, [selections, duration]);
updateName(widgetName);
}, [selections, duration, widgetName]);
const sendInputes = async(inputMeasurement: any, inputDuration: any) => {
const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
try {
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,{
const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
organization: organization,
zoneId: selectedZone.zoneId,
widget:{
widget: {
id: selectedChartId.id,
panel: selectedChartId.panel,
widgetName: inputName,
Data: {
measurements: inputMeasurement,
duration: inputDuration
@@ -210,35 +215,47 @@ const LineGrapInput = (props: Props) => {
}
}
const handleSelect = async(inputKey: string, selectedData: { name: string; fields: string } | null) => {
// async() => {
const newSelections = { ...selections };
if (selectedData === null) {
delete newSelections[inputKey];
} else {
newSelections[inputKey] = selectedData;
}
// setMeasurements(newSelections); // Update Zustand store
console.log(newSelections);
if ( await sendInputes(newSelections, duration)) {
setSelections(newSelections);
}
// sendInputes(newSelections, duration); // Send data to server
// return newSelections;
const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
// async() => {
const newSelections = { ...selections };
if (selectedData === null) {
delete newSelections[inputKey];
} else {
newSelections[inputKey] = selectedData;
}
// setMeasurements(newSelections); // Update Zustand store
console.log(newSelections);
if (await sendInputes(newSelections, duration, widgetName)) {
setSelections(newSelections);
}
// sendInputes(newSelections, duration); // Send data to server
// return newSelections;
// };
};
const handleSelectDuration = async(option: string) => {
if ( await sendInputes(selections, option)) {
const handleSelectDuration = async (option: string) => {
if (await sendInputes(selections, option, widgetName)) {
setDuration(option);
}
// setDuration(option);
};
const handleNameChange = async (name:any) => {
console.log('name change requested',name);
if (await sendInputes(selections, duration, name)) {
setWidgetName(name);
}
}
return (
<>
<div className="inputs-wrapper">
<div className="datas">
<div className="datas__label">Title</div>
<RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
</div>
{[...Array(6)].map((_, index) => {
const inputKey = `input${index + 1}`;
return (

28
app/src/components/layout/sidebarRight/visualization/data/Data.tsx
View File

@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
import LineGrapInput from "../IotInputCards/LineGrapInput";
import RenameInput from "../../../../ui/inputs/RenameInput";
// Define the data structure for demonstration purposes
const DATA_STRUCTURE = {
@@ -107,27 +108,36 @@ const Data = () => {
[selectedChartId.id]: currentChartData.map((group) =>
group.id === groupId
? {
...group,
children: group.children.filter(
(child) => child.id !== childId
),
}
...group,
children: group.children.filter(
(child) => child.id !== childId
),
}
: group
),
};
});
};
console.log("selectedChartId", selectedChartId);
return (
<div className="dataSideBar">
{selectedChartId?.title && (
{/* {selectedChartId?.title && (
<div className="sideBarHeader">{selectedChartId?.title}</div>
)}
)} */}
{/* <RenameInput value={selectedChartId?.title || "untited"} /> */}
{/* Render groups dynamically */}
{
chartDataGroups[selectedChartId?.id] && <LineGrapInput />
chartDataGroups[selectedChartId?.id] &&
<>
<div className="sideBarHeader">2D Widget Input</div>
<LineGrapInput />
</>
}
{/* Info Box */}
<div className="infoBox">
<span className="infoIcon">i</span>