bug fix

2025-04-14 18:09:36 +05:30
parent ba215dd0d3
commit 5066638782
15 changed files with 568 additions and 472 deletions
--- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
+++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
@@ -89,9 +89,7 @@ export const DraggableWidget = ({
    width: 0,
    height: 0,
  });
-  useEffect(() => {
-    console.log("changes loggggg", measurements, duration, name);
-  }, [measurements, duration, name])
+  useEffect(() => {}, [measurements, duration, name]);
  const handlePointerDown = () => {
    if (selectedChartId?.id !== widget.id) {
      setSelectedChartId(widget);
@@ -148,7 +146,7 @@ export const DraggableWidget = ({
  const getCurrentWidgetCount = (panel: Side) =>
    selectedZone.widgets.filter((w) => w.panel === panel).length;
  // Calculate panel capacity
-  
+
  const calculatePanelCapacity = (panel: Side) => {
    const CHART_WIDTH = panelSize;
    const CHART_HEIGHT = panelSize;
@@ -167,25 +165,22 @@ export const DraggableWidget = ({
    const currentWidgetCount = getCurrentWidgetCount(panel);
    const panelCapacity = calculatePanelCapacity(panel);

-    return currentWidgetCount >  panelCapacity;
+    return currentWidgetCount > panelCapacity;
  };

  const duplicateWidget = async () => {
    try {
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
-      console.log("widget data sent", widget);
-

      const duplicatedWidget: Widget = {
        ...widget,
        Data: {
          duration: duration,
-          measurements: { ...measurements }
+          measurements: { ...measurements },
        },
        id: `${widget.id}-copy-${Date.now()}`,
      };
-      console.log("duplicatedWidget: ", duplicatedWidget);

      let duplicateWidget = {
        organization: organization,
@@ -193,8 +188,6 @@ export const DraggableWidget = ({
        widget: duplicatedWidget,
      };
      if (visualizationSocket) {
-        console.log("duplecate widget", duplicateWidget);
-
        visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
      }
      setSelectedZone((prevZone: any) => ({
@@ -293,20 +286,12 @@ export const DraggableWidget = ({

  return (
    <>
-      <style>
-        {`
-    :root {
-      --realTimeViz-container-width: ${canvasDimensions.width}px;
-      --realTimeViz-container-height: ${canvasDimensions.height}px;
-      
-    }
-  `}
-      </style>
      <div
        draggable
        key={widget.id}
-        className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
-          }`}
+        className={`chart-container ${
+          selectedChartId?.id === widget.id && !isPlaying && "activeChart"
+        }`}
        onPointerDown={handlePointerDown}
        onDragStart={handleDragStart}
        onDragEnter={handleDragEnter}
@@ -317,7 +302,7 @@ export const DraggableWidget = ({
            ? `calc(${canvasDimensions.width}px / 6)`
            : undefined,
          height: ["left", "right"].includes(widget.panel)
-            ? `calc(${canvasDimensions.height - 10}px / 4)`
+            ? `calc(${canvasDimensions.height - 15}px / 4)`
            : undefined,
        }}
        ref={chartWidget}
@@ -332,8 +317,9 @@ export const DraggableWidget = ({
        {openKebabId === widget.id && (
          <div className="kebab-options" ref={widgetRef}>
            <div
-              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
-                }`}
+              className={`edit btn ${
+                isPanelFull(widget.panel) ? "btn-blur" : ""
+              }`}
              onClick={duplicateWidget}
            >
              <div className="icon">
--- a/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
@@ -238,7 +238,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
      rotation={rotation}
      scale={[0.5, 0.5, 0.5]}
      transform
-      zIndexRange={[1, 0]}
+
      sprite={false} 
      // style={{
      //   transform: transformStyle.transform,
--- a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
+++ b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
@@ -121,10 +121,12 @@ const DroppedObjects: React.FC = () => {
  function handleDuplicate(zoneName: string, index: number) {
    setOpenKebabId(null);
    duplicateObject(zoneName, index); // Call the duplicateObject method from the store
+    setSelectedChartId(null);
  }

  async function handleDelete(zoneName: string, id: string) {
    try {
+      setSelectedChartId(null);
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];

@@ -532,7 +534,7 @@ const DroppedObjects: React.FC = () => {
          typeof obj.position.left === "number"
            ? `calc(${obj.position.left}px + ${
                isPlaying && selectedZone.activeSides.includes("left")
-                  ? `${widthMultiplier - 100}px`
+                  ? `${widthMultiplier - 150}px`
                  : "0px"
              })`
            : "auto";
@@ -541,11 +543,10 @@ const DroppedObjects: React.FC = () => {
          typeof obj.position.right === "number"
            ? `calc(${obj.position.right}px + ${
                isPlaying && selectedZone.activeSides.includes("right")
-                  ? `${widthMultiplier - 100}px`
+                  ? `${widthMultiplier - 150}px`
                  : "0px"
              })`
            : "auto";
-
        const bottomPosition =
          typeof obj.position.bottom === "number"
            ? `calc(${obj.position.bottom}px + ${
@@ -663,4 +664,3 @@ const DroppedObjects: React.FC = () => {
 };

 export default DroppedObjects;
-
--- a/app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
+++ b/app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
@@ -1,113 +1,117 @@
-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 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 { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";

-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 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 { isPlaying } = usePlayButtonStore();

-    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;

-    // Calculate the rotation angle for the progress bar
-    const rotationAngle = 45 + progress * 1.8;
+  // Calculate the rotation angle for the progress bar
+  const rotationAngle = 45 + progress * 1.8;

+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+      return;

-    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);
-          }
-        }
+    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);
      }
-    
-      useEffect(() => {
-        fetchSavedInputes();
-      }, []);
-    
-      useEffect(() => {
-        if (selectedChartId?.id === object?.id) {
-          fetchSavedInputes();
-        }
-      }
-      ,[header, flotingDuration, flotingMeasurements])
-  
-    return (
-        <>
-            <h2 className="header">{name}</h2>
-            <div className="progressContainer">
-                <div className="progress">
-                    <div className="barOverflow">
-                        <div
-                            className="bar"
-                            style={{ transform: `rotate(${rotationAngle}deg)` }}
-                        ></div>
-                    </div>
-                </div>
-            </div>
-            <div className="scaleLabels">
-                <span>0%</span>
-                <div className="centerText">
-                    <div className="percentage">{progress}%</div>
-                    <div className="status">Optimal</div>
-                </div>
-                <span>100%</span>
-            </div>
-        </>
-    )
-}
+    });

-export default FleetEfficiencyComponent
+    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">{name}</h2>
+      <div
+        className="progressContainer"
+        style={{ transform: isPlaying ? "skew(-14deg, 0deg)" : "none" }}
+      >
+        <div className="progress">
+          <div className="barOverflow">
+            <div
+              className="bar"
+              style={{ transform: `rotate(${rotationAngle}deg)` }}
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div className="scaleLabels">
+        <span>0%</span>
+        <div className="centerText">
+          <div className="percentage">{progress}%</div>
+          <div className="status">Optimal</div>
+        </div>
+        <span>100%</span>
+      </div>
+    </>
+  );
+};
+
+export default FleetEfficiencyComponent;
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -128,6 +128,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
  const cleanPanel = async (side: Side) => {
    //add api
    // console.log('side: ', side);
+    if (
+      hiddenPanels[selectedZone.zoneId]?.includes(side) ||
+      selectedZone.lockedPanels.includes(side)
+    )
+      return;
+
    const email = localStorage.getItem("email") || "";
    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value

@@ -197,13 +203,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
      }
      setSelectedZone(updatedZone);

-
-
      if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
-
-        setHiddenPanels(prev => ({
+        setHiddenPanels((prev) => ({
          ...prev,
-          [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(s => s !== side)
+          [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
+            (s) => s !== side
+          ),
        }));
      }

@@ -284,10 +289,11 @@ const AddButtons: React.FC<ButtonsProps> = ({
              <div className="extra-Bs">
                {/* Hide Panel */}
                <div
-                  className={`icon ${hiddenPanels[selectedZone.zoneId]?.includes(side)
-                    ? "active"
-                    : ""
-                    }`}
+                  className={`icon ${
+                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                      ? "active"
+                      : ""
+                  }`}
                  title={
                    hiddenPanels[selectedZone.zoneId]?.includes(side)
                      ? "Show Panel"
@@ -309,6 +315,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                  className="icon"
                  title="Clean Panel"
                  onClick={() => cleanPanel(side)}
+                  style={{
+                    cursor:
+                      hiddenPanels[selectedZone.zoneId]?.includes(side) ||
+                      selectedZone.lockedPanels.includes(side)
+                        ? "not-allowed"
+                        : "pointer",
+                  }}
                >
                  <CleanPannel />
                </div>