Production Capacity
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
index e4b60b4..8e8c444 100644
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -35,8 +35,10 @@ const SmoothLineGraphComponent: React.FCReturn of Investment
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
index 7e3de43..25ee39b 100644
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -1,6 +1,9 @@
import { Html } from "@react-three/drei";
-import image from "../../../../assets/image/temp/image.png";
-const StateWorking = () => {
+// import image from "../../../../assets/image/temp/image.png";
+interface StateWorkingProps {
+ position: [number, number, number];
+}
+const StateWorking: React.FC = ({ position }) => {
const datas = [
{ key: "Oil Tank:", value: "24/341" },
{ key: "Oil Refin:", value: 36.023 },
@@ -10,7 +13,10 @@ const StateWorking = () => {
{ key: "Time:", value: 13 - 9 - 2023 },
];
return (
-
+
{/* Data */}
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx
index b12fc14..220c2a2 100644
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -37,7 +37,12 @@ const LineGraphComponent: React.FC = ({ data, options }) => {
return = ({ position }) => {
+
// Sample data for the line graph
const graphData: ChartData<"line"> = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -86,7 +91,10 @@ const Throughput = () => {
};
return (
-
+
@@ -20,7 +26,7 @@ const StateWorking = () => {
- 
+ {/* */}
Throughput
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
index 5833986..4c90582 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { ChartType } from "chart.js/auto";
import ChartComponent from "./ChartComponent";
import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
+import { generateUniqueId } from "../../../../../functions/generateUniqueId";
const chartTypes: ChartType[] = [
"bar",
@@ -18,7 +19,7 @@ const sampleData = {
{
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "#6f42c1",
- borderColor: "#ffffff",
+ borderColor: "#b392f0",
borderWidth: 1,
},
],
@@ -40,7 +41,8 @@ const ChartWidget: React.FC = ({ type, index, title }) => {
onDragStart={() => {
setDraggedAsset({
type,
- id: `widget-${index + 1}`,
+ id: generateUniqueId(
+ ),
title,
panel: "top",
data: sampleData,
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
index 2862cef..849c051 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
@@ -2,6 +2,7 @@ import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
import widget3 from "../../../../../assets/image/3D/StateWorking.png";
import widget4 from "../../../../../assets/image/3D/Throughput.png";
+import { useAsset3dWidget } from "../../../../../store/store";
const Widgets3D = () => {
const widgets = [
{ name: "Widget 1", img: widget1 },
@@ -9,17 +10,38 @@ const Widgets3D = () => {
{ name: "Widget 3", img: widget3 },
{ name: "Widget 4", img: widget4 },
];
+ const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+
return (
{widgets?.map((widget, index) => (
-
-
+ )}
+ {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Vehicle" && (
+
)}
diff --git a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
new file mode 100644
index 0000000..a1f8bf3
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -0,0 +1,586 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import {
+ AddIcon,
+ InfoIcon,
+ RemoveIcon,
+ ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
+import EyeDropInput from "../../../ui/inputs/EyeDropInput";
+import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
+import * as THREE from 'three';
+import * as Types from '../../../../types/world/worldTypes';
+import InputToggle from "../../../ui/inputs/InputToggle";
+
+const ConveyorMechanics: React.FC = () => {
+ const { selectedActionSphere } = useSelectedActionSphere();
+ const { selectedPath, setSelectedPath } = useSelectedPath();
+ const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+
+ const actionsContainerRef = useRef(null);
+ const triggersContainerRef = useRef(null);
+
+ const selectedPoint = useMemo(() => {
+ if (!selectedActionSphere) return null;
+ return simulationPaths
+ .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+ .flatMap((path) => path.points)
+ .find((point) => point.uuid === selectedActionSphere.point.uuid);
+ }, [selectedActionSphere, simulationPaths]);
+
+ const handleAddAction = () => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) => {
+ if (path.type === "Conveyor") {
+ return {
+ ...path,
+ points: path.points.map((point) => {
+ if (point.uuid === selectedActionSphere.point.uuid) {
+ const actionIndex = point.actions.length;
+ const newAction = {
+ uuid: THREE.MathUtils.generateUUID(),
+ name: `Action ${actionIndex + 1}`,
+ type: 'Inherit',
+ material: 'Inherit',
+ delay: 'Inherit',
+ spawnInterval: 'Inherit',
+ isUsed: false
+ };
+
+ return { ...point, actions: [...point.actions, newAction] };
+ }
+ return point;
+ }),
+ };
+ }
+ return path;
+ });
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleDeleteAction = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleActionSelect = (uuid: string, actionType: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid
+ ? {
+ ...action,
+ type: actionType,
+ material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
+ delay: actionType === 'Delay' ? 'Inherit' : action.delay,
+ spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
+ }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Update the selected item to reflect changes
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ const updatedAction = updatedPaths
+ .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+ .flatMap(path => path.points)
+ .find(p => p.uuid === selectedActionSphere.point.uuid)
+ ?.actions.find(a => a.uuid === uuid);
+
+ if (updatedAction) {
+ setSelectedItem({
+ type: "action",
+ item: updatedAction
+ });
+ }
+ }
+ };
+
+ // Modified handleMaterialSelect to ensure it only applies to relevant action types
+ const handleMaterialSelect = (uuid: string, material: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid &&
+ (action.type === 'Spawn' || action.type === 'Swap')
+ ? { ...action, material }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Update selected item if it's the current action
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ material
+ }
+ });
+ }
+ };
+
+ const handleDelayChange = (uuid: string, delay: number | string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid ? { ...action, delay } : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid ? { ...action, spawnInterval } : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleSpeedChange = (speed: number) => {
+ if (!selectedPath) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
+ };
+
+ const handleAddTrigger = () => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) => {
+ if (point.uuid === selectedActionSphere.point.uuid) {
+ const triggerIndex = point.triggers.length;
+ const newTrigger = {
+ uuid: THREE.MathUtils.generateUUID(),
+ name: `Trigger ${triggerIndex + 1}`,
+ type: '',
+ isUsed: false
+ };
+
+ return { ...point, triggers: [...point.triggers, newTrigger] };
+ }
+ return point;
+ }),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleDeleteTrigger = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleTriggerSelect = (uuid: string, triggerType: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) =>
+ trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ // Update the toggle handlers to immediately update the selected item
+ const handleActionToggle = (uuid: string) => {
+ if (!selectedActionSphere) return;
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) => ({
+ ...action,
+ isUsed: action.uuid === uuid ? !action.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Immediately update the selected item if it's the one being toggled
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ isUsed: !selectedItem.item.isUsed
+ }
+ });
+ }
+ };
+
+ // Do the same for trigger toggle
+ const handleTriggerToggle = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) => ({
+ ...trigger,
+ isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Immediately update the selected item if it's the one being toggled
+ if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ isUsed: !selectedItem.item.isUsed
+ }
+ });
+ }
+ };
+
+ const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
+
+ useEffect(() => {
+ setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
+ }, [selectedActionSphere]);
+
+ return (
+ (null);
- const triggersContainerRef = useRef(null);
-
- const selectedPoint = useMemo(() => {
- if (!selectedActionSphere) return null;
- return simulationPaths.flatMap((path) => path.points).find((point) => point.uuid === selectedActionSphere.point.uuid);
- }, [selectedActionSphere, simulationPaths]);
-
- const handleAddAction = () => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) => {
- if (point.uuid === selectedActionSphere.point.uuid) {
- const actionIndex = point.actions.length;
- const newAction = {
- uuid: THREE.MathUtils.generateUUID(),
- name: `Action ${actionIndex + 1}`,
- type: 'Inherit',
- material: 'Inherit',
- delay: 'Inherit',
- spawnInterval: 'Inherit',
- isUsed: false
- };
-
- return { ...point, actions: [...point.actions, newAction] };
- }
- return point;
- }),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleDeleteAction = (uuid: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleActionSelect = (uuid: string, actionType: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid
- ? {
- ...action,
- type: actionType,
- // Reset dependent fields when type changes
- material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
- delay: actionType === 'Delay' ? 'Inherit' : action.delay,
- spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
- }
- : action
- ),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
-
- // Update the selected item to reflect changes
- if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
- const updatedAction = updatedPaths
- .flatMap(path => path.points)
- .find(p => p.uuid === selectedActionSphere.point.uuid)
- ?.actions.find(a => a.uuid === uuid);
-
- if (updatedAction) {
- setSelectedItem({
- type: "action",
- item: updatedAction
- });
- }
- }
- };
-
- // Modified handleMaterialSelect to ensure it only applies to relevant action types
- const handleMaterialSelect = (uuid: string, material: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid &&
- (action.type === 'Spawn' || action.type === 'Swap')
- ? { ...action, material }
- : action
- ),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
-
- // Update selected item if it's the current action
- if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
- setSelectedItem({
- ...selectedItem,
- item: {
- ...selectedItem.item,
- material
- }
- });
- }
- };
-
- const handleDelayChange = (uuid: string, delay: number | string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid ? { ...action, delay } : action
- ),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid ? { ...action, spawnInterval } : action
- ),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleSpeedChange = (speed: number) => {
- if (!selectedPath) return;
-
- const updatedPaths = simulationPaths.map((path) =>
- path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
- );
-
- setSimulationPaths(updatedPaths);
- setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
- };
-
- const handleAddTrigger = () => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) => {
- if (point.uuid === selectedActionSphere.point.uuid) {
- const triggerIndex = point.triggers.length;
- const newTrigger = {
- uuid: THREE.MathUtils.generateUUID(),
- name: `Trigger ${triggerIndex + 1}`,
- type: '',
- isUsed: false
- };
-
- return { ...point, triggers: [...point.triggers, newTrigger] };
- }
- return point;
- }),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleDeleteTrigger = (uuid: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- const handleTriggerSelect = (uuid: string, triggerType: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- triggers: point.triggers.map((trigger) =>
- trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
- ),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
- };
-
- // Update the toggle handlers to immediately update the selected item
- const handleActionToggle = (uuid: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) => ({
- ...action,
- isUsed: action.uuid === uuid ? !action.isUsed : false,
- })),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
-
- // Immediately update the selected item if it's the one being toggled
- if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
- setSelectedItem({
- ...selectedItem,
- item: {
- ...selectedItem.item,
- isUsed: !selectedItem.item.isUsed
- }
- });
- }
- };
-
- // Do the same for trigger toggle
- const handleTriggerToggle = (uuid: string) => {
- if (!selectedActionSphere) return;
-
- const updatedPaths = simulationPaths.map((path) => ({
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- triggers: point.triggers.map((trigger) => ({
- ...trigger,
- isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
- })),
- }
- : point
- ),
- }));
-
- setSimulationPaths(updatedPaths);
-
- // Immediately update the selected item if it's the one being toggled
- if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
- setSelectedItem({
- ...selectedItem,
- item: {
- ...selectedItem.item,
- isUsed: !selectedItem.item.isUsed
- }
- });
- }
- };
-
- const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
-
- useEffect(() => {
- setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
- }, [selectedActionSphere]);
-
- return (
- (null);
+ const triggersContainerRef = useRef(null);
+
+ const selectedPoint = useMemo(() => {
+ if (!selectedActionSphere) return null;
+ return simulationPaths
+ .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+ .flatMap((path) => path.points)
+ .find((point) => point.uuid === selectedActionSphere.point.uuid);
+ }, [selectedActionSphere, simulationPaths]);
+
+ const handleAddAction = () => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) => {
+ if (path.type === "Conveyor") {
+ return {
+ ...path,
+ points: path.points.map((point) => {
+ if (point.uuid === selectedActionSphere.point.uuid) {
+ const actionIndex = point.actions.length;
+ const newAction = {
+ uuid: THREE.MathUtils.generateUUID(),
+ name: `Action ${actionIndex + 1}`,
+ type: 'Inherit',
+ material: 'Inherit',
+ delay: 'Inherit',
+ spawnInterval: 'Inherit',
+ isUsed: false
+ };
+
+ return { ...point, actions: [...point.actions, newAction] };
+ }
+ return point;
+ }),
+ };
+ }
+ return path;
+ });
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleDeleteAction = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleActionSelect = (uuid: string, actionType: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid
+ ? {
+ ...action,
+ type: actionType,
+ material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
+ delay: actionType === 'Delay' ? 'Inherit' : action.delay,
+ spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
+ }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Update the selected item to reflect changes
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ const updatedAction = updatedPaths
+ .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+ .flatMap(path => path.points)
+ .find(p => p.uuid === selectedActionSphere.point.uuid)
+ ?.actions.find(a => a.uuid === uuid);
+
+ if (updatedAction) {
+ setSelectedItem({
+ type: "action",
+ item: updatedAction
+ });
+ }
+ }
+ };
+
+ // Modified handleMaterialSelect to ensure it only applies to relevant action types
+ const handleMaterialSelect = (uuid: string, material: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid &&
+ (action.type === 'Spawn' || action.type === 'Swap')
+ ? { ...action, material }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Update selected item if it's the current action
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ material
+ }
+ });
+ }
+ };
+
+ const handleDelayChange = (uuid: string, delay: number | string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid ? { ...action, delay } : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid ? { ...action, spawnInterval } : action
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleSpeedChange = (speed: number) => {
+ if (!selectedPath) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
+ };
+
+ const handleAddTrigger = () => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) => {
+ if (point.uuid === selectedActionSphere.point.uuid) {
+ const triggerIndex = point.triggers.length;
+ const newTrigger = {
+ uuid: THREE.MathUtils.generateUUID(),
+ name: `Trigger ${triggerIndex + 1}`,
+ type: '',
+ isUsed: false
+ };
+
+ return { ...point, triggers: [...point.triggers, newTrigger] };
+ }
+ return point;
+ }),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleDeleteTrigger = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ const handleTriggerSelect = (uuid: string, triggerType: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) =>
+ trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
+ ),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+ };
+
+ // Update the toggle handlers to immediately update the selected item
+ const handleActionToggle = (uuid: string) => {
+ if (!selectedActionSphere) return;
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) => ({
+ ...action,
+ isUsed: action.uuid === uuid ? !action.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Immediately update the selected item if it's the one being toggled
+ if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ isUsed: !selectedItem.item.isUsed
+ }
+ });
+ }
+ };
+
+ // Do the same for trigger toggle
+ const handleTriggerToggle = (uuid: string) => {
+ if (!selectedActionSphere) return;
+
+ const updatedPaths = simulationPaths.map((path) =>
+ path.type === "Conveyor"
+ ? {
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) => ({
+ ...trigger,
+ isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
+ : path
+ );
+
+ setSimulationPaths(updatedPaths);
+
+ // Immediately update the selected item if it's the one being toggled
+ if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
+ setSelectedItem({
+ ...selectedItem,
+ item: {
+ ...selectedItem.item,
+ isUsed: !selectedItem.item.isUsed
+ }
+ });
+ }
+ };
+
+ const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
+
+ useEffect(() => {
+ setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
+ }, [selectedActionSphere]);
+
+ return (
+ >({})
- const [selectedOption, setSelectedOption] = useState('1h')
- const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+// const LineGrapInput = (props: Props) => {
+// const [dropDowndata, setDropDownData] = useState({})
+// const [selections, setSelections] = useState>({})
+// const [selectedOption, setSelectedOption] = useState('1h')
+// const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+// const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
- const handleSelectDuration = (option: string) => {
- updateDuration(option); // Normalize for key matching
- };
+// const handleSelectDuration = (option: string) => {
+// updateDuration(option); // Normalize for key matching
+// };
- useEffect(() => {
- const fetchZoneData = async () => {
- try {
- const response = await axios.get('http://192.168.0.192:5010/getinput');
- if (response.status === 200) {
- console.log('dropdown data:', response.data);
- setDropDownData(response.data)
- } else {
- console.log('Unexpected response:', response);
- }
- } catch (error) {
- console.error('There was an error!', error);
- }
- };
- fetchZoneData();
- }, []);
+// useEffect(() => {
+// const fetchZoneData = async () => {
+// try {
+// const response = await axios.get(`http://${iotApiUrl}/getinput`);
+// if (response.status === 200) {
+// console.log('dropdown data:', response.data);
+// setDropDownData(response.data)
+// } else {
+// console.log('Unexpected response:', response);
+// }
+// } catch (error) {
+// console.error('There was an error!', error);
+// }
+// };
+// fetchZoneData();
+// }, []);
- useEffect(() => {
- console.log(selections);
- }, [selections])
+// useEffect(() => {
+// console.log(selections);
+// }, [selections])
- const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
- setSelections(prev => {
- if (selectedData === null) {
- const newSelections = { ...prev };
- delete newSelections[inputKey];
- return newSelections;
- } else {
- return {
- ...prev,
- [inputKey]: selectedData
- };
- }
- });
- };
+// const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
+// setSelections(prev => {
+// if (selectedData === null) {
+// const newSelections = { ...prev };
+// delete newSelections[inputKey];
+// return newSelections;
+// } else {
+// return {
+// ...prev,
+// [inputKey]: selectedData
+// };
+// }
+// });
+// };
- interface Measurement {
- name: string;
- fields: string;
- }
+// interface Measurement {
+// name: string;
+// fields: string;
+// }
- interface InputData {
- [key: string]: Measurement;
- }
+// interface InputData {
+// [key: string]: Measurement;
+// }
- const extractMeasurements = (input: InputData): Measurement[] => {
- return Object.values(input);
- };
+// const extractMeasurements = (input: InputData): Measurement[] => {
+// return Object.values(input);
+// };
- useEffect(() => {
- const measurementsData = extractMeasurements(selections);
- setMeasurements(measurementsData);
- }, [selections]);
+// useEffect(() => {
+// const measurementsData = extractMeasurements(selections);
+// setMeasurements(measurementsData);
+// }, [selections]);
- return (
- <>
- >(measurements);
+ const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+
+ useEffect(() => {
+ const fetchZoneData = async () => {
+ try {
+ const response = await axios.get(`http://${iotApiUrl}/getinput`);
+ if (response.status === 200) {
+ console.log("dropdown data:", response.data);
+ setDropDownData(response.data);
+ } else {
+ console.log("Unexpected response:", response);
+ }
+ } catch (error) {
+ console.error("There was an error!", error);
+ }
+ };
+ fetchZoneData();
+ }, []);
+
+ // Sync Zustand state when component mounts
+ useEffect(() => {
+ setSelections(measurements);
+ }, [measurements]);
+
+ const handleSelect = (inputKey: string, selectedData: { name: string; fields: string } | null) => {
+ setSelections((prev) => {
+ const newSelections = { ...prev };
+ if (selectedData === null) {
+ delete newSelections[inputKey];
+ } else {
+ newSelections[inputKey] = selectedData;
+ }
+ setMeasurements(newSelections); // Update Zustand store
+ return newSelections;
+ });
+ };
+
+ const handleSelectDuration = (option: string) => {
+ updateDuration(option);
+ };
+
+ return (
+ <>
+ >({})
+ const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
useEffect(() => {
const fetchZoneData = async () => {
try {
- const response = await axios.get('http://192.168.0.192:5010/getinput');
+ const response = await axios.get(`http://${iotApiUrl}/getinput`);
if (response.status === 200) {
console.log('dropdown data:', response.data);
setDropDownData(response.data)
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index 7185fc6..11a1d80 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -16,6 +16,7 @@ interface ButtonsProps {
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
+
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -33,6 +34,7 @@ interface ButtonsProps {
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
+
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -120,23 +122,39 @@ const AddButtons: React.FC = ({
console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone);
} else {
- // If the panel is not active, activate it
- const newActiveSides = [...selectedZone.activeSides, side];
+ const updatePanelData = async () => {
+ try {
+ // Get email and organization safely
+ const email = localStorage.getItem("email") || "";
+ const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; // Fallback value
- const updatedZone = {
- ...selectedZone,
- activeSides: newActiveSides,
- panelOrder: newActiveSides,
+ // Prevent duplicate side entries
+ const newActiveSides = selectedZone.activeSides.includes(side)
+ ? [...selectedZone.activeSides]
+ : [...selectedZone.activeSides, side];
+
+ const updatedZone = {
+ ...selectedZone,
+ activeSides: newActiveSides,
+ panelOrder: newActiveSides,
+ };
+
+ // API call
+ const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
+ console.log("response: ", response);
+
+ // Update state
+ console.log("updatedZone: ", updatedZone);
+ setSelectedZone(updatedZone);
+ } catch (error) {
+ console.error("Error updating panel data:", error);
+ }
};
- const email = localStorage.getItem("email");
- const organization = email!.split("@")[1].split(".")[0];
- // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
- // console.log('response: ', response);
- // Update the selectedZone state
- console.log("updatedZone: ", updatedZone);
- setSelectedZone(updatedZone);
+ updatePanelData(); // Call the async function
}
+
+
};
return (
@@ -146,9 +164,8 @@ const AddButtons: React.FC = ({
{widget.name}
+ {
+ let crt = e.target
+ if (crt instanceof HTMLElement) {
+ const widget = crt.cloneNode(true) as HTMLElement;
+ console.log('widget: ', widget);
+ e.dataTransfer.setDragImage(widget,0,0)
+ e.dataTransfer.effectAllowed="move"
+ }
+ }}
+ onPointerDown={() => {
+ setWidgetSelect("ui-" + widget.name);
+ }}
+ onPointerUp={() => {
+ setWidgetSelect(""); // Clearing selection correctly
+ }}
+ >
+ {/* 
))}
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index 0efe99b..3ba5595 100644
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -10,7 +10,7 @@ import {
SimulationIcon,
} from "../../icons/SimulationIcons";
import useToggleStore from "../../../store/useUIToggleStore";
-import MachineMechanics from "./mechanics/MachineMechanics";
+import ConveyorMechanics from "./mechanics/ConveyorMechanics";
import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
@@ -18,6 +18,7 @@ import { useSelectedActionSphere } from "../../../store/store";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import ZoneProperties from "./properties/ZoneProperties";
+import VehicleMechanics from "./mechanics/VehicleMechanics";
const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore();
@@ -98,17 +99,24 @@ const SideBarRight: React.FC = () => {
{toggleUI && activeModule === "simulation" && (
<>
- {subModule === "mechanics" && selectedActionSphere && (
+ {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Conveyor" && (
{widget.name}
*/}
-
+
+
)}
{subModule === "mechanics" && !selectedActionSphere && (
+ {/*
- {/*
+
+ );
+};
+
+export default ConveyorMechanics;
\ No newline at end of file
diff --git a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
deleted file mode 100644
index e1ecfb3..0000000
--- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
+++ /dev/null
@@ -1,533 +0,0 @@
-import React, { useRef, useState, useMemo, useEffect } from "react";
-import {
- AddIcon,
- InfoIcon,
- RemoveIcon,
- ResizeHeightIcon,
-} from "../../../icons/ExportCommonIcons";
-import RenameInput from "../../../ui/inputs/RenameInput";
-import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
-import LabledDropdown from "../../../ui/inputs/LabledDropdown";
-import RegularDropDown from "../../../ui/inputs/RegularDropDown";
-import { handleResize } from "../../../../functions/handleResizePannel";
-import EyeDropInput from "../../../ui/inputs/EyeDropInput";
-import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
-import * as THREE from 'three';
-import InputToggle from "../../../ui/inputs/InputToggle";
-
-const MachineMechanics: React.FC = () => {
- const { selectedActionSphere } = useSelectedActionSphere();
- const { selectedPath, setSelectedPath } = useSelectedPath();
- const { simulationPaths, setSimulationPaths } = useSimulationPaths();
-
- const actionsContainerRef = useRef
+ {selectedActionSphere?.path?.modelName || "point name not found"}
+
+
+
+ {!selectedPath &&
+ <>
+
+
+
+
+
+ Actions
+
+
+
+
+
+ {selectedPoint?.actions.map((action) => (
+
+
+
+ ))}
+ setSelectedItem({ type: "action", item: action })}
+ >
+
+ handleDeleteAction(action.uuid)}
+ >
+
+ handleResize(e, actionsContainerRef)}
+ >
+
+
+
+
+ }
+
+
+
+ Triggers
+
+
+
+
+
+ {selectedPoint?.triggers.map((trigger) => (
+
+
+
+ ))}
+ setSelectedItem({ type: "trigger", item: trigger })}
+ >
+
+ handleDeleteTrigger(trigger.uuid)}
+ >
+
+ handleResize(e, triggersContainerRef)}
+ >
+
+
+ {selectedItem && (
+ <>
+ handleActionToggle(selectedItem.item.uuid)}
+ />
+ handleActionSelect(selectedItem.item.uuid, option)}
+ />
+
+ {/* Only show material dropdown for Spawn/Swap actions */}
+ {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
+ handleMaterialSelect(selectedItem.item.uuid, option)}
+ />
+ )}
+
+ {/* Only show delay input for Delay actions */}
+ {selectedItem.item.type === 'Delay' && (
+ {
+ const numValue = parseInt(value);
+ handleDelayChange(
+ selectedItem.item.uuid,
+ !value ? 'Inherit' : numValue
+ );
+ }}
+ />
+ )}
+
+ {/* Only show spawn interval for Spawn actions */}
+ {selectedItem.item.type === 'Spawn' && (
+ {
+ handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
+ }}
+ />
+
+ )}
+
+ )}
+
+ {selectedItem.type === "trigger" && (
+ <>
+ handleTriggerToggle(selectedItem.item.uuid)}
+ />
+
+ handleTriggerSelect(selectedItem.item.uuid, option)}
+ />
+
+ )}
+
+ )}
+
+ {selectedPath && !selectedItem && (
+
+ {selectedItem.item.name}
+
+ {selectedItem.type === "action" && (
+ <>
+
+ handleSpeedChange(parseFloat(value))}
+ />
+
+ )}
+
+
+
-
- );
-};
-
-export default MachineMechanics;
\ No newline at end of file
diff --git a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
new file mode 100644
index 0000000..7d3ffb0
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
@@ -0,0 +1,561 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import {
+ AddIcon,
+ InfoIcon,
+ RemoveIcon,
+ ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
+import EyeDropInput from "../../../ui/inputs/EyeDropInput";
+import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
+import * as THREE from 'three';
+import * as Types from '../../../../types/world/worldTypes';
+import InputToggle from "../../../ui/inputs/InputToggle";
+
+const VehicleMechanics: React.FC = () => {
+ const { selectedActionSphere } = useSelectedActionSphere();
+ const { selectedPath, setSelectedPath } = useSelectedPath();
+ const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+
+ const actionsContainerRef = useRef
- {selectedActionSphere?.path?.modelName || "point name not found"}
-
-
-
-
-
-
-
-
- Actions
-
-
-
-
-
- {selectedPoint?.actions.map((action) => (
-
-
-
- ))}
- setSelectedItem({ type: "action", item: action })}
- >
-
- handleDeleteAction(action.uuid)}
- >
-
- handleResize(e, actionsContainerRef)}
- >
-
-
-
-
-
- Triggers
-
-
-
-
-
- {selectedPoint?.triggers.map((trigger) => (
-
-
-
- ))}
- setSelectedItem({ type: "trigger", item: trigger })}
- >
-
- handleDeleteTrigger(trigger.uuid)}
- >
-
- handleResize(e, triggersContainerRef)}
- >
-
-
- {selectedItem && (
- <>
- handleActionToggle(selectedItem.item.uuid)}
- />
- handleActionSelect(selectedItem.item.uuid, option)}
- />
-
- {/* Only show material dropdown for Spawn/Swap actions */}
- {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
- handleMaterialSelect(selectedItem.item.uuid, option)}
- />
- )}
-
- {/* Only show delay input for Delay actions */}
- {selectedItem.item.type === 'Delay' && (
- {
- const numValue = parseInt(value);
- handleDelayChange(
- selectedItem.item.uuid,
- !value ? 'Inherit' : numValue
- );
- }}
- />
- )}
-
- {/* Only show spawn interval for Spawn actions */}
- {selectedItem.item.type === 'Spawn' && (
- {
- handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
- }}
- />
-
- )}
-
- )}
-
- {selectedItem.type === "trigger" && (
- <>
- handleTriggerToggle(selectedItem.item.uuid)}
- />
-
- handleTriggerSelect(selectedItem.item.uuid, option)}
- />
-
- )}
-
- )}
-
- {selectedPath && !selectedItem && (
-
- {selectedItem.item.name}
-
- {selectedItem.type === "action" && (
- <>
-
- handleSpeedChange(parseFloat(value))}
- />
-
- )}
-
-
-
+
+ );
+};
+
+export default VehicleMechanics;
\ No newline at end of file
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
index 17cbc3e..4d406d9 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -1,115 +1,215 @@
-import React, { useEffect, useState } from 'react'
-import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
-import { AddIcon } from '../../../../icons/ExportCommonIcons'
-import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
-import useChartStore from '../../../../../store/useChartStore'
-import axios from 'axios'
+// import React, { useEffect, useState } from 'react'
+// import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+// import { AddIcon } from '../../../../icons/ExportCommonIcons'
+// import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
+// import useChartStore from '../../../../../store/useChartStore'
+// import axios from 'axios'
-type Props = {}
+// type Props = {}
-const LineGrapInput = (props: Props) => {
- const [dropDowndata, setDropDownData] = useState({})
- const [selections, setSelections] = useState
+ {selectedActionSphere?.path?.modelName || "point name not found"}
+
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+ <>
+ {console.log(selectedPoint)}
+
+
+ handleResize(e, actionsContainerRef)}
+ >
+
+
+
+
+
+ Triggers
+
+
+
+
+
+ {selectedPoint?.triggers.map((trigger) => (
+
+
+
+ ))}
+ setSelectedItem({ type: "trigger", item: trigger })}
+ >
+
+ handleDeleteTrigger(trigger.uuid)}
+ >
+
+ handleResize(e, triggersContainerRef)}
+ >
+
+
+ {selectedItem && (
+ <>
+ handleActionToggle(selectedItem.item.uuid)}
+ />
+ handleActionSelect(selectedItem.item.uuid, option)}
+ />
+
+ {/* Only show material dropdown for Spawn/Swap actions */}
+ {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
+ handleMaterialSelect(selectedItem.item.uuid, option)}
+ />
+ )}
+
+ {/* Only show delay input for Delay actions */}
+ {selectedItem.item.type === 'Delay' && (
+ {
+ const numValue = parseInt(value);
+ handleDelayChange(
+ selectedItem.item.uuid,
+ !value ? 'Inherit' : numValue
+ );
+ }}
+ />
+ )}
+
+ {/* Only show spawn interval for Spawn actions */}
+ {selectedItem.item.type === 'Spawn' && (
+ {
+ handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
+ }}
+ />
+
+ )}
+
+ )}
+
+ {selectedItem.type === "trigger" && (
+ <>
+ handleTriggerToggle(selectedItem.item.uuid)}
+ />
+
+ handleTriggerSelect(selectedItem.item.uuid, option)}
+ />
+
+ )}
+
+ )}
+
+ {selectedPath && !selectedItem && (
+
+ {selectedItem.item.name}
+
+ {selectedItem.type === "action" && (
+ <>
+
+ handleSpeedChange(parseFloat(value))}
+ />
+
+ )}
+
+
+
- {[...Array(6)].map((_, index) => {
- const inputKey = `input${index + 1}`;
- return (
-
-
-
- );
- })}
- Input {index + 1}
-
- handleSelect(inputKey, selectedData)}
- onUnselect={() => handleSelect(inputKey, null)}
- selectedValue={selections[inputKey]}
- />
-
-
-
-
-
-
- )
-}
+// return (
+// <>
+//
-
- duration
-
-
-
+// {[...Array(6)].map((_, index) => {
+// const inputKey = `input${index + 1}`;
+// return (
+//
+//
+//
+// );
+// })}
+// Input {index + 1}
+//
+// handleSelect(inputKey, selectedData)}
+// onUnselect={() => handleSelect(inputKey, null)}
+// selectedValue={selections[inputKey]}
+// />
+//
+//
+//
+//
+//
+//
+// )
+// }
-export default LineGrapInput
\ No newline at end of file
+// export default LineGrapInput
+
+
+
+import React, { useEffect, useState } from "react";
+import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
+import { AddIcon } from "../../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import useChartStore from "../../../../../store/useChartStore";
+import axios from "axios";
+
+type Props = {};
+
+const LineGrapInput = (props: Props) => {
+ const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+ const [dropDowndata, setDropDownData] = useState({});
+ const [selections, setSelections] = useState
+//
+// duration
+//
+//
+//
+ {[...Array(6)].map((_, index) => {
+ const inputKey = `input${index + 1}`;
+ return (
+
+
+
+ );
+ })}
+ Input {index + 1}
+
+ handleSelect(inputKey, selectedData)}
+ onUnselect={() => handleSelect(inputKey, null)}
+ selectedValue={selections[inputKey]} // Load from Zustand
+ />
+
+
+
+
+
+
+ );
+};
+
+export default LineGrapInput;
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
index 4561f7e..3087471 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -8,11 +8,12 @@ type Props = {}
const PieChartInput = (props: Props) => {
const [dropDowndata, setDropDownData] = useState({})
const [selections, setSelections] = useState
+
+ Duration
+
+
+
{/* "+" Button */}