+
- {searchValue ? (
-
-
-
-
Results for {searchValue}
+
+
+ {searchValue ? (
+
+
+
+
Results for {searchValue}
+
+
+ {categoryAssets &&
+ categoryAssets?.map((asset: any, index: number) => (
+
+
+
+
+ {asset.filename
+ .split("_")
+ .map(
+ (word: any) =>
+ word.charAt(0).toUpperCase() + word.slice(1)
+ )
+ .join(" ")}
+
+
+ ))}
+
+
-
- {categoryAssets &&
- categoryAssets?.map((asset: any, index: number) => (
+ ) : selectedCategory ? (
+
+
+ {selectedCategory}{" "}
{
+ setSelectedCategory(null);
+ setCategoryAssets([]);
+ }}
>
-
+ ← Back
+
+
+ {categoryAssets &&
+ categoryAssets?.map((asset: any, index: number) => (
+
+
{
+ setSelectedItem({
+ name: asset.filename,
+ id: asset.AssetID,
+ type:
+ asset.type === "undefined"
+ ? undefined
+ : asset.type,
+ });
+ }}
+ />
-
- {asset.filename
- .split("_")
- .map(
- (word: any) =>
- word.charAt(0).toUpperCase() + word.slice(1)
- )
- .join(" ")}
-
-
- ))}
-
-
- ) : selectedCategory ? (
-
-
{
- setSelectedCategory(null);
- setCategoryAssets([]);
- }}
- >
- ← Back
-
-
{selectedCategory}
-
- {categoryAssets &&
- categoryAssets?.map((asset: any, index: number) => (
-
-
{
- setSelectedItem({
- name: asset.filename,
- id: asset.AssetID,
- type:
- asset.type === "undefined" ? undefined : asset.type,
- });
- }}
- />
-
-
- {asset.filename
- .split("_")
- .map(
- (word: any) =>
- word.charAt(0).toUpperCase() + word.slice(1)
- )
- .join(" ")}
-
-
- ))}
-
-
- ) : (
-
-
Categories
-
- {Array.from(
- new Set(categoryList.map((asset) => asset.category))
- ).map((category, index) => {
- const categoryInfo = categoryList.find(
- (asset) => asset.category === category
- );
- return (
-
fetchCategoryAssets(category)}
- >
-
-
{category}
-
- );
- })}
-
-
- )}
+
+ {asset.filename
+ .split("_")
+ .map(
+ (word: any) =>
+ word.charAt(0).toUpperCase() + word.slice(1)
+ )
+ .join(" ")}
+
+
+ ))}
+
+
+ ) : (
+
+
Categories
+
+ {Array.from(
+ new Set(categoryList.map((asset) => asset.category))
+ ).map((category, index) => {
+ const categoryInfo = categoryList.find(
+ (asset) => asset.category === category
+ );
+ return (
+
fetchCategoryAssets(category)}
+ >
+
+
{category}
+
+ );
+ })}
+
+
+ )}
+
+
);
};
diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx
index 417f069..152c357 100644
--- a/app/src/components/layout/sidebarLeft/Outline.tsx
+++ b/app/src/components/layout/sidebarLeft/Outline.tsx
@@ -11,7 +11,7 @@ const Outline: React.FC = () => {
};
const dropdownItems = [
- { id: "1", name: "Ground Floor" },
+ { id: "1", name: "Ground Floor", active: true },
// { id: "2", name: "Floor 1" },
]; // Example dropdown items
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
index 993c46b..1a03986 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import ProcessAction from "../actions/ProcessAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function MachineMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "process">("default");
@@ -14,6 +15,9 @@ function MachineMechanics() {
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData) {
const point = getPointByUuid(
@@ -28,31 +32,54 @@ function MachineMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "process";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
};
const handleProcessTimeChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
processTime: parseFloat(value),
});
};
const handleMaterialSelect = (material: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
swapMaterial: material,
});
};
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
index c85da9f..f782019 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import StorageAction from "../actions/StorageAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function StorageMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
@@ -14,6 +15,9 @@ function StorageMechanics() {
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData) {
const point = getPointByUuid(
@@ -28,26 +32,67 @@ function StorageMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "store" | "spawn";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleCapacityChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
storageCapacity: parseInt(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
// Get current values from store
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 68464c9..35c2821 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -10,6 +10,7 @@ import {
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import TravelAction from "../actions/TravelAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function VehicleMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
@@ -18,6 +19,9 @@ function VehicleMechanics() {
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData && selectedEventData.data.type === 'vehicle') {
const point = getPointByUuid(
@@ -33,11 +37,34 @@ function VehicleMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
- updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
speed: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleActionTypeChange = (option: string) => {
@@ -45,28 +72,64 @@ function VehicleMechanics() {
const validOption = option as "travel";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleLoadCapacityChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
loadCapacity: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleUnloadDurationChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
unLoadDuration: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handlePickPointChange = (value: string) => {
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 3b2549a..1434446 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -91,44 +91,42 @@ const Trigger: React.FC = () => {
{selectedTrigger}
setActiveOption(option)}
/>
-
- {
- const newModel = [...triggeredModel];
- newModel[0] = option;
- setTriggeredModel(newModel);
- }}
- />
-
-
- {
- const newPoint = [...triggeredPoint];
- newPoint[0] = option;
- setTriggeredPoint(newPoint);
- }}
- />
-
-
- {
- const newAction = [...triggeredAction];
- newAction[0] = option;
- setTriggeredAction(newAction);
- }}
- />
-
+
{
+ const newModel = [...triggeredModel];
+ newModel[0] = option;
+ setTriggeredModel(newModel);
+ }}
+ />
+ {
+ const newPoint = [...triggeredPoint];
+ newPoint[0] = option;
+ setTriggeredPoint(newPoint);
+ }}
+ />
+ {
+ const newAction = [...triggeredAction];
+ newAction[0] = option;
+ setTriggeredAction(newAction);
+ }}
+ />
{/* Dynamically create progress bars based on shiftUtilization array */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
))}
@@ -156,11 +157,11 @@ const ThroughputSummary = () => {
{/* Dynamically create shift indicators with random colors */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index d0b62e8..0d93d72 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -3,7 +3,6 @@ import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useFloorItems, useZones } from "../../../store/store";
-import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
interface DropDownListProps {
value?: string; // Value to display in the DropDownList
@@ -17,6 +16,17 @@ interface DropDownListProps {
remove?: boolean;
}
+interface Zone {
+ zoneId: string;
+ zoneName: string;
+ points: [number, number, number][]; // polygon vertices
+}
+interface ZoneData {
+ id: string;
+ name: string;
+ assets: { id: string; name: string; position?: []; rotation?: {} }[];
+}
+
const DropDownList: React.FC
= ({
value = "Dropdown",
items = [],
@@ -33,38 +43,30 @@ const DropDownList: React.FC = ({
remove,
}) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
- const { zones, setZones } = useZones();
+ const { zones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
- interface Asset {
- id: string;
- name: string;
- position: [number, number, number]; // x, y, z
- }
- interface Zone {
- zoneId: string;
- zoneName: string;
- points: [number, number, number][]; // polygon vertices
- }
- interface ZoneData {
- id: string;
- name: string;
- assets: { id: string; name: string; position?: []; rotation?: {} }[];
- }
const [zoneDataList, setZoneDataList] = useState([]);
const { floorItems } = useFloorItems();
- const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
+ const isPointInsidePolygon = (
+ point: [number, number],
+ polygon: [number, number][]
+ ) => {
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
- const xi = polygon[i][0], zi = polygon[i][1];
- const xj = polygon[j][0], zj = polygon[j][1];
+ const xi = polygon[i][0],
+ zi = polygon[i][1];
+ const xj = polygon[j][0],
+ zj = polygon[j][1];
- const intersect = ((zi > point[1]) !== (zj > point[1])) &&
- (point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
+ const intersect =
+ // eslint-disable-next-line no-mixed-operators
+ zi > point[1] !== zj > point[1] &&
+ point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
if (intersect) inside = !inside;
}
@@ -73,18 +75,21 @@ const DropDownList: React.FC = ({
useEffect(() => {
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
- const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
+ const polygon2D = zone.points.map((p: [number, number, number]) => [
+ p[0],
+ p[2],
+ ]);
const assetsInZone = floorItems
.filter((item: any) => {
const [x, , z] = item.position;
- return isPointInsidePolygon([x, z], polygon2D);
+ return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
})
.map((item: any) => ({
id: item.modelUuid,
name: item.modelName,
position: item.position,
- rotation: item.rotation
+ rotation: item.rotation,
}));
return {
@@ -99,9 +104,9 @@ const DropDownList: React.FC = ({
return (
-
+
+
{showFocusIcon && (
@@ -118,13 +123,13 @@ const DropDownList: React.FC = ({
)}
-
+
{isOpen && (
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index cdd2a53..eebcaa7 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -12,7 +12,6 @@ import {
LockIcon,
RemoveIcon,
} from "../../icons/ExportCommonIcons";
-import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
@@ -32,20 +31,19 @@ interface ZoneItem {
interface ListProps {
items?: ZoneItem[];
- placeholder?: string;
remove?: boolean;
}
const List: React.FC
= ({ items = [], remove }) => {
- const { activeModule, setActiveModule } = useModuleStore();
+ const { activeModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
- const { zones, setZones } = useZones();
+ const { zones } = useZones();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState>(
{}
);
- const { floorItems, setFloorItems } = useFloorItems();
+ const { setFloorItems } = useFloorItems();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
@@ -70,39 +68,36 @@ const List: React.FC = ({ items = [], remove }) => {
async function handleSelectZone(id: string) {
try {
if (selectedZone?.zoneId === id) {
-
return;
}
setSubModule("zoneProperties");
const email = localStorage.getItem("email");
- const organization = email?.split("@")[1]?.split(".")[0] || "";
+ const organization = email?.split("@")[1]?.split(".")[0] ?? "";
let response = await getZoneData(id, organization);
setSelectedZone({
zoneName: response?.zoneName,
- activeSides: response?.activeSides || [],
- panelOrder: response?.panelOrder || [],
- lockedPanels: response?.lockedPanels || [],
- widgets: response?.widgets || [],
+ activeSides: response?.activeSides ?? [],
+ panelOrder: response?.panelOrder ?? [],
+ lockedPanels: response?.lockedPanels ?? [],
+ widgets: response?.widgets ?? [],
zoneId: response?.zoneId,
- zoneViewPortTarget: response?.viewPortCenter || [],
- zoneViewPortPosition: response?.viewPortposition || [],
+ zoneViewPortTarget: response?.viewPortCenter ?? [],
+ zoneViewPortPosition: response?.viewPortposition ?? [],
});
-
-
} catch (error) {
-
+ console.log(error);
}
}
function handleAssetClick(asset: Asset) {
- setZoneAssetId(asset)
+ setZoneAssetId(asset);
}
async function handleZoneNameChange(newName: string) {
- const email = localStorage.getItem("email") || "";
+ const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const isDuplicate = zones.some(
@@ -128,12 +123,16 @@ const List: React.FC = ({ items = [], remove }) => {
}
async function handleZoneAssetName(newName: string) {
- const email = localStorage.getItem("email") || "";
+ const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
if (zoneAssetId?.id) {
- let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
- console.log('response: ', response);
+ let response = await setFloorItemApi(
+ organization,
+ zoneAssetId.id,
+ newName
+ );
+ console.log("response: ", response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) =>
floorItems.modelUuid === zoneAssetId.id
@@ -160,7 +159,7 @@ const List: React.FC = ({ items = [], remove }) => {
-
handleSelectZone(item.id)}
>
@@ -169,8 +168,7 @@ const List: React.FC = ({ items = [], remove }) => {
onRename={handleZoneNameChange}
checkDuplicate={checkZoneNameDuplicate}
/>
-
-
+
@@ -185,12 +183,12 @@ const List: React.FC = ({ items = [], remove }) => {
)}
{item.assets && item.assets.length > 0 && (
-
toggleZoneExpansion(item.id)}
>
-
+
)}
@@ -206,20 +204,26 @@ const List: React.FC = ({ items = [], remove }) => {
className="list-container asset-item"
>
-
handleAssetClick(asset)} >
-
-
+
-
+
-
+
+
+
{remove && (
-
+
+
)}
{
+ const MAX_SPEED = 8; // Maximum speed
+
+ const [expand, setExpand] = useState(true);
+
const { speed, setSpeed } = useAnimationPlaySpeed();
const [playSimulation, setPlaySimulation] = useState(false);
const { setIsPlaying } = usePlayButtonStore();
@@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
// Button functions
const handleReset = () => {
- setReset(true);
- // setReset(!isReset);
+ setReset(!isReset);
setSpeed(1);
};
const handlePlayStop = () => {
@@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
};
const calculateHandlePosition = () => {
- return ((speed - 0.5) / (8 - 0.5)) * 100;
+ return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
};
const handleMouseDown = () => {
@@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
{ name: "process 9", completed: 90 }, // 90% completed
{ name: "process 10", completed: 30 }, // 30% completed
];
- const [expand, setExpand] = useState(false);
// Move getRandomColor out of render
const getRandomColor = () => {
const letters = "0123456789ABCDEF";
@@ -121,11 +124,11 @@ 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);
- const [playerPosition, setPlayerPosition] = useState(0);
+ const [playerPosition, setPlayerPosition] = useState(20); // initial position
const handleProcessMouseDown = (e: React.MouseEvent) => {
if (!processWrapperRef.current) return;
@@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
-
{
handleReset();
@@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
>
Reset
-
-
+
-
+
-
+
+
+
@@ -295,7 +298,7 @@ const SimulationPlayer: React.FC = () => {
Speed
-
0X
+
0.5X
@@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
-
{speed.toFixed(1)}x
-
+
-
8x
+
4x