Your commit message

2025-03-19 18:06:33 +05:30
parent 124e435504
commit 95ed64fc6f
33 changed files with 3115 additions and 10 deletions
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -0,0 +1,187 @@
+import React from "react";
+import { CleanPannel, EyeIcon, LockIcon } from "../../icons/RealTimeVisulationIcons";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+// Define the type for the props passed to the Buttons component
+interface ButtonsProps {
+  selectedZone: {
+    zoneName: string; // Add zoneName property
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: {
+      id: string;
+      type: string;
+      title: string;
+      panel: Side;
+      data: any;
+    }[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string; // Ensure zoneName is included in the state type
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: {
+        id: string;
+        type: string;
+        title: string;
+        panel: Side;
+        data: any;
+      }[];
+    }>
+  >;
+}
+
+const AddButtons: React.FC<ButtonsProps> = ({
+  selectedZone,
+  setSelectedZone,
+}) => {
+  // Function to toggle lock/unlock a panel
+  const toggleLockPanel = (side: Side) => {
+    const newLockedPanels = selectedZone.lockedPanels.includes(side)
+      ? selectedZone.lockedPanels.filter((panel) => panel !== side)
+      : [...selectedZone.lockedPanels, side];
+
+    const updatedZone = {
+      ...selectedZone,
+      lockedPanels: newLockedPanels,
+    };
+
+    // Update the selectedZone state
+    setSelectedZone(updatedZone);
+  };
+
+  // Function to toggle visibility of a panel
+  const toggleVisibility = (side: Side) => {
+    const newActiveSides = selectedZone.activeSides.includes(side)
+      ? selectedZone.activeSides.filter((s) => s !== side)
+      : [...selectedZone.activeSides, side];
+
+    const updatedZone = {
+      ...selectedZone,
+      activeSides: newActiveSides,
+      panelOrder: newActiveSides,
+    };
+
+    // Update the selectedZone state
+    setSelectedZone(updatedZone);
+  };
+
+  // Function to clean all widgets from a panel
+  const cleanPanel = (side: Side) => {
+    const cleanedWidgets = selectedZone.widgets.filter(
+      (widget) => widget.panel !== side
+    );
+
+    const updatedZone = {
+      ...selectedZone,
+      widgets: cleanedWidgets,
+    };
+
+    // Update the selectedZone state
+    setSelectedZone(updatedZone);
+  };
+
+  // Function to handle "+" button click
+  const handlePlusButtonClick = (side: Side) => {
+    if (selectedZone.activeSides.includes(side)) {
+      // If the panel is already active, remove all widgets and close the panel
+      const cleanedWidgets = selectedZone.widgets.filter(
+        (widget) => widget.panel !== side
+      );
+      const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
+
+      const updatedZone = {
+        ...selectedZone,
+        widgets: cleanedWidgets,
+        activeSides: newActiveSides,
+        panelOrder: newActiveSides,
+      };
+
+      // Update the selectedZone state
+      setSelectedZone(updatedZone);
+    } else {
+      // If the panel is not active, activate it
+      const newActiveSides = [...selectedZone.activeSides, side];
+
+      const updatedZone = {
+        ...selectedZone,
+        activeSides: newActiveSides,
+        panelOrder: newActiveSides,
+      };
+
+      // Update the selectedZone state
+      setSelectedZone(updatedZone);
+    }
+  };
+
+  return (
+    <div>
+      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+        <div key={side} className={`side-button-container ${side}`}>
+          {/* "+" Button */}
+          <button
+            className={`side-button ${side}`}
+            onClick={() => handlePlusButtonClick(side)}
+            title={
+              selectedZone.activeSides.includes(side)
+                ? `Remove all items and close ${side} panel`
+                : `Activate ${side} panel`
+            }
+          >
+            +
+          </button>
+
+          {/* Extra Buttons */}
+          <div
+            className="extra-Bs"
+            style={{
+              display: selectedZone.activeSides.includes(side)
+                ? "flex"
+                : "none",
+            }}
+          >
+            {/* Hide Panel */}
+            <div
+              className="icon"
+              title="Hide Panel"
+              onClick={() => toggleVisibility(side)}
+            >
+              <EyeIcon />
+            </div>
+
+            {/* Clean Panel */}
+            <div
+              className="icon"
+              title="Clean Panel"
+              onClick={() => cleanPanel(side)}
+            >
+              <CleanPannel />
+            </div>
+
+            {/* Lock/Unlock Panel */}
+            <div
+              className={`icon ${
+                selectedZone.lockedPanels.includes(side) ? "active" : ""
+              }`}
+              title={
+                selectedZone.lockedPanels.includes(side)
+                  ? "Unlock Panel"
+                  : "Lock Panel"
+              }
+              onClick={() => toggleLockPanel(side)}
+            >
+              <LockIcon />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AddButtons;