added input for name

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}`);
+          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_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_LOCAL_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">Widget name</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,32 @@ 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 />
       }
-      
+
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>