Merge remote-tracking branch 'origin/realTimeVisulization' into simulation

app/src/components/layout/Dashboard/DashboardCard.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import { KebabIcon } from "../../icons/ExportCommonIcons";
-import img from "../../../assets/image/image.png"
-
-const DashboardCard:React.FC = () => {
-  return (
-    <div className="dashboard-card-container">
-      <div className="preview-container">
-        <img src={img} alt="" />
-      </div>
-      <div className="project-details-container">
-        <div className="project-details">
-          <div className="project-name">Untitled</div>
-          <div className="project-data">24-12-2025</div>
-        </div>
-        <div className="users-list-container">
-          <div className="user-profile">V</div>
-          <KebabIcon />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardCard;
+import React from "react";
+import { KebabIcon } from "../../icons/ExportCommonIcons";
+import img from "../../../assets/image/image.png"
+
+const DashboardCard:React.FC = () => {
+  return (
+    <div className="dashboard-card-container">
+      <div className="preview-container">
+        <img src={img} alt="" />
+      </div>
+      <div className="project-details-container">
+        <div className="project-details">
+          <div className="project-name">Untitled</div>
+          <div className="project-data">24-12-2025</div>
+        </div>
+        <div className="users-list-container">
+          <div className="user-profile">V</div>
+          <KebabIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardCard;

app/src/components/layout/Dashboard/DashboardHome.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import DashboardCard from "./DashboardCard";
-import DashboardNavBar from "./DashboardNavBar";
-import MarketPlaceBanner from "./MarketPlaceBanner";
-
-const DashboardHome: React.FC = () => {
-  return (
-    <div className="dashboard-home-container">
-      <DashboardNavBar page={"home"} />
-      <MarketPlaceBanner />
-      <div className="container">
-        <div className="header">Recents</div>
-        <div className="cards-container">
-          <DashboardCard />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardHome;
+import React from "react";
+import DashboardCard from "./DashboardCard";
+import DashboardNavBar from "./DashboardNavBar";
+import MarketPlaceBanner from "./MarketPlaceBanner";
+
+const DashboardHome: React.FC = () => {
+  return (
+    <div className="dashboard-home-container">
+      <DashboardNavBar page={"home"} />
+      <MarketPlaceBanner />
+      <div className="container">
+        <div className="header">Recents</div>
+        <div className="cards-container">
+          <DashboardCard />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardHome;

app/src/components/layout/Dashboard/DashboardNavBar.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { CartIcon } from "../../icons/ExportModuleIcons";
-import Search from "../../ui/inputs/Search";
-
-interface DashboardNavBarProps {
-  page: React.ReactNode;
-}
-
-const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
-  return (
-    <div className="dashboard-navbar-container">
-      <div className="title">{page}</div>
-      <div className="market-place-button">
-        <CartIcon isActive /> Market Place
-      </div>
-      <Search onChange={() => {}} />
-    </div>
-  );
-};
-
-export default DashboardNavBar;
+import React from "react";
+import { CartIcon } from "../../icons/ExportModuleIcons";
+import Search from "../../ui/inputs/Search";
+
+interface DashboardNavBarProps {
+  page: React.ReactNode;
+}
+
+const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
+  return (
+    <div className="dashboard-navbar-container">
+      <div className="title">{page}</div>
+      <div className="market-place-button">
+        <CartIcon isActive /> Market Place
+      </div>
+      <Search onChange={() => {}} />
+    </div>
+  );
+};
+
+export default DashboardNavBar;

app/src/components/layout/Dashboard/MarketPlaceBanner.tsx

@@ -1,44 +1,44 @@
-import React from "react";
-import banner from "../../../assets/image/banner.png";
-
-const MarketPlaceBanner = () => {
-  return (
-    <div className="market-place-banner-container">
-      {/* market place banner */}
-      <img src={banner} alt="" />
-      <div className="hero-text">
-        NEW
-        <br /> FALL
-        <br /> COLLECTION
-      </div>
-      <div className="context">Unlock Creativity with Premium 3D Assets!</div>
-      <div className="arrow-context">
-        <svg
-          width="169"
-          height="120"
-          viewBox="0 0 169 120"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
-            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
-            stroke="white"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </div>
-      <div className="explore-button">Explore Now</div>
-    </div>
-  );
-};
-
-export default MarketPlaceBanner;
+import React from "react";
+import banner from "../../../assets/image/banner.png";
+
+const MarketPlaceBanner = () => {
+  return (
+    <div className="market-place-banner-container">
+      {/* market place banner */}
+      <img src={banner} alt="" />
+      <div className="hero-text">
+        NEW
+        <br /> FALL
+        <br /> COLLECTION
+      </div>
+      <div className="context">Unlock Creativity with Premium 3D Assets!</div>
+      <div className="arrow-context">
+        <svg
+          width="169"
+          height="120"
+          viewBox="0 0 169 120"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
+            stroke="white"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
+            stroke="white"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div className="explore-button">Explore Now</div>
+    </div>
+  );
+};
+
+export default MarketPlaceBanner;

app/src/components/layout/Dashboard/SidePannel.tsx

@@ -1,69 +1,69 @@
-import React from "react";
-import {
-  DocumentationIcon,
-  HelpIcon,
-  HomeIcon,
-  LogoutIcon,
-  NotificationIcon,
-  ProjectsIcon,
-  TutorialsIcon,
-} from "../../icons/DashboardIcon";
-import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
-
-const SidePannel: React.FC = () => {
-  const userName = localStorage.getItem("userName") || "Anonymous";
-  return (
-    <div className="side-pannel-container">
-      <div className="side-pannel-header">
-        <div className="user-container">
-          <div className="user-profile">{userName[0]}</div>
-          <div className="user-name">{userName}</div>
-        </div>
-        <div className="notifications-container">
-          <NotificationIcon />
-        </div>
-      </div>
-      <div className="new-project-button">+ New project</div>
-      <div className="side-bar-content-container">
-        <div className="side-bar-options-container">
-          <div className="option-list active">
-            <HomeIcon />
-            Home
-          </div>
-          <div className="option-list" title="coming soon">
-            <ProjectsIcon />
-            Projects
-          </div>
-          <div className="option-list" title="coming soon">
-            <TrashIcon />
-            Trash
-          </div>
-          <div className="option-list" title="coming soon">
-            <TutorialsIcon />
-            Tutorials
-          </div>
-          <div className="option-list" title="coming soon">
-            <DocumentationIcon />
-            Documentation
-          </div>
-        </div>
-        <div className="side-bar-options-container" title="coming soon">
-          <div className="option-list">
-            <SettingsIcon />
-            Settings
-          </div>
-          <div className="option-list" style={{cursor: "pointer"}}>
-            <LogoutIcon />
-            Log out
-          </div>
-          <div className="option-list">
-            <HelpIcon />
-            Help & Feedback
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SidePannel;
+import React from "react";
+import {
+  DocumentationIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoutIcon,
+  NotificationIcon,
+  ProjectsIcon,
+  TutorialsIcon,
+} from "../../icons/DashboardIcon";
+import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
+
+const SidePannel: React.FC = () => {
+  const userName = localStorage.getItem("userName") || "Anonymous";
+  return (
+    <div className="side-pannel-container">
+      <div className="side-pannel-header">
+        <div className="user-container">
+          <div className="user-profile">{userName[0]}</div>
+          <div className="user-name">{userName}</div>
+        </div>
+        <div className="notifications-container">
+          <NotificationIcon />
+        </div>
+      </div>
+      <div className="new-project-button">+ New project</div>
+      <div className="side-bar-content-container">
+        <div className="side-bar-options-container">
+          <div className="option-list active">
+            <HomeIcon />
+            Home
+          </div>
+          <div className="option-list" title="coming soon">
+            <ProjectsIcon />
+            Projects
+          </div>
+          <div className="option-list" title="coming soon">
+            <TrashIcon />
+            Trash
+          </div>
+          <div className="option-list" title="coming soon">
+            <TutorialsIcon />
+            Tutorials
+          </div>
+          <div className="option-list" title="coming soon">
+            <DocumentationIcon />
+            Documentation
+          </div>
+        </div>
+        <div className="side-bar-options-container" title="coming soon">
+          <div className="option-list">
+            <SettingsIcon />
+            Settings
+          </div>
+          <div className="option-list" style={{cursor: "pointer"}}>
+            <LogoutIcon />
+            Log out
+          </div>
+          <div className="option-list">
+            <HelpIcon />
+            Help & Feedback
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SidePannel;

app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
+import { AddIcon } from "../../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import useChartStore from "../../../../../store/useChartStore";
+import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
+import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import axios from "axios";
+import RenameInput from "../../../../ui/inputs/RenameInput";
+
+type Props = {};
+
+const FlotingWidgetInput = (props: Props) => {
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setMeasurements, updateDuration, updateName } = useChartStore();
+  const [duration, setDuration] = useState('1h')
+  const [dropDowndata, setDropDownData] = useState({});
+  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
+  const { selectedZone } = useSelectedZoneStore();
+  const { selectedChartId } = useWidgetStore();
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
+
+  useEffect(() => {
+    const fetchZoneData = async () => {
+      try {
+        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        if (response.status === 200) {
+          // console.log("dropdown data:", response.data);
+          setDropDownData(response.data);
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    };
+    fetchZoneData();
+  }, []);
+
+  useEffect(() => {
+    const fetchSavedInputes = async () => {
+      if (selectedChartId.id !== "") {
+        try {
+          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
+          if (response.status === 200) {
+            setSelections(response.data.Data.measurements)
+            setDuration(response.data.Data.duration)
+            setWidgetName(response.data.widgetName)
+          } else {
+            console.log("Unexpected response:", response);
+          }
+        } catch (error) {
+          console.error("There was an error!", error);
+        }
+      }
+    }
+
+    fetchSavedInputes();
+
+  }, [selectedChartId.id]);
+
+  // Sync Zustand state when component mounts
+  useEffect(() => {
+    setMeasurements(selections);
+    updateDuration(duration);
+    updateName(widgetName);
+  }, [selections, duration, widgetName]);
+
+
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
+    try {
+      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`, {
+        organization: organization,
+        zoneId: selectedZone.zoneId,
+        widget: {
+          id: selectedChartId.id,
+          panel: selectedChartId.panel,
+          widgetName: inputName,
+          Data: {
+            measurements: inputMeasurement,
+            duration: inputDuration
+          }
+        }
+      } as any);
+      if (response.status === 200) {
+        return true
+      } else {
+        console.log("Unexpected response:", response);
+        return false
+      }
+    } catch (error) {
+      console.error("There was an error!", error);
+      return false
+    }
+  }
+
+  const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
+
+    // async() => {
+    const newSelections = { ...selections };
+    if (selectedData === null) {
+      delete newSelections[inputKey];
+    } else {
+      newSelections[inputKey] = selectedData;
+    }
+    // setMeasurements(newSelections); // Update Zustand store
+    console.log(newSelections);
+    if (await sendInputes(newSelections, duration, widgetName)) {
+      setSelections(newSelections);
+    }
+    // sendInputes(newSelections, duration); // Send data to server
+    // return newSelections;
+    // };
+  };
+
+  const handleSelectDuration = async (option: string) => {
+    if (await sendInputes(selections, option, widgetName)) {
+      setDuration(option);
+    }
+    // setDuration(option);
+  };
+
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
+  return (
+    <>
+      <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Title</div>
+          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+        </div>
+        {[...Array(6)].map((_, index) => {
+          const inputKey = `input${index + 1}`;
+          return (
+            <div key={index} className="datas">
+              <div className="datas__label">Input {index + 1}</div>
+              <div className="datas__class">
+                <MultiLevelDropdown
+                  data={dropDowndata}
+                  onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                  onUnselect={() => handleSelect(inputKey, null)}
+                  selectedValue={selections[inputKey]} // Load from Zustand
+                />
+                <div className="icon">
+                  <AddIcon />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <div className="datas">
+          <div className="datas__label">Duration</div>
+          <div className="datas__class">
+            <RegularDropDown
+              header={duration}
+              options={["1h", "2h", "12h"]}
+              onSelect={handleSelectDuration}
+              search={false}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FlotingWidgetInput;

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -58,11 +58,11 @@
 //         name: string;
 //         fields: string;
 //       }
-      
+
 //       interface InputData {
 //         [key: string]: Measurement;
 //       }
-      
+
 //       const extractMeasurements = (input: InputData): Measurement[] => {
 //         return Object.values(input);
 //       };
@@ -71,7 +71,7 @@
 //         const measurementsData = extractMeasurements(selections);
 //         setMeasurements(measurementsData);
 //     }, [selections]);
-    
+
 
 //     return (
 //         <>
@@ -125,20 +125,22 @@ import useChartStore from "../../../../../store/useChartStore";
 import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
+import RenameInput from "../../../../ui/inputs/RenameInput";
 
 type Props = {};
 
 const LineGrapInput = (props: Props) => {
-  const { setMeasurements, updateDuration } = useChartStore();
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setMeasurements, updateDuration, updateName } = useChartStore();
   const [duration, setDuration] = useState('1h')
   const [dropDowndata, setDropDownData] = useState({});
-  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({}); 
+  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
   const { selectedZone } = useSelectedZoneStore();
   const { selectedChartId } = useWidgetStore();
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0]
-  
+
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
@@ -157,13 +159,14 @@ const LineGrapInput = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    const fetchSavedInputes = async() => {
+    const fetchSavedInputes = async () => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
           if (response.status === 200) {
             setSelections(response.data.Data.measurements)
             setDuration(response.data.Data.duration)
+            setWidgetName(response.data.widgetName)
           } else {
             console.log("Unexpected response:", response);
           }
@@ -181,17 +184,19 @@ const LineGrapInput = (props: Props) => {
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
-  }, [selections, duration]);
+    updateName(widgetName);
+  }, [selections, duration, widgetName]);
 
 
-  const sendInputes = async(inputMeasurement: any, inputDuration: any) => {
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
     try {
-      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,{
+      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`, {
         organization: organization,
         zoneId: selectedZone.zoneId,
-        widget:{
+        widget: {
           id: selectedChartId.id,
           panel: selectedChartId.panel,
+          widgetName: inputName,
           Data: {
             measurements: inputMeasurement,
             duration: inputDuration
@@ -210,35 +215,47 @@ const LineGrapInput = (props: Props) => {
     }
   }
 
-  const handleSelect = async(inputKey: string, selectedData: { name: string; fields: string } | null) => {
-    
-      // async() => {
-      const newSelections = { ...selections };
-      if (selectedData === null) {
-        delete newSelections[inputKey];
-      } else {
-        newSelections[inputKey] = selectedData;
-      }
-      // setMeasurements(newSelections); // Update Zustand store
-      console.log(newSelections);
-      if ( await sendInputes(newSelections, duration)) {
-        setSelections(newSelections);
-      }
-      // sendInputes(newSelections, duration); // Send data to server
-      // return newSelections;
+  const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
+
+    // async() => {
+    const newSelections = { ...selections };
+    if (selectedData === null) {
+      delete newSelections[inputKey];
+    } else {
+      newSelections[inputKey] = selectedData;
+    }
+    // setMeasurements(newSelections); // Update Zustand store
+    console.log(newSelections);
+    if (await sendInputes(newSelections, duration, widgetName)) {
+      setSelections(newSelections);
+    }
+    // sendInputes(newSelections, duration); // Send data to server
+    // return newSelections;
     // };
   };
 
-  const handleSelectDuration = async(option: string) => {
-    if ( await sendInputes(selections, option)) {
+  const handleSelectDuration = async (option: string) => {
+    if (await sendInputes(selections, option, widgetName)) {
       setDuration(option);
     }
     // setDuration(option);
   };
 
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
   return (
     <>
       <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Title</div>
+          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+        </div>
         {[...Array(6)].map((_, index) => {
           const inputKey = `input${index + 1}`;
           return (

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
 import LineGrapInput from "../IotInputCards/LineGrapInput";
+import RenameInput from "../../../../ui/inputs/RenameInput";
 
 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -107,27 +108,36 @@ const Data = () => {
         [selectedChartId.id]: currentChartData.map((group) =>
           group.id === groupId
             ? {
-                ...group,
-                children: group.children.filter(
-                  (child) => child.id !== childId
-                ),
-              }
+              ...group,
+              children: group.children.filter(
+                (child) => child.id !== childId
+              ),
+            }
             : group
         ),
       };
     });
   };
+  console.log("selectedChartId", selectedChartId);
 
   return (
     <div className="dataSideBar">
-      {selectedChartId?.title && (
+      {/* {selectedChartId?.title && (
         <div className="sideBarHeader">{selectedChartId?.title}</div>
-      )}
+      )} */}
+
+
+      {/* <RenameInput value={selectedChartId?.title || "untited"} /> */}
+
       {/* Render groups dynamically */}
       {
-        chartDataGroups[selectedChartId?.id] && <LineGrapInput />
+        chartDataGroups[selectedChartId?.id] && 
+        <>
+        <div className="sideBarHeader">2D Widget Input</div>
+        <LineGrapInput />
+        </>
       }
-      
+
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>