setIsPlaying(false)}>
- X
-
+ <>
+ {activeModule !== "simulation" && (
+ setIsPlaying(false)}>
+ X
+
+ )}
+
)}
);
diff --git a/app/src/components/ui/charts/PieGraphComponent.tsx b/app/src/components/ui/charts/PieGraphComponent.tsx
index 0066ec3..7c8bb1d 100644
--- a/app/src/components/ui/charts/PieGraphComponent.tsx
+++ b/app/src/components/ui/charts/PieGraphComponent.tsx
@@ -53,7 +53,6 @@ const PieChartComponent = ({
.getPropertyValue("--accent-color")
.trim();
- console.log("accentColor: ", accentColor);
const options = useMemo(
() => ({
responsive: true,
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index 42dc082..7185fc6 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -5,6 +5,7 @@ import {
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
+import { AddIcon } from "../../icons/ExportCommonIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -18,7 +19,7 @@ interface ButtonsProps {
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
- zoneViewPortPosition: number[]
+ zoneViewPortPosition: number[];
widgets: {
id: string;
type: string;
@@ -35,7 +36,7 @@ interface ButtonsProps {
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
- zoneViewPortPosition: number[]
+ zoneViewPortPosition: number[];
widgets: {
id: string;
type: string;
@@ -116,7 +117,7 @@ const AddButtons: React.FC
{/* "+" Button */}
{/* Extra Buttons */}
@@ -161,19 +166,16 @@ const AddButtons: React.FC = ({
= ({
// Ref for the container element
const containerRef = useRef(null);
- // Example state for selectedOption and options (adjust based on your actual use case)
- const [selectedOption, setSelectedOption] = React.useState(
- null
- );
- // console.log('setSelectedOption: ', setSelectedOption);
- const [options, setOptions] = React.useState([]);
- // console.log('setOptions: ', setOptions);
+ // State to track overflow visibility
+ const [showLeftArrow, setShowLeftArrow] = useState(false);
+ const [showRightArrow, setShowRightArrow] = useState(false);
- // Scroll to the selected option when it changes
- useEffect(() => {
+ // Function to calculate overflow state
+ const updateOverflowState = useCallback(() => {
const container = containerRef.current;
- if (container && selectedOption) {
- // Handle scrolling to the selected option
- const index = options.findIndex((option) => {
- const formattedOption = formatOptionName(option);
- const selectedFormattedOption =
- selectedOption?.split("_")[1] || selectedOption;
- return formattedOption === selectedFormattedOption;
- });
-
- if (index !== -1) {
- const optionElement = container.children[index] as HTMLElement;
- if (optionElement) {
- optionElement.scrollIntoView({
- behavior: "smooth",
- block: "nearest",
- inline: "center",
- });
- }
- }
- }
- }, [selectedOption, options]);
-
- useEffect(() => {
- const container = containerRef.current;
-
- const handleWheel = (event: WheelEvent) => {
- event.preventDefault();
- if (container) {
- container.scrollBy({
- left: event.deltaY * 2, // Adjust the multiplier for faster scrolling
- behavior: "smooth",
- });
- }
- };
-
- let isDragging = false;
- let startX: number;
- let scrollLeft: number;
-
- const handleMouseDown = (event: MouseEvent) => {
- isDragging = true;
- startX = event.pageX - (container?.offsetLeft || 0);
- scrollLeft = container?.scrollLeft || 0;
- };
-
- const handleMouseMove = (event: MouseEvent) => {
- if (!isDragging || !container) return;
- event.preventDefault();
- const x = event.pageX - (container.offsetLeft || 0);
- const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging
- container.scrollLeft = scrollLeft - walk;
- };
-
- const handleMouseUp = () => {
- isDragging = false;
- };
-
- const handleMouseLeave = () => {
- isDragging = false;
- };
-
if (container) {
- container.addEventListener("wheel", handleWheel, { passive: false });
- container.addEventListener("mousedown", handleMouseDown);
- container.addEventListener("mousemove", handleMouseMove);
- container.addEventListener("mouseup", handleMouseUp);
- container.addEventListener("mouseleave", handleMouseLeave);
- }
+ const isOverflowing = container.scrollWidth > container.clientWidth;
+ const canScrollLeft = container.scrollLeft > 0;
+ const canScrollRight =
+ container.scrollLeft + container.clientWidth < container.scrollWidth;
- return () => {
- if (container) {
- container.removeEventListener("wheel", handleWheel);
- container.removeEventListener("mousedown", handleMouseDown);
- container.removeEventListener("mousemove", handleMouseMove);
- container.removeEventListener("mouseup", handleMouseUp);
- container.removeEventListener("mouseleave", handleMouseLeave);
- }
- };
+ setShowLeftArrow(isOverflowing && canScrollLeft);
+ setShowRightArrow(isOverflowing && canScrollRight);
+ }
}, []);
- // Helper function to format option names (customize as needed)
- const formatOptionName = (option: string): string => {
- // Replace underscores with spaces and capitalize the first letter
- return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+ useEffect(() => {
+ const container = containerRef.current;
+
+ if (container) {
+ // Initial calculation after the DOM has been rendered
+ const handleInitialRender = () => {
+ requestAnimationFrame(updateOverflowState);
+ };
+
+ handleInitialRender();
+
+ // Update on window resize or scroll
+ const handleResize = () => updateOverflowState();
+ const handleScroll = () => updateOverflowState();
+
+ // Add mouse wheel listener for horizontal scrolling
+ const handleWheel = (event: WheelEvent) => {
+ event.preventDefault(); // Prevent default vertical scrolling
+ if (container) {
+ container.scrollBy({
+ left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll
+ behavior: "smooth",
+ });
+ }
+ };
+
+ container.addEventListener("scroll", handleScroll);
+ window.addEventListener("resize", handleResize);
+ container.addEventListener("wheel", handleWheel, { passive: false });
+
+ return () => {
+ container.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("resize", handleResize);
+ container.removeEventListener("wheel", handleWheel);
+ };
+ }
+ }, [updateOverflowState]);
+
+ // Handle scrolling with navigation arrows
+ const handleScrollLeft = () => {
+ const container = containerRef.current;
+ if (container) {
+ container.scrollBy({
+ left: -200, // Scroll left by 200px
+ behavior: "smooth",
+ });
+ }
+ };
+
+ const handleScrollRight = () => {
+ const container = containerRef.current;
+ if (container) {
+ container.scrollBy({
+ left: 200, // Scroll right by 200px
+ behavior: "smooth",
+ });
+ }
};
return (
- ) => {
- 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 (
- <>
- ) => {
+ event.stopPropagation();
+ if (openKebabId === widget.id) {
+ setOpenKebabId(null);
+ } else {
+ setOpenKebabId(widget.id);
+ }
+ };
+
+ const widgetRef = useRef(null);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ widgetRef.current &&
+ !widgetRef.current.contains(event.target as Node)
+ ) {
+ setOpenKebabId(null);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [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 (
+ <>
+ >; // Add this line
}
const generateUniqueId = () =>
@@ -47,11 +48,13 @@ const Panel: React.FC = ({
selectedZone,
setSelectedZone,
hiddenPanels,
+ setZonesData,
}) => {
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
}>({});
+ const [openKebabId, setOpenKebabId] = useState(null);
const { isPlaying } = usePlayButtonStore();
@@ -69,8 +72,9 @@ const Panel: React.FC = ({
case "top":
case "bottom":
return {
- width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
- }px)`,
+ width: `calc(100% - ${
+ (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+ }px)`,
height: `${panelSize - 2}px`,
left: leftActive ? `${panelSize}px` : "0",
right: rightActive ? `${panelSize}px` : "0",
@@ -80,8 +84,9 @@ const Panel: React.FC = ({
case "right":
return {
width: `${panelSize - 2}px`,
- 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",
@@ -104,8 +109,8 @@ const Panel: React.FC = ({
if (currentWidgetsCount >= maxCapacity) return;
- console.log('draggedAsset: ', draggedAsset);
- console.log('panel: ', panel);
+ console.log("draggedAsset: ", draggedAsset);
+ console.log("panel: ", panel);
addWidgetToPanel(draggedAsset, panel);
};
@@ -133,6 +138,7 @@ const Panel: React.FC = ({
: Math.floor(dimensions.height / CHART_HEIGHT);
};
+ // while dublicate check this and add
const addWidgetToPanel = (asset: any, panel: Side) => {
const newWidget = {
...asset,
@@ -174,7 +180,7 @@ const Panel: React.FC = ({
const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
if (!selectedZone) return; // Ensure selectedZone is not null
- console.log('selectedZone: ', selectedZone);
+ console.log("selectedZone: ", selectedZone);
setSelectedZone((prev) => {
if (!prev) return prev; // Ensure prev is not null
@@ -197,9 +203,6 @@ const Panel: React.FC = ({
});
};
-
-
-
return (
<>
{selectedZone.activeSides.map((side) => (
@@ -237,6 +240,10 @@ const Panel: React.FC = ({
onReorder={(fromIndex, toIndex) =>
handleReorder(fromIndex, toIndex, side)
}
+ openKebabId={openKebabId}
+ setOpenKebabId={setOpenKebabId}
+ selectedZone={selectedZone}
+ setSelectedZone={setSelectedZone}
/>
))}
@@ -247,5 +254,3 @@ const Panel: React.FC
{/* Hide Panel */}
= ({
{/* Lock/Unlock Panel */}
)}
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 56c67bb..9f1028f 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 } from "react";
+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";
@@ -60,138 +61,128 @@ const DisplayZone: React.FC toggleVisibility(side)}
>
@@ -188,8 +190,9 @@ const AddButtons: React.FC = ({
}
onClick={() => toggleLockPanel(side)}
>
-
- {Object.keys(zonesData).map((zoneName, index) => (
-
);
};
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 9172fa4..339e7a6 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -1,164 +1,317 @@
-import { useWidgetStore } from "../../../store/useWidgetStore";
-import ProgressCard from "../realTimeVis/charts/ProgressCard";
-import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
-import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
-import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
-import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
-import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
-import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
-
-export const DraggableWidget = ({
- widget,
- hiddenPanels, // Add this prop to track hidden panels
- index, onReorder
-}: {
- widget: any;
- hiddenPanels: string[]; // Array of hidden panel names
- index: number; onReorder: (fromIndex: number, toIndex: number) => void
-}) => {
- const { selectedChartId, setSelectedChartId } = useWidgetStore();
-
- const handlePointerDown = () => {
- if (selectedChartId?.id !== widget.id) {
- setSelectedChartId(widget);
- }
- };
-
- // Determine if the widget's panel is hidden
- const isPanelHidden = hiddenPanels.includes(widget.panel);
-
- const handleDragStart = (event: React.DragEvent
+ {/* Left Arrow */}
+ {showLeftArrow && (
+
+ )}
+
+ {/* Zones Wrapper */}
+
- ))}
+ {/* Right Arrow */}
+ {showRightArrow && (
+
+ )}
+ {Object.keys(zonesData).map((zoneName, index) => (
+
-
- setSelectedZone({
- zoneName,
- activeSides: zonesData[zoneName].activeSides || [],
- panelOrder: zonesData[zoneName].panelOrder || [],
- lockedPanels: zonesData[zoneName].lockedPanels || [],
- widgets: zonesData[zoneName].widgets || [],
- zoneId: zonesData[zoneName]?.zoneId || "",
- zoneViewPortTarget: zonesData[zoneName].zoneViewPortTarget || [],
- zoneViewPortPosition:
- zonesData[zoneName].zoneViewPortPosition || [],
- });
- // setSelectedZone({
- // zoneName,
- // ...zonesData[zoneName],
- // });
- }}
- >
- {zoneName}
- {
+ onClick={() => {
+ console.log("zoneName: ", zoneName);
+ setSelectedZone({
+ zoneName,
+ activeSides: zonesData[zoneName].activeSides || [],
+ panelOrder: zonesData[zoneName].panelOrder || [],
+ lockedPanels: zonesData[zoneName].lockedPanels || [],
+ widgets: zonesData[zoneName].widgets || [],
+ zoneId: zonesData[zoneName]?.zoneId || "",
+ zoneViewPortTarget:
+ zonesData[zoneName].zoneViewPortTarget || [],
+ zoneViewPortPosition:
+ zonesData[zoneName].zoneViewPortPosition || [],
+ });
+ }}
+ >
+ {zoneName}
+
+ ))}
+
- {/* Render charts based on widget type */}
- {widget.type === "progress" && (
- item.fields)}
- />
- )} */}
- {widget.type === "pie" && (
-
-
- );
-};
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
+import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
+import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
+import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
+import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import {
+ DeleteIcon,
+ DublicateIcon,
+ KebabIcon,
+} from "../../icons/ExportCommonIcons";
+import { useEffect, useRef, useState } from "react";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+}
+
+export const DraggableWidget = ({
+ widget,
+ hiddenPanels,
+ index,
+ onReorder,
+ openKebabId,
+ setOpenKebabId,
+ selectedZone,
+ setSelectedZone,
+}: {
+ selectedZone: {
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ widgets: Widget[];
+ };
+ setSelectedZone: React.Dispatch<
+ React.SetStateAction<{
+ zoneName: string;
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[];
+ widgets: {
+ id: string;
+ type: string;
+ title: string;
+ panel: Side;
+ data: any;
+ }[];
+ }>
+ >;
+
+ widget: any;
+ hiddenPanels: string[];
+ index: number;
+ onReorder: (fromIndex: number, toIndex: number) => void;
+ openKebabId: string | null;
+ setOpenKebabId: (id: string | null) => void;
+}) => {
+ const { selectedChartId, setSelectedChartId } = useWidgetStore();
+ const [panelDimensions, setPanelDimensions] = useState<{
+ [side in Side]?: { width: number; height: number };
+ }>({});
+ const handlePointerDown = () => {
+ if (selectedChartId?.id !== widget.id) {
+ setSelectedChartId(widget);
+ }
+ };
+
+ const isPanelHidden = hiddenPanels.includes(widget.panel);
+
+ const deleteSelectedChart = () => {
+ const updatedWidgets = selectedZone.widgets.filter(
+ (w: Widget) => w.id !== widget.id
+ );
+
+ setSelectedZone((prevZone: any) => ({
+ ...prevZone,
+ widgets: updatedWidgets,
+ }));
+
+ setOpenKebabId(null);
+ };
+
+ const getCurrentWidgetCount = (panel: Side) =>
+ selectedZone.widgets.filter((w) => w.panel === panel).length;
+
+ const calculatePanelCapacity = (panel: Side) => {
+ const CHART_WIDTH = 150;
+ const CHART_HEIGHT = 150;
+ const FALLBACK_HORIZONTAL_CAPACITY = 5;
+ const FALLBACK_VERTICAL_CAPACITY = 3;
+
+ const dimensions = panelDimensions[panel];
+ if (!dimensions) {
+ return panel === "top" || panel === "bottom"
+ ? FALLBACK_HORIZONTAL_CAPACITY
+ : FALLBACK_VERTICAL_CAPACITY;
+ }
+
+ return panel === "top" || panel === "bottom"
+ ? Math.floor(dimensions.width / CHART_WIDTH)
+ : Math.floor(dimensions.height / CHART_HEIGHT);
+ };
+
+ const isPanelFull = (panel: Side) => {
+ const currentWidgetCount = getCurrentWidgetCount(panel);
+ const panelCapacity = calculatePanelCapacity(panel);
+ return currentWidgetCount >= panelCapacity;
+ };
+
+ const duplicateWidget = () => {
+ const duplicatedWidget: Widget = {
+ ...widget,
+ id: `${widget.id}-copy-${Date.now()}`,
+ };
+
+ setSelectedZone((prevZone: any) => ({
+ ...prevZone,
+ widgets: [...prevZone.widgets, duplicatedWidget],
+ }));
+
+ setOpenKebabId(null);
+
+ console.log("Duplicated widget with ID:", duplicatedWidget.id);
+ };
+
+ const handleKebabClick = (event: React.MouseEvent
+ {/* Kebab Icon */}
+
+
+ );
+};
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index 6cce425..3fee476 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -38,6 +38,7 @@ interface PanelProps {
}>
>;
hiddenPanels: string[];
+ setZonesData: React.Dispatch
+
+
+ {/* Kebab Options */}
+ {openKebabId === widget.id && (
+
+
+ )}
+
+ {/* Render charts based on widget type */}
+ {widget.type === "progress" && (
+
+
+
+
+ Duplicate
+
+
+
+
+ Delete
+
+
{open && (
@@ -199,11 +206,11 @@ interface MultiLevelDropdownProps {
}
// Main Multi-Level Dropdown Component
-const MultiLevelDropdown = ({
- data,
- onSelect,
+const MultiLevelDropdown = ({
+ data,
+ onSelect,
onUnselect,
- selectedValue
+ selectedValue,
}: MultiLevelDropdownProps) => {
const [open, setOpen] = useState(false);
const dropdownRef = useRef(null);
@@ -236,7 +243,7 @@ const MultiLevelDropdown = ({
};
// Determine the display label
- const displayLabel = selectedValue
+ const displayLabel = selectedValue
? `${selectedValue.name} - ${selectedValue.fields}`
: "Dropdown trigger";
@@ -270,4 +277,3 @@ const MultiLevelDropdown = ({
};
export default MultiLevelDropdown;
-
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 (
+ = ({
+ {/* Add canvas here */}
+
+ );
+};
+
+export default SimulationPlayer;
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
index a3c1cb0..be474a2 100644
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -37,6 +37,7 @@ const AssetPreview: React.FC
+
+
+
+ {
+ handleReset();
+ }}
+ >
+
+ {
+ handlePlayStop();
+ }}
+ >
+
+ {
+ handleExit();
+ }}
+ >
+
+
+
+ 0.5x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {speed.toFixed(1)}x
+
+
+ 50x
+
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
index 3df2e1f..646fe39 100644
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@@ -8,24 +8,51 @@ import {
} from "../../components/icons/marketPlaceIcons";
import assetImage from "../../assets/image/image.png";
-const Card: React.FC = () => {
+
+interface CardProps {
+ assetName: string;
+ uploadedOn: string;
+ price: number;
+ rating: number;
+ views: number;
+ onSelectCard: (cardData: {
+ assetName: string;
+ uploadedOn: string;
+ price: number;
+ rating: number;
+ views: number;
+ }) => void;
+}
+
+const Card: React.FC = ({
+ assetName,
+ uploadedOn,
+ price,
+ rating,
+ views,
+ onSelectCard,
+}) => {
+ const handleCardSelect = () => {
+ onSelectCard({ assetName, uploadedOn, price, rating, views });
+ };
+
return (
-
+
-
Asset name
- Uploaded on-12 Jan 23
+ {assetName}
+ {uploadedOn}
-
- ₹ 36,500/unit
+ ₹ {price}/unit
Buy now
+
+ Buy now
+
Products You May Like
- {array.map((index) => (
- */}
+ {selectedCard && (
+ */}