diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index c78261e..757bf54 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => { fillRule="evenodd" clipRule="evenodd" d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z" - fill="#2B3344" + fill="var(--text-color)" /> ); @@ -624,15 +624,15 @@ export const DailyProductionIcon = () => { > ); @@ -649,7 +649,7 @@ export const MonthlyROI = () => { > ); @@ -666,15 +666,15 @@ export const ExpandIcon = () => { > ); @@ -691,21 +691,21 @@ export const StartIcon = () => { > { > { /> { fillRule="evenodd" clipRule="evenodd" d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z" - fill="#2B3344" + fill="var(--text-color)" /> ); }; + // export const DublicateIcon = () => { // return ( // ); diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 192e009..31c3a02 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { ProductionCapacityIcon } from "../../icons/analysis"; const ProductionCapacity = ({ - progressPercent = 10, + progressPercent = 50, avgProcessTime = "28.4 Secs/unit", machineUtilization = "78%", throughputValue = 128, diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 5313710..22ad9fe 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => { const intervals = [10, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; - const progress = 80; // percent (example) + const progress = 20; // percent (example) const processPlayerRef = useRef(null); const processWrapperRef = useRef(null); @@ -294,7 +294,7 @@ const SimulationPlayer: React.FC = () => { Speed
-
0X
+
0.5X
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index 05f7371..caf37a1 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -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} /> )} diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index 4877824..778ded1 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -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>; // Updated prop type + waitingPanels: any; + setWaitingPanels: any; } const AddButtons: React.FC = ({ @@ -64,6 +66,8 @@ const AddButtons: React.FC = ({ setSelectedZone, setHiddenPanels, hiddenPanels, + waitingPanels, + setWaitingPanels, }) => { const { visualizationSocket } = useSocketStore(); @@ -174,65 +178,62 @@ const AddButtons: React.FC = ({ // 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 = ({ 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 ( <>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
{/* "+" Button */} +