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

updated realTime vis panel smooth transition

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-30 18:20:36 +05:30
parent 9829899aec
commit 6a51fbca61
12 changed files with 369 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import {
CleanPannel,
EyeIcon,
@@ -57,6 +57,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 +66,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
setSelectedZone,
setHiddenPanels,
hiddenPanels,
waitingPanels,
setWaitingPanels,
}) => {
const { visualizationSocket } = useSocketStore();
@@ -174,65 +178,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 +243,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 +286,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 ${