Merge pull request 'realTimeVisulization' (#39) from realTimeVisulization into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/39

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

@@ -25,7 +25,7 @@ const BarChartInput = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const FlotingWidgetInput = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -144,7 +144,7 @@ const LineGrapInput = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const PieChartInput = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const Progress1Input = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const Progress2Input = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -25,7 +25,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -27,7 +27,7 @@ const Widget2InputCard3D = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

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

@@ -27,7 +27,7 @@ const Widget4InputCard3D = (props: Props) => {
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
         if (response.status === 200) {
           // console.log("dropdown data:", response.data);
           setDropDownData(response.data);

app/src/components/ui/componets/DraggableWidget.tsx

@@ -17,6 +17,7 @@ import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneD
 import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { useSocketStore } from "../../../store/store";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -243,6 +244,7 @@ export const DraggableWidget = ({
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
+  const { isPlaying } = usePlayButtonStore();
 
   console.log('isPanelHidden: ', isPanelHidden);
   return (
@@ -250,9 +252,8 @@ export const DraggableWidget = ({
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${
+        className={`chart-container ${(selectedChartId?.id === widget.id) && !isPlaying && "activeChart"
-          selectedChartId?.id === widget.id && "activeChart"
+          }`}
-        }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
@@ -273,9 +274,8 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
-                isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
-              }`}
               onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">