+
+ )}
{/* simulation */}
{toggleUI && activeModule === "simulation" && (
diff --git a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
index 90d3ecf..38fae4e 100644
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@@ -1,62 +1,57 @@
import React from "react";
import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";
interface PositionInputProps {
- onChange: (value: string) => void; // Callback for value change
+ onChange: (value: [number, number, number]) => void; // Callback for value change
header: string;
placeholder?: string; // Optional placeholder
type?: string; // Input type (e.g., text, number, email)
+ value: [number, number, number] | null;
+ disabled?: boolean; // To enable/disable editing
}
const Vector3Input: React.FC
+ {/*
+
{header}
- {/*
-
*/}
-
-
- X :
- onChange(e.target.value)}
- placeholder={placeholder}
- disabled
- />
-
-
- Y :
- onChange(e.target.value)}
- placeholder={placeholder}
- disabled
- min={0}
- />
-
-
+ {["X", "Y", "Z"].map((axis, i) => (
+ Z :
- onChange(e.target.value)}
- placeholder={placeholder}
- disabled
- />
-
+
+ ))}
{axis}:
+ handleChange(i, e.target.value)}
+ placeholder={placeholder}
+ disabled={disabled}
+ />
+
-
-
{Edit ? "Cancel" : "Edit"}
Set View
@@ -37,3 +70,4 @@ const ZoneProperties: React.FC = () => {
};
export default ZoneProperties;
+
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
new file mode 100644
index 0000000..17cbc3e
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -0,0 +1,115 @@
+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 [dropDowndata, setDropDownData] = useState({})
+ const [selections, setSelections] = useState>({})
+ const [selectedOption, setSelectedOption] = useState('1h')
+ const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+ 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(() => {
+ 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
+ };
+ }
+ });
+ };
+
+ interface Measurement {
+ name: string;
+ fields: string;
+ }
+
+ interface InputData {
+ [key: string]: Measurement;
+ }
+
+ const extractMeasurements = (input: InputData): Measurement[] => {
+ return Object.values(input);
+ };
+
+ useEffect(() => {
+ const measurementsData = extractMeasurements(selections);
+ setMeasurements(measurementsData);
+ }, [selections]);
+
+
+ return (
+ <>
+ >({})
+
+ 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(() => {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
+ };
+ }
+ });
+ };
+
+ return (
+ <>
+
+ {[...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
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
new file mode 100644
index 0000000..4561f7e
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+import { AddIcon } from '../../../../icons/ExportCommonIcons'
+import axios from 'axios'
+
+type Props = {}
+
+const PieChartInput = (props: Props) => {
+ const [dropDowndata, setDropDownData] = useState({})
+ const [selections, setSelections] = useState
+
+ duration
+
+
+
+ {[...Array(3)].map((_, index) => {
+ const inputKey = `input${index+1}`;
+ return (
+
+
+
+ );
+ })}
+ Input {index+1}
+
+ handleSelect(inputKey, selectedData)}
+ onUnselect={() => handleSelect(inputKey, null)}
+ selectedValue={selections[inputKey]}
+ />
+
+
+
+
+
+
+
+ )
+}
+
+export default PieChartInput
\ No newline at end of file
diff --git a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
index 039ad1e..71847c7 100644
--- a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+import LineGrapInput from "../IotInputCards/LineGrapInput";
// Define the data structure for demonstration purposes
const DATA_STRUCTURE = {
@@ -123,41 +124,10 @@ const Data = () => {
{selectedChartId?.title}
)}
{/* Render groups dynamically */}
- {chartDataGroups[selectedChartId?.id]?.map((group) => (
-
- {group.children.map((child, index) => (
-
- ))}
-
+ {
+ chartDataGroups[selectedChartId?.id] &&
-
- ))}
- Input {index + 1}
-
-
- handleAddClick(group.id)} // Pass groupId to handleAddClick
- >
-
- )}
- {/* Remove Icon */}
-
- 1 ? "" : "disable"
- }`}
- onClick={(e) => {
- e.stopPropagation(); // Prevent event bubbling
- removeChild(group.id, child.id); // Pass groupId and childId to removeChild
- }}
- >
-
i
@@ -173,3 +143,40 @@ const Data = () => {
};
export default Data;
+
+
+
+// {chartDataGroups[selectedChartId?.id]?.map((group) => (
+//
+// {group.children.map((child, index) => (
+//
+// ))}
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 7f66584..9d06df9 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -17,7 +17,12 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import useTemplateStore from "../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../store/useZoneStore";
-import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store";
+import {
+ useAddAction,
+ useDeleteModels,
+ useSelectedWallItem,
+ useToggleView,
+} from "../../store/store";
const Tools: React.FC = () => {
const { templates } = useTemplateStore();
@@ -39,7 +44,6 @@ const Tools: React.FC = () => {
const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem();
-
// Reset activeTool whenever activeModule changes
useEffect(() => {
setActiveTool(activeSubTool);
@@ -52,8 +56,7 @@ const Tools: React.FC = () => {
setDeleteModels(false);
setAddAction(null);
setToggleView(true);
- }
- else {
+ } else {
setToggleView(false);
}
setToggleThreeD(!toggleThreeD);
@@ -68,196 +71,225 @@ const Tools: React.FC = () => {
setOpenDrop(false); // Close the dropdown
}
};
-
+ const handleEscKeyPress = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ setIsPlaying(false); // Set isPlaying to false when Escape key is pressed
+ }
+ };
document.addEventListener("mousedown", handleOutsideClick);
+ document.addEventListener("keydown", handleEscKeyPress); // Listen for ESC key
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
+ document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
};
}, []);
return (
-
+//
+// ))}
+// Input {index + 1}
+//
+//
+// handleAddClick(group.id)} // Pass groupId to handleAddClick
+// >
+//
+// )}
+// {/* Remove Icon */}
+
+// 1 ? "" : "disable"
+// }`}
+// onClick={(e) => {
+// e.stopPropagation(); // Prevent event bubbling
+// removeChild(group.id, child.id); // Pass groupId and childId to removeChild
+// }}
+// >
+//
-
- = ({
panelOrder: newActiveSides,
};
- // Update the selectedZone state
+ // Delete the selectedZone state
+ console.log('updatedZone: ', updatedZone);
setSelectedZone(updatedZone);
} else {
// If the panel is not active, activate it
@@ -119,73 +127,84 @@ const AddButtons: React.FC = ({
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
+ 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);
}
};
return (
-
- {activeSubTool == "cursor" && (
-
+
);
};
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index edb7ddc..d7ed21d 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -4,6 +4,7 @@ import {
EyeIcon,
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
+import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -15,6 +16,9 @@ interface ButtonsProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[]
widgets: {
id: string;
type: string;
@@ -29,6 +33,9 @@ interface ButtonsProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[]
widgets: {
id: string;
type: string;
@@ -108,7 +115,8 @@ const AddButtons: React.FC {
- setActiveTool("cursor");
- }}
- >
-
- )}
- {activeSubTool == "free-hand" && (
- {
- setActiveTool("free-hand");
- }}
- >
-
- )}
- {activeModule !== "visualization" && (
- {
- setOpenDrop(!openDrop);
- console.log(openDrop);
- }}
- >
-
- {!toggleThreeD && activeModule === "builder" && (
- <>
-
-
+ <>
+ {!isPlaying ? (
+ <>
+
-
+
- )}
-
+
+ {!toggleThreeD && activeModule === "builder" && (
+ <>
+
+
+ {activeSubTool == "cursor" && (
+ {
- setOpenDrop(false);
setActiveTool("cursor");
- setActiveSubTool("cursor");
}}
>
-
+ )}
+ {activeSubTool == "free-hand" && (
+
- {activeSubTool === "cursor" &&
- Cursor
+ {
+ setActiveTool("free-hand");
+ }}
+ >
+
+ )}
+ {activeModule !== "visualization" && (
+ {
+ setOpenDrop(!openDrop);
+ console.log(openDrop);
+ }}
+ >
+
+ )}
+
+
+ )}
+ {
+ setOpenDrop(false);
+ setActiveTool("cursor");
+ setActiveSubTool("cursor");
+ }}
+ >
+
+
+ {activeSubTool === "cursor" &&
+ Cursor
+ {
+ setOpenDrop(false);
+ setActiveTool("free-hand");
+ setActiveSubTool("free-hand");
+ }}
+ >
+
+
+ {activeSubTool === "free-hand" &&
+ Free Hand
+
+
- )}
- {
+ setActiveTool("draw-wall");
+ }}
+ >
+
{
- setOpenDrop(false);
- setActiveTool("free-hand");
- setActiveSubTool("free-hand");
+ setActiveTool("draw-zone");
}}
>
-
+
- {activeSubTool === "free-hand" &&
- Free Hand
+ {
+ setActiveTool("draw-aisle");
+ }}
+ >
+
+ {
+ setActiveTool("draw-floor");
+ }}
+ >
+
-
+ )}
+ {activeModule === "simulation" && (
+ <>
+
+
+ ) : (
+
+
+
+ )}
+ {activeModule === "visualization" && (
+ <>
+
+ {
+ setActiveTool("pen");
+ }}
+ >
+
+
+
+
+ )}
+
+
+ handleSaveTemplate({
+ addTemplate,
+ selectedZone,
+ templates,
+ })
+ }
+ >
+
+
+
+
{
- setActiveTool("draw-wall");
- }}
- >
-
- {
+ setActiveTool("comment");
+ }}
+ >
+
+ {
- setActiveTool("draw-zone");
- }}
- >
-
{
- setActiveTool("draw-aisle");
- }}
+ className={`toggle-threed-button${
+ toggleThreeD ? " toggled" : ""
+ }`}
+ onClick={toggleSwitch}
>
-
- {
- setActiveTool("draw-floor");
- }}
- >
-
+ 2d
+
+
+ 3d
+
setIsPlaying(false)}>
+ X
+
)}
- {activeModule === "simulation" && (
- <>
-
-
-
-
- )}
- {activeModule === "visualization" && (
- <>
-
- {
- setActiveTool("pen");
- }}
- >
-
-
-
-
- )}
-
-
- handleSaveTemplate({
- addTemplate,
- selectedZone,
- templates,
- })
- }
- >
-
-
-
-
- {
- setActiveTool("comment");
- }}
- >
-
- {
- setActiveTool("play");
- setIsPlaying(!isPlaying);
- }}
- >
-
-
-
-
- 2d
-
-
- 3d
-
-
- {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
- = ({
return (
= ({ selectedZone, setSelectedZone }) => {
};
export default Panel;
+
+
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index bccfa86..f5e858d 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -6,76 +6,117 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene";
import useModuleStore from "../../../store/useModuleStore";
+import { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
+
+
type Side = "top" | "bottom" | "left" | "right";
-interface Widget {
+type FormattedZoneData = Record<
+ string,
+ {
+ activeSides: Side[];
+ panelOrder: Side[];
+ lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[]
+ widgets: Widget[];
+ }
+>;
+type Widget = {
id: string;
type: string;
title: string;
panel: Side;
data: any;
-}
+};
const RealTimeVisulization: React.FC = () => {
const [hiddenPanels, setHiddenPanels] = React.useState([]);
const containerRef = useRef(null);
- const [zonesData, setZonesData] = useState<{
- [key: string]: {
- activeSides: Side[];
- panelOrder: Side[];
- lockedPanels: Side[];
- widgets: Widget[];
- };
- }>({
- "Manufacturing unit": {
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
- },
- "Assembly unit": {
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
- },
- "Packing unit": {
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
- },
- Warehouse: {
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
- },
- Inventory: {
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
- },
- });
-
const { isPlaying } = usePlayButtonStore();
const { activeModule } = useModuleStore();
-
+ const [droppedObjects, setDroppedObjects] = useState([]);
+ const [zonesData, setZonesData] = useState({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+ const { zones } = useZones()
+
useEffect(() => {
- setZonesData((prev) => ({
- ...prev,
- [selectedZone.zoneName]: selectedZone,
- }));
+ const data = Array.isArray(zones) ? zones : [];
+
+ const formattedData = data.reduce((acc, zone) => {
+ acc[zone.zoneName] = {
+ activeSides: [],
+ panelOrder: [],
+ lockedPanels: [],
+ zoneId: zone.zoneId,
+ zoneViewPortTarget: zone.viewPortCenter,
+ zoneViewPortPosition: zone.viewPortposition,
+ widgets: [],
+ };
+ return acc;
+ }, {});
+
+ setZonesData(formattedData);
+ }, [zones]);
+
+ useEffect(() => {
+ setZonesData((prev) => {
+ if (!selectedZone) return prev;
+ return {
+ ...prev,
+ [selectedZone.zoneName]: {
+ ...prev[selectedZone.zoneName], // Keep existing properties
+ activeSides: selectedZone.activeSides || [],
+ panelOrder: selectedZone.panelOrder || [],
+ lockedPanels: selectedZone.lockedPanels || [],
+ zoneId: selectedZone.zoneId || "",
+ zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
+ zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
+ widgets: selectedZone.widgets || [],
+ },
+ };
+ });
}, [selectedZone]);
+ // const handleDrop = (event: React.DragEvent) => {
+ // console.log("Drop event fired! ✅");
+ // event.preventDefault();
+
+ // const data = event.dataTransfer.getData("text/plain");
+ // if (!data) {
+ // console.log("❌ No data received on drop!");
+ // return;
+ // }
+
+ // try {
+ // const droppedData = JSON.parse(data);
+ // console.log("✅ Dropped Data:", droppedData);
+
+ // console.log('droppedData: ', droppedData);
+ // setDroppedObjects((prev) => [...prev, droppedData]); // ✅ Add to state
+ // console.log(droppedObjects);
+ // } catch (error) {
+ // console.error("❌ Error parsing dropped data:", error);
+ // }
+ // };
+ const handleDrop = (event: React.DragEvent) => {
+ event.preventDefault();
+ const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
+
+ if (data) {
+ const droppedData = JSON.parse(data);
+ useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
+ }
+ };
+
return (
{
)}
(null);
+ const sphereRef = useRef(null);
+ const { camera, controls }: any = useThree();
+ const { zonePosition, setZonePosition } = usezonePosition();
+ const { zoneTarget, setZoneTarget } = usezoneTarget();
+ const { Edit, setEdit } = useEditPosition();
+
+
+ useEffect(() => {
+ if (
+ selectedZone.zoneViewPortTarget &&
+ JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget)
+ ) {
+ setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
+ }
+ }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
+
+ const centrePoint = useMemo(() => {
+ if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+ return previousZoneCentre.map((value, index) =>
+ (value + selectedZone.zoneViewPortTarget[index]) / 2
+ );
+ }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+ useEffect(() => {
+ if (selectedZone.zoneName !== "") {
+ if (sphereRef.current) {
+ sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
+ }
+ if (centrePoint) {
+
+ if (centrePoint.length > 0) {
+
+ let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+ let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+ const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+ const worldUp = new THREE.Vector3(0, 0, 1);
+ const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+ const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+ const offsetPosition = up.clone().multiplyScalar(20);
+
+ camPosition.add(offsetPosition);
+
+
+ const setCam = async () => {
+ controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true);
+ setTimeout(() => {
+ controls?.setLookAt(
+ ...camPosition.toArray(),
+ selectedZone.zoneViewPortTarget[0],
+ selectedZone.zoneViewPortTarget[1],
+ selectedZone.zoneViewPortTarget[2],
+ true
+ );
+ }, 400)
+ };
+ setCam();
+ } else {
+
+ let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+ let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+ const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+ const worldUp = new THREE.Vector3(0, 0, 1);
+ const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+ const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+ const offsetPosition = up.clone().multiplyScalar(20);
+
+ camPosition.add(offsetPosition);
+ const setCam = async () => {
+ controls?.setLookAt(
+ ...camPosition.toArray(),
+ selectedZone.zoneViewPortTarget[0],
+ selectedZone.zoneViewPortTarget[1],
+ selectedZone.zoneViewPortTarget[2],
+ true
+ );
+ };
+ setCam();
+ }
+ }
+ }
+ }, [selectedZone.zoneViewPortTarget]);
+
+ useFrame(() => {
+ if (Edit) {
+ setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
+ setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
+ }
+ })
+ return (
+ <>
+ );
+}
diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
index 3c1780b..ef74bcf 100644
--- a/app/src/components/ui/inputs/MultiLevelDropDown.tsx
+++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx
@@ -1,99 +1,213 @@
+// import React, { useState, useRef, useEffect } from "react";
+
+// // Dropdown Item Component
+// const DropdownItem = ({
+// label,
+// href,
+// onClick,
+// }: {
+// label: string;
+// href?: string;
+// onClick?: () => void;
+// }) => (
+// {
+// e.preventDefault();
+// onClick?.();
+// }}
+// >
+// {label}
+//
+// );
+
+// // Nested Dropdown Component
+// const NestedDropdown = ({
+// label,
+// children,
+// onSelect,
+// }: {
+// label: string;
+// children: React.ReactNode;
+// onSelect: (selectedLabel: string) => void;
+// }) => {
+// const [open, setOpen] = useState(false);
+
+// return (
+// ,
+// onSelect: (selectedLabel: string) => void
+// ) => {
+// return Object.entries(data).map(([key, value]) => {
+// if (typeof value === "object" && !Array.isArray(value)) {
+// // If the value is an object, render it as a nested dropdown
+// return (
+//
+// {renderNestedData(value, onSelect)}
+//
+// );
+// } else if (Array.isArray(value)) {
+// // If the value is an array, render each item as a dropdown item
+// return value.map((item, index) => (
+// onSelect(item)} />
+// ));
+// } else {
+// // If the value is a simple string, render it as a dropdown item
+// return (
+// onSelect(value)} />
+// );
+// }
+// });
+// };
+
+// // Main Multi-Level Dropdown Component
+// const MultiLevelDropdown = ({ data }: { data: Record }) => {
+// const [open, setOpen] = useState(false);
+// const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
+// const dropdownRef = useRef(null);
+
+// // Handle outer click to close the dropdown
+// useEffect(() => {
+// const handleClickOutside = (event: MouseEvent) => {
+// if (
+// dropdownRef.current &&
+// !dropdownRef.current.contains(event.target as Node)
+// ) {
+// setOpen(false);
+// }
+// };
+
+// document.addEventListener("mousedown", handleClickOutside);
+// return () => {
+// document.removeEventListener("mousedown", handleClickOutside);
+// };
+// }, []);
+
+// // Handle selection of an item
+// const handleSelect = (selectedLabel: string) => {
+// setSelectedLabel(selectedLabel); // Update the dropdown trigger text
+// setOpen(false); // Close the dropdown
+// };
+
+// return (
+// ,
- onSelect: (selectedLabel: string) => void
-) => {
- return Object.entries(data).map(([key, value]) => {
- if (typeof value === "object" && !Array.isArray(value)) {
- // If the value is an object, render it as a nested dropdown
- return (
-
- {renderNestedData(value, onSelect)}
-
- );
- } else if (Array.isArray(value)) {
- // If the value is an array, render each item as a dropdown item
- return value.map((item, index) => (
- onSelect(item)} />
- ));
- } else {
- // If the value is a simple string, render it as a dropdown item
- return (
- onSelect(value)} />
- );
- }
- });
-};
+// Props type for MultiLevelDropdown
+interface MultiLevelDropdownProps {
+ data: Record;
+ onSelect: (selectedData: { name: string; fields: string }) => void;
+ onUnselect: () => void;
+ selectedValue?: { name: string; fields: string };
+}
// Main Multi-Level Dropdown Component
-const MultiLevelDropdown = ({ data }: { data: Record }) => {
+const MultiLevelDropdown = ({
+ data,
+ onSelect,
+ onUnselect,
+ selectedValue
+}: MultiLevelDropdownProps) => {
const [open, setOpen] = useState(false);
- const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
const dropdownRef = useRef(null);
- // Handle outer click to close the dropdown
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
@@ -103,34 +217,51 @@ const MultiLevelDropdown = ({ data }: { data: Record }) => {
setOpen(false);
}
};
-
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
- // Handle selection of an item
- const handleSelect = (selectedLabel: string) => {
- setSelectedLabel(selectedLabel); // Update the dropdown trigger text
- setOpen(false); // Close the dropdown
+ // Handle item selection
+ const handleItemSelect = (selectedData: { name: string; fields: string }) => {
+ onSelect(selectedData);
+ setOpen(false);
};
+ // Handle unselect
+ const handleItemUnselect = () => {
+ onUnselect();
+ setOpen(false);
+ };
+
+ // Determine the display label
+ const displayLabel = selectedValue
+ ? `${selectedValue.name} - ${selectedValue.fields}`
+ : "Dropdown trigger";
+
return (
- {/* "+" Button */}
-
+ <>
+
+
);
};
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 85b9336..56c67bb 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -11,6 +11,9 @@ interface DisplayZoneProps {
panelOrder: Side[];
lockedPanels: Side[];
widgets: Widget[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[];
};
};
selectedZone: {
@@ -18,6 +21,9 @@ interface DisplayZoneProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[];
widgets: {
id: string;
type: string;
@@ -32,6 +38,9 @@ interface DisplayZoneProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[];
widgets: {
id: string;
type: string;
@@ -152,21 +161,32 @@ const DisplayZone: React.FC
+ {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+
+ ))}
+
+ {/* "+" Button */}
+
- {/* Extra Buttons */}
- {selectedZone.activeSides.includes(side) && (
-
+ )}
+
- {/* Hide Panel */}
-
- ))}
- toggleVisibility(side)}
- >
-
+ {/* Extra Buttons */}
+ {selectedZone.activeSides.includes(side) && (
+
+ {/* Hide Panel */}
+
- )}
- toggleVisibility(side)}
+ >
+
- {/* Clean Panel */}
- cleanPanel(side)}
- >
-
+ {/* Clean Panel */}
+ cleanPanel(side)}
+ >
+
- {/* Lock/Unlock Panel */}
- toggleLockPanel(side)}
- >
-
- toggleLockPanel(side)}
+ >
+
{Object.keys(zonesData).map((zoneName, index) => (
@@ -201,3 +247,5 @@ const Panel: React.FC {
+
+
setSelectedZone({
zoneName,
- ...zonesData[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}
@@ -176,4 +196,4 @@ const DisplayZone: React.FC = ({
);
};
-export default DisplayZone;
\ No newline at end of file
+export default DisplayZone;
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 0bb3793..9172fa4 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -1,9 +1,21 @@
import { useWidgetStore } from "../../../store/useWidgetStore";
-import PieGraphComponent from "../charts/PieGraphComponent";
-import BarGraphComponent from "../charts/BarGraphComponent";
-import LineGraphComponent from "../charts/LineGraphComponent";
+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 }: { widget: any }) => {
+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 = () => {
@@ -12,69 +24,139 @@ export const DraggableWidget = ({ widget }: { widget: any }) => {
}
};
+ // Determine if the widget's panel is hidden
+ const isPanelHidden = hiddenPanels.includes(widget.panel);
+
+ 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 (
<>
+// {/* Render dropped objects as green boxes */}
+// {objects.map((obj) => (
+//
+//
+// ))}
+//
+// );
+// };
+
+import { Html } from "@react-three/drei";
+import { useDroppedObjectsStore } from "../../../store/store";
+
+
+const DroppedObjects: React.FC = () => {
+ const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
+ console.log('objects: ', objects);
+
+ return (
+ <>
+ {objects.map((obj, index) => (
+
+
+
+ ))}
+
+ );
+};
+
+export default DroppedObjects;
+
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index ca68dca..a764f09 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import { useWidgetStore } from "../../../store/useWidgetStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { DraggableWidget } from "./DraggableWidget";
+import { arrayMove } from "@dnd-kit/sortable";
type Side = "top" | "bottom" | "left" | "right";
@@ -19,6 +20,9 @@ interface PanelProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[]
widgets: Widget[];
};
setSelectedZone: React.Dispatch<
@@ -27,20 +31,30 @@ interface PanelProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[]
widgets: Widget[];
}>
>;
+ hiddenPanels: string[];
}
const generateUniqueId = () =>
`${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-const Panel: React.FC = ({ selectedZone, setSelectedZone }) => {
+const Panel: React.FC = ({
+ selectedZone,
+ setSelectedZone,
+ hiddenPanels,
+}) => {
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
}>({});
+ const { isPlaying } = usePlayButtonStore();
+
const getPanelStyle = useMemo(
() => (side: Side) => {
const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -49,87 +63,86 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => {
const rightActive = previousPanels.includes("right");
const topActive = previousPanels.includes("top");
const bottomActive = previousPanels.includes("bottom");
+ const panelSize = isPlaying ? 300 : 210;
switch (side) {
case "top":
case "bottom":
return {
- width: `calc(100% - ${
- (leftActive ? 204 : 0) + (rightActive ? 204 : 0)
- }px)`,
- left: leftActive ? "204px" : "0",
- right: rightActive ? "204px" : "0",
+ width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+ }px)`,
+ height: `${panelSize - 2}px`,
+ left: leftActive ? `${panelSize}px` : "0",
+ right: rightActive ? `${panelSize}px` : "0",
[side]: "0",
- height: "200px",
};
case "left":
case "right":
return {
- height: `calc(100% - ${
- (topActive ? 204 : 0) + (bottomActive ? 204 : 0)
- }px)`,
- top: topActive ? "204px" : "0",
- bottom: bottomActive ? "204px" : "0",
+ width: `${panelSize - 2}px`,
+ height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+ }px)`,
+ top: topActive ? `${panelSize}px` : "0",
+ bottom: bottomActive ? `${panelSize}px` : "0",
[side]: "0",
- width: "200px",
};
default:
return {};
}
},
- [selectedZone.panelOrder]
+ [selectedZone.panelOrder, isPlaying]
);
const handleDrop = (e: React.DragEvent, panel: Side) => {
e.preventDefault();
const { draggedAsset } = useWidgetStore.getState();
-
if (!draggedAsset) return;
if (isPanelLocked(panel)) return;
-
+
const currentWidgetsCount = getCurrentWidgetCount(panel);
const maxCapacity = calculatePanelCapacity(panel);
-
+
if (currentWidgetsCount >= maxCapacity) return;
-
+
+ console.log('draggedAsset: ', draggedAsset);
+ console.log('panel: ', panel);
addWidgetToPanel(draggedAsset, panel);
};
-
- // Helper functions
- const isPanelLocked = (panel: Side) =>
+
+ const isPanelLocked = (panel: Side) =>
selectedZone.lockedPanels.includes(panel);
-
- const getCurrentWidgetCount = (panel: Side) =>
- selectedZone.widgets.filter(w => w.panel === panel).length;
-
+
+ const getCurrentWidgetCount = (panel: Side) =>
+ selectedZone.widgets.filter((w) => w.panel === panel).length;
+
const calculatePanelCapacity = (panel: Side) => {
- const CHART_WIDTH = 200;
- const CHART_HEIGHT = 200;
+ 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"
+ 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 addWidgetToPanel = (asset: any, panel: Side) => {
const newWidget = {
...asset,
id: generateUniqueId(),
panel,
};
-
- setSelectedZone(prev => ({
+
+ setSelectedZone((prev) => ({
...prev,
- widgets: [...prev.widgets, newWidget]
+ widgets: [...prev.widgets, newWidget],
}));
};
@@ -159,8 +172,34 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => {
};
}, [selectedZone.activeSides]);
- const { isPlaying } = usePlayButtonStore();
+ const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
+ if (!selectedZone) return; // Ensure selectedZone is not null
+ console.log('selectedZone: ', selectedZone);
+ setSelectedZone((prev) => {
+ if (!prev) return prev; // Ensure prev is not null
+
+ // Filter widgets for the specified panel
+ const widgetsInPanel = prev.widgets.filter((w) => w.panel === panel);
+
+ // Reorder widgets within the same panel
+ const reorderedWidgets = arrayMove(widgetsInPanel, fromIndex, toIndex);
+
+ // Merge the reordered widgets back into the full list while preserving the order
+ const updatedWidgets = prev.widgets
+ .filter((widget) => widget.panel !== panel) // Keep widgets from other panels
+ .concat(reorderedWidgets); // Add the reordered widgets for the specified panel
+
+ return {
+ ...prev,
+ widgets: updatedWidgets,
+ };
+ });
+ };
+
+
+
+
return (
<>
{selectedZone.activeSides.map((side) => (
@@ -187,11 +226,18 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => {
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
}}
>
- <>{}
{selectedZone.widgets
.filter((w) => w.panel === side)
- .map((widget) => (
-
+ handleReorder(fromIndex, toIndex, side)
+ }
+ />
))}
- {widget.type === "progress" ? (
- // item.fields)}
+ />
+ )} */}
+ {widget.type === "pie" && (
+
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
new file mode 100644
index 0000000..f7c1bd3
--- /dev/null
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -0,0 +1,89 @@
+// import { useState } from "react";
+// import { useThree } from "@react-three/fiber";
+// import * as THREE from "three";
+
+
+
+// const DroppedObjects = () => {
+// const { camera } = useThree(); // Now inside Canvas ✅
+// const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
+
+// // Function to convert drop event into 3D position
+// const handleDrop = (event: DragEvent) => {
+// event.preventDefault();
+
+// const data = event.dataTransfer?.getData("text/plain");
+// if (!data) return;
+
+// try {
+// const cardData = JSON.parse(data);
+// if (!cardData.className.includes("floating total-card")) {
+// console.log("Drop rejected: Incorrect element.");
+// return;
+// }
+
+// // Convert 2D drop position to 3D world coordinates
+// const x = (event.clientX / window.innerWidth) * 2 - 1;
+// const y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+// // Raycasting to determine the drop position in 3D
+// const raycaster = new THREE.Raycaster();
+// const mouseVector = new THREE.Vector2(x, y);
+// raycaster.setFromCamera(mouseVector, camera);
+
+// // Intersect with a ground plane (assume y = 0)
+// const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+// const intersection = new THREE.Vector3();
+// raycaster.ray.intersectPlane(groundPlane, intersection);
+
+// console.log("Spawn Object at:", intersection);
+
+// // Add the dropped object to the scene state
+// setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+// } catch (error) {
+// console.error("Invalid data:", error);
+// }
+// };
+
+// return (
+//
+
+
+ {obj.header}
+
+
+ {obj.value}
+ {obj.per}
+ {
width: "100%",
borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
}}
+ onDrop={(event) => handleDrop(event)}
+ onDragOver={(event) => event.preventDefault()}
>
+
{activeModule === "visualization" && (
@@ -100,7 +144,7 @@ const RealTimeVisulization: React.FC = () => {
setSelectedZone={setSelectedZone}
/>
- {!isPlaying && (
+ {!isPlaying && selectedZone?.zoneName !== "" && (
+// {/* Dropdown Trigger */}
+//
+// );
+// };
+
+// // Recursive Function to Render Nested Data
+// const renderNestedData = (
+// data: Record setOpen(!open)} // Toggle submenu on click
+// >
+// {label} {open ? "▼" : "▶"}
+//
+
+// {/* Submenu */}
+// {open && (
+//
+// {React.Children.map(children, (child) => {
+// if (React.isValidElement(child)) {
+// // Clone the element and pass the `onSelect` prop only if it's expected
+// return React.cloneElement(child as React.ReactElement, { onSelect });
+// }
+// return child; // Return non-element children as-is
+// })}
+//
+// )}
+//
+// {/* Dropdown Trigger Button */}
+//
+
+// {/* Dropdown Menu */}
+// {open && (
+//
+// );
+// };
+
+// export default MultiLevelDropdown;
+
import React, { useState, useRef, useEffect } from "react";
// Dropdown Item Component
const DropdownItem = ({
label,
- href,
onClick,
}: {
label: string;
- href?: string;
- onClick?: () => void;
+ onClick: () => void;
}) => (
- {
- e.preventDefault();
- onClick?.();
- }}
- >
+
+//
+// )}
+//
+// {renderNestedData(data, handleSelect)}
+//
+//
{label}
-
+
);
// Nested Dropdown Component
const NestedDropdown = ({
label,
- children,
+ fields,
onSelect,
}: {
label: string;
- children: React.ReactNode;
- onSelect: (selectedLabel: string) => void;
+ fields: string[];
+ onSelect: (selectedData: { name: string; fields: string }) => void;
}) => {
const [open, setOpen] = useState(false);
return (
- {/* Dropdown Trigger */}
);
};
-// Recursive Function to Render Nested Data
-const renderNestedData = (
- data: Record setOpen(!open)} // Toggle submenu on click
+ onClick={() => setOpen(!open)}
>
{label} {open ? "▼" : "▶"}
-
- {/* Submenu */}
{open && (
- {React.Children.map(children, (child) => {
- if (React.isValidElement(child)) {
- // Clone the element and pass the `onSelect` prop only if it's expected
- return React.cloneElement(child as React.ReactElement, { onSelect });
- }
- return child; // Return non-element children as-is
- })}
+ {fields.map((field) => (
+ onSelect({ name: label, fields: field })}
+ />
+ ))}
)}
- {/* Dropdown Trigger Button */}
-
- {/* Dropdown Menu */}
{open && (
)}
@@ -138,4 +269,5 @@ const MultiLevelDropdown = ({ data }: { data: Record }) => {
);
};
-export default MultiLevelDropdown;
\ No newline at end of file
+export default MultiLevelDropdown;
+
diff --git a/app/src/components/ui/inputs/RenameInput.tsx b/app/src/components/ui/inputs/RenameInput.tsx
index cae54f3..d197dd4 100644
--- a/app/src/components/ui/inputs/RenameInput.tsx
+++ b/app/src/components/ui/inputs/RenameInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
interface RenameInputProps {
value: string;
@@ -9,6 +9,9 @@ const RenameInput: React.FC = ({ value, onRename }) => {
const [isEditing, setIsEditing] = useState(false);
const [text, setText] = useState(value);
const inputRef = useRef(null);
+ useEffect(() => {
+ setText(value); // Ensure state updates when parent value changes
+ }, [value]);
const handleDoubleClick = () => {
setIsEditing(true);
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index 88386f8..4ff51ca 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -1,7 +1,9 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
+import { useZones } from "../../../store/store";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
interface DropDownListProps {
value?: string; // Value to display in the DropDownList
@@ -12,6 +14,7 @@ interface DropDownListProps {
kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
defaultOpen?: boolean; // Determines if the dropdown list should be open by default
listType?: string; // Type of list to display
+ remove?: boolean;
}
const DropDownList: React.FC = ({
@@ -27,12 +30,25 @@ const DropDownList: React.FC = ({
],
defaultOpen = false,
listType = "default",
+ remove,
}) => {
+
const [isOpen, setIsOpen] = useState(defaultOpen);
+ const { zones, setZones } = useZones()
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
+ const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+ const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+
+ useEffect(() => {
+ const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
+ id: val.zoneId,
+ name: val.zoneName
+ }));
+ setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
+ }, [zones]);
return (
= ({
value,
per,
}) => {
+
+ const handleDragStart = (event: React.DragEvent) => {
+ const cardData = JSON.stringify({
+ header,
+ value,
+ per,
+ className: event.currentTarget.className,
+ });
+
+ console.log("Dragging Data:", cardData); // ✅ Debugging log
+
+ event.dataTransfer.setData("text/plain", cardData);
+ };
+
return (
-
- {renderNestedData(data, handleSelect)}
+ {/* Unselect Option */}
+
@@ -67,7 +83,7 @@ const DropDownList: React.FC = ({
{isOpen && (
- {listType === "default" && = ({
value="Zones"
showKebabMenu={false}
showAddIcon={false}
- items={[]}
+ items={zoneDataList}
/>
)}
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 1bf326f..7a7da8d 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -1,13 +1,38 @@
import React from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useSubModuleStore } from "../../../store/useModuleStore";
interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text
+ remove?: boolean;
}
-const List: React.FC = ({ items = [] }) => {
+const List: React.FC = ({ items = [], remove }) => {
+ const { setSelectedZone } = useSelectedZoneStore();
+ const { setSubModule } = useSubModuleStore();
+
+ async function handleSelectZone(id: string) {
+ setSubModule("zoneProperties")
+ const email = localStorage.getItem('email')
+ 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 || [],
+ zoneId: response?.zoneId,
+ zoneViewPortTarget: response?.viewPortCenter || [],
+ zoneViewPortPosition:
+ response?.viewPortposition || [],
+ });
+
+ }
return (
<>
{items.length > 0 ? (
@@ -15,7 +40,7 @@ const List: React.FC = ({ items = [] }) => {
{items.map((item, index) => (
diff --git a/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx
index 5eb6475..a9d3805 100644
--- a/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx
@@ -1,12 +1,9 @@
import React, { useMemo } from "react";
import { Radar } from "react-chartjs-2";
-import {
- ChartOptions,
- ChartData,
- RadialLinearScaleOptions,
-} from "chart.js";
+import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
interface ChartComponentProps {
+ type: string;
title: string;
fontFamily?: string;
fontSize?: string;
@@ -19,7 +16,7 @@ const RadarGraphComponent = ({
fontFamily,
fontSize,
fontWeight = "Regular",
- data,
+ data, // Now guaranteed to be number[]
}: ChartComponentProps) => {
// Memoize Font Weight Mapping
const chartFontWeightMap = useMemo(
@@ -31,14 +28,15 @@ const RadarGraphComponent = ({
[]
);
- const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [
- fontSize,
- ]);
+ const fontSizeValue = useMemo(
+ () => (fontSize ? parseInt(fontSize) : 12),
+ [fontSize]
+ );
- const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [
- fontWeight,
- chartFontWeightMap,
- ]);
+ const fontWeightValue = useMemo(
+ () => chartFontWeightMap[fontWeight],
+ [fontWeight, chartFontWeightMap]
+ );
const chartFontStyle = useMemo(
() => ({
diff --git a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
index d67e87f..ef3d85c 100644
--- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
+++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
@@ -13,8 +13,22 @@ const SimpleCard: React.FC
- (null);
+ const { themeColor } = useThemeStore();
+ const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+ labels: [],
+ datasets: [],
+ });
- // Parse and Memoize Font Size
- const fontSizeValue = useMemo(
- () => (fontSize ? parseInt(fontSize) : 12),
- [fontSize]
- );
-
- // Determine and Memoize Font Weight
- const fontWeightValue = useMemo(
- () => chartFontWeightMap[fontWeight],
- [fontWeight, chartFontWeightMap]
- );
-
- // Memoize Chart Font Style
- const chartFontStyle = useMemo(
- () => ({
- family: fontFamily || "Arial",
- size: fontSizeValue,
- weight: fontWeightValue,
- }),
- [fontFamily, fontSizeValue, fontWeightValue]
- );
-
- const options = useMemo(
- () => ({
- responsive: true,
- maintainAspectRatio: false,
- plugins: {
- title: {
- display: true,
- text: title,
- font: chartFontStyle,
- },
- legend: {
- display: false,
- },
- },
- scales: {
- x: {
- ticks: {
- display: true, // This hides the x-axis labels
+ // Memoize Theme Colors to Prevent Unnecessary Recalculations
+ const buttonActionColor = useMemo(
+ () => themeColor[0] || "#5c87df",
+ [themeColor]
+ );
+ const buttonAbortColor = useMemo(
+ () => themeColor[1] || "#ffffff",
+ [themeColor]
+ );
+
+ // Memoize Font Weight Mapping
+ const chartFontWeightMap = useMemo(
+ () => ({
+ Light: "lighter" as const,
+ Regular: "normal" as const,
+ Bold: "bold" as const,
+ }),
+ []
+ );
+
+ // Parse and Memoize Font Size
+ const fontSizeValue = useMemo(
+ () => (fontSize ? parseInt(fontSize) : 12),
+ [fontSize]
+ );
+
+ // Determine and Memoize Font Weight
+ const fontWeightValue = useMemo(
+ () => chartFontWeightMap[fontWeight],
+ [fontWeight, chartFontWeightMap]
+ );
+
+ // Memoize Chart Font Style
+ const chartFontStyle = useMemo(
+ () => ({
+ family: fontFamily || "Arial",
+ size: fontSizeValue,
+ weight: fontWeightValue,
+ }),
+ [fontFamily, fontSizeValue, fontWeightValue]
+ );
+
+ // Memoize Chart Data
+ // const data = useMemo(() => propsData, [propsData]);
+
+ // Memoize Chart Options
+ const options = useMemo(
+ () => ({
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ title: {
+ display: true,
+ text: title,
+ font: chartFontStyle,
+ },
+ legend: {
+ display: false,
},
},
- },
- }),
- [title, chartFontStyle]
- );
+ scales: {
+ x: {
+ ticks: {
+ display: true, // This hides the x-axis labels
+ },
+ },
+ },
+ }),
+ [title, chartFontStyle]
+ );
- const chartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [
- {
- label: "My First Dataset",
- data: [65, 59, 80, 81, 56, 55, 40],
- backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
- borderColor: "#ffffff", // Keeping border color white
+ const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+ useEffect(() => {
+ if ( measurements.length > 0 ) {
+ const socket = io("http://192.168.0.192:5010");
+
+ var inputes = {
+ measurements: measurements,
+ duration: duration,
+ interval: 1000,
+ }
+
+ console.log('graphHHHHHHHHHHHHHHHHHHHHHHHHHHHHH',inputes);
+
+
+ // Start stream
+ const startStream = () => {
+ socket.emit("lineInput", inputes);
+ }
+
+ socket.on('connect', startStream);
+
+ socket.on("lineOutput", (response) => {
+ const responceData = response.data;
+ console.log("Received data:", responceData);
+
+ // Extract timestamps and values
+ const labels = responceData.time;
+ const datasets = data.measurements.map((measurement: any) => ({
+ label: `${measurement.name}.${measurement.fields}`,
+ data: responceData[`${measurement.name}.${measurement.fields}`]?.values || [],
+ backgroundColor: themeColor[0] || "#5c87df",
+ borderColor: themeColor[1] || "#ffffff",
borderWidth: 2,
- fill: false,
- },
- ],
- };
+ // fill: false,
+ }));
+
+ setChartData({ labels, datasets });
+ });
+
+ return () => {
+ socket.off("lineOutput");
+ socket.emit("stop_stream"); // Stop streaming when component unmounts
+ };
+ }
+ }, [measurements, duration]);
+
+ // useEffect(() => {
+ // if (!canvasRef.current) return;
+ // const ctx = canvasRef.current.getContext("2d");
+ // if (!ctx) return;
+
+ // const chart = new Chart(ctx, {
+ // type,
+ // data: chartData,
+ // options: options,
+ // });
+
+ // return () => chart.destroy();
+ // }, [chartData, type, title]);
return
))}
+
diff --git a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
index 5911842..07a387f 100644
--- a/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
@@ -1,5 +1,107 @@
-import { useMemo } from "react";
-import { Line } from "react-chartjs-2";
+// import { useMemo } from "react";
+// import { Line } from "react-chartjs-2";
+
+// interface ChartComponentProps {
+// type: any;
+// title: string;
+// fontFamily?: string;
+// fontSize?: string;
+// fontWeight?: "Light" | "Regular" | "Bold";
+// data: any;
+// }
+
+// const LineGraphComponent = ({
+// title,
+// fontFamily,
+// fontSize,
+// fontWeight = "Regular",
+// }: ChartComponentProps) => {
+// // Memoize Font Weight Mapping
+// const chartFontWeightMap = useMemo(
+// () => ({
+// Light: "lighter" as const,
+// Regular: "normal" as const,
+// Bold: "bold" as const,
+// }),
+// []
+// );
+
+// // Parse and Memoize Font Size
+// const fontSizeValue = useMemo(
+// () => (fontSize ? parseInt(fontSize) : 12),
+// [fontSize]
+// );
+
+// // Determine and Memoize Font Weight
+// const fontWeightValue = useMemo(
+// () => chartFontWeightMap[fontWeight],
+// [fontWeight, chartFontWeightMap]
+// );
+
+// // Memoize Chart Font Style
+// const chartFontStyle = useMemo(
+// () => ({
+// family: fontFamily || "Arial",
+// size: fontSizeValue,
+// weight: fontWeightValue,
+// }),
+// [fontFamily, fontSizeValue, fontWeightValue]
+// );
+
+// const options = useMemo(
+// () => ({
+// responsive: true,
+// maintainAspectRatio: false,
+// plugins: {
+// title: {
+// display: true,
+// text: title,
+// font: chartFontStyle,
+// },
+// legend: {
+// display: false,
+// },
+// },
+// scales: {
+// x: {
+// ticks: {
+// display: true, // This hides the x-axis labels
+// },
+// },
+// },
+// }),
+// [title, chartFontStyle]
+// );
+
+// const chartData = {
+// labels: ["January", "February", "March", "April", "May", "June", "July"],
+// datasets: [
+// {
+// label: "My First Dataset",
+// data: [65, 59, 80, 81, 56, 55, 40],
+// backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+// borderColor: "#ffffff", // Keeping border color white
+// borderWidth: 2,
+// fill: false,
+// },
+// ],
+// };
+
+// return handleSelectZone(item.id)}>
@@ -25,9 +50,11 @@ const List: React.FC = ({ items = [] }) => {
-
+ {remove && (
+
+
+ )}
{stock.description}
- Icon
+
+
+
{header}
diff --git a/app/src/modules/builder/geomentries/assets/assetManager.ts b/app/src/modules/builder/geomentries/assets/assetManager.ts
index f083395..38d0721 100644
--- a/app/src/modules/builder/geomentries/assets/assetManager.ts
+++ b/app/src/modules/builder/geomentries/assets/assetManager.ts
@@ -112,7 +112,7 @@ export default async function assetManager(
) {
if (!activePromises.get(taskId)) return; // Stop processing if task is canceled
- const existingModel = itemsGroup.current.getObjectByProperty("uuid", item.modeluuid);
+ const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modeluuid);
if (existingModel) {
// console.log(`Model ${item.modelname} already exists in the scene.`);
resolve();
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 128a72a..3d47a7e 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -65,6 +65,8 @@ const ZoneGroup: React.FC = () => {
zoneId: zone.zoneId,
zoneName: zone.zoneName,
points: zone.points,
+ viewPortCenter: zone.viewPortCenter,
+ viewPortposition: zone.viewPortposition,
layer: zone.layer
}));
@@ -145,7 +147,7 @@ const ZoneGroup: React.FC = () => {
const target: [number, number, number] | null = calculateCenter(zone.points);
if (!target) return;
- const position = [target[0], 50, target[2]];
+ const position = [target[0], 10, target[2]];
const input = {
userId: userId,
@@ -186,7 +188,7 @@ const ZoneGroup: React.FC = () => {
const target: [number, number, number] | null = calculateCenter(zone.points);
if (!target) return;
- const position = [target[0], 75, target[2]];
+ const position = [target[0], 10, target[2]];
const input = {
userId: userId,
diff --git a/app/src/modules/collaboration/socketResponses.dev.tsx b/app/src/modules/collaboration/socketResponses.dev.tsx
index e9ca9e0..031629f 100644
--- a/app/src/modules/collaboration/socketResponses.dev.tsx
+++ b/app/src/modules/collaboration/socketResponses.dev.tsx
@@ -745,6 +745,7 @@ export default function SocketResponses({
return
}
if (data.message === "zone deleted") {
+ console.log('data: ', data);
const updatedZones = zones.filter((zone: any) => zone.zoneId !== data.data.zoneId);
setZones(updatedZones);
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
new file mode 100644
index 0000000..a3c1cb0
--- /dev/null
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import assetImage from "../../assets/image/image.png";
+import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+
+// Define the shape of the selected card
+interface SelectedCard {
+ assetName: string;
+ uploadedOn: string;
+ price: number;
+ rating: number;
+ views: number;
+}
+
+// Define the props type for AssetPreview
+interface AssetPreviewProps {
+ selectedCard: SelectedCard;
+ setSelectedCard: React.Dispatch>; // Type for setter function
+}
+
+const AssetPreview: React.FC = ({
+ selectedCard,
+ setSelectedCard,
+}) => {
+ // Ensure rating is a valid number between 0 and 5
+ const rating = Math.max(
+ 0,
+ Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
+ );
+
+ console.log("selectedCard: ", selectedCard);
+
+ // Ensure that the rating is a valid positive integer for array length
+ const starsArray = Array.from({ length: rating }, (_, index) => index);
+
+ return (
+
+
+ );
+};
+
+export default AssetPreview;
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
new file mode 100644
index 0000000..3df2e1f
--- /dev/null
+++ b/app/src/modules/market/Card.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import {
+ CommentsIcon,
+ DownloadIcon,
+ EyeIconBig,
+ StarsIconSmall,
+ VerifiedIcon,
+} from "../../components/icons/marketPlaceIcons";
+
+import assetImage from "../../assets/image/image.png";
+const Card: React.FC = () => {
+ return (
+
+
+
+ 
+
+
+
+
+
+
+
+ {/* asset details */}
+ H
+
+
+ HERX FACTORY
+ Follow +
+
+
+
+ {/* buttons */}
+ {selectedCard.assetName}
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Doloremque nisi beatae facilis architecto quaerat delectus velit
+ aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
+ minima voluptates, aliquid corrupti excepturi consectetur
+ distinctio sequi beatae odit autem? Distinctio ab, voluptatem
+ omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
+ autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
+ amet pariatur fugit laudantium dolorem maxime voluptates atque
+ molestiae modi inventore quidem maiores dolore numquam, natus
+ quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
+ eaque! Porro cumque cum distinctio ullam debitis, dolorum
+ similique! Harum cupiditate perferendis voluptatum molestiae,
+ fugiat quisquam assumenda!
+
+
+
+
+
+ {selectedCard.views} views
+ ₹ {selectedCard.price}
+
+
+
+ {/* close button */}
+ Add to cart
+ Buy now
+ setSelectedCard(null)}>
+ {`<-back`}
+
+
+
+ );
+};
+
+export default Card;
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx
new file mode 100644
index 0000000..27d4a6b
--- /dev/null
+++ b/app/src/modules/market/CardsContainer.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Card from "./Card";
+
+const CardsContainer: React.FC = () => {
+ const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+ return (
+
+
+
+
+
+
+
+
+
+
+ Asset name
+ Uploaded on-12 Jan 23
+
+
+
+
+
+
+
+ HEXR FACTORY
+
+
+
+
+
+ ₹ 36,500/unit
+
+ Buy now
+
+
+ );
+};
+
+export default CardsContainer;
diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx
new file mode 100644
index 0000000..11a2cbf
--- /dev/null
+++ b/app/src/modules/market/FilterSearch.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+// import RegularDropDown from "./ui/inputs/RegularDropDown";
+
+import Search from "../../components/ui/inputs/Search";
+import { StarsIcon } from "../../components/icons/marketPlaceIcons";
+import RegularDropDown from "../../components/ui/inputs/RegularDropDown";
+
+const FilterSearch: React.FC = () => {
+ const [activeOption, setActiveOption] = useState("Sort by"); // State for active option
+
+ const handleSelect = (option: string) => {
+ setActiveOption(option);
+ };
+ return (
+ Products You May Like
+
+ {array.map((index) => (
+
+
+ {}} />
+
+ );
+};
+
+export default FilterSearch;
diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx
new file mode 100644
index 0000000..71dc0a5
--- /dev/null
+++ b/app/src/modules/market/MarketPlace.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import FilterSearch from "./FilterSearch";
+import CardsContainer from "./CardsContainer";
+
+const MarketPlace = () => {
+ return (
+ Free
+ Animated
+
+
+ Rating
+
+
+
+
+ );
+};
+
+export default MarketPlace;
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index e86b9f2..d349a1a 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -15,7 +15,8 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
import SelectionControls from "./controls/selection/selectionControls";
import MeasurementTool from "./tools/measurementTool";
import Simulation from "../simulation/simulation";
-// import Simulation from "../simulation/simulationtemp/simulation";
+// import Simulation from "./simulationtemp/simulation";
+import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
export default function Scene() {
@@ -41,6 +42,7 @@ export default function Scene() {
+
+
+
+
{loadingProgress && ((set: any, get: any) => ({
- socket: null,
- initializeSocket: (email: any) => {
- const existingSocket = get().socket;
- if (existingSocket) {
- return;
- }
-
- const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`, {
- reconnection: false,
- auth: { email }
- });
-
- set({ socket });
- },
- disconnectSocket: () => {
- set((state: any) => {
- state.socket?.disconnect();
- return { socket: null };
- });
+ socket: null,
+ initializeSocket: (email: any) => {
+ const existingSocket = get().socket;
+ if (existingSocket) {
+ return;
}
+
+ const socket = io(
+ `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
+ {
+ reconnection: false,
+ auth: { email },
+ }
+ );
+
+ set({ socket });
+ },
+ disconnectSocket: () => {
+ set((state: any) => {
+ state.socket?.disconnect();
+ return { socket: null };
+ });
+ },
}));
export const useLoadingProgress = create<{ loadingProgress: number; setLoadingProgress: (x: number) => void }>((set) => ({
@@ -32,270 +35,279 @@ export const useLoadingProgress = create<{ loadingProgress: number; setLoadingPr
}));
export const useOrganization = create((set: any) => ({
- organization: "",
- setOrganization: (x: any) => set(() => ({ organization: x })),
+ organization: "",
+ setOrganization: (x: any) => set(() => ({ organization: x })),
}));
export const useToggleView = create((set: any) => ({
- toggleView: false,
- setToggleView: (x: any) => set(() => ({ toggleView: x })),
+ toggleView: false,
+ setToggleView: (x: any) => set(() => ({ toggleView: x })),
}));
export const useUpdateScene = create((set: any) => ({
- updateScene: false,
- setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
+ updateScene: false,
+ setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
}));
export const useWalls = create((set: any) => ({
- walls: [],
- setWalls: (x: any) => set(() => ({ walls: x })),
+ walls: [],
+ setWalls: (x: any) => set(() => ({ walls: x })),
}));
export const useZones = create((set: any) => ({
- zones: [],
- setZones: (x: any) => set(() => ({ zones: x })),
+ zones: [],
+ setZones: (x: any) => set(() => ({ zones: x })),
}));
interface ZonePointsState {
- zonePoints: THREE.Vector3[];
- setZonePoints: (points: THREE.Vector3[]) => void;
+ zonePoints: THREE.Vector3[];
+ setZonePoints: (points: THREE.Vector3[]) => void;
}
export const useZonePoints = create((set) => ({
- zonePoints: [],
- setZonePoints: (points) => set({ zonePoints: points }),
+ zonePoints: [],
+ setZonePoints: (points) => set({ zonePoints: points }),
}));
export const useSelectedItem = create((set: any) => ({
- selectedItem: { name: "", id: "" },
- setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
+ selectedItem: { name: "", id: "" },
+ setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
}));
export const useSelectedAssets = create((set: any) => ({
- selectedAssets: [],
- setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
+ selectedAssets: [],
+ setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
}));
export const useLayers = create((set: any) => ({
- Layers: 1,
- setLayers: (x: any) => set(() => ({ Layers: x })),
+ Layers: 1,
+ setLayers: (x: any) => set(() => ({ Layers: x })),
}));
export const useCamPosition = create((set: any) => ({
- camPosition: { x: undefined, y: undefined, z: undefined },
- setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
+ camPosition: { x: undefined, y: undefined, z: undefined },
+ setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
}));
export const useMenuVisible = create((set: any) => ({
- menuVisible: false,
- setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
+ menuVisible: false,
+ setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
}));
export const useDeleteModels = create((set: any) => ({
- deleteModels: false,
- setDeleteModels: (x: any) => set(() => ({ deleteModels: x })),
+ deleteModels: false,
+ setDeleteModels: (x: any) => set(() => ({ deleteModels: x })),
}));
export const useToolMode = create((set: any) => ({
- toolMode: null,
- setToolMode: (x: any) => set(() => ({ toolMode: x })),
+ toolMode: null,
+ setToolMode: (x: any) => set(() => ({ toolMode: x })),
}));
export const useNewLines = create((set: any) => ({
- newLines: [],
- setNewLines: (x: any) => set(() => ({ newLines: x })),
+ newLines: [],
+ setNewLines: (x: any) => set(() => ({ newLines: x })),
}));
export const useDeletedLines = create((set: any) => ({
- deletedLines: [],
- setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
+ deletedLines: [],
+ setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
}));
export const useMovePoint = create((set: any) => ({
- movePoint: false,
- setMovePoint: (x: any) => set(() => ({ movePoint: x })),
+ movePoint: false,
+ setMovePoint: (x: any) => set(() => ({ movePoint: x })),
}));
export const useTransformMode = create((set: any) => ({
- transformMode: null,
- setTransformMode: (x: any) => set(() => ({ transformMode: x })),
+ transformMode: null,
+ setTransformMode: (x: any) => set(() => ({ transformMode: x })),
}));
export const useDeletePointOrLine = create((set: any) => ({
- deletePointOrLine: false,
- setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+ deletePointOrLine: false,
+ setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
}));
export const useFloorItems = create((set: any) => ({
- floorItems: null,
- setFloorItems: (callback: any) =>
- set((state: any) => ({
- floorItems:
- typeof callback === "function"
- ? callback(state.floorItems)
- : callback,
- })),
+ floorItems: null,
+ setFloorItems: (callback: any) =>
+ set((state: any) => ({
+ floorItems:
+ typeof callback === "function" ? callback(state.floorItems) : callback,
+ })),
}));
export const useWallItems = create((set: any) => ({
- wallItems: [],
- setWallItems: (callback: any) =>
- set((state: any) => ({
- wallItems:
- typeof callback === "function"
- ? callback(state.wallItems)
- : callback,
- })),
+ wallItems: [],
+ setWallItems: (callback: any) =>
+ set((state: any) => ({
+ wallItems:
+ typeof callback === "function" ? callback(state.wallItems) : callback,
+ })),
}));
export const useSelectedWallItem = create((set: any) => ({
- selectedWallItem: null,
- setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
+ selectedWallItem: null,
+ setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
}));
export const useselectedFloorItem = create((set: any) => ({
- selectedFloorItem: null,
- setselectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
+ selectedFloorItem: null,
+ setselectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
}));
export const useDeletableFloorItem = create((set: any) => ({
- deletableFloorItem: null,
- setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
+ deletableFloorItem: null,
+ setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
}));
export const useSetScale = create((set: any) => ({
- scale: null,
- setScale: (x: any) => set(() => ({ scale: x })),
+ scale: null,
+ setScale: (x: any) => set(() => ({ scale: x })),
}));
export const useRoofVisibility = create((set: any) => ({
- roofVisibility: false,
- setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
+ roofVisibility: false,
+ setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
}));
export const useWallVisibility = create((set: any) => ({
- wallVisibility: false,
- setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
+ wallVisibility: false,
+ setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
}));
export const useShadows = create((set: any) => ({
- shadows: false,
- setShadows: (x: any) => set(() => ({ shadows: x })),
+ shadows: false,
+ setShadows: (x: any) => set(() => ({ shadows: x })),
}));
export const useSunPosition = create((set: any) => ({
- sunPosition: { x: undefined, y: undefined, z: undefined },
- setSunPosition: (newSuntPosition: any) => set({ sunPosition: newSuntPosition }),
+ sunPosition: { x: undefined, y: undefined, z: undefined },
+ setSunPosition: (newSuntPosition: any) =>
+ set({ sunPosition: newSuntPosition }),
}));
export const useRemoveLayer = create((set: any) => ({
- removeLayer: false,
- setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
+ removeLayer: false,
+ setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
}));
export const useRemovedLayer = create((set: any) => ({
- removedLayer: null,
- setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
+ removedLayer: null,
+ setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
}));
export const useActiveLayer = create((set: any) => ({
- activeLayer: 1,
- setActiveLayer: (x: any) => set({ activeLayer: x }),
+ activeLayer: 1,
+ setActiveLayer: (x: any) => set({ activeLayer: x }),
}));
export const useResetCamera = create((set: any) => ({
- resetCamera: false,
- setResetCamera: (x: any) => set({ resetCamera: x }),
+ resetCamera: false,
+ setResetCamera: (x: any) => set({ resetCamera: x }),
}));
export const useAddAction = create((set: any) => ({
- addAction: null,
- setAddAction: (x: any) => set({ addAction: x }),
+ addAction: null,
+ setAddAction: (x: any) => set({ addAction: x }),
}));
export const useActiveTool = create((set: any) => ({
- activeTool: "Cursor",
- setActiveTool: (x: any) => set({ activeTool: x }),
+ activeTool: "Cursor",
+ setActiveTool: (x: any) => set({ activeTool: x }),
}));
export const use2DUndoRedo = create((set: any) => ({
- is2DUndoRedo: null,
- set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
-}))
+ is2DUndoRedo: null,
+ set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
+}));
export const useElevation = create((set: any) => ({
- elevation: 45,
- setElevation: (x: any) => set({ elevation: x }),
+ elevation: 45,
+ setElevation: (x: any) => set({ elevation: x }),
}));
export const useAzimuth = create((set: any) => ({
- azimuth: -160,
- setAzimuth: (x: any) => set({ azimuth: x }),
+ azimuth: -160,
+ setAzimuth: (x: any) => set({ azimuth: x }),
}));
export const useRenderDistance = create((set: any) => ({
- renderDistance: 50,
- setRenderDistance: (x: any) => set({ renderDistance: x }),
+ renderDistance: 50,
+ setRenderDistance: (x: any) => set({ renderDistance: x }),
}));
export const useCamMode = create((set: any) => ({
- camMode: "ThirdPerson",
- setCamMode: (x: any) => set({ camMode: x }),
+ camMode: "ThirdPerson",
+ setCamMode: (x: any) => set({ camMode: x }),
}));
export const useUserName = create((set: any) => ({
- userName: "",
- setUserName: (x: any) => set({ userName: x }),
+ userName: "",
+ setUserName: (x: any) => set({ userName: x }),
}));
export const useObjectPosition = create((set: any) => ({
- objectPosition: { x: undefined, y: undefined, z: undefined },
- setObjectPosition: (newObjectPosition: any) => set({ objectPosition: newObjectPosition }),
+ objectPosition: { x: undefined, y: undefined, z: undefined },
+ setObjectPosition: (newObjectPosition: any) =>
+ set({ objectPosition: newObjectPosition }),
}));
export const useObjectScale = create((set: any) => ({
- objectScale: { x: undefined, y: undefined, z: undefined },
- setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
+ objectScale: { x: undefined, y: undefined, z: undefined },
+ setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
}));
export const useObjectRotation = create((set: any) => ({
- objectRotation: { x: undefined, y: undefined, z: undefined },
- setObjectRotation: (newObjectRotation: any) => set({ objectRotation: newObjectRotation }),
+ objectRotation: { x: undefined, y: undefined, z: undefined },
+ setObjectRotation: (newObjectRotation: any) =>
+ set({ objectRotation: newObjectRotation }),
}));
export const useDrieTemp = create((set: any) => ({
- drieTemp: undefined,
- setDrieTemp: (x: any) => set({ drieTemp: x }),
+ drieTemp: undefined,
+ setDrieTemp: (x: any) => set({ drieTemp: x }),
}));
export const useActiveUsers = create((set: any) => ({
- activeUsers: [],
- setActiveUsers: (x: any) => set({ activeUsers: x }),
+ activeUsers: [],
+ setActiveUsers: (x: any) => set({ activeUsers: x }),
}));
export const useDrieUIValue = create((set: any) => ({
- drieUIValue: { touch: null, temperature: null, humidity: null },
+ drieUIValue: { touch: null, temperature: null, humidity: null },
- setDrieUIValue: (x: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+ setDrieUIValue: (x: any) =>
+ set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
- setTouch: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, touch: value } })),
- setTemperature: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, temperature: value } })),
- setHumidity: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, humidity: value } })),
+ setTouch: (value: any) =>
+ set((state: any) => ({
+ drieUIValue: { ...state.drieUIValue, touch: value },
+ })),
+ setTemperature: (value: any) =>
+ set((state: any) => ({
+ drieUIValue: { ...state.drieUIValue, temperature: value },
+ })),
+ setHumidity: (value: any) =>
+ set((state: any) => ({
+ drieUIValue: { ...state.drieUIValue, humidity: value },
+ })),
}));
export const useDrawMaterialPath = create((set: any) => ({
- drawMaterialPath: false,
- setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
+ drawMaterialPath: false,
+ setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
}));
export const useSelectedActionSphere = create((set: any) => ({
- selectedActionSphere: undefined,
- setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
+ selectedActionSphere: undefined,
+ setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
}));
export const useSelectedPath = create((set: any) => ({
- selectedPath: undefined,
- setSelectedPath: (x: any) => set({ selectedPath: x }),
+ selectedPath: undefined,
+ setSelectedPath: (x: any) => set({ selectedPath: x }),
}));
interface Path {
@@ -315,8 +327,8 @@ interface Path {
}
interface SimulationPathsStore {
- simulationPaths: Path[];
- setSimulationPaths: (paths: Path[]) => void;
+ simulationPaths: Path[];
+ setSimulationPaths: (paths: Path[]) => void;
}
export const useSimulationPaths = create((set) => ({
@@ -325,11 +337,47 @@ export const useSimulationPaths = create((set) => ({
}));
export const useIsConnecting = create((set: any) => ({
- isConnecting: false,
- setIsConnecting: (x: any) => set({ isConnecting: x }),
+ isConnecting: false,
+ setIsConnecting: (x: any) => set({ isConnecting: x }),
}));
export const useStartSimulation = create((set: any) => ({
- startSimulation: false,
- setStartSimulation: (x: any) => set({ startSimulation: x }),
-}));
\ No newline at end of file
+ startSimulation: false,
+ setStartSimulation: (x: any) => set({ startSimulation: x }),
+}));
+export const usezoneTarget = create((set: any) => ({
+ zoneTarget: [],
+ setZoneTarget: (x: any) => set({ zoneTarget: x }),
+}));
+export const usezonePosition = create((set: any) => ({
+ zonePosition: [],
+ setZonePosition: (x: any) => set({ zonePosition: x }),
+}));
+
+
+interface EditPositionState {
+ Edit: boolean;
+ setEdit: (value: boolean) => void;
+ }
+
+ export const useEditPosition = create((set) => ({
+ Edit: false,
+ setEdit: (value) => set({ Edit: value }), // Properly updating the state
+ }));
+
+ interface DroppedObject {
+ header: string;
+ value: string;
+ per: string;
+ className: string;
+ }
+
+ interface DroppedObjectsState {
+ objects: DroppedObject[];
+ addObject: (obj: DroppedObject) => void;
+ }
+
+ export const useDroppedObjectsStore = create((set) => ({
+ objects: [],
+ addObject: (obj) => set((state) => ({ objects: [...state.objects, obj] })),
+ }));
\ No newline at end of file
diff --git a/app/src/store/useChartStore.ts b/app/src/store/useChartStore.ts
new file mode 100644
index 0000000..88d0c9c
--- /dev/null
+++ b/app/src/store/useChartStore.ts
@@ -0,0 +1,28 @@
+import { create } from "zustand";
+
+interface Measurement {
+ name: string;
+ fields: string;
+}
+
+interface MeasurementStore {
+ measurements: Measurement[];
+ interval: number;
+ duration: string;
+ setMeasurements: (newMeasurements: Measurement[]) => void;
+ updateDuration: (newDuration: string) => void;
+}
+
+const useChartStore = create((set) => ({
+ measurements: [],
+ interval: 1000,
+ duration: "1h",
+
+ setMeasurements: (newMeasurements) =>
+ set(() => ({ measurements: newMeasurements })),
+
+ updateDuration: (newDuration) =>
+ set(() => ({ duration: newDuration })),
+}));
+
+export default useChartStore;
diff --git a/app/src/store/useZoneStore.ts b/app/src/store/useZoneStore.ts
index 4d623ec..007a1c6 100644
--- a/app/src/store/useZoneStore.ts
+++ b/app/src/store/useZoneStore.ts
@@ -15,21 +15,31 @@ interface SelectedZoneState {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
+ zoneId: string;
+ zoneViewPortTarget: number[];
+ zoneViewPortPosition: number[];
widgets: Widget[];
}
interface SelectedZoneStore {
selectedZone: SelectedZoneState;
- setSelectedZone: (zone: Partial | ((prev: SelectedZoneState) => SelectedZoneState)) => void;
+ setSelectedZone: (
+ zone:
+ | Partial
+ | ((prev: SelectedZoneState) => SelectedZoneState)
+ ) => void;
}
export const useSelectedZoneStore = create((set) => ({
selectedZone: {
- zoneName: "Manufacturing unit",
- activeSides: [],
- panelOrder: [],
- lockedPanels: [],
- widgets: [],
+ zoneName: "", // Empty string initially
+ activeSides: [], // Empty array
+ panelOrder: [], // Empty array
+ lockedPanels: [], // Empty array
+ zoneId: "",
+ zoneViewPortTarget: [],
+ zoneViewPortPosition: [],
+ widgets: [], // Empty array
},
setSelectedZone: (zone) =>
set((state) => ({
@@ -38,4 +48,4 @@ export const useSelectedZoneStore = create((set) => ({
? zone(state.selectedZone) // Handle functional updates
: { ...state.selectedZone, ...zone }, // Handle partial updates
})),
-}));
\ No newline at end of file
+}));
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
new file mode 100644
index 0000000..2ae2790
--- /dev/null
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -0,0 +1,187 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins.scss" as *;
+
+.marketplace-wrapper {
+ height: 100vh;
+ width: 100vw;
+ z-index: #{$z-index-marketplace};
+ background-color: var(--background-color-secondary);
+ position: absolute;
+ left: 0;
+ padding: 100px 50px;
+
+ .marketplace-container {
+ padding: 20px 2px;
+ height: calc(100vh - 120px);
+ background-color: var(--background-color);
+ box-shadow: #{$box-shadow-medium};
+ border-radius: #{$border-radius-extra-large};
+ }
+
+ .marketPlace {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ left: calc(120px / 2);
+ top: 100px;
+ padding: 14px;
+ padding-bottom: 60px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .filter-search-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .search-wrapper {
+ min-width: 60%;
+ max-width: 684px;
+ padding: 0;
+ border-radius: $border-radius-large ;
+
+ .search-container {
+ border: none !important;
+ box-shadow: $box-shadow-medium;
+ border-radius: $border-radius-large ;
+
+ input {
+ border: none !important;
+ outline: none;
+
+ }
+ }
+ }
+
+ .regularDropdown-container {
+ max-width: 159px;
+ }
+
+ .button {
+ padding: 5px 20px;
+ border: 1px solid var(--accent-color);
+ border-radius: 14px;
+ }
+
+ .rating-container {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .stars {
+ display: flex;
+ align-items: center;
+
+ }
+ }
+ }
+
+ .cards-container-container {
+ padding: 0px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+
+ .header {
+ color: var(--text-color);
+ font-weight: $medium-weight;
+ font-size: $xlarge;
+ }
+
+ .cards-wrapper-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 28px;
+
+ .card-container {
+ width: calc(25% - 23px);
+ border-radius: 18px;
+ padding: 12px;
+ box-shadow: 0px 2px 10.5px 0px #0000000D;
+ border: 1px solid var(--background-accent-transparent, #E0DFFF80);
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 6px;
+
+ .icon {
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ width: 30px;
+ height: 30px;
+ border-radius: 10px;
+ padding: 5px;
+ background-color: var(--accent-color);
+ }
+
+ .image-container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+
+ .assets-container {
+ display: flex;
+ justify-content: space-between;
+
+ .name-container {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+
+ .asstes-container {
+ font-weight: #{$bold-weight};
+ font-size: $regular ;
+ }
+
+ .assets-date {
+ color: var(--accent-color);
+ font-size: $small;
+ }
+ }
+
+ .details {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .content {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+ }
+ }
+
+ .vendor-icon {
+
+ font-weight: #{$bold-weight};
+ font-size: $regular ;
+ }
+
+ .stars-container {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .buy-now-button {
+ width: 100%;
+ background-color: var(--background-color-secondary);
+ border-radius: $border-radius-extra-large ;
+ padding: 8px 0;
+ @include flex-center;
+ color: var(--accent-color);
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index 0c30a55..cb65697 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -4,7 +4,7 @@
.tools-container {
@include flex-center;
position: fixed;
- bottom: 32px;
+ bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
padding: 8px;
@@ -15,12 +15,14 @@
transition: width 0.2s;
background-color: var(--background-color);
z-index: #{$z-index-default};
+
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
}
+
.draw-tools,
.general-options,
.activeDropicon {
@@ -30,42 +32,46 @@
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
+
.tool-button {
@include flex-center;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
+
&:hover {
- background: color-mix(
- in srgb,
- var(--highlight-accent-color) 60%,
- transparent
- );
+ background: color-mix(in srgb,
+ var(--highlight-accent-color) 60%,
+ transparent);
}
}
+
.active {
background-color: var(--accent-color);
+
&:hover {
background-color: var(--accent-color);
}
}
}
+
.activeDropicon {
gap: 2px;
+
.drop-down-option-button {
@include flex-center;
height: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
position: relative;
+
&:hover {
- background: color-mix(
- in srgb,
- var(--highlight-accent-color) 60%,
- transparent
- );
+ background: color-mix(in srgb,
+ var(--highlight-accent-color) 60%,
+ transparent);
}
+
.drop-down-container {
position: absolute;
bottom: 40px;
@@ -74,6 +80,7 @@
padding: 8px;
border-radius: #{$border-radius-large};
background: var(--background-color);
+
.option-list {
margin: 4px 0;
display: flex;
@@ -82,18 +89,22 @@
border-radius: #{$border-radius-medium};
gap: 6px;
padding: 4px;
+
&:hover {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
+
path {
stroke: var(--accent-color);
}
}
+
.active-option {
height: 12px;
width: 12px;
@include flex-center;
}
+
.option {
color: inherit;
}
@@ -101,6 +112,7 @@
}
}
}
+
.toggle-threed-button {
@include flex-center;
padding: 3px;
@@ -108,12 +120,14 @@
background-color: var(--highlight-accent-color);
gap: 2px;
position: relative;
+
.toggle-option {
font-size: var(--font-size-small);
padding: 2px;
z-index: 1;
transition: all 0.2s;
}
+
&::after {
content: "";
position: absolute;
@@ -125,15 +139,70 @@
border-radius: #{$border-radius-small};
transition: all 0.2s;
}
+
.active {
color: var(--highlight-accent-color);
}
}
+
.toggled {
&::after {
left: 24px;
}
}
+
+
+
+
+
+}
+
+.exitPlay {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: var(--highlight-accent-color);
+ cursor: pointer;
+ @include flex-center;
+ position: fixed;
+ bottom: 60px;
+ left: 50%;
+ transform: translate(-50%, 0);
+ color: var(--accent-color);
+ z-index: 100;
+ isolation: isolate;
+ font-weight: 700;
+ &:hover {
+ font-weight: 500;
+ background-color: var(--accent-color);
+ color: var(--highlight-accent-color);
+ &::after{
+ animation: pulse 1s ease-out infinite;
+ }
+ }
+ &::after{
+ content: "";
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ background: var(--background-color-secondary);
+ border-radius: #{$border-radius-circle};
+ z-index: -1;
+ }
+}
+
+@keyframes pulse {
+ 0%{
+ opacity: 0;
+ scale: .5;
+ }
+ 50%{
+ opacity: 1;
+ }
+ 100%{
+ opacity: 0;
+ scale: 2;
+ }
}
@keyframes expandWidth {
@@ -141,8 +210,9 @@
width: 0;
opacity: 0;
}
+
to {
width: fit-content;
opacity: 1;
}
-}
+}
\ No newline at end of file
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 63498bb..d595b92 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -530,7 +530,7 @@
border-radius: #{$border-radius-medium};
path {
stroke: var(--accent-color);
- stroke-width: 1.5px;
+ strokeWidth: 1.5px;
}
&:hover {
background: var(--accent-color);
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index c45e2cc..fa6ce51 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -21,6 +21,7 @@
@use 'components/visualization/floating/energyConsumed';
@use 'components/visualization/ui/styledWidgets';
@use './components/visualization/floating/common';
+@use './components/marketPlace/marketPlace.scss';
// layout
@use 'layout/loading';
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index c6eb8b5..2d40d64 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -167,7 +167,9 @@
.chart-container {
width: 100%;
- height: 200px;
+ height: 24% !important;
+
+ min-height: 150px;
max-height: 100%;
border: 1px dotted #a9a9a9;
border-radius: 8px;
@@ -192,17 +194,17 @@
left: 0;
right: 0;
- .fullScreen {
- background-color: red;
- }
+
.panel-content {
display: flex;
flex-direction: row;
+ height: 100%;
.chart-container {
- height: 100%;
- width: 200px;
+ height: 100% !important;
+ width: 20%;
+ min-width: 150px;
}
}
}
@@ -234,6 +236,11 @@
}
}
+.playingFlase{
+ .zoon-wrapper{
+ bottom: 300px !important;
+ }
+}
// Side Buttons
.side-button-container {
position: absolute;