diff --git a/app/src/components/layout/3D-cards/CardsScene.tsx b/app/src/components/layout/3D-cards/CardsScene.tsx index 471034c..9318ce3 100644 --- a/app/src/components/layout/3D-cards/CardsScene.tsx +++ b/app/src/components/layout/3D-cards/CardsScene.tsx @@ -11,10 +11,10 @@ const CardsScene = () => { {/* 3d-cards */} - - {/* */} {/* */} + {/* */} {/* */} + {/* */} diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx index 7402c8d..4da32bc 100644 --- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx +++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx @@ -21,8 +21,11 @@ ChartJS.register( Tooltip, Legend ); +interface ProductionCapacityProps { + position: [number, number, number]; +} -const ProductionCapacity = () => { +const ProductionCapacity : React.FC = ({ position }) => { // Chart data for a week const chartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week @@ -76,7 +79,10 @@ const ProductionCapacity = () => { }; return ( - +
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.FC = ({ }) => { return ; }; - -const ReturnOfInvestment = () => { +interface ReturnOfInvestmentProps { + position: [number, number, number]; +} +const ReturnOfInvestment: React.FC = ({ position }) => { // Improved sample data for the smooth curve graph (single day) const graphData: ChartData<"line"> = { labels: [ @@ -106,7 +108,10 @@ const ReturnOfInvestment = () => { }; return ( - +
Return 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 ( - +
@@ -20,7 +26,7 @@ const StateWorking = () => {
- + {/* */}
{/* 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 ; }; -const Throughput = () => { +interface ThroughputProps { + position: [number, number, number]; +} + +const Throughput: React.FC = ({ 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 ( - +
Throughput
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx index ab9fcc8..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", @@ -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) => ( -
-
{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 + }} + > + {/*
{widget.name}
*/} {widget.name}
))} 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 = ({
{/* "+" Button */}