Merge branch 'main' into v2
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user