From 44d9525f3e72bf7a225f492932041c24e2feb7c4 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Fri, 21 Mar 2025 11:42:27 +0530 Subject: [PATCH] merge commit --- app/src/App.tsx | 1 - app/src/assets/orgTemp.png | Bin 0 -> 25838 bytes .../components/icons/ExportCommonIcons.tsx | 14 +- .../components/icons/ExportModuleIcons.tsx | 31 + app/src/components/icons/ExportToolsIcons.tsx | 105 +++- .../icons/RealTimeVisulationIcons.tsx | 100 ++++ app/src/components/icons/SimulationIcons.tsx | 8 +- .../layout/sidebarLeft/SideBarLeft.tsx | 22 +- .../sidebarLeft/visualization/Templates.tsx | 125 ++++ .../visualization/widgets/ChartComponent.tsx | 130 ++++ .../visualization/widgets/Widgets.tsx | 28 + .../visualization/widgets/Widgets2D.tsx | 138 +++++ .../visualization/widgets/Widgets3D.tsx | 10 + .../visualization/widgets/WidgetsFloating.tsx | 41 ++ .../components/layout/sidebarRight/Header.tsx | 3 +- .../layout/sidebarRight/SideBarRight.tsx | 25 +- .../visualization/Visualization.tsx | 27 + .../sidebarRight/visualization/data/Data.tsx | 175 ++++++ .../visualization/design/Design.tsx | 209 +++++++ app/src/components/ui/ContextMenu.tsx | 9 - app/src/components/ui/ModuleToggle.tsx | 12 + app/src/components/ui/Tools.tsx | 244 +++++++- .../ui/charts/BarGraphComponent.tsx | 94 +++ .../ui/charts/LineGraphComponent.tsx | 93 +++ .../ui/charts/PieGraphComponent.tsx | 91 +++ .../components/ui/componets/AddButtons.tsx | 192 ++++++ .../components/ui/componets/DisplayZone.tsx | 179 ++++++ .../ui/componets/DraggableWidget.tsx | 82 +++ app/src/components/ui/componets/Panel.tsx | 203 +++++++ .../ui/componets/RealTimeVisulization.tsx | 103 ++++ .../ui/inputs/InputWithDropDown.tsx | 106 ++-- .../components/ui/inputs/LabledDropdown.tsx | 56 +- .../ui/inputs/MultiLevelDropDown.tsx | 141 +++++ .../components/ui/inputs/RegularDropDown.tsx | 82 +++ app/src/components/ui/list/DropDownList.tsx | 7 +- app/src/functions/generateUId.ts | 2 - app/src/functions/generateUniqueId.ts | 2 + app/src/functions/handleResizePannel.ts | 48 +- app/src/hooks/temp.md | 0 app/src/modules/builder/temp.md | 0 app/src/modules/simulation/temp.md | 0 .../visualization/captureVisualization.ts | 55 ++ .../visualization/handleSaveTemplate.ts | 74 +++ app/src/pages/Project.tsx | 15 +- app/src/services/temp.md | 0 app/src/store/useModuleStore.ts | 4 +- app/src/store/usePlayButtonStore.ts | 11 + app/src/store/useTemplateStore.ts | 39 ++ app/src/store/useThemeStore.ts | 11 + app/src/store/useWidgetStore.ts | 49 ++ app/src/store/useZoneStore.ts | 41 ++ app/src/styles/abstracts/variables.scss | 4 +- app/src/styles/base/base.scss | 4 +- .../styles/components/_regularDropDown.scss | 54 ++ app/src/styles/components/input.scss | 80 +-- app/src/styles/components/lists.scss | 8 - app/src/styles/components/tools.scss | 5 - .../floating/energyConsumed.scss | 110 ++++ app/src/styles/layout/sidebar.scss | 565 +++++++++++++----- app/src/styles/main.scss | 3 + app/src/styles/pages/realTimeViz.scss | 390 ++++++++++++ 61 files changed, 4054 insertions(+), 406 deletions(-) create mode 100644 app/src/assets/orgTemp.png create mode 100644 app/src/components/icons/RealTimeVisulationIcons.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/Templates.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx create mode 100644 app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx create mode 100644 app/src/components/layout/sidebarRight/visualization/Visualization.tsx create mode 100644 app/src/components/layout/sidebarRight/visualization/data/Data.tsx create mode 100644 app/src/components/layout/sidebarRight/visualization/design/Design.tsx delete mode 100644 app/src/components/ui/ContextMenu.tsx create mode 100644 app/src/components/ui/charts/BarGraphComponent.tsx create mode 100644 app/src/components/ui/charts/LineGraphComponent.tsx create mode 100644 app/src/components/ui/charts/PieGraphComponent.tsx create mode 100644 app/src/components/ui/componets/AddButtons.tsx create mode 100644 app/src/components/ui/componets/DisplayZone.tsx create mode 100644 app/src/components/ui/componets/DraggableWidget.tsx create mode 100644 app/src/components/ui/componets/Panel.tsx create mode 100644 app/src/components/ui/componets/RealTimeVisulization.tsx create mode 100644 app/src/components/ui/inputs/MultiLevelDropDown.tsx create mode 100644 app/src/components/ui/inputs/RegularDropDown.tsx delete mode 100644 app/src/functions/generateUId.ts create mode 100644 app/src/functions/generateUniqueId.ts create mode 100644 app/src/hooks/temp.md create mode 100644 app/src/modules/builder/temp.md create mode 100644 app/src/modules/simulation/temp.md create mode 100644 app/src/modules/visualization/captureVisualization.ts create mode 100644 app/src/modules/visualization/handleSaveTemplate.ts create mode 100644 app/src/services/temp.md create mode 100644 app/src/store/usePlayButtonStore.ts create mode 100644 app/src/store/useTemplateStore.ts create mode 100644 app/src/store/useThemeStore.ts create mode 100644 app/src/store/useWidgetStore.ts create mode 100644 app/src/store/useZoneStore.ts create mode 100644 app/src/styles/components/_regularDropDown.scss create mode 100644 app/src/styles/components/visualization/floating/energyConsumed.scss create mode 100644 app/src/styles/pages/realTimeViz.scss diff --git a/app/src/App.tsx b/app/src/App.tsx index 9a9c252..d9b753c 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -5,7 +5,6 @@ import Project from './pages/Project'; import UserAuth from './pages/UserAuth'; const App: React.FC = () => { - console.log("App") return ( diff --git a/app/src/assets/orgTemp.png b/app/src/assets/orgTemp.png new file mode 100644 index 0000000000000000000000000000000000000000..e3865d6ad2d2fb5d4439f26ce4d20199e5e9ba69 GIT binary patch literal 25838 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 literal 0 HcmV?d00001 diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 53c5b9a..e64af49 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -378,8 +378,8 @@ export function UndoIcon() { xmlns="http://www.w3.org/2000/svg" > @@ -397,8 +397,8 @@ export function RedoIcon() { xmlns="http://www.w3.org/2000/svg" > @@ -436,7 +436,7 @@ export function RemoveIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -458,8 +458,8 @@ export function InfoIcon() { d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z" stroke="var(--text-color)" stroke-width="0.72" - stroke-linecap="round" - stroke-linejoin="round" + strokeLinecap="round" + strokeLinejoin="round" /> ); diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx index e2547d4..fb2f566 100644 --- a/app/src/components/icons/ExportModuleIcons.tsx +++ b/app/src/components/icons/ExportModuleIcons.tsx @@ -100,3 +100,34 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) { ); } + +export function CartIcon({ isActive }: { isActive: boolean }) { + return ( + + + + + + + ); +} diff --git a/app/src/components/icons/ExportToolsIcons.tsx b/app/src/components/icons/ExportToolsIcons.tsx index afffc88..d463c0a 100644 --- a/app/src/components/icons/ExportToolsIcons.tsx +++ b/app/src/components/icons/ExportToolsIcons.tsx @@ -10,11 +10,15 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) { @@ -37,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,35 +86,37 @@ export function FloorIcon({ isActive }: { isActive: boolean }) { /> ); @@ -366,7 +372,10 @@ export function PillerIcon({ isActive }: { isActive: boolean }) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -563,3 +572,67 @@ export function CursorIcon({ isActive }: { isActive: boolean }) { ); } + +export function PlayIcon({ isActive }: { isActive: boolean }) { + return ( + + + + ); +} + +export function PenIcon({ isActive }: { isActive: boolean }) { + return ( + + + + ); +} + +export function SaveTemplateIcon({ isActive }: { isActive: boolean }) { + return ( + + + + + ); +} diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx new file mode 100644 index 0000000..7c1a8d0 --- /dev/null +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -0,0 +1,100 @@ +export function CleanPannel() { + return ( + + + + + + + + + + + + + + + + + ); +} + +export function EyeIcon() { + return ( + + + + + ); +} + +export function LockIcon() { + return ( + + + + ); +} diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index 1dc82a7..3ce3ebe 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -10,14 +10,14 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { ); diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index f6b0842..fb7496a 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -5,21 +5,31 @@ import Header from "./Header"; import useToggleStore from "../../../store/useUIToggleStore"; import Assets from "./Assets"; import useModuleStore from "../../../store/useModuleStore"; +import Widgets from "./visualization/widgets/Widgets"; +import Templates from "./visualization/Templates"; +import Search from "../../ui/inputs/Search"; const SideBarLeft: React.FC = () => { - const [activeOption, setActiveOption] = useState("Outline"); + const [activeOption, setActiveOption] = useState("Widgets"); const { toggleUI } = useToggleStore(); const { activeModule } = useModuleStore(); - // Reset activeList whenever activeModule changes + // Reset activeOption whenever activeModule changes useEffect(() => { setActiveOption("Outline"); + if (activeModule === "visualization") setActiveOption("Widgets"); }, [activeModule]); const handleToggleClick = (option: string) => { setActiveOption(option); // Update the active option }; + + const handleSearchChange = (value: string) => { + // Log the search value for now + console.log(value); + }; + return (
@@ -28,11 +38,17 @@ const SideBarLeft: React.FC = () => { {activeModule === "visualization" ? ( <> + +
+ {activeOption === "Widgets" ? : } +
+ ) : activeModule === "market" ? ( + <> ) : ( <> { + const { templates, removeTemplate } = useTemplateStore(); + const { setSelectedZone } = useSelectedZoneStore(); + + console.log("templates: ", templates); + const handleDeleteTemplate = (id: string) => { + removeTemplate(id); + }; + + const handleLoadTemplate = (template: any) => { + setSelectedZone((prev) => ({ + ...prev, + panelOrder: template.panelOrder, + activeSides: Array.from( + new Set([...prev.activeSides, ...template.panelOrder]) + ), + widgets: template.widgets, + })); + }; + + return ( +
+ {templates.map((template) => ( +
+ {template.snapshot && ( +
+ {" "} + {/* 16:9 aspect ratio */} + {`${template.name} handleLoadTemplate(template)} + /> +
+ )} +
+
handleLoadTemplate(template)} + style={{ + cursor: "pointer", + fontWeight: "500", + // ':hover': { + // textDecoration: 'underline' + // } + }} + > + {template.name} +
+ +
+
+ ))} + {templates.length === 0 && ( +
+ No saved templates yet. Create one in the visualization view! +
+ )} +
+ ); +}; + +export default Templates; diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx new file mode 100644 index 0000000..e716668 --- /dev/null +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx @@ -0,0 +1,130 @@ +import React, { useEffect, useRef, useMemo } from "react"; +import { Chart } from "chart.js/auto"; +// import { useThemeStore } from "../../../../../store/useThemeStore"; + +// Define Props Interface +interface ChartComponentProps { + type: any; // Type of chart (e.g., "bar", "line", etc.) + title: string; // Title of the chart + fontFamily?: string; // Optional font family for the chart title + fontSize?: string; // Optional font size for the chart title + fontWeight?: "Light" | "Regular" | "Bold"; // Optional font weight for the chart title + data: { + labels: string[]; // Labels for the x-axis + datasets: { + data: number[]; // Data points for the chart + backgroundColor: string; // Background color for the chart + borderColor: string; // Border color for the chart + borderWidth: number; // Border width for the chart + }[]; + }; // Data for the chart +} + +const ChartComponent = ({ + type, + title, + fontFamily, + fontSize, + fontWeight = "Regular", // Default to "Regular" + data: propsData, +}: ChartComponentProps) => { + const canvasRef = useRef(null); + // const { themeColor } = useThemeStore(); + + // 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, + color: "#2B3344", + }), + [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, + align: "start", // Left align the title + padding: { + top: 10, // Add padding above the title + bottom: 20, // Add padding between the title and the chart + }, + }, + legend: { + display: false, + }, + }, + }), + [title, chartFontStyle] + ); + + // Initialize Chart on Component Mount + useEffect(() => { + if (!canvasRef.current) return; + + const ctx = canvasRef.current.getContext("2d"); + if (!ctx) return; + + const chart = new Chart(ctx, { type, data, options }); + + // Cleanup: Destroy the chart instance when the component unmounts + return () => chart.destroy(); + }, [type, data, options]); // Only recreate the chart when these dependencies change + + return ; +}; + +export default React.memo(ChartComponent, (prevProps, nextProps) => { + // Custom comparison function to prevent unnecessary re-renders + return ( + prevProps.type === nextProps.type && + prevProps.title === nextProps.title && + prevProps.fontFamily === nextProps.fontFamily && + prevProps.fontSize === nextProps.fontSize && + prevProps.fontWeight === nextProps.fontWeight && + JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data) + ); +}); diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx new file mode 100644 index 0000000..6f21667 --- /dev/null +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx @@ -0,0 +1,28 @@ +import { useState } from "react"; +import ToggleHeader from "../../../../ui/inputs/ToggleHeader"; +import Widgets2D from "./Widgets2D"; +import Widgets3D from "./Widgets3D"; +import WidgetsFloating from "./WidgetsFloating"; + +const Widgets = () => { + const [activeOption, setActiveOption] = useState("2D"); + + const handleToggleClick = (option: string) => { + setActiveOption(option); + }; + + return ( +
+ + {activeOption === "2D" && } + {activeOption === "3D" && } + {activeOption === "Floating" && } +
+ ); +}; + +export default Widgets; diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx new file mode 100644 index 0000000..eaa453e --- /dev/null +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx @@ -0,0 +1,138 @@ +import React from "react"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import { ChartType } from "chart.js/auto"; +import ChartComponent from "./ChartComponent"; + +const chartTypes: ChartType[] = [ + "bar", + "line", + "pie", + "doughnut", + "radar", + "polarArea", +]; + +const sampleData = { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + datasets: [ + { + data: [65, 59, 80, 81, 56, 55, 40], + backgroundColor: "#6f42c1", + borderColor: "#ffffff", + borderWidth: 1, + }, + ], +}; + +interface WidgetProps { + type: ChartType; + index: number; + title: string; +} + +const ChartWidget: React.FC = ({ type, index, title }) => { + const { setDraggedAsset } = useWidgetStore((state) => state); + + return ( +
{ + setDraggedAsset({ + type, + id: `widget-${index + 1}`, + title, + panel: "top", + data: sampleData, + }); + }} + onDragEnd={() => setDraggedAsset(null)} + > + +
+ ); +}; + +const ProgressBarWidget = ({ + id, + title, + data, +}: { + id: string; + title: string; + data: any; +}) => { + const { setDraggedAsset } = useWidgetStore((state) => state); + + return ( +
{ + setDraggedAsset({ + type: "progress", + id, + title, + panel: "top", + data, + }); + }} + onDragEnd={() => setDraggedAsset(null)} + > +
{title}
+ {data.stocks.map((stock: any, index: number) => ( +
+ + +
{stock.key}
+
{stock.value}
+ +
{stock.description}
+ +
Icon
+
+ ))} +
+ ); +}; + +const Widgets2D = () => { + return ( +
+
+ {chartTypes.map((type, index) => { + const widgetTitle = `Widget ${index + 1}`; + return ( + + ); + })} + + +
+
+ ); +}; + +export default Widgets2D; diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx new file mode 100644 index 0000000..7fc6bba --- /dev/null +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx @@ -0,0 +1,10 @@ + +const Widgets3D = () => { + return ( +
+ Widgets3D +
+ ) +} + +export default Widgets3D diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx new file mode 100644 index 0000000..3cde77b --- /dev/null +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx @@ -0,0 +1,41 @@ +import React, { useState } from "react"; + +interface Widget { + id: string; + name: string; +} + +const WidgetsFloating = () => { + const [widgets, setWidgets] = useState([ + { id: "1", name: "Working State Widget" }, + { id: "2", name: "Floating Widget 2" }, + { id: "3", name: "Floating Widget 3" }, + { id: "4", name: "Floating Widget 4" }, + ]); + + console.log('setWidgets: ', setWidgets); + // Function to handle drag start + const handleDragStart = ( + e: React.DragEvent, + widget: Widget + ) => { + e.dataTransfer.setData("application/json", JSON.stringify(widget)); + }; + + return ( +
+ {widgets.map((widget) => ( +
handleDragStart(e, widget)} + > + {widget.name} +
+ ))} +
+ ); +}; + +export default WidgetsFloating; diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index e9ebaa8..b80fd53 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -1,5 +1,6 @@ import React from "react"; import { AppDockIcon } from "../../icons/HeaderIcons"; +import orgImg from "../../../assets/orgTemp.png" const Header: React.FC = () => { const guestUsers = [ @@ -38,7 +39,7 @@ const Header: React.FC = () => { V
- +
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 6b2ff3f..8051eb7 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -8,6 +8,7 @@ import { } from "../../icons/SimulationIcons"; import useToggleStore from "../../../store/useUIToggleStore"; import MachineMechanics from "./mechanics/MachineMechanics"; +import Visualization from "./visualization/Visualization"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); @@ -54,31 +55,17 @@ const SideBarRight: React.FC = () => { )} )} -<<<<<<< Updated upstream - {toggleUI && ( + {/* process builder */} + {toggleUI && activeModule === "simulation" && (
-======= - {/* mechanics */} - {toggleUI && ( - <> - {/* {activeModule === "simulation" && activeList === "mechanics" && ( */} - {activeModule === "simulation" && ( -
-
- -
-
- )} - - {/* realtime visualization */} - {activeModule === "visualization" && } - ->>>>>>> Stashed changes )} + + {/* realtime visualization */} + {toggleUI && activeModule === "visualization" && } ); }; diff --git a/app/src/components/layout/sidebarRight/visualization/Visualization.tsx b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx new file mode 100644 index 0000000..f47cc27 --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import ToggleHeader from "../../../ui/inputs/ToggleHeader"; +import Data from "./data/Data"; +import Design from "./design/Design"; + +const Visualization = () => { + const [activeOption, setActiveOption] = useState("Data"); + + const handleToggleClick = (option: string) => { + setActiveOption(option); // Update the active option + }; + + return ( +
+ +
+ {activeOption === "Data" ? : } +
+
+ ); +}; + +export default Visualization; diff --git a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx new file mode 100644 index 0000000..cd20aea --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx @@ -0,0 +1,175 @@ +import { useEffect, useState } from "react"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons"; +import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown"; + +// Define the data structure for demonstration purposes +const DATA_STRUCTURE = { + furnace: { + coolingRate: "coolingRate", + furnaceTemperature: "furnaceTemperature", + heatingRate: "heatingRate", + machineId: "machineId", + powerConsumption: "powerConsumption", + status: "status", + timestamp: "timestamp", + vacuumLevel: "vacuumLevel", + }, + testDevice: { + abrasiveLevel: { + data1: "Data 1", + data2: "Data 2", + data3: "Data 3", + }, + airPressure: "airPressure", + machineId: "machineId", + powerConsumption: "powerConsumption", + status: "status", + temperature: { + data1: "Data 1", + data2: "Data 2", + data3: "Data 3", + }, + timestamp: { + data1: { + Data01: "Data 01", + Data02: "Data 02", + Data03: "Data 03", + }, + data2: "Data 2", + data3: "Data 3", + }, + }, +}; + +interface Child { + id: number; + easing: string; +} + +interface Group { + id: number; + easing: string; + children: Child[]; +} + +const Data = () => { + const { selectedChartId } = useWidgetStore(); + + // State to store groups for all widgets (using Widget.id as keys) + const [chartDataGroups, setChartDataGroups] = useState< + Record + >({}); + + useEffect(() => { + // Initialize data groups for the newly selected widget if it doesn't exist + if (selectedChartId && !chartDataGroups[selectedChartId.id]) { + setChartDataGroups((prev) => ({ + ...prev, + [selectedChartId.id]: [ + { + id: Date.now(), + easing: "Connecter 1", + children: [{ id: Date.now(), easing: "Linear" }], + }, + ], + })); + } + }, [selectedChartId]); + + // Handle adding a new child to the group + const handleAddClick = (groupId: number) => { + setChartDataGroups((prevGroups) => { + const currentGroups = prevGroups[selectedChartId.id] || []; + const group = currentGroups.find((g) => g.id === groupId); + + if (group && group.children.length < 7) { + const newChild = { id: Date.now(), easing: "Linear" }; + return { + ...prevGroups, + [selectedChartId.id]: currentGroups.map((g) => + g.id === groupId ? { ...g, children: [...g.children, newChild] } : g + ), + }; + } + return prevGroups; + }); + }; + + // Remove a child from a group + const removeChild = (groupId: number, childId: number) => { + setChartDataGroups((currentGroups) => { + const currentChartData = currentGroups[selectedChartId.id] || []; + + return { + ...currentGroups, + [selectedChartId.id]: currentChartData.map((group) => + group.id === groupId + ? { + ...group, + children: group.children.filter( + (child) => child.id !== childId + ), + } + : group + ), + }; + }); + }; + + return ( +
+ {selectedChartId?.title && ( +
{selectedChartId?.title}
+ )} + {/* Render groups dynamically */} + {chartDataGroups[selectedChartId?.id]?.map((group) => ( +
+ {group.children.map((child, index) => ( +
+
Input {index + 1}
+
+ + {/* Add Icon */} + {group.children.length < 7 && ( +
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 + }} + > + + +
+
+ ))} +
+ ))} + + {/* Info Box */} +
+ i +

+ + By adding templates and widgets, you create a customizable and + dynamic environment. + +

+
+
+ ); +}; + +export default Data; diff --git a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx new file mode 100644 index 0000000..89e1682 --- /dev/null +++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx @@ -0,0 +1,209 @@ +import { useState } from "react"; +import { useWidgetStore } from "../../../../../store/useWidgetStore"; +import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent"; +import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; + +// Define Props Interface +interface Widget { + id: string; + type: string; // Chart type (e.g., "bar", "line") + panel: "top" | "bottom" | "left" | "right"; // Panel location + title: string; + fontFamily?: string; + fontSize?: string; + fontWeight?: string; + data: { + labels: string[]; + datasets: { + data: number[]; + backgroundColor: string; + borderColor: string; + borderWidth: number; + }[]; + }; // Data for the chart +} + +const Design = () => { + const [selectedName, setSelectedName] = useState("drop down"); + console.log("selectedName: ", selectedName); + + const [selectedElement, setSelectedElement] = useState("drop down"); + console.log("selectedElement: ", selectedElement); + + const [selectedFont, setSelectedFont] = useState("drop down"); + console.log("selectedFont: ", selectedFont); + + const [selectedSize, setSelectedSize] = useState("drop down"); + console.log("selectedSize: ", selectedSize); + + const [selectedWeight, setSelectedWeight] = useState("drop down"); + console.log("selectedWeight: ", selectedWeight); + + const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements + const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker + + // Zustand Store Hooks + const { selectedChartId, setSelectedChartId, widgets, setWidgets } = + useWidgetStore(); + + // Handle Widget Updates + const handleUpdateWidget = (updatedProperties: Partial) => { + if (!selectedChartId) return; + + // Update the selectedChartId + const updatedChartId = { + ...selectedChartId, + ...updatedProperties, + }; + setSelectedChartId(updatedChartId); + + // Update the widgets array + const updatedWidgets = widgets.map((widget) => + widget.id === selectedChartId.id + ? { ...widget, ...updatedProperties } + : widget + ); + setWidgets(updatedWidgets); + }; + + // Default Chart Data + const defaultChartData = { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + datasets: [ + { + data: [65, 59, 80, 81, 56, 55, 40], + backgroundColor: elementColor, // Default background color + borderColor: "#ffffff", // Default border color + borderWidth: 1, + }, + ], + }; + + return ( +
+ {/* Title of the Selected Widget */} +
+ {selectedChartId?.title || "Widget 1"} +
+ + {/* Chart Component */} +
+ {selectedChartId && ( + + )} +
+ + {/* Options Container */} +
+ {/* Name Dropdown */} +
+ Name + { + setSelectedName(value); + handleUpdateWidget({ title: value }); + }} + /> +
+ + {/* Element Dropdown */} +
+ Element + { + setSelectedElement(value); + handleUpdateWidget({ type: value }); + }} + /> +
+ + {/* Font Family Dropdown */} +
+ Font Family + { + setSelectedFont(value); + handleUpdateWidget({ fontFamily: value }); + }} + /> +
+ + {/* Size Dropdown */} +
+ Size + { + setSelectedSize(value); + handleUpdateWidget({ fontSize: value }); + }} + /> +
+ + {/* Weight Dropdown */} +
+ Weight + { + setSelectedWeight(value); + handleUpdateWidget({ fontWeight: value }); + }} + /> +
+ + {/* Element Color Picker */} +
+
setShowColorPicker((prev) => !prev)} + > + Element Color +
▾
{" "} + {/* Change icon based on the visibility */} +
+ + {/* Show color picker only when 'showColorPicker' is true */} + {showColorPicker && ( +
+ { + setElementColor(e.target.value); + handleUpdateWidget({ + data: { + labels: selectedChartId?.data?.labels || [], + datasets: [ + { + ...selectedChartId?.data?.datasets[0], + backgroundColor: e.target.value, // Update the element color + }, + ], + }, + }); + }} + /> + {/* Display the selected color value */} + {elementColor} +
+ )} +
+
+
+ ); +}; + +export default Design; diff --git a/app/src/components/ui/ContextMenu.tsx b/app/src/components/ui/ContextMenu.tsx deleted file mode 100644 index 6ae66a7..0000000 --- a/app/src/components/ui/ContextMenu.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const ContextMenu: React.FC = () => { - return ( -
ContextMenu
- ) -} - -export default ContextMenu \ No newline at end of file diff --git a/app/src/components/ui/ModuleToggle.tsx b/app/src/components/ui/ModuleToggle.tsx index cbe64e3..bea9c43 100644 --- a/app/src/components/ui/ModuleToggle.tsx +++ b/app/src/components/ui/ModuleToggle.tsx @@ -2,6 +2,7 @@ import React from "react"; import useModuleStore from "../../store/useModuleStore"; import { BuilderIcon, + CartIcon, SimulationIcon, VisualizationIcon, } from "../icons/ExportModuleIcons"; @@ -40,6 +41,17 @@ const ModuleToggle: React.FC = () => {
Visualization
+
setActiveModule("market")} + > +
+ +
+
Market Place
+
); }; diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 7c2ee7a..f6389e9 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -1,9 +1,249 @@ -import React from 'react'; +import React, { useEffect, useRef, useState } from "react"; +import { + AsileIcon, + CommentIcon, + CursorIcon, + FloorIcon, + FreeMoveIcon, + PenIcon, + PlayIcon, + SaveTemplateIcon, + WallIcon, + ZoneIcon, +} from "../icons/ExportToolsIcons"; +import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons"; +import useModuleStore from "../../store/useModuleStore"; +import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate"; +import { usePlayButtonStore } from "../../store/usePlayButtonStore"; +import useTemplateStore from "../../store/useTemplateStore"; +import { useSelectedZoneStore } from "../../store/useZoneStore"; const Tools: React.FC = () => { + const { templates } = useTemplateStore(); + const [activeTool, setActiveTool] = useState("cursor"); + const [activeSubTool, setActiveSubTool] = useState("cursor"); + const [toggleThreeD, setToggleThreeD] = useState(true); + + const dropdownRef = useRef(null); + const [openDrop, setOpenDrop] = useState(false); + + const { activeModule } = useModuleStore(); + const { isPlaying, setIsPlaying } = usePlayButtonStore(); + const { addTemplate } = useTemplateStore(); + const { selectedZone } = useSelectedZoneStore(); + + // Reset activeTool whenever activeModule changes + useEffect(() => { + setActiveTool(activeSubTool); + setActiveSubTool(activeSubTool); + }, [activeModule]); + + useEffect(() => { + const handleOutsideClick = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setOpenDrop(false); // Close the dropdown + } + }; + + document.addEventListener("mousedown", handleOutsideClick); + + return () => { + document.removeEventListener("mousedown", handleOutsideClick); + }; + }, []); + return (
- +
+
+ {activeSubTool == "cursor" && ( +
{ + setActiveTool("cursor"); + }} + > + +
+ )} + {activeSubTool == "free-hand" && ( +
{ + setActiveTool("free-hand"); + }} + > + +
+ )} + {activeModule !== "visualization" && ( +
{ + setOpenDrop(!openDrop); + console.log(openDrop); + }} + > + + {openDrop && ( +
+
{ + setOpenDrop(false); + setActiveTool("cursor"); + setActiveSubTool("cursor"); + }} + > +
+ {activeSubTool === "cursor" && } +
+ +
Cursor
+
+
{ + setOpenDrop(false); + setActiveTool("free-hand"); + setActiveSubTool("free-hand"); + }} + > +
+ {activeSubTool === "free-hand" && } +
+ +
Free Hand
+
+
+ )} +
+ )} +
+
+ {!toggleThreeD && activeModule === "builder" && ( + <> +
+
+
{ + setActiveTool("draw-wall"); + }} + > + +
+
{ + setActiveTool("draw-zone"); + }} + > + +
+
{ + setActiveTool("draw-aisle"); + }} + > + +
+
{ + setActiveTool("draw-floor"); + }} + > + +
+
+ + )} + {activeModule === "simulation" && ( + <> +
+
+
{ + setActiveTool("pen"); + }} + > + +
+
+ + )} + {activeModule === "visualization" && ( + <> +
+
+
+ handleSaveTemplate({ + addTemplate, + selectedZone, + templates, + }) + } + > + +
+
+ + )} +
+
+
{ + setActiveTool("comment"); + }} + > + +
+
{ + setActiveTool("play"); + setIsPlaying(!isPlaying); + }} + > + +
+
+
+
{ + setToggleThreeD(!toggleThreeD); + }} + > +
+ 2d +
+
+ 3d +
+
); }; diff --git a/app/src/components/ui/charts/BarGraphComponent.tsx b/app/src/components/ui/charts/BarGraphComponent.tsx new file mode 100644 index 0000000..9a07473 --- /dev/null +++ b/app/src/components/ui/charts/BarGraphComponent.tsx @@ -0,0 +1,94 @@ +import { useMemo } from "react"; + +import { Bar } 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: false, // 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", + borderColor: "#ffffff", + borderWidth: 2, + fill: false, + }, + ], + }; + + return ; +}; + +export default LineGraphComponent; diff --git a/app/src/components/ui/charts/LineGraphComponent.tsx b/app/src/components/ui/charts/LineGraphComponent.tsx new file mode 100644 index 0000000..cf1a47f --- /dev/null +++ b/app/src/components/ui/charts/LineGraphComponent.tsx @@ -0,0 +1,93 @@ +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: false, // 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 ; +}; + +export default LineGraphComponent; diff --git a/app/src/components/ui/charts/PieGraphComponent.tsx b/app/src/components/ui/charts/PieGraphComponent.tsx new file mode 100644 index 0000000..b52ee30 --- /dev/null +++ b/app/src/components/ui/charts/PieGraphComponent.tsx @@ -0,0 +1,91 @@ +import { useMemo } from "react"; +import { Pie } from "react-chartjs-2"; + +interface ChartComponentProps { + type: any; + title: string; + fontFamily?: string; + fontSize?: string; + fontWeight?: "Light" | "Regular" | "Bold"; + data: any; +} + +const PieChartComponent = ({ + 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] + ); + + // Access the CSS variable for the primary accent color + const accentColor = getComputedStyle(document.documentElement) + .getPropertyValue("--accent-color") + .trim(); + + console.log("accentColor: ", accentColor); + const options = useMemo( + () => ({ + responsive: true, + maintainAspectRatio: false, + plugins: { + title: { + display: true, + text: title, + font: chartFontStyle, + }, + legend: { + display: false, + }, + }, + }), + [title, chartFontStyle] + ); + + const chartData = { + labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], + datasets: [ + { + label: "Dataset", + data: [12, 19, 3, 5, 2, 3], + backgroundColor: ["#6f42c1"], + borderColor: "#ffffff", + borderWidth: 2, + }, + ], + }; + + return ; +}; + +export default PieChartComponent; diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx new file mode 100644 index 0000000..4ff9ebb --- /dev/null +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -0,0 +1,192 @@ +import React from "react"; +import { + CleanPannel, + EyeIcon, + LockIcon, +} from "../../icons/RealTimeVisulationIcons"; + +// Define the type for `Side` +type Side = "top" | "bottom" | "left" | "right"; + +// Define the type for the props passed to the Buttons component +interface ButtonsProps { + selectedZone: { + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: { + id: string; + type: string; + title: string; + panel: Side; + data: any; + }[]; + }; + setSelectedZone: React.Dispatch< + React.SetStateAction<{ + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: { + id: string; + type: string; + title: string; + panel: Side; + data: any; + }[]; + }> + >; + hiddenPanels: Side[]; // Add this prop for hidden panels + setHiddenPanels: React.Dispatch>; // Add this prop for updating hidden panels +} + +const AddButtons: React.FC = ({ + selectedZone, + setSelectedZone, + setHiddenPanels, + hiddenPanels, +}) => { + // Local state to track hidden panels + + // Function to toggle lock/unlock a panel + const toggleLockPanel = (side: Side) => { + const newLockedPanels = selectedZone.lockedPanels.includes(side) + ? selectedZone.lockedPanels.filter((panel) => panel !== side) + : [...selectedZone.lockedPanels, side]; + + const updatedZone = { + ...selectedZone, + lockedPanels: newLockedPanels, + }; + + // Update the selectedZone state + setSelectedZone(updatedZone); + }; + + // Function to toggle visibility of a panel + const toggleVisibility = (side: Side) => { + const isHidden = hiddenPanels.includes(side); + if (isHidden) { + // If the panel is already hidden, remove it from the hiddenPanels array + setHiddenPanels(hiddenPanels.filter((panel) => panel !== side)); + } else { + // If the panel is visible, add it to the hiddenPanels array + setHiddenPanels([...hiddenPanels, side]); + } + }; + + // Function to clean all widgets from a panel + const cleanPanel = (side: Side) => { + const cleanedWidgets = selectedZone.widgets.filter( + (widget) => widget.panel !== side + ); + + const updatedZone = { + ...selectedZone, + widgets: cleanedWidgets, + }; + + // Update the selectedZone state + setSelectedZone(updatedZone); + }; + + // Function to handle "+" button click + const handlePlusButtonClick = (side: Side) => { + if (selectedZone.activeSides.includes(side)) { + // If the panel is already active, remove all widgets and close the panel + const cleanedWidgets = selectedZone.widgets.filter( + (widget) => widget.panel !== side + ); + const newActiveSides = selectedZone.activeSides.filter((s) => s !== side); + + const updatedZone = { + ...selectedZone, + widgets: cleanedWidgets, + activeSides: newActiveSides, + panelOrder: newActiveSides, + }; + + // Update the selectedZone state + setSelectedZone(updatedZone); + } else { + // If the panel is not active, activate it + const newActiveSides = [...selectedZone.activeSides, side]; + + const updatedZone = { + ...selectedZone, + activeSides: newActiveSides, + panelOrder: newActiveSides, + }; + + // Update the selectedZone state + setSelectedZone(updatedZone); + } + }; + + return ( +
+ {(["top", "right", "bottom", "left"] as Side[]).map((side) => ( +
+ {/* "+" Button */} + + + {/* Extra Buttons */} + {selectedZone.activeSides.includes(side) && ( +
+ {/* Hide Panel */} +
toggleVisibility(side)} + > + +
+ + {/* Clean Panel */} +
cleanPanel(side)} + > + +
+ + {/* Lock/Unlock Panel */} +
toggleLockPanel(side)} + > + +
+
+ )} +
+ ))} +
+ ); +}; + +export default AddButtons; diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx new file mode 100644 index 0000000..3bf6b8f --- /dev/null +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -0,0 +1,179 @@ +import React, { useEffect, useRef } from "react"; +import { Widget } from "../../../store/useWidgetStore"; + +// Define the type for `Side` +type Side = "top" | "bottom" | "left" | "right"; + +interface DisplayZoneProps { + zonesData: { + [key: string]: { + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: Widget[]; + }; + }; + selectedZone: { + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: { + id: string; + type: string; + title: string; + panel: Side; + data: any; + }[]; + }; + setSelectedZone: React.Dispatch< + React.SetStateAction<{ + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: { + id: string; + type: string; + title: string; + panel: Side; + data: any; + }[]; + }> + >; +} + +const DisplayZone: React.FC = ({ + zonesData, + selectedZone, + setSelectedZone, +}) => { + // Ref for the container element + const containerRef = useRef(null); + + // Example state for selectedOption and options (adjust based on your actual use case) + const [selectedOption, setSelectedOption] = React.useState( + null + ); + console.log('setSelectedOption: ', setSelectedOption); + const [options, setOptions] = React.useState([]); + console.log('setOptions: ', setOptions); + + // Scroll to the selected option when it changes + useEffect(() => { + const container = containerRef.current; + + if (container && selectedOption) { + // Handle scrolling to the selected option + const index = options.findIndex((option) => { + const formattedOption = formatOptionName(option); + const selectedFormattedOption = + selectedOption?.split("_")[1] || selectedOption; + return formattedOption === selectedFormattedOption; + }); + + if (index !== -1) { + const optionElement = container.children[index] as HTMLElement; + if (optionElement) { + optionElement.scrollIntoView({ + behavior: "smooth", + block: "nearest", + inline: "center", + }); + } + } + } + }, [selectedOption, options]); + + useEffect(() => { + const container = containerRef.current; + + const handleWheel = (event: WheelEvent) => { + event.preventDefault(); + if (container) { + container.scrollBy({ + left: event.deltaY * 2, // Adjust the multiplier for faster scrolling + behavior: "smooth", + }); + } + }; + + let isDragging = false; + let startX: number; + let scrollLeft: number; + + const handleMouseDown = (event: MouseEvent) => { + isDragging = true; + startX = event.pageX - (container?.offsetLeft || 0); + scrollLeft = container?.scrollLeft || 0; + }; + + const handleMouseMove = (event: MouseEvent) => { + if (!isDragging || !container) return; + event.preventDefault(); + const x = event.pageX - (container.offsetLeft || 0); + const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging + container.scrollLeft = scrollLeft - walk; + }; + + const handleMouseUp = () => { + isDragging = false; + }; + + const handleMouseLeave = () => { + isDragging = false; + }; + + if (container) { + container.addEventListener("wheel", handleWheel, { passive: false }); + container.addEventListener("mousedown", handleMouseDown); + container.addEventListener("mousemove", handleMouseMove); + container.addEventListener("mouseup", handleMouseUp); + container.addEventListener("mouseleave", handleMouseLeave); + } + + return () => { + if (container) { + container.removeEventListener("wheel", handleWheel); + container.removeEventListener("mousedown", handleMouseDown); + container.removeEventListener("mousemove", handleMouseMove); + container.removeEventListener("mouseup", handleMouseUp); + container.removeEventListener("mouseleave", handleMouseLeave); + } + }; + }, []); + + // Helper function to format option names (customize as needed) + const formatOptionName = (option: string): string => { + // Replace underscores with spaces and capitalize the first letter + return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase()); + }; + + return ( +
+ {Object.keys(zonesData).map((zoneName, index) => ( +
{ + setSelectedZone({ + zoneName, + ...zonesData[zoneName], + }); + }} + > + {zoneName} +
+ ))} +
+ ); +}; + +export default DisplayZone; \ No newline at end of file diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx new file mode 100644 index 0000000..0f13266 --- /dev/null +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -0,0 +1,82 @@ +import { useWidgetStore } from "../../../store/useWidgetStore"; +import PieGraphComponent from "../charts/PieGraphComponent"; +import BarGraphComponent from "../charts/BarGraphComponent"; +import LineGraphComponent from "../charts/LineGraphComponent"; + +export const DraggableWidget = ({ widget }: { widget: any }) => { + const { selectedChartId, setSelectedChartId } = useWidgetStore(); + + const handlePointerDown = () => { + if (selectedChartId?.id !== widget.id) { + setSelectedChartId(widget); + } + }; + + return ( + <> +
+ {widget.type === "progress" ? ( + // + <> + ) : ( + <> + {widget.type === "line" && ( + + )} + {widget.type === "bar" && ( + + )} + {widget.type === "pie" && ( + + )} + + )} +
+ + ); +}; diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx new file mode 100644 index 0000000..4a1305f --- /dev/null +++ b/app/src/components/ui/componets/Panel.tsx @@ -0,0 +1,203 @@ +import React, { useEffect, useMemo, useRef, useState } from "react"; +import { useWidgetStore } from "../../../store/useWidgetStore"; +import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; +import { DraggableWidget } from "./DraggableWidget"; + +type Side = "top" | "bottom" | "left" | "right"; + +interface Widget { + id: string; + type: string; + title: string; + panel: Side; + data: any; +} + +interface PanelProps { + selectedZone: { + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: Widget[]; + }; + setSelectedZone: React.Dispatch< + React.SetStateAction<{ + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: Widget[]; + }> + >; +} + +const generateUniqueId = () => + `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; + +const Panel: React.FC = ({ selectedZone, setSelectedZone }) => { + const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({}); + const [panelDimensions, setPanelDimensions] = useState<{ + [side in Side]?: { width: number; height: number }; + }>({}); + + const getPanelStyle = useMemo( + () => (side: Side) => { + const currentIndex = selectedZone.panelOrder.indexOf(side); + const previousPanels = selectedZone.panelOrder.slice(0, currentIndex); + const leftActive = previousPanels.includes("left"); + const rightActive = previousPanels.includes("right"); + const topActive = previousPanels.includes("top"); + const bottomActive = previousPanels.includes("bottom"); + + 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", + [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", + [side]: "0", + width: "200px", + }; + default: + return {}; + } + }, + [selectedZone.panelOrder] + ); + + 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; + + addWidgetToPanel(draggedAsset, panel); + }; + + // Helper functions + const isPanelLocked = (panel: Side) => + selectedZone.lockedPanels.includes(panel); + + 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 FALLBACK_HORIZONTAL_CAPACITY = 5; + const FALLBACK_VERTICAL_CAPACITY = 3; + + const dimensions = panelDimensions[panel]; + if (!dimensions) { + return panel === "top" || panel === "bottom" + ? FALLBACK_HORIZONTAL_CAPACITY + : FALLBACK_VERTICAL_CAPACITY; + } + + return panel === "top" || panel === "bottom" + ? Math.floor(dimensions.width / CHART_WIDTH) + : Math.floor(dimensions.height / CHART_HEIGHT); + }; + + const addWidgetToPanel = (asset: any, panel: Side) => { + const newWidget = { + ...asset, + id: generateUniqueId(), + panel, + }; + + setSelectedZone(prev => ({ + ...prev, + widgets: [...prev.widgets, newWidget] + })); + }; + + useEffect(() => { + const observers: ResizeObserver[] = []; + const currentPanelRefs = panelRefs.current; + + selectedZone.activeSides.forEach((side) => { + const element = currentPanelRefs[side]; + if (element) { + const observer = new ResizeObserver((entries) => { + for (const entry of entries) { + const { width, height } = entry.contentRect; + setPanelDimensions((prev) => ({ + ...prev, + [side]: { width, height }, + })); + } + }); + observer.observe(element); + observers.push(observer); + } + }); + + return () => { + observers.forEach((observer) => observer.disconnect()); + }; + }, [selectedZone.activeSides]); + + const { isPlaying } = usePlayButtonStore(); + + return ( + <> + {selectedZone.activeSides.map((side) => ( +
handleDrop(e, side)} + onDragOver={(e) => e.preventDefault()} + ref={(el) => { + if (el) { + panelRefs.current[side] = el; + } else { + delete panelRefs.current[side]; + } + }} + > +
+ <>{} + {selectedZone.widgets + .filter((w) => w.panel === side) + .map((widget) => ( + + ))} +
+
+ ))} + + ); +}; + +export default Panel; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx new file mode 100644 index 0000000..7905769 --- /dev/null +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -0,0 +1,103 @@ +import React, { useEffect, useState, useRef } from "react"; +import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; +import Panel from "./Panel"; +import AddButtons from "./AddButtons"; +import { useSelectedZoneStore } from "../../../store/useZoneStore"; +import DisplayZone from "./DisplayZone"; + +type Side = "top" | "bottom" | "left" | "right"; + +interface 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 { selectedZone, setSelectedZone } = useSelectedZoneStore(); + useEffect(() => { + setZonesData((prev) => ({ + ...prev, + [selectedZone.zoneName]: selectedZone, + })); + }, [selectedZone]); + + return ( +
+ + + {!isPlaying && ( + + )} + + +
+ ); +}; + +export default RealTimeVisulization; + diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx index 730d656..ca51112 100644 --- a/app/src/components/ui/inputs/InputWithDropDown.tsx +++ b/app/src/components/ui/inputs/InputWithDropDown.tsx @@ -1,53 +1,53 @@ -import React, { useState } from "react"; - -type InputWithDropDownProps = { - label: string; - value: string; - options?: string[]; // Array of dropdown options - activeOption?: string; // The currently active dropdown option -}; - -const InputWithDropDown: React.FC = ({ - label, - value, - options, - activeOption, -}) => { - const separatedWords = label - .split(/(?=[A-Z])/) - .map((word) => word.trim()) - .toString(); - - const [openDropdown, setOpenDropdown] = useState(false); - - return ( -
- -
- - -
{ - setOpenDropdown(true); - }} - > -
{activeOption}
- {options && openDropdown && ( -
- {options.map((option, index) => ( -
- {option} -
- ))} -
- )} -
-
-
- ); -}; - -export default InputWithDropDown; +import React, { useState } from "react"; + +type InputWithDropDownProps = { + label: string; + value: string; + options?: string[]; // Array of dropdown options + activeOption?: string; // The currently active dropdown option +}; + +const InputWithDropDown: React.FC = ({ + label, + value, + options, + activeOption, +}) => { + const separatedWords = label + .split(/(?=[A-Z])/) + .map((word) => word.trim()) + .toString(); + + const [openDropdown, setOpenDropdown] = useState(false); + + return ( +
+ +
+ + +
{ + setOpenDropdown(true); + }} + > +
{activeOption}
+ {options && openDropdown && ( +
+ {options.map((option, index) => ( +
+ {option} +
+ ))} +
+ )} +
+
+
+ ); +}; + +export default InputWithDropDown; diff --git a/app/src/components/ui/inputs/LabledDropdown.tsx b/app/src/components/ui/inputs/LabledDropdown.tsx index 5c5a18a..1d35d85 100644 --- a/app/src/components/ui/inputs/LabledDropdown.tsx +++ b/app/src/components/ui/inputs/LabledDropdown.tsx @@ -1,28 +1,28 @@ -import React, { useState } from "react"; -import RegularDropDown from "./RegularDropDown"; - -type LabledDropdownProps = { - defaultOption: string; // Initial active option - options: string[]; // Array of dropdown options -}; - -const LabledDropdown: React.FC = ({ defaultOption, options }) => { - const [activeOption, setActiveOption] = useState(defaultOption); // State for active option - - const handleSelect = (option: string) => { - setActiveOption(option); // Update the active option state - }; - - return ( -
-
Type
- -
- ); -}; - -export default LabledDropdown; +import React, { useState } from "react"; +import RegularDropDown from "./RegularDropDown"; + +type LabledDropdownProps = { + defaultOption: string; // Initial active option + options: string[]; // Array of dropdown options +}; + +const LabledDropdown: React.FC = ({ defaultOption, options }) => { + const [activeOption, setActiveOption] = useState(defaultOption); // State for active option + + const handleSelect = (option: string) => { + setActiveOption(option); // Update the active option state + }; + + return ( +
+
Type
+ +
+ ); +}; + +export default LabledDropdown; diff --git a/app/src/components/ui/inputs/MultiLevelDropDown.tsx b/app/src/components/ui/inputs/MultiLevelDropDown.tsx new file mode 100644 index 0000000..8ea8d89 --- /dev/null +++ b/app/src/components/ui/inputs/MultiLevelDropDown.tsx @@ -0,0 +1,141 @@ +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 ( +
+ {/* Dropdown Trigger */} +
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 + })} +
+ )} +
+ ); +}; + +// Recursive Function to Render Nested Data +const renderNestedData = ( + data: Record, + 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 ( +
+ {/* Dropdown Trigger Button */} + + + {/* Dropdown Menu */} + {open && ( +
+
+ {renderNestedData(data, handleSelect)} +
+
+ )} +
+ ); +}; + +export default MultiLevelDropdown; \ No newline at end of file diff --git a/app/src/components/ui/inputs/RegularDropDown.tsx b/app/src/components/ui/inputs/RegularDropDown.tsx new file mode 100644 index 0000000..318913f --- /dev/null +++ b/app/src/components/ui/inputs/RegularDropDown.tsx @@ -0,0 +1,82 @@ +import React, { useState, useEffect, useRef } from "react"; + +interface DropdownProps { + header: string; + options: string[]; + onSelect: (option: string) => void; +} + +const RegularDropDown: React.FC = ({ + header, + options, + onSelect, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(null); + const dropdownRef = useRef(null); // Create a ref for the dropdown container + + // Reset selectedOption when the dropdown closes + useEffect(() => { + if (!isOpen) { + setSelectedOption(null); // Clear local state when the dropdown closes + } + }, [isOpen]); + + // Reset selectedOption when the header prop changes + useEffect(() => { + setSelectedOption(null); // Ensure the dropdown reflects the updated header + }, [header]); + + // Close dropdown if clicked outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false); // Close the dropdown if clicked outside + } + }; + + document.addEventListener("click", handleClickOutside); + + // Cleanup the event listener on component unmount + return () => { + document.removeEventListener("click", handleClickOutside); + }; + }, []); + + const toggleDropdown = () => { + setIsOpen((prev) => !prev); + }; + + const handleOptionClick = (option: string) => { + setSelectedOption(option); + onSelect(option); // Call the onSelect function passed from the parent + setIsOpen(false); // Close the dropdown after selection + }; + + return ( +
+ {/* Dropdown Header */} +
+
{selectedOption || header}
+
▾
+
+ + {/* Dropdown Options */} + {isOpen && ( +
+ {options.map((option, index) => ( +
handleOptionClick(option)} + > + {option} +
+ ))} +
+ )} +
+ ); +}; + +export default RegularDropDown; diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 34b9143..093765c 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -81,7 +81,12 @@ const DropDownList: React.FC = ({ showAddIcon={false} items={[]} /> - {/* change this */} + )} diff --git a/app/src/functions/generateUId.ts b/app/src/functions/generateUId.ts deleted file mode 100644 index 2cc19d5..0000000 --- a/app/src/functions/generateUId.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const generateUniqueId = (): string => - `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`; diff --git a/app/src/functions/generateUniqueId.ts b/app/src/functions/generateUniqueId.ts new file mode 100644 index 0000000..a315524 --- /dev/null +++ b/app/src/functions/generateUniqueId.ts @@ -0,0 +1,2 @@ +export const generateUniqueId = (): string => + `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; \ No newline at end of file diff --git a/app/src/functions/handleResizePannel.ts b/app/src/functions/handleResizePannel.ts index e989e05..235e97d 100644 --- a/app/src/functions/handleResizePannel.ts +++ b/app/src/functions/handleResizePannel.ts @@ -1,24 +1,24 @@ -export const handleResize = ( - e: React.MouseEvent, - containerRef: React.RefObject -) => { - if (!containerRef.current) return; // Ensure containerRef is not null - const startY = e.clientY; - const startHeight = containerRef.current.offsetHeight; - - const onMouseMove = (moveEvent: MouseEvent) => { - const newHeight = Math.max( - 120, - Math.min(400, startHeight + moveEvent.clientY - startY) - ); - containerRef.current!.style.height = `${newHeight}px`; - }; - - const onMouseUp = () => { - document.removeEventListener("mousemove", onMouseMove); - document.removeEventListener("mouseup", onMouseUp); - }; - - document.addEventListener("mousemove", onMouseMove); - document.addEventListener("mouseup", onMouseUp); -}; +export const handleResize = ( + e: React.MouseEvent, + containerRef: React.RefObject +) => { + if (!containerRef.current) return; // Ensure containerRef is not null + const startY = e.clientY; + const startHeight = containerRef.current.offsetHeight; + + const onMouseMove = (moveEvent: MouseEvent) => { + const newHeight = Math.max( + 120, + Math.min(400, startHeight + moveEvent.clientY - startY) + ); + containerRef.current!.style.height = `${newHeight}px`; + }; + + const onMouseUp = () => { + document.removeEventListener("mousemove", onMouseMove); + document.removeEventListener("mouseup", onMouseUp); + }; + + document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mouseup", onMouseUp); +}; diff --git a/app/src/hooks/temp.md b/app/src/hooks/temp.md new file mode 100644 index 0000000..e69de29 diff --git a/app/src/modules/builder/temp.md b/app/src/modules/builder/temp.md new file mode 100644 index 0000000..e69de29 diff --git a/app/src/modules/simulation/temp.md b/app/src/modules/simulation/temp.md new file mode 100644 index 0000000..e69de29 diff --git a/app/src/modules/visualization/captureVisualization.ts b/app/src/modules/visualization/captureVisualization.ts new file mode 100644 index 0000000..01d67a0 --- /dev/null +++ b/app/src/modules/visualization/captureVisualization.ts @@ -0,0 +1,55 @@ +export const captureVisualization = async (): Promise => { + const container = document.getElementById("real-time-vis-canvas"); + if (!container) return null; + + const canvas = document.createElement("canvas"); + const ctx = canvas.getContext("2d"); + if (!ctx) return null; + + const rect = container.getBoundingClientRect(); + canvas.width = rect.width; + canvas.height = rect.height; + + // Draw background + ctx.fillStyle = getComputedStyle(container).backgroundColor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Capture all canvas elements + const canvases = container.querySelectorAll("canvas"); + canvases.forEach((childCanvas) => { + const childRect = childCanvas.getBoundingClientRect(); + const x = childRect.left - rect.left; + const y = childRect.top - rect.top; + ctx.drawImage(childCanvas, x, y, childRect.width, childRect.height); + }); + + // Capture SVG elements + const svgs = container.querySelectorAll("svg"); + for (const svg of Array.from(svgs)) { + const svgString = new XMLSerializer().serializeToString(svg); + const svgBlob = new Blob([svgString], { type: "image/svg+xml" }); + const url = URL.createObjectURL(svgBlob); + + try { + const img = await new Promise((resolve, reject) => { + const image = new Image(); + image.onload = () => resolve(image); + image.onerror = reject; + image.src = url; + }); + + const svgRect = svg.getBoundingClientRect(); + ctx.drawImage( + img, + svgRect.left - rect.left, + svgRect.top - rect.top, + svgRect.width, + svgRect.height + ); + } finally { + URL.revokeObjectURL(url); + } + } + + return canvas.toDataURL("image/png"); +}; diff --git a/app/src/modules/visualization/handleSaveTemplate.ts b/app/src/modules/visualization/handleSaveTemplate.ts new file mode 100644 index 0000000..c489688 --- /dev/null +++ b/app/src/modules/visualization/handleSaveTemplate.ts @@ -0,0 +1,74 @@ +import { Template } from "../../store/useTemplateStore"; +import { captureVisualization } from "./captureVisualization"; + +type HandleSaveTemplateProps = { + addTemplate: (template: Template) => void; + selectedZone: { + panelOrder: string[]; // Adjust the type based on actual data structure + widgets: any[]; // Replace `any` with the actual widget type + }; + templates?: Template[]; +}; + +// Generate a unique ID (placeholder function) +const generateUniqueId = (): string => { + return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`; +}; + +// Refactored function +export const handleSaveTemplate = async ({ + addTemplate, + selectedZone, + templates = [], +}: HandleSaveTemplateProps): Promise => { + try { + // Check if the selected zone has any widgets + if (!selectedZone.widgets || selectedZone.widgets.length === 0) { + console.warn("Cannot save an empty template."); + return; + } + + // Check if the template already exists + const isDuplicate = templates.some((template) => { + const isSamePanelOrder = + JSON.stringify(template.panelOrder) === + JSON.stringify(selectedZone.panelOrder); + const isSameWidgets = + JSON.stringify(template.widgets) === + JSON.stringify(selectedZone.widgets); + return isSamePanelOrder && isSameWidgets; + }); + + if (isDuplicate) { + console.warn("This template already exists."); + return; + } + + // Capture visualization snapshot + const snapshot = await captureVisualization(); + if (!snapshot) { + console.error("Failed to capture visualization snapshot."); + return; + } + + // Create a new template + const newTemplate: Template = { + id: generateUniqueId(), + name: `Template ${Date.now()}`, + panelOrder: selectedZone.panelOrder, + widgets: selectedZone.widgets, + snapshot, + }; + + console.log("Saving template:", newTemplate); + + // Save the template + try { + addTemplate(newTemplate); + } catch (error) { + console.error("Failed to add template:", error); + } + } catch (error) { + console.error("Failed to save template:", error); + } +}; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index e1ebe4a..16c0461 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -1,15 +1,20 @@ -import React from 'react'; -import ModuleToggle from '../components/ui/ModuleToggle'; -import SideBarLeft from '../components/layout/sidebarLeft/SideBarLeft'; -import SideBarRight from '../components/layout/sidebarRight/SideBarRight'; -import Tools from '../components/ui/Tools'; +import React from "react"; +import ModuleToggle from "../components/ui/ModuleToggle"; +import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft"; +import SideBarRight from "../components/layout/sidebarRight/SideBarRight"; +import useModuleStore from "../store/useModuleStore"; +import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization"; +import Tools from "../components/ui/Tools"; const Project: React.FC = () => { + const { activeModule } = useModuleStore(); + return (
+ {activeModule === "visualization" && }
); diff --git a/app/src/services/temp.md b/app/src/services/temp.md new file mode 100644 index 0000000..e69de29 diff --git a/app/src/store/useModuleStore.ts b/app/src/store/useModuleStore.ts index 8980b7a..c7e1e98 100644 --- a/app/src/store/useModuleStore.ts +++ b/app/src/store/useModuleStore.ts @@ -1,5 +1,5 @@ // store/useModuleStore.ts -import { create } from 'zustand'; +import { create } from "zustand"; interface ModuleStore { activeModule: string; @@ -7,7 +7,7 @@ interface ModuleStore { } const useModuleStore = create((set) => ({ - activeModule: "simulation", // Initial state + activeModule: "builder", // Initial state setActiveModule: (module) => set({ activeModule: module }), // Update state })); diff --git a/app/src/store/usePlayButtonStore.ts b/app/src/store/usePlayButtonStore.ts new file mode 100644 index 0000000..5b2913c --- /dev/null +++ b/app/src/store/usePlayButtonStore.ts @@ -0,0 +1,11 @@ +import { create } from "zustand"; + +type PlayButtonStore = { + isPlaying: boolean; // Updated state name to reflect the play/pause status more clearly + setIsPlaying: (value: boolean) => void; // Updated setter function name for clarity +}; + +export const usePlayButtonStore = create((set) => ({ + isPlaying: false, // Default state for play/pause + setIsPlaying: (value) => set({ isPlaying: value }), // Update isPlaying state +})); diff --git a/app/src/store/useTemplateStore.ts b/app/src/store/useTemplateStore.ts new file mode 100644 index 0000000..f8f3711 --- /dev/null +++ b/app/src/store/useTemplateStore.ts @@ -0,0 +1,39 @@ +import { create } from "zustand"; + +// type Side = "top" | "bottom" | "left" | "right"; + +export interface Widget { + id: string; + type: string; + title: string; + panel: string; + data: any; +} + +export interface Template { + id: string; + name: string; + panelOrder: string[]; + widgets: Widget[]; + snapshot?: string | null; // Add an optional image property (base64) +} + +interface TemplateStore { + templates: Template[]; + addTemplate: (template: Template) => void; + removeTemplate: (id: string) => void; +} + +export const useTemplateStore = create((set) => ({ + templates: [], + addTemplate: (template) => + set((state) => ({ + templates: [...state.templates, template], + })), + removeTemplate: (id) => + set((state) => ({ + templates: state.templates.filter((t) => t.id !== id), + })), +})); + +export default useTemplateStore; diff --git a/app/src/store/useThemeStore.ts b/app/src/store/useThemeStore.ts new file mode 100644 index 0000000..944a77f --- /dev/null +++ b/app/src/store/useThemeStore.ts @@ -0,0 +1,11 @@ +import { create } from "zustand"; + +interface ThemeState { + themeColor: string[]; // This should be an array of strings + setThemeColor: (colors: string[]) => void; // This function will accept an array of strings +} + +export const useThemeStore = create((set) => ({ + themeColor: ["#5c87df", "#EEEEFE", "#969BA7"], + setThemeColor: (colors) => set({ themeColor: colors }), +})); diff --git a/app/src/store/useWidgetStore.ts b/app/src/store/useWidgetStore.ts new file mode 100644 index 0000000..013581b --- /dev/null +++ b/app/src/store/useWidgetStore.ts @@ -0,0 +1,49 @@ +import { create } from "zustand"; + +export interface Widget { + id: string; + type: string; // Can be chart type or "progress" + panel: "top" | "bottom" | "left" | "right"; + title: string; + fontFamily?: string; + fontSize?: string; + fontWeight?: string; + data: { + // Chart data + labels?: string[]; + datasets?: Array<{ + data: number[]; + backgroundColor: string; + borderColor: string; + borderWidth: number; + }>; + // Progress card data + stocks?: Array<{ + key: string; + value: number; + description: string; + }>; + }; +} + +interface WidgetStore { + draggedAsset: Widget | null; // The currently dragged widget asset + widgets: Widget[]; // List of all widgets + selectedChartId: any; + setDraggedAsset: (asset: Widget | null) => void; // Setter for draggedAsset + addWidget: (widget: Widget) => void; // Add a new widget + setWidgets: (widgets: Widget[]) => void; // Replace the entire widgets array + setSelectedChartId: (widget: Widget | null) => void; // Set the selected chart/widget +} + +// Create the store with Zustand +export const useWidgetStore = create((set) => ({ + draggedAsset: null, + widgets: [], + selectedChartId: null, // Initialize as null, not as an array + setDraggedAsset: (asset) => set({ draggedAsset: asset }), + addWidget: (widget) => + set((state) => ({ widgets: [...state.widgets, widget] })), + setWidgets: (widgets) => set({ widgets }), + setSelectedChartId: (widget) => set({ selectedChartId: widget }), +})); diff --git a/app/src/store/useZoneStore.ts b/app/src/store/useZoneStore.ts new file mode 100644 index 0000000..5d7c4a4 --- /dev/null +++ b/app/src/store/useZoneStore.ts @@ -0,0 +1,41 @@ +import { create } from "zustand"; + +type Side = "top" | "bottom" | "left" | "right"; + +interface Widget { + id: string; + type: string; + title: string; + panel: Side; + data: any; +} + +interface SelectedZoneState { + zoneName: string; + activeSides: Side[]; + panelOrder: Side[]; + lockedPanels: Side[]; + widgets: Widget[]; +} + +interface SelectedZoneStore { + selectedZone: SelectedZoneState; + setSelectedZone: (zone: Partial | ((prev: SelectedZoneState) => SelectedZoneState)) => void; +} + +export const useSelectedZoneStore = create((set) => ({ + selectedZone: { + zoneName: "Manufacturing unit", + activeSides: [], + panelOrder: [], + lockedPanels: [], + widgets: [], + }, + setSelectedZone: (zone) => + set((state) => ({ + selectedZone: + typeof zone === "function" + ? zone(state.selectedZone) // Handle functional updates + : { ...state.selectedZone, ...zone }, // Handle partial updates + })), +})); \ No newline at end of file diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 97aae90..b5244a6 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -35,9 +35,7 @@ $highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode $background-color: #fcfdfd; // Main background color $background-color-dark: #19191d; // Main background color for dark mode $background-color-secondary: #e1e0ff80; // Secondary background color -$background-color-gray: #F3F3F3; // Secondary background color -$background-color-secondary-dark: #1f1f2399; // Secondary background color for dark mode -$background-color-gray-dark: #232323; // Secondary background color +$background-color-secondary-dark: #39394f99; // Secondary background color for dark mode // Border colors $border-color: #e0dfff; // Default border color diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 9ac9a1f..d742fa5 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -15,7 +15,6 @@ // Background colors --background-color: #{$background-color}; // Main background color --background-color-secondary: #{$background-color-secondary}; // Secondary background color - --background-color-gray: #{$background-color-gray}; // Secondary background color // Border colors --border-color: #{$border-color}; // Border color for light theme @@ -48,7 +47,6 @@ // Background colors --background-color: #{$background-color-dark}; // Main background color --background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color - --background-color-gray: #{$background-color-gray-dark}; // Secondary background color // Border colors --border-color: #{$border-color-dark}; // Border color for dark theme @@ -111,7 +109,7 @@ body { ::-webkit-scrollbar-thumb { background: var(--accent-color); /* Scrollbar handle color */ border-radius: 4px; /* Rounded corners */ - border: 2px solid var(--background-color); /* Padding around the scrollbar handle */ + border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */ } ::-webkit-scrollbar-thumb:hover { diff --git a/app/src/styles/components/_regularDropDown.scss b/app/src/styles/components/_regularDropDown.scss new file mode 100644 index 0000000..86ac078 --- /dev/null +++ b/app/src/styles/components/_regularDropDown.scss @@ -0,0 +1,54 @@ +@use '../abstracts/variables.scss' as *; + + +.regularDropdown-container { + width: 104px; + height: 22px; + border: 1px solid var(--text-color); // Ensure $border-color is defined + border-radius: 6px; + position: relative; + cursor: pointer; + padding: 0 6px; + + .dropdown-header { + height: 100%; + display: flex; + justify-content: space-between; + cursor: pointer; + // padding: 5px; + border: 1px solid var(--primary-color); + border-radius: 6px; + background-color: var(--background-color); + + // .icon { + // padding-right: 6px; + // } + } + + .dropdown-options { + position: absolute; // Ensure dropdown options position correctly + width: 100%; // Ensure options width matches the header + background-color: var(--primary-color); // Optional: Background color + border: 1px solid #ccc; // Optional: Border styling + border-radius: 4px; // Optional: Border radius + z-index: 10; // Ensure dropdown appears above other elements + max-height: 200px; // Optional: Limit height + overflow-y: auto; // Optional: Enable scrolling if content exceeds height + left: 0; + top: 104%; + + .option { + padding: 5px; + cursor: pointer; + flex-direction: row !important; + + &:hover { + background-color: var(--primary-color); // Optional: Hover effect + } + } + } + + .icon { + height: auto; + } +} \ No newline at end of file diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index fa6e6a0..2186efe 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -18,11 +18,11 @@ color: var(--input-text-color); font-size: var(--font-size-regular); font-weight: var(--font-weight-regular); - background-color: var(--background-color); border: 1px solid var(--accent-color); outline: none; border-radius: #{$border-radius-small}; - padding: 2px 8px; + line-height: 26px; + padding: 0 8px; } .toggle-header-container { @@ -144,82 +144,8 @@ .project-dropdowm-container { position: relative; height: 32px; - .project-name { + .project-name{ line-height: 32px; height: 100%; } } -.input.default { - text-align: center; - display: flex; - overflow: hidden; - position: relative; - input { - border: 1px solid var(--border-color); - border-radius: #{$border-radius-medium}; - padding: 3px 8px; - outline: none; - width: 100%; - background-color: var(--background-color); - &:focus, - &:active { - border: 1px solid var(--accent-color); - } - } - .dropdown { - position: absolute; - right: 4px; - padding: 2px 4px; - background-color: var(--highlight-accent-color); - font-size: var(--font-size-small); - border-radius: #{$border-radius-medium}; - top: 3px; - .active-option { - font-size: inherit; - position: relative; - } - } -} - -.regularDropdown-container { - width: 100%; - border: 1px solid var(--border-color); // Ensure $border-color is defined - border-radius: #{$border-radius-medium}; - position: relative; - cursor: pointer; - padding: 2px 6px; - - .dropdown-header { - height: 100%; - @include flex-space-between; - cursor: pointer; - border: 1px solid var(--primary-color); - border-radius: #{$border-radius-small}; - background-color: var(--background-color); - } - - .dropdown-options { - position: absolute; - width: 100%; - background-color: var(--primary-color); - border: 1px solid var(--border-color); - border-radius: 4px; - z-index: 10; - left: 0; - top: 104%; - padding: 4px; - .option { - padding: 2px; - cursor: pointer; - border-radius: #{$border-radius-small}; - &:hover { - color: var(--accent-color); - background-color: var(--highlight-accent-color); - } - } - } - - .icon { - height: auto; - } -} diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss index 40b72c7..a9b0145 100644 --- a/app/src/styles/components/lists.scss +++ b/app/src/styles/components/lists.scss @@ -9,10 +9,6 @@ .head { @include flex-space-between; padding: 6px 12px; - .value { - color: var(--text-color); - font-weight: #{$medium-weight}; - } .options { @include flex-center; gap: 6px; @@ -41,10 +37,6 @@ width: 100%; text-align: start; max-width: 180px; - font-size: var(--font-size-regular); - .input-value { - font-size: inherit; - } } .options-container { @include flex-center; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 65fad78..e4149c0 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -1,5 +1,3 @@ -<<<<<<< Updated upstream -======= @use "../abstracts/variables" as *; @use "../abstracts/mixins" as *; @@ -15,7 +13,6 @@ border-radius: #{$border-radius-large}; width: fit-content; transition: width 0.2s; - background-color: var(--background-color); .split { height: 20px; width: 2px; @@ -74,7 +71,6 @@ box-shadow: #{$box-shadow-medium}; padding: 8px; border-radius: #{$border-radius-large}; - background-color: var(--background-color); .option-list { margin: 4px 0; display: flex; @@ -147,4 +143,3 @@ opacity: 1; } } ->>>>>>> Stashed changes diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss new file mode 100644 index 0000000..daec86c --- /dev/null +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -0,0 +1,110 @@ +@use "../../../abstracts/variables" as *; +@use "../../../abstracts/mixins" as *; + +.floatingWidgets-wrapper { + display: flex; + flex-direction: column; + gap: 6px; + padding-top: 12px; + padding: 6px; + + .floating { + + min-height: 170px; + background: var(--background-color); + border: 1.23px solid var(--border-color); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; + border-radius: $border-radius-medium; + padding: 12px 6px; + } + + .working-state { + display: flex; + flex-direction: column; + gap: 6px; + + .state-working-top { + display: flex; + } + } +} + + + +.floatingWidgets-wrapper { + font-family: Arial, sans-serif; + color: #333; +} + +.floating.working-state { + width: 100%; + height: 283px; + background: #f5f5f5; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + box-sizing: border-box; + +} + +.state-working-top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + // flex-direction: column; +} + +.state { + font-size: 24px; + font-weight: bold; +} + +.working-status { + display: flex; + align-items: center; + gap: 8px; +} + +.working { + font-size: 20px; + color: #4CAF50; +} + +.dot { + display: inline-block; + width: 10px; + height: 10px; + background: #4CAF50; + border-radius: 50%; +} + +.img img { + width: 150px; + height: 100px; + border-radius: 4px; + object-fit: cover; +} + +.state-working-data { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; +} + +.data-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + padding: 4px 0; +} + +.data-key { + color: #666; +} + +.data-value { + font-weight: bold; + color: #333; +} \ No newline at end of file diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 0f5fc24..54ebf0d 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -9,25 +9,31 @@ background-color: var(--background-color); border-radius: #{$border-radius-extra-large}; box-shadow: #{$box-shadow-medium}; + .header-container { @include flex-space-between; padding: 10px; width: 100%; + .header-content { @include flex-center; width: calc(100% - 34px); + .logo-container { @include flex-center; } + .header-title { padding: 0 8px; width: 100%; max-width: calc(100% - 32px); + .input-value { color: var(--accent-color); } } } + .toggle-sidebar-ui-button { @include flex-center; cursor: pointer; @@ -36,31 +42,103 @@ min-height: 32px; min-width: 32px; border-radius: #{$border-radius-small}; + &:hover { background-color: var(--background-color-secondary); } } + .active { background-color: var(--background-color-secondary); outline: 1px solid var(--accent-color); outline-offset: -1px; } } + .sidebar-left-container { min-height: 50vh; padding-bottom: 12px; position: relative; display: flex; flex-direction: column; + .sidebar-left-content-container { - // border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); // flex: 1; height: calc(100% - 36px); position: relative; overflow: auto; + + .widget-left-sideBar { + min-height: 50vh; + max-height: 60vh; + + .widget2D { + .chart-container { + display: flex; + flex-direction: column; + gap: 8px; + padding: 6px; + flex-wrap: nowrap; + overflow: auto; + + .chart { + min-height: 170px; + background: var(--background-color); + border: 1.23px solid var(--border-color); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; + border-radius: $border-radius-medium; + padding: 12px 6px; + } + + .progressBar { + height: auto !important; + padding: 12px 10px 41px 10px; + display: flex; + flex-direction: column; + gap: 16px; + + .header { + display: flex; + justify-content: start; + align-items: center; + border-bottom: none; + } + + .stock { + padding: 13px 5px; + background-color: var(--background-color-secondary); + border-radius: 6.33px; + display: flex; + justify-content: space-between; + + .stock-item { + .stockValues { + display: flex; + flex-direction: row-reverse; + align-items: flex-end; + gap: 3px; + + .value { + color: var(--accent-color); + font-size: 16px; + } + } + + .stock-description { + font-size: 12px; + } + } + } + } + } + } + } } + .outline-container { height: 100%; + .outline-content-container { position: relative; height: 100%; @@ -79,15 +157,18 @@ background-color: var(--background-color); border-radius: #{$border-radius-extra-large}; box-shadow: #{$box-shadow-medium}; + .header-container { @include flex-space-between; padding: 10px; width: 100%; gap: 12px; height: 52px; + .options-container { @include flex-center; gap: 8px; + .share-button { padding: 4px 12px; color: var(--primary-color); @@ -96,18 +177,22 @@ border-radius: #{$border-radius-medium}; cursor: pointer; } + .app-docker-button { @include flex-center; } } + .split { height: 20px; width: 2px; background: var(--background-color-secondary); } + .users-container { width: 100%; @include flex-space-between; + .user-profile { @include flex-center; height: 26px; @@ -118,8 +203,10 @@ font-weight: var(--font-weight-bold); color: white; } + .guest-users-container { display: flex; + .other-guest { @include flex-center; height: 26px; @@ -134,23 +221,32 @@ outline-offset: -1px; } } + .user-profile-container { display: flex; - .user-organnization { + + .user-organization { height: 100%; max-width: 52px; + border-radius: 20px; + overflow: hidden; + margin-left: 2px; + img { height: 100%; width: 100%; object-fit: cover; + vertical-align: top; } } } } } + .sidebar-actions-container { position: absolute; left: -40px; + .sidebar-action-list { margin-bottom: 12px; @include flex-center; @@ -160,16 +256,19 @@ background: var(--primary-color); box-shadow: #{$box-shadow-medium}; } + .active { background: var(--accent-color); } } + .sidebar-right-container { min-height: 50vh; padding-bottom: 12px; position: relative; display: flex; flex-direction: column; + .sidebar-right-content-container { border-bottom: 1px solid var(--border-color); // flex: 1; @@ -178,14 +277,214 @@ overflow: auto; } } + + .visualization-right-sideBar { + min-height: 50vh; + max-height: 60vh; + + .sidebar-left-content-container { + .dataSideBar { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: 12px; + padding: 10px 12px; + + .datas { + display: flex; + align-items: center; + justify-content: space-between; + + .datas__class { + display: flex; + align-items: center; + + .multi-level-dropdown { + + min-width: 100px; + + .dropdown-button { + display: flex; + justify-content: space-between; + gap: 6px; + } + } + } + + .datas__class { + display: flex; + gap: 12px; + + .datas__separator {} + + .disable { + cursor: not-allowed; + pointer-events: none; + /* Disables all mouse interactions */ + opacity: 0.5; + /* Optional: Makes the button look visually disabled */ + } + + } + } + + .sideBarHeader { + color: var(--accent-color); + border-bottom: 1px solid var(--border-color); + padding-bottom: 6px; + } + + .selectedMain-container { + display: flex; + flex-direction: column; + gap: 6px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 10px; + + .selectedMain { + display: flex; + align-items: center; + gap: 6px; + + main { + width: 35%; + white-space: nowrap; + /* Prevent wrapping */ + } + + .icon { + padding: 0; + cursor: pointer; + } + + button { + background-color: transparent; + box-shadow: none; + color: #5273eb; + padding: 6px; + font-size: 18px; + } + + .bulletPoint { + color: #5273eb; + font-size: 16px; + } + + .regularDropdown-container { + width: 100%; + } + + &:first-child { + gap: 4px; + } + } + } + + .child { + width: 100%; + gap: 6px; + } + + .infoBox { + display: flex; + align-items: flex-start; + gap: 6px; + color: #444; + border-radius: 6px; + font-size: 14px; + + .infoIcon { + padding: 0px 7px; + border-radius: 50%; + border: 1px solid gray; + } + + p { + margin: 0; + } + } + } + + .design { + width: 100%; + display: flex; + flex-direction: column; + gap: 15px; + padding: 0; + font-size: 14px; + color: #4a4a4a; + + .selectedWidget { + padding: 6px 12px; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + } + } + + .reviewChart { + width: 100%; + height: 150px; + background: #f0f0f0; + // border-radius: 8px; + } + + .optionsContainer { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0 12px; + + .option { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + + .regularDropdown-container { + width: 160px; + } + + &:last-child { + flex-direction: column; + + .header { + width: 100%; + display: flex; + justify-content: space-between; + } + + .colorDisplayer { + width: 100%; + display: flex; + justify-content: start; + align-items: center; + + input[type="color"] { + border: none; + outline: none; + background: none; + width: 24px; + height: 26px; + border-radius: 3.2px; + } + } + } + + span { + min-width: 100px; + } + } + } + } + } } .machine-mechanics-container { - .process-list-container { - display: flex; - align-items: center; + .header { + @include flex-space-between; padding: 6px 12px; -<<<<<<< Updated upstream + .add-button { @include flex-center; padding: 2px 4px; @@ -193,19 +492,23 @@ color: var(--primary-color); border-radius: #{$border-radius-small}; cursor: pointer; + path { stroke: var(--primary-color); } } } + .lists-main-container { margin: 2px 8px; width: calc(100% - 16px); background: var(--background-color-secondary); border-radius: #{$border-radius-small}; + .list-container { min-height: 120px; padding: 4px; + .list-item { @include flex-space-between; padding: 4px 12px; @@ -213,118 +516,42 @@ margin: 2px 0; border-radius: #{$border-radius-small}; } + .active { background: var(--accent-color); + .value { -======= - gap: 12px; - } - .machine-mechanics-header { - padding: 8px 12px; - border: 1px solid var(--highlight-accent-color); - border-right: none; - border-left: none; - color: var(--accent-color); - font-weight: var(--font-weight-bold); - } - .machine-mechanics-content-container { - height: 100%; - overflow: auto; - max-height: calc(60vh - (35px + 38px)); - .actions, - .triggers { - .header { - @include flex-space-between; - padding: 6px 12px; - - .add-button { - @include flex-center; - padding: 2px 4px; - background: var(--accent-color); ->>>>>>> Stashed changes color: var(--primary-color); - border-radius: #{$border-radius-small}; - cursor: pointer; - - path { - stroke: var(--primary-color); - } } - } - } - .lists-main-container { - margin: 2px 8px; - width: calc(100% - 16px); - background: var(--background-color-gray); - border-radius: #{$border-radius-small}; - min-height: 120px; - height: 120px; - - .list-container { - padding: 4px; - height: calc(100% - 16px); - - .list-item { - @include flex-space-between; - padding: 4px 12px; - width: 100%; - margin: 2px 0; - border-radius: #{$border-radius-small}; - } -<<<<<<< Updated upstream path { stroke: var(--primary-color); } } + .remove-button { -======= - - .active { - background: var(--highlight-accent-color); - - .value, - .input-value { - color: var(--accent-color); - } - - path { - stroke: var(--accent-color); - } - } - - .remove-button { - @include flex-center; - height: 12px; - width: 12px; - cursor: pointer; - } - } - - .resize-icon { ->>>>>>> Stashed changes @include flex-center; - padding: 4px; - cursor: grab; - - &:active { - cursor: grabbing; - } + height: 12px; + width: 12px; + cursor: pointer; } } -<<<<<<< Updated upstream + .resize-icon { @include flex-center; padding: 4px; cursor: grab; + &:active { cursor: grabbing; } } } + .selected-properties-container { padding: 12px; } + .footer { @include flex-center; justify-content: flex-start; @@ -332,49 +559,121 @@ padding: 12px; font-size: var(--font-size-tiny); } -======= +} - .selected-properties-container { - padding: 12px; - width: 100%; - // overflow: hidden; - .properties-header { - text-transform: capitalize; - padding: 8px 6px; - color: var(--accent-color); - font-weight: var(--font-weight-bold); - border-bottom: 1px solid var(--border-color); - span { - color: inherit; - text-transform: none; - } - } - .value-field-container { - display: flex; - align-items: center; - gap: 10px; - width: 100%; - padding: 8px 0; - .label { - width: 40%; - height: 100%; - } - .input { - width: 60%; - } - } - .regularDropdown-container { - width: 60%; - } + + + + + + + + + + + + +.multi-level-dropdown { + position: relative; + display: inline-block; + + .dropdown-button { + width: 100%; + background-color: var(--background-color) !important; + border: 1px solid var(--border-color) !important; + padding: 5px 10px; + + + // font-size: 12px; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s ease; + + &:hover { + background-color: #333333; } - .footer { - @include flex-center; - justify-content: flex-start; - gap: 4px; - padding: 12px; - font-size: var(--font-size-tiny); + &.open { + background-color: #333333; } } ->>>>>>> Stashed changes -} + + .dropdown-menu { + position: absolute; + top: 100%; + left: 0; + background-color: #ffffff; + border: 1px solid #cccccc; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 1000; + min-width: 200px; + overflow: auto; + max-height: 600px; + + .dropdown-content { + display: flex; + flex-direction: column; + gap: 6px; + + .nested-dropdown { + // &:first-child{ + margin-left: 0; + // } + } + + padding: 10px; + } + + .dropdown-item { + display: block; + padding: 5px 10px; + text-decoration: none; + color: #000000; + font-size: 14px; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #f0f0f0; + } + } + + .nested-dropdown { + margin-left: 20px; + + .dropdown-trigger { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 10px; + cursor: pointer; + font-size: 14px; + color: #000000; + transition: background-color 0.3s ease; + + &:hover { + background-color: #f0f0f0; + } + + &.open { + background-color: #e0e0e0; + } + + .icon { + font-size: 12px; + margin-left: 5px; + } + } + + .submenu { + margin-top: 5px; + padding-left: 20px; + border-left: 2px solid #cccccc; + display: flex; + flex-direction: column; + gap: 6px; + } + } + } +} \ No newline at end of file diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 2c9b7df..90f6419 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -18,9 +18,12 @@ @use 'components/moduleToggle'; @use 'components/templates'; @use 'components/tools'; +@use 'components/regularDropDown'; +@use 'components/visualization/floating/energyConsumed'; // layout @use 'layout/sidebar'; // pages @use 'pages/home'; +@use 'pages/realTimeViz'; \ No newline at end of file diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss new file mode 100644 index 0000000..a7c1181 --- /dev/null +++ b/app/src/styles/pages/realTimeViz.scss @@ -0,0 +1,390 @@ +@use "../abstracts/variables.scss" as *; + +// Main Container +.realTime-viz { + background-color: var(--background-color); + border-radius: 20px; + box-shadow: $box-shadow-medium; + width: calc(100% - (320px + 270px + 80px)); + height: 600px; + position: absolute; + top: 50%; + left: calc(270px + 40px); + transform: translate(0, -50%); + + .icon { + display: flex; + align-items: center; + position: relative; + } + + .icons-container { + .icon { + &:first-child { + &::after { + display: none; + } + } + } + } + + .zoon-wrapper { + display: flex; + background-color: var(--background-color); + position: absolute; + bottom: 10px; + left: 50%; + transform: translate(-50%, 0); + gap: 6px; + padding: 4px; + border-radius: 8px; + max-width: 80%; + overflow: auto; + max-width: calc(100% - 450px); + &::-webkit-scrollbar { + display: none; + } + + .zone { + width: auto; + background-color: var(--background-color); + border-radius: 6px; + padding: 4px 8px; + white-space: nowrap; + font-size: $small; + } + + .active { + background-color: var(--accent-color); + color: var(--background-color); + // color: #FCFDFD !important; + } + } + + .zoon-wrapper.bottom { + bottom: 210px; + } + + @media (max-width: 1024px) { + width: 80%; // Increase width to take more space on smaller screens + height: 500px; // Reduce height to fit smaller screens + left: 50%; // Center horizontally + + .main-container { + margin: 0 15px; // Reduce margin for better spacing + } + + .zoon-wrapper { + bottom: 5px; // Adjust position for smaller screens + + &.bottom { + bottom: 150px; // Adjust for bottom placement + } + } + } + + .content-container { + display: flex; + height: 100vh; + transition: all 0.3s ease; + } + + .main-container { + position: relative; + flex: 1; + height: 600px; + background-color: rgb(235, 235, 235); + margin: 0 30px; + transition: height 0.3s ease, margin 0.3s ease; + + .zoon-wrapper { + display: flex; + background-color: rgba(224, 223, 255, 0.5); + position: absolute; + bottom: 10px; + left: 50%; + transform: translate(-50%, 0); + gap: 6px; + padding: 4px; + border-radius: 8px; + max-width: 80%; + overflow: auto; + transition: transform 0.3s ease; + + &::-webkit-scrollbar { + display: none; + } + + .zone { + width: auto; + background-color: $background-color; + border-radius: 6px; + padding: 4px 8px; + white-space: nowrap; + cursor: pointer; + transition: background-color 0.3s ease; + + &.active { + background-color: var(--primary-color); + color: var(--accent-color); + } + } + + &.bottom { + bottom: 210px; + } + } + } + + .panel { + position: absolute; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + border-radius: 6px; + overflow: visible !important; + + .panel-content { + position: relative; + height: 100%; + padding: 10px; + overflow: auto; + display: flex; + flex-direction: column; + gap: 10px; + background-color: var(--background-color); + + &::-webkit-scrollbar { + display: none; + } + + .chart-container { + width: 100%; + height: 200px; + max-height: 100%; + border: 1px dotted #a9a9a9; + border-radius: 8px; + box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1); + padding: 6px 0; + background-color: white; + } + + .close-btn { + position: absolute; + top: 5px; + right: 5px; + background: none; + border: none; + cursor: pointer; + color: var(--primary-color); + } + } + + + &.top-panel, + &.bottom-panel { + left: 0; + right: 0; + + .fullScreen { + background-color: red; + } + + .panel-content { + display: flex; + flex-direction: row; + + .chart-container { + height: 100%; + width: 200px; + } + } + } + + &.top-panel { + top: 0; + } + + &.bottom-panel { + bottom: 0; + } + + &.left-panel { + left: 0; + top: 0; + bottom: 0; + + .chart-container { + width: 100%; + height: 180px; + } + } + + &.right-panel { + right: 0; + top: 0; + bottom: 0; + } + } +} + +// Side Buttons +.side-button-container { + position: absolute; + display: flex; + background-color: $background-color; + padding: 5px; + border-radius: 8px; + transition: transform 0.3s ease; + + .extra-Bs { + display: flex; + align-items: center; + gap: 12px; + + .icon { + display: flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: 4px; + } + + .active { + background-color: var(--accent-color); + } + + &:hover { + cursor: pointer; + } + } + + .side-button { + cursor: pointer; + transition: background-color 0.3s ease; + width: 18px; + height: 18px; + display: flex; + justify-content: center; + // align-items: center; + background-color: var(--accent-color); + border: none; + color: var(--background-color); + border-radius: 4px; + } + + &.top { + top: -30px; + left: 50%; + transform: translateX(-50%); + flex-direction: row; + gap: 6px; + } + + &.right { + right: -30px; + top: 50%; + transform: translateY(-50%); + flex-direction: column; + gap: 6px; + } + + &.bottom { + bottom: -30px; + left: 50%; + transform: translateX(-50%); + flex-direction: row; + gap: 6px; + } + + &.left { + left: -30px; + top: 50%; + transform: translateY(-50%); + flex-direction: column; + gap: 6px; + } +} + +.right.side-button-container { + .extra-Bs { + flex-direction: column; + } +} + +.left.side-button-container { + .extra-Bs { + flex-direction: column; + } +} + +// Theme Container +.theme-container { + width: 250px; + padding: 12px; + box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11); + border-radius: 8px; + background-color: white; + position: absolute; + top: 20px; + right: -100%; + transform: translate(-0%, 0); + + h2 { + font-size: 12px; + margin-bottom: 8px; + color: #2b3344; + } + + .theme-preset-wrapper { + display: flex; + gap: 5px; + flex-wrap: wrap; + + .theme-preset { + display: flex; + gap: 2px; + margin-bottom: 10px; + border: 1px solid $border-color; + padding: 5px 10px; + border-radius: 4px; + transition: border 0.3s ease; + + &.active { + border: 1px solid var(--primary-color); + + &::after { + content: ""; + position: absolute; + top: 1px; + left: 1px; + width: 10px; + height: 10px; + background-color: var(--primary-color); + border-radius: 50%; + } + } + } + } + + .custom-color { + display: flex; + justify-content: space-between; + + .color-displayer { + display: flex; + gap: 5px; + align-items: center; + border: 1px solid var(--accent-color); + border-radius: 4px; + padding: 0 5px; + + input { + border: none; + outline: none; + border-radius: 50%; + } + } + } +} \ No newline at end of file