added api to fetch data

2025-03-24 13:25:49 +05:30
parent 111a2e6581
commit 3caab7aa36
50 changed files with 9041 additions and 7860 deletions
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@@ -20,17 +20,21 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
+    "@types/axios": "^0.14.4",
    "@types/node": "^22.13.10",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/parser": "^8.27.0",
    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.8.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "sass": "^1.85.1",
    "sass-embedded": "^1.85.1",
-    "typescript": "~5.7.2",
+    "typescript": "^5.8.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -11,6 +11,7 @@ type Side = "top" | "bottom" | "left" | "right";
 // Define the type for the props passed to the Buttons component
 interface ButtonsProps {
  selectedZone: {
+    zoneId: string;
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
@@ -25,6 +26,7 @@ interface ButtonsProps {
  };
  setSelectedZone: React.Dispatch<
    React.SetStateAction<{
+      zoneId: string;
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -7,6 +7,7 @@ type Side = "top" | "bottom" | "left" | "right";
 interface DisplayZoneProps {
  zonesData: {
    [key: string]: {
+      zoneId: string;
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
@@ -14,6 +15,7 @@ interface DisplayZoneProps {
    };
  };
  selectedZone: {
+    zoneId: string;
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
@@ -28,6 +30,7 @@ interface DisplayZoneProps {
  };
  setSelectedZone: React.Dispatch<
    React.SetStateAction<{
+      zoneId: string;
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
@@ -177,3 +180,183 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
 };

 export default DisplayZone;
+
+
+
+// import React, { useEffect, useRef } from "react";
+// import { Widget } from "../../../store/useWidgetStore";
+
+// // Define the type for `Side`
+// type Side = "top" | "bottom" | "left" | "right";
+
+// interface DisplayZoneProps {
+//   zonesData: {
+//     _id: string;
+//     zoneName: string;
+//     zoneUUID: string;
+//     sceneID: string;
+//   }[];
+//   selectedZone: {
+//     zoneName: string;
+//     activeSides: Side[];
+//     panelOrder: Side[];
+//     lockedPanels: Side[];
+//     widgets: {
+//       id: string;
+//       type: string;
+//       title: string;
+//       panel: Side;
+//       data: any;
+//     }[];
+//   };
+//   setSelectedZone: React.Dispatch<
+//     React.SetStateAction<{
+//       zoneName: string;
+//       activeSides: Side[];
+//       panelOrder: Side[];
+//       lockedPanels: Side[];
+//       widgets: {
+//         id: string;
+//         type: string;
+//         title: string;
+//         panel: Side;
+//         data: any;
+//       }[];
+//     }>
+//   >;
+// }
+
+// const DisplayZone: React.FC<DisplayZoneProps> = ({
+//   zonesData,
+//   selectedZone,
+//   setSelectedZone,
+// }) => {
+//   // Ref for the container element
+//   const containerRef = useRef<HTMLDivElement | null>(null);
+
+//   // Example state for selectedOption and options (adjust based on your actual use case)
+//   const [selectedOption, setSelectedOption] = React.useState<string | null>(
+//     null
+//   );
+//   console.log('setSelectedOption: ', setSelectedOption);
+//   const [options, setOptions] = React.useState<string[]>([]);
+//   console.log('setOptions: ', setOptions);
+
+//   // Scroll to the selected option when it changes
+//   useEffect(() => {
+//     const container = containerRef.current;
+
+//     if (container && selectedOption) {
+//       // Handle scrolling to the selected option
+//       const index = options.findIndex((option) => {
+//         const formattedOption = formatOptionName(option);
+//         const selectedFormattedOption =
+//           selectedOption?.split("_")[1] || selectedOption;
+//         return formattedOption === selectedFormattedOption;
+//       });
+
+//       if (index !== -1) {
+//         const optionElement = container.children[index] as HTMLElement;
+//         if (optionElement) {
+//           optionElement.scrollIntoView({
+//             behavior: "smooth",
+//             block: "nearest",
+//             inline: "center",
+//           });
+//         }
+//       }
+//     }
+//   }, [selectedOption, options]);
+
+//   useEffect(() => {
+//     const container = containerRef.current;
+
+//     const handleWheel = (event: WheelEvent) => {
+//       event.preventDefault();
+//       if (container) {
+//         container.scrollBy({
+//           left: event.deltaY * 2, // Adjust the multiplier for faster scrolling
+//           behavior: "smooth",
+//         });
+//       }
+//     };
+
+//     let isDragging = false;
+//     let startX: number;
+//     let scrollLeft: number;
+
+//     const handleMouseDown = (event: MouseEvent) => {
+//       isDragging = true;
+//       startX = event.pageX - (container?.offsetLeft || 0);
+//       scrollLeft = container?.scrollLeft || 0;
+//     };
+
+//     const handleMouseMove = (event: MouseEvent) => {
+//       if (!isDragging || !container) return;
+//       event.preventDefault();
+//       const x = event.pageX - (container.offsetLeft || 0);
+//       const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging
+//       container.scrollLeft = scrollLeft - walk;
+//     };
+
+//     const handleMouseUp = () => {
+//       isDragging = false;
+//     };
+
+//     const handleMouseLeave = () => {
+//       isDragging = false;
+//     };
+
+//     if (container) {
+//       container.addEventListener("wheel", handleWheel, { passive: false });
+//       container.addEventListener("mousedown", handleMouseDown);
+//       container.addEventListener("mousemove", handleMouseMove);
+//       container.addEventListener("mouseup", handleMouseUp);
+//       container.addEventListener("mouseleave", handleMouseLeave);
+//     }
+
+//     return () => {
+//       if (container) {
+//         container.removeEventListener("wheel", handleWheel);
+//         container.removeEventListener("mousedown", handleMouseDown);
+//         container.removeEventListener("mousemove", handleMouseMove);
+//         container.removeEventListener("mouseup", handleMouseUp);
+//         container.removeEventListener("mouseleave", handleMouseLeave);
+//       }
+//     };
+//   }, []);
+
+//   // Helper function to format option names (customize as needed)
+//   const formatOptionName = (option: string): string => {
+//     // Replace underscores with spaces and capitalize the first letter
+//     return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+//   };
+
+//   return (
+//     <div
+//       ref={containerRef}
+//       className={`zoon-wrapper ${
+//         selectedZone.activeSides.includes("bottom") && "bottom"
+//       }`}
+//     >
+//       {zonesData && zonesData.length > 0 && zonesData?.map((zone, index) => (
+//         <div
+//           key={index}
+//           className={`zone ${
+//             selectedZone.zoneName === zone._id ? "active" : ""
+//           }`}
+//           // onClick={() => {
+//           //   setSelectedZone({
+//           //     zoneName,
+//           //     ...zonesData[zoneName],
+//           //   });
+//           // }}
+//         >
+//           {zone.zoneName}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };
+
+// export default DisplayZone;
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -15,6 +15,7 @@ interface Widget {

 interface PanelProps {
  selectedZone: {
+    zoneId: string;
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
@@ -23,6 +24,7 @@ interface PanelProps {
  };
  setSelectedZone: React.Dispatch<
    React.SetStateAction<{
+      zoneId: string;
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -20,6 +20,7 @@ const RealTimeVisulization: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [zonesData, setZonesData] = useState<{
    [key: string]: {
+      zoneId: string;
      activeSides: Side[];
      panelOrder: Side[];
      lockedPanels: Side[];
@@ -27,30 +28,35 @@ const RealTimeVisulization: React.FC = () => {
    };
  }>({
    "Manufacturing unit": {
+      zoneId: "Manufacturing unit",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    "Assembly unit": {
+      zoneId: "Assembly unit",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    "Packing unit": {
+      zoneId: "Packing unit",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    Warehouse: {
+      zoneId: "Warehouse",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
      widgets: [],
    },
    Inventory: {
+      zoneId: "Inventory",
      activeSides: [],
      panelOrder: [],
      lockedPanels: [],
@@ -101,3 +107,146 @@ const RealTimeVisulization: React.FC = () => {

 export default RealTimeVisulization;

+
+
+
+
+// import React, { useEffect, useState, useRef } from "react";
+// import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+// import Panel from "./Panel";
+// import AddButtons from "./AddButtons";
+// import { useSelectedZoneStore } from "../../../store/useZoneStore";
+// import DisplayZone from "./DisplayZone";
+// import axios from "axios";
+
+// type Side = "top" | "bottom" | "left" | "right";
+
+// interface Widget {
+//   id: string;
+//   type: string;
+//   title: string;
+//   panel: Side;
+//   data: any;
+// }
+
+// const RealTimeVisulization: React.FC = () => {
+//   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   // const [zonesData, setZonesData] = useState<{
+//   //   [key: string]: {
+//   //     activeSides: Side[];
+//   //     panelOrder: Side[];
+//   //     lockedPanels: Side[];
+//   //     widgets: Widget[];
+//   //   };
+//   // }>({
+//   //   "Manufacturing unit": {
+//   //     activeSides: [],
+//   //     panelOrder: [],
+//   //     lockedPanels: [],
+//   //     widgets: [],
+//   //   },
+//   //   "Assembly unit": {
+//   //     activeSides: [],
+//   //     panelOrder: [],
+//   //     lockedPanels: [],
+//   //     widgets: [],
+//   //   },
+//   //   "Packing unit": {
+//   //     activeSides: [],
+//   //     panelOrder: [],
+//   //     lockedPanels: [],
+//   //     widgets: [],
+//   //   },
+//   //   Warehouse: {
+//   //     activeSides: [],
+//   //     panelOrder: [],
+//   //     lockedPanels: [],
+//   //     widgets: [],
+//   //   },
+//   //   Inventory: {
+//   //     activeSides: [],
+//   //     panelOrder: [],
+//   //     lockedPanels: [],
+//   //     widgets: [],
+//   //   },
+//   // });
+
+//   const [zonesData, setZonesData] = useState<{
+//     _id: string;
+//     zoneName: string;
+//     zoneUUID: string;
+//     sceneID: string;
+//   }[]>([]);
+
+//   useEffect(() => {
+//     const fetchZoneData = async () => {
+//       try {
+//         // Send POST request to the server
+//         const response = await axios.get('http://192.168.0.102:2000/zone_sets/6656cbf555be4ff11327fd7f?organization=organization', 
+//         // {
+//         //   params: {
+//         //     sceneId:"123456789"
+//         //   }
+//         // }
+//       );
+
+//         // Check the response and show a success message if needed
+//         if (response.status === 200) {
+//           console.log('broker details responce:', response.data);
+//           setZonesData(response.data)
+//         } else {
+//           console.log('Unexpected response:', response);
+//         }
+
+//       } catch (error) {
+//         console.error('There was an error!', error);
+//         setZonesData([])
+//       }
+//     };
+//     fetchZoneData();
+//   }, []);
+
+//   const { isPlaying } = usePlayButtonStore();
+
+//   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+//   useEffect(() => {
+//     setZonesData((prev) => ({
+//       ...prev,
+//       [selectedZone.zoneName]: selectedZone,
+//     }));
+//   }, [selectedZone]);
+
+//   return (
+//     <div
+//       ref={containerRef}
+//       id="real-time-vis-canvas"
+//       className="realTime-viz canvas"
+//       style={{
+//         height: isPlaying ? "100vh" : "",
+//         width: isPlaying ? "100%" : "",
+//         left: isPlaying ? "0%" : "",
+//       }}
+//     >
+//       <DisplayZone
+//         zonesData={zonesData}
+//         selectedZone={selectedZone}
+//         setSelectedZone={setSelectedZone}
+//       />
+
+//       {!isPlaying && (
+//         <AddButtons
+//           hiddenPanels={hiddenPanels}
+//           setHiddenPanels={setHiddenPanels}
+//           selectedZone={selectedZone}
+//           setSelectedZone={setSelectedZone}
+//         />
+//       )}
+
+//       <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
+//     </div>
+//   );
+// };
+
+// export default RealTimeVisulization;
+
--- a/app/src/store/useZoneStore.ts
+++ b/app/src/store/useZoneStore.ts
@@ -1,3 +1,46 @@
+// import { create } from "zustand";
+
+// type Side = "top" | "bottom" | "left" | "right";
+
+// interface Widget {
+//   id: string;
+//   type: string;
+//   title: string;
+//   panel: Side;
+//   data: any;
+// }
+
+// interface SelectedZoneState {
+//   zoneName: string;
+//   activeSides: Side[];
+//   panelOrder: Side[];
+//   lockedPanels: Side[];
+//   widgets: Widget[];
+// }
+
+// interface SelectedZoneStore {
+//   selectedZone: SelectedZoneState;
+//   setSelectedZone: (zone: Partial<SelectedZoneState> | ((prev: SelectedZoneState) => SelectedZoneState)) => void;
+// }
+
+// export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
+//   selectedZone: {
+//     zoneName: "Manufacturing unit",
+//     activeSides: [],
+//     panelOrder: [],
+//     lockedPanels: [],
+//     widgets: [],
+//   },
+//   setSelectedZone: (zone) =>
+//     set((state) => ({
+//       selectedZone:
+//         typeof zone === "function"
+//           ? zone(state.selectedZone) // Handle functional updates
+//           : { ...state.selectedZone, ...zone }, // Handle partial updates
+//     })),
+// }));
+
+
 import { create } from "zustand";

 type Side = "top" | "bottom" | "left" | "right";
@@ -11,6 +54,7 @@ interface Widget {
 }

 interface SelectedZoneState {
+  zoneId: string;
  zoneName: string;
  activeSides: Side[];
  panelOrder: Side[];
@@ -25,17 +69,23 @@ interface SelectedZoneStore {

 export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
  selectedZone: {
-    zoneName: "Manufacturing unit",
+    zoneId:"",
+    zoneName: "",
    activeSides: [],
    panelOrder: [],
    lockedPanels: [],
    widgets: [],
  },
  setSelectedZone: (zone) =>
-    set((state) => ({
-      selectedZone:
+    set((state) => {
+      const newState =
        typeof zone === "function"
          ? zone(state.selectedZone) // Handle functional updates
-          : { ...state.selectedZone, ...zone }, // Handle partial updates
-    })),
+          : { ...state.selectedZone, ...zone }; // Handle partial updates
+
+      console.log("Previous state:", state.selectedZone);
+      console.log("Updated state:", newState);
+
+      return { selectedZone: newState };
+    }),
 }));