Merge branch 'main' into v2

This commit is contained in:
2025-05-02 11:55:57 +05:30
40 changed files with 1196 additions and 1003 deletions

View File

@@ -1,6 +1,6 @@
import React, { Suspense, useEffect } from "react";
import assetImage from "../../assets/image/image.png";
import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons";
import { Canvas, useThree } from "@react-three/fiber";
import { ContactShadows, OrbitControls, Text } from "@react-three/drei";
import GltfLoader from "./GltfLoader";
@@ -98,7 +98,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
</div>
<div className="asset-review">
<div className="asset-rating">
<FiileedStarsIconSmall />
<FilledStarsIconSmall />
{selectedCard.rating}
</div>
<div className="asset-view">{selectedCard.views} views</div>

View File

@@ -3,6 +3,7 @@ import {
CommentsIcon,
DownloadIcon,
EyeIconBig,
FilledStarsIconSmall,
StarsIconSmall,
VerifiedIcon,
} from "../../components/icons/marketPlaceIcons";
@@ -80,7 +81,13 @@ const Card: React.FC<CardProps> = ({
<div className="stars-container">
<div className="stars-wrapper">
{[...Array(5)].map((_, index) => (
<StarsIconSmall key={index} />
<>
{index < 3 ? (
<FilledStarsIconSmall key={index} />
) : (
<StarsIconSmall key={index} />
)}
</>
))}
</div>
<div className="units">

View File

@@ -11,10 +11,7 @@ import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/visualization/useDroppedObjectsStore";
import {
useSocketStore,
useWidgetSubOption,
} from "../../store/store";
import { useSocketStore, useWidgetSubOption } from "../../store/store";
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
@@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
const { editWidgetOptions, setEditWidgetOptions } =
useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
const { widgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore();
const [waitingPanels, setWaitingPanels] = useState(null);
console.log("waitingPanels: ", waitingPanels);
OuterClick({
contextClassName: [
@@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => {
setHiddenPanels={setHiddenPanels}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
waitingPanels={waitingPanels}
setWaitingPanels={setWaitingPanels}
/>
)}
@@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => {
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setZonesData={setZonesData}
waitingPanels={waitingPanels}
/>
</>
)}

View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import {
CleanPannel,
EyeIcon,
@@ -6,8 +6,6 @@ import {
} from "../../../../components/icons/RealTimeVisulationIcons";
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/store";
import { clearPanel } from "../../../../services/visulization/zone/clearPanel";
import { lockPanel } from "../../../../services/visulization/zone/lockPanel";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -57,6 +55,8 @@ interface ButtonsProps {
>;
hiddenPanels: HiddenPanels; // Updated prop type
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
waitingPanels: any;
setWaitingPanels: any;
}
const AddButtons: React.FC<ButtonsProps> = ({
@@ -64,6 +64,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
setSelectedZone,
setHiddenPanels,
hiddenPanels,
waitingPanels,
setWaitingPanels,
}) => {
const { visualizationSocket } = useSocketStore();
@@ -174,65 +176,62 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to handle "+" button click
const handlePlusButtonClick = async (side: Side) => {
const zoneId = selectedZone.zoneId;
if (selectedZone.activeSides.includes(side)) {
console.log("open");
// Panel already exists: Remove widgets from that side and update activeSides
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
// Already active: Schedule removal
// Remove all widgets associated with the side and update active sides
const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side
);
const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
setWaitingPanels(side); // Mark as waiting
const updatedZone = {
...selectedZone,
widgets: cleanedWidgets,
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
setTimeout(() => {
console.log("Removing after wait...");
let deletePanel = {
organization: organization,
panelName: side,
zoneId: selectedZone.zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
}
setSelectedZone(updatedZone);
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
setHiddenPanels((prev) => ({
...prev,
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
(s) => s !== side
),
}));
}
// if(hiddenPanels[selectedZone.zoneId].includes(side))
// API call to delete the panel
// try {
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
//
// if (response.message === "Panel deleted successfully") {
// } else {
//
// }
// } catch (error) {
//
// }
} else {
// Panel does not exist: Create panel
try {
// Get email and organization safely with a default fallback
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const organization = email?.split("@")[1]?.split(".")[0] || "";
// Remove widgets for that side
const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side
);
const newActiveSides = selectedZone.activeSides.filter(
(s) => s !== side
);
const updatedZone = {
...selectedZone,
widgets: cleanedWidgets,
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
const deletePanel = {
organization,
panelName: side,
zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
}
setSelectedZone(updatedZone);
if (hiddenPanels[zoneId]?.includes(side)) {
setHiddenPanels((prev) => ({
...prev,
[zoneId]: prev[zoneId].filter((s) => s !== side),
}));
}
// Remove from waiting state
setWaitingPanels(null);
}, 500); // Wait for 2 seconds
} else {
// Panel does not exist: Add it
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] || "";
// Prevent duplicate side entries
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
: [...selectedZone.activeSides, side];
@@ -242,32 +241,31 @@ const AddButtons: React.FC<ButtonsProps> = ({
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
let addPanel = {
organization: organization,
zoneId: selectedZone.zoneId,
const addPanel = {
organization,
zoneId,
panelOrder: newActiveSides,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:add", addPanel);
}
setSelectedZone(updatedZone);
// API call to create panels
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
//
// if (response.message === "Panels created successfully") {
// } else {
//
// }
} catch (error) {}
setSelectedZone(updatedZone);
} catch (error) {
console.error("Error adding panel:", error);
}
}
};
return (
<>
<div>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
<button
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
@@ -286,7 +284,17 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Extra Buttons */}
{selectedZone.activeSides.includes(side) && (
<div className="extra-Bs">
<div
className={`extra-Bs
${waitingPanels === side ? "extra-Bs-addclosing" : ""}
${
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
waitingPanels !== side
? "extra-Bs-addopening"
: ""
}
`}
>
{/* Hide Panel */}
<div
className={`icon ${
@@ -305,7 +313,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "var(--icon-default-color-active)"
: "var(--icon-default-color)"
: "var(--text-color)"
}
/>
</div>
@@ -342,7 +350,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
fill={
selectedZone.lockedPanels.includes(side)
? "var(--icon-default-color-active)"
: "var(--icon-default-color)"
: "var(--text-color)"
}
/>
</div>

View File

@@ -43,6 +43,7 @@ interface PanelProps {
>;
hiddenPanels: any;
setZonesData: React.Dispatch<React.SetStateAction<any>>;
waitingPanels: any;
}
const generateUniqueId = () =>
@@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
setSelectedZone,
hiddenPanels,
setZonesData,
waitingPanels,
}) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
@@ -108,8 +110,9 @@ const Panel: React.FC<PanelProps> = ({
case "bottom":
return {
minWidth: "170px",
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
}px)`,
width: `calc(100% - ${
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
}px)`,
minHeight: "170px",
height: `${panelSize}px`,
left: leftActive ? `${panelSize}px` : "0",
@@ -122,8 +125,9 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "170px",
width: `${panelSize}px`,
minHeight: "170px",
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
}px)`,
height: `calc(100% - ${
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
}px)`,
top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "0",
[side]: "0",
@@ -149,7 +153,6 @@ const Panel: React.FC<PanelProps> = ({
const currentWidgetsCount = getCurrentWidgetCount(panel);
const maxCapacity = calculatePanelCapacity(panel);
if (currentWidgetsCount < maxCapacity) {
addWidgetToPanel(draggedAsset, panel);
}
@@ -283,8 +286,9 @@ const Panel: React.FC<PanelProps> = ({
<div
key={side}
id="panel-wrapper"
className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
}`}
className={`panel ${side}-panel absolute ${
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
}`}
style={getPanelStyle(side)}
onDrop={(e) => handleDrop(e, side)}
onDragOver={(e) => e.preventDefault()}
@@ -297,11 +301,18 @@ const Panel: React.FC<PanelProps> = ({
}}
>
<div
className={`panel-content ${isPlaying && "fullScreen"}`}
className={`panel-content
${waitingPanels === side ? `${side}-closing` : ""}
${
!hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
? `${side}-opening`
: ""
}
${isPlaying ? "fullScreen" : ""}`}
style={{
pointerEvents:
selectedZone.lockedPanels.includes(side) ||
hiddenPanels[selectedZone.zoneId]?.includes(side)
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "none"
: "auto",
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",