Feat project details map component

src/frontend/src/components/GenerateMbTiles.jsx

@@ -21,7 +21,6 @@ const GenerateMbTiles = ({ setToggleGenerateModal, toggleGenerateModal, projectI
     border: '1px solid ',
     padding: '16px 32px 24px 32px',
   });
-  console.log(projectInfo, 'projectInfo');
   const downloadMbTiles = (tileId) => {
     dispatch(DownloadTile(`${import.meta.env.VITE_API_URL}/projects/download_tiles/?tile_id=${tileId}`, projectInfo));
   };

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js

@@ -7,8 +7,8 @@ import LayerTile from 'ol/layer/Tile';
 import SourceOSM from 'ol/source/OSM';
 import LayerSwitcher from 'ol-layerswitcher';
 import React, { useEffect } from 'react';
-
 import { XYZ } from 'ol/source';
+import { useLocation } from 'react-router-dom';
 
 // const mapboxOutdoors = new MapboxVector({
 //   styleUrl: 'mapbox://styles/geovation/ckpicg3of094w17nyqyd2ziie',
@@ -147,6 +147,33 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
     };
   }, [map, visible]);
 
+  const location = useLocation();
+  if (location.pathname.includes('project_details')) {
+    const olZoom = document.querySelector('.ol-zoom');
+    const layerSwitcher = document.querySelector('.layer-switcher');
+
+    if (olZoom) {
+      olZoom.style.display = 'none';
+    }
+
+    if (layerSwitcher) {
+      layerSwitcher.style.right = '19px';
+      layerSwitcher.style.top = '250px';
+      layerSwitcher.style.zIndex = '1000';
+
+      const layerSwitcherButton = layerSwitcher.querySelector('button');
+      if (layerSwitcherButton) {
+        layerSwitcherButton.style.width = '40px';
+        layerSwitcherButton.style.height = '40px';
+      }
+
+      layerSwitcher.style.backgroundColor = 'white';
+      layerSwitcher.style.display = 'flex';
+      layerSwitcher.style.justifyContent = 'center';
+      layerSwitcher.style.alignItems = 'center';
+    }
+  }
+
   return null;
 };
 

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js

