diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx index 5af48ae3..b30e3f82 100644 --- a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx +++ b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx @@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom'; import { motion } from 'framer-motion'; import { Button } from '@Components/RadixComponents/Button'; import Tab from '@Components/common/Tabs'; -import { useGetIndividualTaskQuery } from '@Api/tasks'; +import { useGetIndividualTaskQuery, useGetTaskWaypointQuery } from '@Api/tasks'; import { useTypedDispatch, useTypedSelector } from '@Store/hooks'; import { setSecondPageState } from '@Store/actions/droneOperatorTask'; import hasErrorBoundary from '@Utils/hasErrorBoundary'; @@ -23,6 +23,16 @@ const DroneOperatorDescriptionBox = () => { const { data: taskDescription }: Record = useGetIndividualTaskQuery(taskId as string); + const { data: taskWayPoints }: any = useGetTaskWaypointQuery( + projectId as string, + taskId as string, + { + select: (data: any) => { + return data.data.features; + }, + }, + ); + useEffect(() => { setAnimated(true); setTimeout(() => { @@ -110,6 +120,25 @@ const DroneOperatorDescriptionBox = () => { ); }; + const downloadGeojson = () => { + if (!taskWayPoints) return; + const waypointGeojson = { + type: 'FeatureCollection', + features: taskWayPoints, + }; + const fileBlob = new Blob([JSON.stringify(waypointGeojson)], { + type: 'application/json', + }); + const url = window.URL.createObjectURL(fileBlob); + const link = document.createElement('a'); + link.href = url; + link.download = 'waypoint.geojson'; + document.body.appendChild(link); + link.click(); + link.remove(); + window.URL.revokeObjectURL(url); + }; + return ( <>
@@ -117,15 +146,26 @@ const DroneOperatorDescriptionBox = () => {

Task #{taskDescription?.project_task_index}

- +
+ + +
{ diff --git a/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx b/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx index 5774e89b..0c4be1a6 100644 --- a/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx +++ b/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx @@ -60,7 +60,7 @@ export default function VectorLayerWithCluster({ filter: ['!', ['has', 'point_count']], paint: { 'circle-color': '#11b4da', - 'circle-radius': 6, + 'circle-radius': 8, 'circle-stroke-width': 1, 'circle-stroke-color': '#fff', }, diff --git a/src/frontend/src/components/Projects/MapSection/index.tsx b/src/frontend/src/components/Projects/MapSection/index.tsx index b3f67da3..559d84cd 100644 --- a/src/frontend/src/components/Projects/MapSection/index.tsx +++ b/src/frontend/src/components/Projects/MapSection/index.tsx @@ -1,17 +1,27 @@ +import { useNavigate } from 'react-router-dom'; import { useMapLibreGLMap } from '@Components/common/MapLibreComponents'; import MapContainer from '@Components/common/MapLibreComponents/MapContainer'; import BaseLayerSwitcher from '@Components/common/MapLibreComponents/BaseLayerSwitcher'; import { useGetProjectsListQuery } from '@Api/projects'; import hasErrorBoundary from '@Utils/hasErrorBoundary'; import centroid from '@turf/centroid'; +import getBbox from '@turf/bbox'; +import { useCallback, useEffect, useState } from 'react'; +import { FeatureCollection } from 'geojson'; +import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup'; +import { LngLatBoundsLike, Map } from 'maplibre-gl'; import VectorLayerWithCluster from './VectorLayerWithCluster'; const ProjectsMapSection = () => { + const [projectProperties, setProjectProperties] = useState< + Record + >({}); + const navigate = useNavigate(); const { map, isMapLoaded } = useMapLibreGLMap({ containerId: 'dashboard-map', mapOptions: { - zoom: 5, - center: [84.124, 28.3949], + zoom: 0, + center: [0, 0], maxZoom: 19, }, disableRotation: true, @@ -23,7 +33,17 @@ const ProjectsMapSection = () => { (acc: Record, current: Record) => { return { ...acc, - features: [...acc.features, centroid(current.outline)], + features: [ + ...acc.features, + { + ...centroid(current.outline), + properties: { + id: current?.id, + name: current?.name, + slug: current?.slug, + }, + }, + ], }; }, { @@ -35,11 +55,19 @@ const ProjectsMapSection = () => { }, }); - // useEffect(() => { - // if (!projectsList) return; - // const bbox = getBbox(projectsList as FeatureCollection); - // map?.fitBounds(bbox as LngLatBoundsLike, { padding: 30 }); - // }, [projectsList, map]); + useEffect(() => { + if (!projectsList) return; + const bbox = getBbox(projectsList as FeatureCollection); + map?.fitBounds(bbox as LngLatBoundsLike, { padding: 100 }); + }, [projectsList, map]); + + const getPopupUI = useCallback(() => { + return ( +
+

{projectProperties?.name}

+
+ ); + }, [projectProperties]); return ( { geojson={projectsList} /> - {/* ) => + feature?.layer?.id === 'unclustered-point' + } + popupUI={getPopupUI} + fetchPopupData={(properties: Record) => { + setProjectProperties(properties); }} - /> */} + buttonText="Go To Project" + handleBtnClick={() => navigate(`./${projectProperties?.id}`)} + getCoordOnProperties + /> ); }; diff --git a/src/frontend/src/components/Projects/ProjectCard/index.tsx b/src/frontend/src/components/Projects/ProjectCard/index.tsx index 1e67f1e4..57019075 100644 --- a/src/frontend/src/components/Projects/ProjectCard/index.tsx +++ b/src/frontend/src/components/Projects/ProjectCard/index.tsx @@ -24,7 +24,7 @@ export default function ProjectCard({

{imageUrl ? ( diff --git a/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx b/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx index 32f71cc8..dcbe178b 100644 --- a/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx +++ b/src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx @@ -67,13 +67,13 @@ export default function BasicDetails({ formProps }: { formProps: any }) {

- + /> */} {
{isLoading ? ( <> - {Array.from({ length: 8 }, (_, index) => ( + {Array.from({ length: 6 }, (_, index) => ( ))} diff --git a/src/frontend/src/views/UserProfile/index.tsx b/src/frontend/src/views/UserProfile/index.tsx index 880fcc6c..207efd5f 100644 --- a/src/frontend/src/views/UserProfile/index.tsx +++ b/src/frontend/src/views/UserProfile/index.tsx @@ -55,20 +55,20 @@ const UserProfile = () => { const userProfileActiveTab = useTypedSelector( state => state.common.userProfileActiveTab, ); - const userProfile = getLocalStorageValue('userprofile'); const initialState = { name: userProfile?.name, - country: '', - city: null, + country: userProfile?.country || null, + city: userProfile?.city || null, password: null, confirm_password: null, - phone_number: null, + // country_code: userProfile?.country_code || null, + phone_number: userProfile?.phone_number || null, // for project creators - organization_name: null, - organization_address: null, - job_title: null, + organization_name: userProfile?.organization_name || null, + organization_address: userProfile?.organization_address || null, + job_title: userProfile?.job_title || null, // for drone operators notify_for_projects_within_km: null, experience_years: null, @@ -92,6 +92,7 @@ const UserProfile = () => { mutationFn: payloadDataObject => postUserProfile(payloadDataObject), onSuccess: () => { toast.success('UserProfile Updated Successfully'); + dispatch(setCommonState({ userProfileActiveTab: 1 })); navigate('/projects'); }, onError: err => { @@ -107,6 +108,7 @@ const UserProfile = () => { ); return; } + const finalFormData = isDroneOperator ? removeKeysFromObject(formData, projectCreatorKeys) : removeKeysFromObject(formData, droneOperatorKeys);