Update styles, add marketplace components, and enhance drag-and-drop functionality

2025-03-27 15:14:29 +05:30
parent a7ec4720a4
commit 3de7eedb80
51 changed files with 24774 additions and 809 deletions
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -12,20 +12,19 @@ import {
 import useToggleStore from "../../../store/useUIToggleStore";
 import MachineMechanics from "./mechanics/MachineMechanics";
 import Visualization from "./visualization/Visualization";
-import GlobalProperties from "./properties/GlobalProperties";
-import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import GlobalProperties from "./properties/GlobalProperties";
+import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
+  const { toggleUI } = useToggleStore();
  const { selectedActionSphere } = useSelectedActionSphere();
  const { subModule, setSubModule } = useSubModuleStore();
-  const { toggleUI } = useToggleStore();
-
-  // Reset subModule whenever activeModule changes
+  // Reset activeList whenever activeModule changes
  useEffect(() => {
    if (activeModule !== "simulation") setSubModule("properties");
    if (activeModule === "simulation") setSubModule("mechanics");
@@ -84,7 +83,17 @@ const SideBarRight: React.FC = () => {
            </div>
          </div>
        )}
-
+      {toggleUI &&
+        subModule === "zoneProperties" &&
+        activeModule === "builder" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              {/* <GlobalProperties /> */}
+              <ZoneProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
      {/* simulation */}

      {toggleUI && activeModule === "simulation" && (
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@@ -1,62 +1,57 @@
 import React from "react";
 import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";

 interface PositionInputProps {
-  onChange: (value: string) => void; // Callback for value change
+  onChange: (value: [number, number, number]) => void; // Callback for value change
  header: string;
  placeholder?: string; // Optional placeholder
  type?: string; // Input type (e.g., text, number, email)
+  value: [number, number, number] | null;
+  disabled?: boolean; // To enable/disable editing
 }

 const Vector3Input: React.FC<PositionInputProps> = ({
  onChange,
  header,
  placeholder = "Enter value", // Default placeholder
-  type = "number", // Default type
+  type = "string", // Default type
+  value,
+  disabled = false, // Default to disabled
 }) => {
+
+  const handleChange = (index: number, newValue: string) => {
+    if (!value) return;
+    const updatedValue = [...value] as [number, number, number];
+    updatedValue[index] = parseFloat(newValue) || 0;
+    console.log('updatedValue: ', updatedValue);
+    onChange(updatedValue);
+  };
+
+
+
  return (
    <div className="custom-input-container">
      <div className="header">
        {header}
-        {/* <div className="eyedrop-button">
-          <EyeDroperIcon isActive={false} />
-        </div> */}
      </div>
      <div className="inputs-container">
-        <div className="input-container">
-          <div className="custom-input-label">X : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Y : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-            min={0}
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Z : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-          />
-        </div>
+        {["X", "Y", "Z"].map((axis, i) => (
+          <div className="input-container" key={axis}>
+            <div className="custom-input-label">{axis}:</div>
+            <input
+              className="custom-input-field"
+              type={type}
+              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
+              // onChange={(e) => handleChange(i, e.target.value)}
+              placeholder={placeholder}
+              disabled={disabled}
+            />
+          </div>
+        ))}
      </div>
    </div>
  );
 };

-export default Vector3Input;
+export default Vector3Input;
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -1,32 +1,65 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
+import { useSelectedZoneStore } from "../../../../store/useZoneStore";
+import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";

 const ZoneProperties: React.FC = () => {
-  const [Edit, setEdit] = useState(false);
+  const { Edit, setEdit } = useEditPosition();
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zonePosition, setZonePosition } = usezonePosition();
+  const { zoneTarget, setZoneTarget } = usezoneTarget();
+
+  useEffect(() => {
+    setZonePosition(selectedZone.zoneViewPortPosition)
+    setZoneTarget(selectedZone.zoneViewPortTarget)
+  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])

  function handleSetView() {
+    console.log("setApi");
+
+    console.log('zoneTarget: ', zoneTarget);
+    console.log('zonePosition: ', zonePosition);
    setEdit(false);
  }

  function handleEditView() {
-    if (Edit) {
-      setEdit(false);
-    } else {
-      setEdit(true);
-    }
+    setEdit(!Edit);  // This will toggle the `Edit` state correctly
  }

+  function handleZoneNameChange(newName: string) {
+    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  }
+
+  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
+  }
+
+  useEffect(() => {
+    console.log("Updated selectedZone: ", selectedZone);
+  }, [selectedZone]);
+
  return (
    <div className="zone-properties-container">
      <div className="header">
-        <RenameInput value="Selected Zone Name" />
+        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
        <div className="button" onClick={handleEditView}>
          {Edit ? "Cancel" : "Edit"}
        </div>
      </div>
-      <Vector3Input onChange={() => {}} header="Viewport Target" />
-      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      <Vector3Input
+        onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
+        header="Viewport Target"
+        value={zoneTarget as [number, number, number]}
+        disabled={!Edit}
+      />
+      <Vector3Input
+        onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
+        header="Viewport Position"
+        value={zonePosition as [number, number, number]}
+        disabled={!Edit}
+      />
+
      {Edit && (
        <div className="button-save" onClick={handleSetView}>
          Set View
@@ -37,3 +70,4 @@ const ZoneProperties: React.FC = () => {
 };

 export default ZoneProperties;
+
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react'
+import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+import { AddIcon } from '../../../../icons/ExportCommonIcons'
+import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
+import useChartStore from '../../../../../store/useChartStore'
+import axios from 'axios'
+
+type Props = {}
+
+const LineGrapInput = (props: Props) => {
+    const [dropDowndata, setDropDownData] = useState({})
+    const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
+    const [selectedOption, setSelectedOption] = useState('1h')
+    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+    const handleSelectDuration = (option: string) => {
+        updateDuration(option); // Normalize for key matching
+    };
+
+    useEffect(() => {
+        const fetchZoneData = async () => {
+            try {
+                const response = await axios.get('http://192.168.0.192:5010/getinput');
+                if (response.status === 200) {
+                    console.log('dropdown data:', response.data);
+                    setDropDownData(response.data)
+                } else {
+                    console.log('Unexpected response:', response);
+                }
+            } catch (error) {
+                console.error('There was an error!', error);
+            }
+        };
+        fetchZoneData();
+    }, []);
+
+    useEffect(() => {
+        console.log(selections);
+    }, [selections])
+
+    const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
+        setSelections(prev => {
+            if (selectedData === null) {
+                const newSelections = { ...prev };
+                delete newSelections[inputKey];
+                return newSelections;
+            } else {
+                return {
+                    ...prev,
+                    [inputKey]: selectedData
+                };
+            }
+        });
+    };
+
+    interface Measurement {
+        name: string;
+        fields: string;
+      }
+      
+      interface InputData {
+        [key: string]: Measurement;
+      }
+      
+      const extractMeasurements = (input: InputData): Measurement[] => {
+        return Object.values(input);
+      };
+
+    useEffect(() => {
+        const measurementsData = extractMeasurements(selections);
+        setMeasurements(measurementsData);
+    }, [selections]);
+    
+
+    return (
+        <>
+            <div className="inputs-wrapper">
+                {[...Array(6)].map((_, index) => {
+                    const inputKey = `input${index + 1}`;
+                    return (
+                        <div key={index} className="datas">
+                            <div className="datas__label">Input {index + 1}</div>
+                            <div className="datas__class">
+                                <MultiLevelDropdown
+                                    data={dropDowndata}
+                                    onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                                    onUnselect={() => handleSelect(inputKey, null)}
+                                    selectedValue={selections[inputKey]}
+                                />
+                                <div className="icon">
+                                    <AddIcon />
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            <div>
+                <div className="datas">
+                    <div className="datas__label">duration</div>
+                    <div className="datas__class">
+                    <RegularDropDown
+                        header={duration}
+                        options={["1h", "2h", "12h"]}
+                        onSelect={handleSelectDuration}
+                        search={false}
+                    />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default LineGrapInput
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+import { AddIcon } from '../../../../icons/ExportCommonIcons'
+import axios from 'axios'
+
+type Props = {}
+
+const PieChartInput = (props: Props) => {
+    const [dropDowndata, setDropDownData] = useState({})
+    const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
+
+    useEffect(() => {
+        const fetchZoneData = async () => {
+            try {
+                const response = await axios.get('http://192.168.0.192:5010/getinput');
+                if (response.status === 200) {
+                    console.log('dropdown data:', response.data);
+                    setDropDownData(response.data)
+                } else {
+                    console.log('Unexpected response:', response);
+                }
+            } catch (error) {
+                console.error('There was an error!', error);
+            }
+        };
+        fetchZoneData();
+    }, []);
+
+    useEffect(() => {console.log(selections);
+    },[selections])
+
+    const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
+        setSelections(prev => {
+            if (selectedData === null) {
+                const newSelections = {...prev};
+                delete newSelections[inputKey];
+                return newSelections;
+            } else {
+                return {
+                    ...prev,
+                    [inputKey]: selectedData
+                };
+            }
+        });
+    };
+
+    return (
+        <>
+        <div className="inputs-wrapper">
+            {[...Array(3)].map((_, index) => {
+                const inputKey = `input${index+1}`;
+                return (
+                    <div key={index} className="datas">
+                        <div className="datas__label">Input {index+1}</div>
+                        <div className="datas__class">
+                            <MultiLevelDropdown 
+                                data={dropDowndata} 
+                                onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                                onUnselect={() => handleSelect(inputKey, null)}
+                                selectedValue={selections[inputKey]}
+                            />
+                            <div className="icon">
+                                <AddIcon />
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+        <div>
+            
+        </div>
+        </>
+    )
+}
+
+export default PieChartInput
--- a/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/data/Data.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+import LineGrapInput from "../IotInputCards/LineGrapInput";

 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -123,41 +124,10 @@ const Data = () => {
        <div className="sideBarHeader">{selectedChartId?.title}</div>
      )}
      {/* Render groups dynamically */}
-      {chartDataGroups[selectedChartId?.id]?.map((group) => (
-        <div key={group.id} className="inputs-wrapper">
-          {group.children.map((child, index) => (
-            <div key={child.id} className="datas">
-              <div className="datas__label">Input {index + 1}</div>
-              <div className="datas__class">
-                <MultiLevelDropDown data={DATA_STRUCTURE} />
-                {/* Add Icon */}
-                {group.children.length < 7 && (
-                  <div
-                    className="icon"
-                    onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
-                  >
-                    <AddIcon />
-                  </div>
-                )}
-                {/* Remove Icon */}
-
-                <span
-                  className={`datas__separator ${
-                    group.children.length > 1 ? "" : "disable"
-                  }`}
-                  onClick={(e) => {
-                    e.stopPropagation(); // Prevent event bubbling
-                    removeChild(group.id, child.id); // Pass groupId and childId to removeChild
-                  }}
-                >
-                  <RemoveIcon />
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
-
+      {
+        chartDataGroups[selectedChartId?.id] && <LineGrapInput />
+      }
+      
      {/* Info Box */}
      <div className="infoBox">
        <span className="infoIcon">i</span>
@@ -173,3 +143,40 @@ const Data = () => {
 };

 export default Data;
+
+
+
+// {chartDataGroups[selectedChartId?.id]?.map((group) => (
+//   <div key={group.id} className="inputs-wrapper">
+//     {group.children.map((child, index) => (
+//       <div key={child.id} className="datas">
+//         <div className="datas__label">Input {index + 1}</div>
+//         <div className="datas__class">
+//           <MultiLevelDropDown data={DATA_STRUCTURE} />
+//           {/* Add Icon */}
+//           {group.children.length < 7 && (
+//             <div
+//               className="icon"
+//               onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
+//             >
+//               <AddIcon />
+//             </div>
+//           )}
+//           {/* Remove Icon */}
+
+//           <span
+//             className={`datas__separator ${
+//               group.children.length > 1 ? "" : "disable"
+//             }`}
+//             onClick={(e) => {
+//               e.stopPropagation(); // Prevent event bubbling
+//               removeChild(group.id, child.id); // Pass groupId and childId to removeChild
+//             }}
+//           >
+//             <RemoveIcon />
+//           </span>
+//         </div>
+//       </div>
+//     ))}
+//   </div>
+// ))}