@@ -47,6 +47,8 @@ const VectorLayer = ({
   setStyle,
   onModify,
   onDraw,
+  getTaskStatusStyle,
+  layerProperties,
 }) => {
   const [vectorLayer, setVectorLayer] = useState(null);
 
@@ -157,9 +159,8 @@ const VectorLayer = ({
       // Perform an action if a feature is found
       if (feature) {
         // Do something with the feature
-        console.log('Clicked feature:', feature.getProperties());
         // dispatch()
-        mapOnClick(feature.getProperties());
+        mapOnClick(feature.getProperties(), feature);
       }
     });
     setVectorLayer(vectorLyr);
@@ -183,6 +184,11 @@ const VectorLayer = ({
     vectorLayer.setStyle(setStyle);
   }, [map, setStyle, vectorLayer, visibleOnMap]);
 
+  useEffect(() => {
+    if (!map || !vectorLayer || !getTaskStatusStyle) return;
+    vectorLayer.setStyle((feature) => getTaskStatusStyle(feature));
+  }, [map, vectorLayer, getTaskStatusStyle]);
+
   useEffect(() => {
     if (!vectorLayer || !style.visibleOnMap) return;
     vectorLayer.setStyle((feature, resolution) => getStyles({ style, feature, resolution }));
@@ -209,6 +215,11 @@ const VectorLayer = ({
     });
   }, [vectorLayer, properties]);
 
+  useEffect(() => {
+    if (!map || !vectorLayer || !layerProperties) return;
+    vectorLayer.setProperties(layerProperties);
+  }, [map, vectorLayer, layerProperties]);
+
   // style on hover
   useEffect(() => {
     if (!map) return null;

src/frontend/src/components/MapLegends.jsx

@@ -89,8 +89,8 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
     //     );
     //   })}
     // </CoreModules.Stack>
-    <div>
-      <div className="fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4">
+    <div className="fmtm-py-0 sm:fmtm-py-3">
+      <div className="sm:fmtm-hidden fmtm-flex fmtm-gap-3 fmtm-border-b-[1px] fmtm-pb-2 fmtm-mb-4">
         <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '35px' }} />
         <p className="fmtm-text-2xl">Map Legend</p>
       </div>

src/frontend/src/components/ProjectDetails/MapControlComponent.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import AssetModules from '../../shared/AssetModules';
+import { transform } from 'ol/proj';
+import * as ol from 'ol';
+import { Point } from 'ol/geom';
+import Vector from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { Style } from 'ol/style';
+import { Icon } from 'ol/style';
+import LocationImage from '../../assets/images/location.png';
+import VectorLayer from 'ol/layer/Vector';
+
+const MapControlComponent = ({ map }) => {
+  const btnList = [
+    {
+      id: 'add',
+      icon: <AssetModules.AddIcon />,
+    },
+    {
+      id: 'minus',
+      icon: <AssetModules.RemoveIcon />,
+    },
+    {
+      id: 'currentLocation',
+      icon: <AssetModules.MyLocationIcon />,
+    },
+    {
+      id: 'taskBoundries',
+      icon: <AssetModules.CropFreeIcon />,
+    },
+  ];
+  const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false);
+  const [currentLocLayer, setCurrentLocLayer] = useState(null);
+  useEffect(() => {
+    if (!map) return;
+    if (!currentLocLayer) return;
+    map.addLayer(currentLocLayer);
+    map.getView().fit(currentLocLayer.getSource().getExtent(), {
+      maxZoom: 18,
+      duration: 500,
+    });
+    return () => {
+      map.removeLayer(currentLocLayer);
+    };
+  }, [map, currentLocLayer]);
+  const handleOnClick = (btnId) => {
+    if (btnId === 'add') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom + 1);
+    } else if (btnId === 'minus') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom - 1);
+    } else if (btnId === 'currentLocation') {
+      setToggleCurrentLoc(!toggleCurrentLoc);
+      const sourceProjection = 'EPSG:4326'; // The current projection of the coordinates
+      const targetProjection = 'EPSG:3857'; // The desired projection
+      var markerStyle = new Style({
+        image: new Icon({
+          src: LocationImage, // Path to your marker icon image
+          anchor: [0.5, 1], // Anchor point of the marker icon (center bottom)
+          scale: 2, // Scale factor for the marker icon
+        }),
+      });
+      if ('geolocation' in navigator) {
+        if (!toggleCurrentLoc) {
+          navigator.geolocation.getCurrentPosition((position) => {
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+            const convertedCoordinates = transform([lng, lat], sourceProjection, targetProjection);
+            const positionFeature = new ol.Feature(new Point(convertedCoordinates));
+            const positionLayer = new Vector({
+              source: new VectorSource({
+                features: [positionFeature],
+              }),
+            });
+            positionFeature.setStyle(markerStyle);
+            setCurrentLocLayer(positionLayer);
+          });
+        } else {
+          setCurrentLocLayer(null);
+        }
+      }
+    } else if (btnId === 'taskBoundries') {
+      const layers = map.getAllLayers();
+      let extent;
+      layers.map((layer) => {
+        if (layer instanceof VectorLayer) {
+          const layerName = layer.getProperties().name;
+          if (layerName === 'project-area') {
+            extent = layer.getSource().getExtent();
+          }
+        }
+      });
+      map.getView().fit(extent, {
+        padding: [10, 10, 10, 10],
+      });
+    }
+  };
+
+  return (
+    <div className="fmtm-absolute fmtm-top-[20px] fmtm-right-5 fmtm-z-[99] fmtm-flex fmtm-flex-col fmtm-gap-4">
+      {btnList.map((btn) => (
+        <div key={btn.id}>
+          <div
+            className="fmtm-bg-white fmtm-rounded-full fmtm-p-2 hover:fmtm-bg-gray-100 fmtm-cursor-pointer fmtm-duration-300"
+            onClick={() => handleOnClick(btn.id)}
+          >
+            {btn.icon}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MapControlComponent;

src/frontend/src/components/ProjectDetails/MobileFooter.tsx

@@ -91,7 +91,7 @@ const MobileFooter = () => {
     );
   };
   return (
-    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px]">
+    <div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px] fmtm-z-[10001]">
       <div
         className={`fmtm-w-full fmtm-grid fmtm-grid-cols-5 fmtm-bg-white  fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
       >

src/frontend/src/components/ProjectDetails/TaskSectionPopup.tsx

@@ -9,7 +9,7 @@ const TaskSectionPopup = ({ body }) => {
 
   return (
     <div
-      className={`fmtm-z-[3000]  fmtm-duration-1000  ${
+      className={`fmtm-duration-1000 fmtm-z-[10002] ${
         taskModalStatus
           ? 'fmtm-bottom-0 fmtm-right-0 md:fmtm-bottom-[calc(20vh)] fmtm-w-[100vw] md:fmtm-w-[50vw] md:fmtm-max-w-[25rem]'
           : 'fmtm-top-[calc(100vh)] md:fmtm-top-[calc(50vh)] md:fmtm-left-[calc(100vw)] fmtm-w-[100vw]'

src/frontend/src/components/ProjectInfo/ProjectInfomap.jsx

@@ -203,7 +203,7 @@ const ProjectInfomap = () => {
     );
   }, [selectedTask]);
 
-  const taskOnSelect = (properties) => {
+  const taskOnSelect = (properties, feature) => {
     dispatch(CoreModules.TaskActions.SetSelectedTask(properties.uid));
   };
 

src/frontend/src/components/TasksLayer.jsx

@@ -35,8 +35,6 @@ const TasksLayer = (map, view, feature) => {
             properties: { centroid: task.bbox },
           });
         });
-        console.log(geojsonObject, 'geojsonObject');
-        console.log(state.projectTaskBoundries, 'projectTaskBoundries');
         const vectorSource = new VectorSource({
           features: new GeoJSON().readFeatures(geojsonObject, {
             featureProjection: get('EPSG:3857'),

src/frontend/src/components/common/Accordion.tsx

@@ -32,7 +32,7 @@ export default function Accordion({
         <div
           className={`fmtm-flex fmtm-items-center fmtm-justify-between
             fmtm-w-full fmtm-font-bold fmtm-gap-3 fmtm-cursor-pointer fmtm-text-2xl fmtm-py-2  fmtm-border-[#929DB3] ${
-              collapsed ? 'fmtm-border-b-[1px]' : 'fmtm-border-b-[2px]'
+              collapsed ? 'fmtm-border-b-[0px]' : 'fmtm-border-b-[2px]'
             }`}
           onClick={() => {
             if (disableHeaderClickToggle) return;

src/frontend/src/components/common/BottomSheet.tsx

@@ -71,7 +71,7 @@ const BottomSheet = ({ body, onClose }) => {
   }, [currSheetHeight]);
 
   return (
-    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden">
+    <div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden fmtm-z-[10000]">
       <div
         className={`bottom-sheet fmtm-fixed fmtm-w-full fmtm-left-0 fmtm-bottom-0 fmtm-flex fmtm-items-center fmtm-flex-col fmtm-justify-end fmtm-duration-100 fmtm-ease-linear ${
           !show ? 'fmtm-opacity-0 fmtm-pointer-events-none' : 'fmtm-opacity-100 fmtm-pointer-events-auto'

src/frontend/src/routes.jsx

@@ -18,6 +18,7 @@ import CreateNewProject from './views/CreateNewProject';
 import ProjectDetails from './views/ProjectDetails';
 import UnderConstruction from './views/UnderConstruction';
 import ErrorBoundary from './views/ErrorBoundary';
+import NewProjectDetails from './views/NewProjectDetails';
 
 // const ProjectDetails = React.lazy(() => import('./views/ProjectDetails'));
 const Submissions = React.lazy(() => import('./views/Submissions'));
@@ -120,13 +121,25 @@ const routes = createBrowserRouter([
         ),
       },
 
+      // {
+      //   path: '/project_details/:id',
+      //   element: (
+      //     <ProtectedRoute>
+      //       <Suspense fallback={<div>Loading...</div>}>
+      //         <ErrorBoundary>
+      //           <ProjectDetails />
+      //         </ErrorBoundary>
+      //       </Suspense>
+      //     </ProtectedRoute>
+      //   ),
+      // },
       {
         path: '/project_details/:id',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>
               <ErrorBoundary>
-                <ProjectDetails />
+                <NewProjectDetails />
               </ErrorBoundary>
             </Suspense>
           </ProtectedRoute>

src/frontend/src/shared/AssetModules.js

@@ -46,6 +46,7 @@ import {
   Info as InfoIcon,
   MoreVert as MoreVertIcon,
   LocationOn as LocationOnIcon,
+  CropFree as CropFreeIcon,
   LegendToggle as LegendToggleIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
@@ -103,5 +104,6 @@ export default {
   InfoIcon,
   MoreVertIcon,
   LocationOnIcon,
+  CropFreeIcon,
   LegendToggleIcon,
 };