updated ui

2025-03-25 15:55:48 +05:30
parent 3667669cb5 e0ce7998ef
commit 33632fd58e
171 changed files with 14138 additions and 133 deletions
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -17,6 +17,7 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
+import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store";

 const Tools: React.FC = () => {
  const { templates } = useTemplateStore();
@@ -32,12 +33,32 @@ const Tools: React.FC = () => {
  const { addTemplate } = useTemplateStore();
  const { selectedZone } = useSelectedZoneStore();

+  // wall options
+  const { setToggleView } = useToggleView();
+  const { setDeleteModels } = useDeleteModels();
+  const { setAddAction } = useAddAction();
+  const { setSelectedWallItem } = useSelectedWallItem();
+
+
  // Reset activeTool whenever activeModule changes
  useEffect(() => {
    setActiveTool(activeSubTool);
    setActiveSubTool(activeSubTool);
  }, [activeModule]);

+  const toggleSwitch = () => {
+    if (toggleThreeD) {
+      setSelectedWallItem(null);
+      setDeleteModels(false);
+      setAddAction(null);
+      setToggleView(true);
+    }
+    else {
+      setToggleView(false);
+    }
+    setToggleThreeD(!toggleThreeD);
+  };
+
  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (
@@ -136,9 +157,8 @@ const Tools: React.FC = () => {
          <div className="split"></div>
          <div className="draw-tools">
            <div
-              className={`tool-button ${
-                activeTool === "draw-wall" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                }`}
              onClick={() => {
                setActiveTool("draw-wall");
              }}
@@ -146,9 +166,8 @@ const Tools: React.FC = () => {
              <WallIcon isActive={activeTool === "draw-wall"} />
            </div>
            <div
-              className={`tool-button ${
-                activeTool === "draw-zone" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                }`}
              onClick={() => {
                setActiveTool("draw-zone");
              }}
@@ -156,9 +175,8 @@ const Tools: React.FC = () => {
              <ZoneIcon isActive={activeTool === "draw-zone"} />
            </div>
            <div
-              className={`tool-button ${
-                activeTool === "draw-aisle" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                }`}
              onClick={() => {
                setActiveTool("draw-aisle");
              }}
@@ -166,9 +184,8 @@ const Tools: React.FC = () => {
              <AsileIcon isActive={activeTool === "draw-aisle"} />
            </div>
            <div
-              className={`tool-button ${
-                activeTool === "draw-floor" ? "active" : ""
-              }`}
+              className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                }`}
              onClick={() => {
                setActiveTool("draw-floor");
              }}
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -1,9 +1,20 @@
 import { useWidgetStore } from "../../../store/useWidgetStore";
-import PieGraphComponent from "../charts/PieGraphComponent";
-import BarGraphComponent from "../charts/BarGraphComponent";
-import LineGraphComponent from "../charts/LineGraphComponent";
+import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
+import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
+import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
+import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
+import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
+import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";

-export const DraggableWidget = ({ widget }: { widget: any }) => {
+export const DraggableWidget = ({
+  widget,
+  hiddenPanels, // Add this prop to track hidden panels
+}: {
+  widget: any;
+  hiddenPanels: string[]; // Array of hidden panel names
+}) => {
+  console.log("widget: ", widget.type);
  const { selectedChartId, setSelectedChartId } = useWidgetStore();

  const handlePointerDown = () => {
@@ -12,6 +23,9 @@ export const DraggableWidget = ({ widget }: { widget: any }) => {
    }
  };

+  // Determine if the widget's panel is hidden
+  const isPanelHidden = hiddenPanels.includes(widget.panel);
+
  return (
    <>
      <div
@@ -20,61 +34,103 @@ export const DraggableWidget = ({ widget }: { widget: any }) => {
          selectedChartId?.id === widget.id && "activeChart"
        }`}
        onPointerDown={handlePointerDown}
+        style={{
+          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
+          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
+        }}
      >
-        {widget.type === "progress" ? (
-          //   <ProgressCard title={widget.title} data={widget.data} />
-          <></>
-        ) : (
-          <>
-            {widget.type === "line" && (
-              <LineGraphComponent
-                type={widget.type}
-                title={widget.title}
-                fontSize={widget.fontSize}
-                fontWeight={widget.fontWeight}
-                data={{
-                  measurements: [
-                    { name: "testDevice", fields: "powerConsumption" },
-                    { name: "furnace", fields: "powerConsumption" },
-                  ],
-                  interval: 1000,
-                  duration: "1h",
-                }}
-              />
-            )}
-            {widget.type === "bar" && (
-              <BarGraphComponent
-                type={widget.type}
-                title={widget.title}
-                fontSize={widget.fontSize}
-                fontWeight={widget.fontWeight}
-                data={{
-                  measurements: [
-                    { name: "testDevice", fields: "powerConsumption" },
-                    { name: "furnace", fields: "powerConsumption" },
-                  ],
-                  interval: 1000,
-                  duration: "1h",
-                }}
-              />
-            )}
-            {widget.type === "pie" && (
-              <PieGraphComponent
-                type={widget.type}
-                title={widget.title}
-                fontSize={widget.fontSize}
-                fontWeight={widget.fontWeight}
-                data={{
-                  measurements: [
-                    { name: "testDevice", fields: "powerConsumption" },
-                    { name: "furnace", fields: "powerConsumption" },
-                  ],
-                  interval: 1000,
-                  duration: "1h",
-                }}
-              />
-            )}
-          </>
+        {/* Render charts based on widget type */}
+        {widget.type === "progress" && (
+          <ProgressCard title={widget.title} data={widget.data} />
+        )}
+        {widget.type === "line" && (
+          <LineGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
+        )}
+        {widget.type === "bar" && (
+          <BarGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
+        )}
+        {/* {widget.type === "radar" && (
+          <RadarGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={widget.data.measurements.map((item: any) => item.fields)}
+          />
+        )} */}
+        {widget.type === "pie" && (
+          <PieGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
+        )}
+        {widget.type === "doughnut" && (
+          <DoughnutGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
+        )}
+        {widget.type === "polarArea" && (
+          <PolarAreaGraphComponent
+            type={widget.type}
+            title={widget.title}
+            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
+            data={{
+              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
+              ],
+              interval: 1000,
+              duration: "1h",
+            }}
+          />
        )}
      </div>
    </>
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -30,12 +30,17 @@ interface PanelProps {
      widgets: Widget[];
    }>
  >;
+  hiddenPanels: string[];
 }

 const generateUniqueId = () =>
  `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

-const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
+const Panel: React.FC<PanelProps> = ({
+  selectedZone,
+  setSelectedZone,
+  hiddenPanels,
+}) => {
  const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
  const [panelDimensions, setPanelDimensions] = useState<{
    [side in Side]?: { width: number; height: number };
@@ -189,7 +194,11 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
            {selectedZone.widgets
              .filter((w) => w.panel === side)
              .map((widget) => (
-                <DraggableWidget widget={widget} key={widget.id} />
+                <DraggableWidget
+                  hiddenPanels={hiddenPanels}
+                  widget={widget}
+                  key={widget.id}
+                />
              ))}
          </div>
        </div>
@@ -198,4 +207,4 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
  );
 };

-export default Panel;
+export default Panel;
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -75,29 +75,30 @@ const RealTimeVisulization: React.FC = () => {
      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
      style={{
        height: isPlaying ? "100vh" : "",
-        width: isPlaying ? "100%" : "",
        left: isPlaying ? "0%" : "",
      }}
    >
-      <DisplayZone
-        zonesData={zonesData}
+      <AddButtons
+        hiddenPanels={hiddenPanels}
+        setHiddenPanels={setHiddenPanels}
        selectedZone={selectedZone}
        setSelectedZone={setSelectedZone}
      />
-
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
-      )}
-
-      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
+      {/* {!isPlaying && ( */}
+      <AddButtons
+        hiddenPanels={hiddenPanels}
+        setHiddenPanels={setHiddenPanels}
+        selectedZone={selectedZone}
+        setSelectedZone={setSelectedZone}
+      />
+      {/* )} */}
+      <Panel
+        selectedZone={selectedZone}
+        hiddenPanels={hiddenPanels}
+        setSelectedZone={setSelectedZone}
+      />{" "}
    </div>
  );
 };

 export default RealTimeVisulization;
-
--- a/app/src/components/ui/realTimeVis/charts/ProgressCard.tsx
+++ b/app/src/components/ui/realTimeVis/charts/ProgressCard.tsx
@@ -1,3 +1,5 @@
+import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
+
 const ProgressCard = ({
  title,
  data,
@@ -16,7 +18,9 @@ const ProgressCard = ({
          </span>
          <div className="stock-description">{stock.description}</div>
        </span>
-        <div className="icon">Icon</div>
+        <div className="icon">
+          <StockIncreseIcon />
+        </div>
      </div>
    ))}
  </div>
--- a/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx
+++ b/app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx
@@ -1,12 +1,9 @@
 import React, { useMemo } from "react";
 import { Radar } from "react-chartjs-2";
-import {
-  ChartOptions,
-  ChartData,
-  RadialLinearScaleOptions,
-} from "chart.js";
+import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";

 interface ChartComponentProps {
+  type: string;
  title: string;
  fontFamily?: string;
  fontSize?: string;
@@ -19,7 +16,7 @@ const RadarGraphComponent = ({
  fontFamily,
  fontSize,
  fontWeight = "Regular",
-  data,
+  data, // Now guaranteed to be number[]
 }: ChartComponentProps) => {
  // Memoize Font Weight Mapping
  const chartFontWeightMap = useMemo(
@@ -31,14 +28,15 @@ const RadarGraphComponent = ({
    []
  );

-  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [
-    fontSize,
-  ]);
+  const fontSizeValue = useMemo(
+    () => (fontSize ? parseInt(fontSize) : 12),
+    [fontSize]
+  );

-  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [
-    fontWeight,
-    chartFontWeightMap,
-  ]);
+  const fontWeightValue = useMemo(
+    () => chartFontWeightMap[fontWeight],
+    [fontWeight, chartFontWeightMap]
+  );

  const chartFontStyle = useMemo(
    () => ({