Merge remote-tracking branch 'origin/simulation-agv' into realTimeVisulization

2025-04-01 19:15:06 +05:30
parent 2adbd7af24 d2be2094eb
commit 721d3a3657
18 changed files with 583 additions and 228 deletions
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -9,13 +9,14 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
+import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/store";
 interface AssetProp {
  filename: string;
  thumbnail?: string;
  category: string;
  description?: string;
-  tags?: string;
+  tags: string;
  url?: String;
  uploadDate?: number;
  isArchieve?: boolean;
@@ -23,19 +24,58 @@ interface AssetProp {
  price?: number;
  CreatedBy?: String;
 }
+interface CategoryListProp {
+  assetImage?: string;
+  assetName?: string;
+  categoryImage: string;
+  category: string;
+}
 const Assets: React.FC = () => {
  const { setSelectedItem } = useSelectedItem();
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-  const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
+  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
+  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
+  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);

  const handleSearchChange = (value: string) => {
+    const searchTerm = value.toLowerCase();
    setSearchValue(value);
-    setSelectedCategory(null); // Reset selected category when search changes
-  };
+    if (searchTerm.trim() === "" && !selectedCategory) {
+      setCategoryAssets([]);
+      return;
+    }
+    const filteredModels = filtereredAssets?.filter((model) => {
+      if (!model?.tags || !model?.filename || !model?.category) return false;
+      if (searchTerm.startsWith(":") && searchTerm.length > 1) {
+        const tagSearchTerm = searchTerm.slice(1);
+        return model.tags.toLowerCase().includes(tagSearchTerm);
+      } else if (selectedCategory) {
+        return (
+          model.category
+            .toLowerCase()
+            .includes(selectedCategory.toLowerCase()) &&
+          model.filename.toLowerCase().includes(searchTerm)
+        );
+      } else {
+        return model.filename.toLowerCase().includes(searchTerm);
+      }
+    });

-  const categoryList = useMemo(
-    () => [
+    setCategoryAssets(filteredModels);
+  };
+  useEffect(() => {
+    const filteredAssets = async () => {
+      try {
+        const filt = await fetchAssets();
+        setFiltereredAssets(filt);
+      } catch {}
+    };
+    filteredAssets();
+  }, [categoryAssets]);
+
+  useEffect(() => {
+    setCategoryList([
      {
        assetName: "Doors",
        assetImage: "",
@@ -58,10 +98,8 @@ const Assets: React.FC = () => {
      { category: "Workstation", categoryImage: workStation },
      { category: "Machines", categoryImage: machines },
      { category: "Workers", categoryImage: worker },
-    ],
-    []
-  );
-
+    ]);
+  }, []);
  const fetchCategoryAssets = async (asset: any) => {
    setSelectedCategory(asset);
    if (asset === "Feneration") {
@@ -70,60 +108,93 @@ const Assets: React.FC = () => {
          filename: "arch",
          category: "Feneration",
          url: arch,
+          tags: "arch",
        },
        {
          filename: "door",
          category: "Feneration",
          url: door,
+          thumbnail: feneration,
+          tags: "door",
        },
        {
          filename: "window",
          category: "Feneration",
          url: window,
+          tags: "window",
        },
      ];
-      setFilteredAsset(localAssets);
+      setCategoryAssets(localAssets);
+      setFiltereredAssets(localAssets);
    } else {
      try {
        const res = await getCategoryAsset(asset);
-        setFilteredAsset(res || []); // Ensure it's always an array
-      } catch (error) { }
+        setCategoryAssets(res);
+        setFiltereredAssets(res);
+      } catch (error) {}
    }
  };
