{
}`}
onClick={() => setSubModule("simulations")}
>
-
+
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 9d06df9..abe7ba8 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -285,9 +285,13 @@ const Tools: React.FC = () => {
) : (
-
setIsPlaying(false)}>
- X
-
+ <>
+ {activeModule !== "simulation" && (
+
setIsPlaying(false)}>
+ X
+
+ )}
+
)}
);
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index 1545729..5943d6a 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -4,6 +4,7 @@ import {
EyeIcon,
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
+import { AddIcon } from "../../icons/ExportCommonIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -132,7 +133,9 @@ const AddButtons: React.FC
= ({
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
{/* Extra Buttons */}
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index ea6f62a..e86915d 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState, useCallback } from "react";
import { Widget } from "../../../store/useWidgetStore";
+import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -134,27 +135,16 @@ const DisplayZone: React.FC
= ({
};
return (
-
+
{/* Left Arrow */}
{showLeftArrow && (
)}
{/* Zones Wrapper */}
-
+
{Object.keys(zonesData).map((zoneName, index) => (
= ({
}`}
onClick={() => {
console.log("zoneName: ", zoneName);
-
setSelectedZone({
zoneName,
activeSides: zonesData[zoneName].activeSides || [],
@@ -181,11 +170,11 @@ const DisplayZone: React.FC = ({
{/* Right Arrow */}
{showRightArrow && (
)}
);
};
-export default DisplayZone;
\ No newline at end of file
+export default DisplayZone;
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 743549f..ab2f450 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -151,6 +151,26 @@ export const DraggableWidget = ({
};
}, [setOpenKebabId]);
+ const handleDragStart = (event: React.DragEvent
) => {
+ event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
+ };
+ const handleDragEnter = (event: React.DragEvent) => {
+ event.preventDefault(); // Allow drop
+ };
+
+ const handleDragOver = (event: React.DragEvent) => {
+ event.preventDefault(); // Allow drop
+ };
+
+ const handleDrop = (event: React.DragEvent) => {
+ event.preventDefault();
+ const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
+ const toIndex = index; // The index of the widget where the drop occurred
+ if (fromIndex !== toIndex) {
+ onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+ }
+ };
+
return (
<>
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index f80b9ae..f1626ba 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -123,34 +123,34 @@ const RealTimeVisulization: React.FC = () => {
});
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
- // useEffect(() => {
- // async function GetZoneData() {
- // try {
- // const response: { data: Zone[] } | undefined = await getZonesApi(
- // "hexrfactory"
- // );
+ useEffect(() => {
+ async function GetZoneData() {
+ try {
+ const response: { data: Zone[] } | undefined = await getZonesApi(
+ "hexrfactory"
+ );
- // if (!response || !response.data) {
- // return;
- // }
- // const formattedData = response?.data?.reduce
(
- // (acc, zone) => {
- // acc[zone.zoneName] = {
- // activeSides: [],
- // panelOrder: [],
- // lockedPanels: [],
- // zoneCentrePoint: [],
- // widgets: [],
- // };
- // return acc;
- // },
- // {}
- // );
- // setZonesData(formattedData);
- // } catch (error) { }
- // }
- // GetZoneData();
- // }, []);
+ if (!response || !response.data) {
+ return;
+ }
+ const formattedData = response?.data?.reduce(
+ (acc, zone) => {
+ acc[zone.zoneName] = {
+ activeSides: [],
+ panelOrder: [],
+ lockedPanels: [],
+ zoneCentrePoint: [],
+ widgets: [],
+ };
+ return acc;
+ },
+ {}
+ );
+ setZonesData(formattedData);
+ } catch (error) { }
+ }
+ GetZoneData();
+ }, []);
useEffect(() => {}, [zonesData]);
diff --git a/app/src/components/ui/inputs/Search.tsx b/app/src/components/ui/inputs/Search.tsx
index b6e1f19..fa9d28c 100644
--- a/app/src/components/ui/inputs/Search.tsx
+++ b/app/src/components/ui/inputs/Search.tsx
@@ -36,7 +36,7 @@ const Search: React.FC = ({
};
return (
-
+
= ({
@@ -28,25 +29,29 @@ const DropDownList: React.FC
= ({
],
defaultOpen = false,
listType = "default",
+ remove,
}) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
- const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+ const [zoneDataList, setZoneDataList] = useState<
+ { id: string; name: string }[]
+ >([]);
useEffect(() => {
async function GetZoneData() {
- const response = await getZonesApi("hexrfactory")
-
- setZoneDataList([{ id: "1", name: "zone1" },
- { id: "2", name: "Zone 2" },])
+ const response = await getZonesApi("hexrfactory");
+ console.log("response: ", response.data);
+ setZoneDataList([
+ { id: "1", name: "zone1" },
+ { id: "2", name: "Zone 2" },
+ ]);
}
- GetZoneData()
-
- }, [])
+ GetZoneData();
+ }, []);
return (
@@ -81,7 +86,7 @@ const DropDownList: React.FC = ({
{isOpen && (
- {listType === "default" &&
}
+ {listType === "default" &&
}
{listType === "outline" && (
<>
= ({ items = [] }) => {
+const List: React.FC = ({ items = [], remove }) => {
return (
<>
{items.length > 0 ? (
@@ -25,9 +26,11 @@ const List: React.FC = ({ items = [] }) => {
-
-
-
+ {remove && (
+
+
+
+ )}
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
new file mode 100644
index 0000000..85f2c54
--- /dev/null
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -0,0 +1,133 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+
+const SimulationPlayer: React.FC = () => {
+ const [speed, setSpeed] = useState
(1);
+ const [playSimulation, setPlaySimulation] = useState(false);
+ const { setIsPlaying } = usePlayButtonStore();
+ const sliderRef = useRef(null);
+ const isDragging = useRef(false);
+
+ // Button functions
+ const handleReset = () => {
+ setSpeed(1);
+ };
+ const handlePlayStop = () => {
+ setPlaySimulation(!playSimulation);
+ };
+ const handleExit = () => {
+ setPlaySimulation(false);
+ setIsPlaying(false);
+ };
+
+ // Slider functions starts
+ const handleSpeedChange = (event: React.ChangeEvent) => {
+ setSpeed(parseFloat(event.target.value));
+ };
+
+ const calculateHandlePosition = () => {
+ return ((speed - 0.5) / (50 - 0.5)) * 100;
+ };
+
+ const handleMouseDown = () => {
+ isDragging.current = true;
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isDragging.current || !sliderRef.current) return;
+
+ const sliderRect = sliderRef.current.getBoundingClientRect();
+ const offsetX = e.clientX - sliderRect.left;
+ const percentage = Math.min(Math.max(offsetX / sliderRect.width, 0), 1);
+ const newValue = 0.5 + percentage * (50 - 0.5);
+ setSpeed(parseFloat(newValue.toFixed(1)));
+ };
+
+ const handleMouseUp = () => {
+ isDragging.current = false;
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ useEffect(() => {
+ return () => {
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+ }, []);
+ // Slider function ends
+
+ return (
+
+
+
+
{
+ handleReset();
+ }}
+ >
+
+ Reset
+
+
{
+ handlePlayStop();
+ }}
+ >
+
+ {playSimulation ? "Play" : "Stop"}
+
+
{
+ handleExit();
+ }}
+ >
+
+ Exit
+
+
+
+
0.5x
+
+
+
+
+
+
+
+
+
+
+
+
+ {speed.toFixed(1)}x
+
+
+
+
+
50x
+
+
+
-
{}} />
+
+ {}} />
+
{
let navigate = useNavigate();
@@ -61,6 +62,7 @@ const Project: React.FC = () => {
{activeModule !== "market" && }
{/* */}
+ {isPlaying && activeModule === "simulation" && }