Add iot data and custom input card for floting cards

2025-04-01 19:06:29 +05:30
parent 716e7109c4
commit 688b7eb4a0
13 changed files with 976 additions and 45 deletions
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx
@@ -0,0 +1,105 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
+
+const ProgressCard1 = ({ id,title,}: {
+  id: string,
+  title: string;
+}) => {
+    const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(title)
+    const [value, setValue] = useState<any>('')
+    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 socket = io(`http://${iotApiUrl}`);
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+            const responseData = response.input1;
+            setValue(responseData);
+          
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.widgetName)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[chartMeasurements, chartDuration, widgetName])
+
+    return(
+        <div className="chart progressBar">
+          <div className="header">{name}</div>
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+        </div>
+      )
+};
+
+export default ProgressCard1;
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx
@@ -0,0 +1,125 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+import React, { useEffect, useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import io from "socket.io-client";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
+
+const ProgressCard2 = ({ id,title,}: {
+  id: string,
+  title: string;
+}) => {
+    const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(title)
+    const [value1, setValue1] = useState<any>('')
+    const [value2, setValue2] = useState<any>('')
+    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(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+            const responseData1 = response.input1;
+            const responseData2 = response.input2;
+            setValue1(responseData1);
+            setValue2(responseData2);   
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.widgetName)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[chartMeasurements, chartDuration, widgetName])
+
+    return(
+        <div className="chart progressBar">
+          <div className="header">{name}</div>
+          
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value1}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+
+            <div className="stock">
+              <span className="stock-item">
+                <span className="stockValues">
+                <div className="value">{value2}</div>
+                  <div className="key">Units</div>
+                  
+                </span>
+                <div className="stock-description">{
+                    measurements ? `${measurements?.input2?.fields}` : 'description'}</div>
+              </span>
+              <div className="icon">
+                <StockIncreseIcon />
+              </div>
+            </div>
+
+        </div>
+      )
+};
+
+export default ProgressCard2;
--- a/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx
@@ -1,14 +1,93 @@
-import React,{ useEffect, useState} from 'react'
+import React, { useState, useEffect } from 'react'
+import { Line } from 'react-chartjs-2'
+import useChartStore from '../../../../store/useChartStore';
+import { useWidgetStore } from '../../../../store/useWidgetStore';
+import axios from 'axios';
+import io from "socket.io-client";

 const FleetEfficiencyComponent = ({object}: any) => {
    const [ progress, setProgress ] = useState<any>(0)
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(object.header ? object.header : '')
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
+    const { header, flotingDuration, flotingMeasurements } = useChartStore();
+    const { selectedChartId } = useWidgetStore();
+
+    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

    // Calculate the rotation angle for the progress bar
    const rotationAngle = 45 + progress * 1.8;
+
+
+    useEffect(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+          const responseData = response.input1;
+          console.log(responseData);
+          
+          if (typeof responseData === "number") {
+            console.log("It's a number!");
+            setProgress(responseData);
+          }
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration, iotApiUrl]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (object?.id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.header)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === object?.id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[header, flotingDuration, flotingMeasurements])
  
    return (
        <>
-            <h2 className="header">Fleet Efficiency</h2>
+            <h2 className="header">{name}</h2>
            <div className="progressContainer">
                <div className="progress">
                    <div className="barOverflow">
--- a/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
+++ b/app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
@@ -1,21 +1,95 @@
-import React from 'react'
-import { WalletIcon } from '../../../icons/3dChartIcons'
+import React, { useState, useEffect } from 'react'
+import { Line } from 'react-chartjs-2'
+import useChartStore from '../../../../store/useChartStore';
 import { useWidgetStore } from '../../../../store/useWidgetStore';
+import axios from 'axios';
+import io from "socket.io-client";
+import { WalletIcon } from '../../../icons/3dChartIcons';
+

 const TotalCardComponent = ({
    object
 }: any) => {

-    const { setSelectedChartId } =
-        useWidgetStore();
+    const [ progress, setProgress ] = useState<any>(0)
+    const [measurements, setmeasurements] = useState<any>({});
+    const [duration, setDuration] = useState("1h")
+    const [name, setName] = useState(object.header ? object.header : '')
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
+    const { header, flotingDuration, flotingMeasurements } = useChartStore();
+    const { selectedChartId } = useWidgetStore();
+
+    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+
+    useEffect(() => {
+        if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    
+        const socket = io(`http://${iotApiUrl}`);
+    
+        const inputData = {
+          measurements,
+          duration,
+          interval: 1000,
+        };
+    
+    
+        const startStream = () => {  
+          socket.emit("lastInput", inputData);
+        };
+    
+        socket.on("connect", startStream);
+    
+        socket.on("lastOutput", (response) => {
+          const responseData = response.input1;
+          
+          if (typeof responseData === "number") {
+            setProgress(responseData);
+          }
+        });
+    
+        return () => {
+          socket.off("lastOutput");
+          socket.emit("stop_stream"); // Stop streaming when component unmounts
+          socket.disconnect();
+        };
+      }, [measurements, duration, iotApiUrl]);
+    
+      const fetchSavedInputes = async() => {
+        
+        if (object?.id !== "") {
+          try {
+            const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
+            if (response.status === 200) {
+              setmeasurements(response.data.Data.measurements)
+              setDuration(response.data.Data.duration)
+              setName(response.data.header)
+            } else {
+              console.log("Unexpected response:", response);
+            }
+          } catch (error) {
+            console.error("There was an error!", error);
+          }
+        }
+      }
+    
+      useEffect(() => {
+        fetchSavedInputes();
+      }, []);
+    
+      useEffect(() => {
+        if (selectedChartId?.id === object?.id) {
+          fetchSavedInputes();
+        }
+      }
+      ,[header, flotingDuration, flotingMeasurements])
+
    return (
        <>
-            <div className="header-wrapper" onClick={() => {
-                setSelectedChartId(object.id)
-            }}>
-                <div className="header">{object.header}</div>
+            <div className="header-wrapper" >
+                <div className="header">{name}</div>
                <div className="data-values">
-                    <div className="value">{object.value}</div>
+                    <div className="value">{progress}</div>
                    <div className="per">{object.per}</div>
                </div>
            </div>