-
-  useEffect(() => { }, [filteredAsset]);
  return (
    <div className="assets-container">
      <Search onChange={handleSearchChange} />
      {searchValue ? (
-        <div className="searched-content">
-          <p>Results for "{searchValue}"</p>
+        <div className="assets-result">
+          <div className="assets-wrapper">
+            <div className="searched-content">
+              <p>Results for {searchValue}</p>
+            </div>
+          </div>
+          <div className="assets-container">
+            {categoryAssets &&
+              categoryAssets?.map((asset: any, index: number) => (
+                <div key={index} className="assets">
+                  <img
+                    src={asset?.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                  />
+
+                  <div className="asset-name">
+                    {asset.filename
+                      .split("_")
+                      .map(
+                        (word: any) =>
+                          word.charAt(0).toUpperCase() + word.slice(1)
+                      )
+                      .join(" ")}
+                  </div>
+                </div>
+              ))}
+          </div>
        </div>
      ) : selectedCategory ? (
        <div className="assets-wrapper">
-          {/* Back Button */}
          <div
            className="back-button"
            onClick={() => {
              setSelectedCategory(null);
-              setFilteredAsset([]);
+              setCategoryAssets([]);
            }}
          >
            ← Back
          </div>
          <h2>{selectedCategory}</h2>
          <div className="assets-container">
-            {filteredAsset &&
-              filteredAsset?.map((asset: any, index: number) => (
+            {categoryAssets &&
+              categoryAssets?.map((asset: any, index: number) => (
                <div key={index} className="assets">
-                  {asset?.thumbnail && (
-                    <img
-                      src={asset?.thumbnail}
-                      alt={asset.filename}
-                      className="asset-image"
-                      onPointerDown={() => setSelectedItem({ name: asset.filename, id: asset.modelfileID })}
-                    />
-                  )}
+                  <img
+                    src={asset?.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                    onPointerDown={() =>
+                      setSelectedItem({
+                        name: asset.filename,
+                        id: asset.modelfileID,
+                      })
+                    }
+                  />
+
                  <div className="asset-name">
                    {asset.filename
                      .split("_")
--- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
+++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
@@ -33,6 +33,7 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
              label={preset.inputs.label}
              min={0}
              max={0}
+              value={5}
            />
          );
        }
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
@@ -6,17 +6,20 @@ import LabeledButton from "../../../ui/inputs/LabledButton";
 import {
  useAzimuth,
  useElevation,
+  useLimitDistance,
  useRenderDistance,
  useResetCamera,
  useRoofVisibility,
  useSelectedWallItem,
  useShadows,
  useSocketStore,
+  useTileDistance,
  useToggleView,
  useWallVisibility,
 } from "../../../../store/store";
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
+import { validateBBox } from "@turf/helpers";
 const GlobalProperties: React.FC = () => {
  const { toggleView, setToggleView } = useToggleView();
  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -27,26 +30,95 @@ const GlobalProperties: React.FC = () => {
  const { elevation, setElevation } = useElevation();
  const { azimuth, setAzimuth } = useAzimuth();
  const { renderDistance, setRenderDistance } = useRenderDistance();
+  const { setPlaneValue, setGridValue, planeValue, gridValue } =
+    useTileDistance();
+  useEffect(() => {
+    console.log(gridValue, planeValue, "values");
+  }, [gridValue, planeValue]);
  const { socket } = useSocketStore();
-  const [limitDistance, setLimitDistance] = useState(false);
-  const [distance, setDistance] = useState<number>(30);
+  const { limitDistance, setLimitDistance } = useLimitDistance();
+  const [distance, setDistance] = useState<number>(40);
+  useEffect(() => {}, [limitDistance]);

  const [limitGridDistance, setLimitGridDistance] = useState(false);
-  const [gridDistance, setGridDistance] = useState<number>(5);
+  const [gridDistance, setGridDistance] = useState<number>(3);

-  function optimizeScene() {
+  const optimizeScene = async (value: any) => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      30,
+      true
+    );
+    setRenderDistance(30);
    setLimitDistance(true);
-    setDistance(30);
-  }
+  };
+  const limitRenderDistance = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    if (limitDistance) {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        75,
+        !limitDistance
+      );
+      setRenderDistance(75);
+    } else {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        renderDistance,
+        !limitDistance
+      );
+    }
+    setLimitDistance(!limitDistance);
+  };

  function updateDistance(value: number) {
    setDistance(value);
    setRenderDistance(value);
  }
-
  function updateGridDistance(value: number) {
    setGridDistance(value);
+    // setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
+    // setPlaneValue({ height: value * 100, width: value * 100 });
  }
+  function updatedGrid(value: number) {
+    console.log(" (value * 100) / 4 : ", (value * 100) / 4);
+    setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
+    setPlaneValue({ height: value * 100, width: value * 100 });
+  }
+
+  const updatedDist = async (value: number) => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+    setRenderDistance(value);
+    // setDistance(value);
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      value,
+      limitDistance
+    );
+  };
+
  // Function to toggle roof visibility
  const changeRoofVisibility = async () => {
    const email = localStorage.getItem("email");
@@ -58,7 +130,9 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      wallVisibility,
      !roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
    );
    //

@@ -85,7 +159,9 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      !wallVisibility,
      roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
    );
    //

@@ -112,7 +188,9 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      wallVisibility,
      roofVisibility,
-      !shadows
+      !shadows,
+      renderDistance,
+      limitDistance
    );
    //

@@ -184,18 +262,24 @@ const GlobalProperties: React.FC = () => {
        inputKey="4"
        label="Limit Render Distance"
        value={limitDistance}
-        onClick={() => {
-          setLimitDistance(!limitDistance);
+        // onClick={() => {
+        //   setLimitDistance(!limitDistance);
+        //   // setDistance(75);
+        //   // setRenderDistance(75);
+        // }}
+        onClick={async () => {
+          await limitRenderDistance(); // Call the function here
        }}
      />
      <InputRange
        label="Distance"
        disabled={!limitDistance}
-        value={distance}
-        key={"5"}
+        value={renderDistance}
        min={CONSTANTS.distanceConfig.minDistance}
        max={CONSTANTS.distanceConfig.maxDistance}
        onChange={(value: number) => updateDistance(value)}
+        onPointerUp={updatedDist}
+        key={"6"}
      />

      <div className="split"></div>
@@ -213,7 +297,10 @@ const GlobalProperties: React.FC = () => {
        disabled={!limitGridDistance}
        value={gridDistance}
        key={"7"}
+        min={1}
+        max={5}
        onChange={(value: number) => updateGridDistance(value)}
+        onPointerUp={updatedGrid}
      />
    </div>
  );