From 6ec6f015d587311f97b061d204c78502e25e1d6b Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 11:18:44 +0545 Subject: [PATCH 01/24] feat(project-description): round off area to 3 decimal place and use task index insted of task id while displaying on task list --- .../DescriptionSection/DescriptionBox/index.tsx | 2 +- .../IndividualProject/Contributions/TableSection/index.tsx | 2 +- .../IndividualProject/Tasks/TableSection/index.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx index 596fd294..bb39b42d 100644 --- a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx +++ b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx @@ -29,7 +29,7 @@ const DescriptionBox = () => { { name: 'Total task area', value: taskData?.task_area - ? `${taskData?.task_area} km²` + ? `${Number(taskData?.task_area)?.toFixed(3)} km²` : null, }, { diff --git a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx index 3a26db52..7279bbeb 100644 --- a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx @@ -28,7 +28,7 @@ export default function TableSection() { ...acc, { user: curr?.name || '-', - task_mapped: curr?.id, + task_mapped: `Task# ${curr?.project_task_index}`, task_state: curr?.state, }, ]; diff --git a/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx index 29a17fe5..f190e8ec 100644 --- a/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx @@ -12,7 +12,7 @@ const tasksDataColumns = [ accessorKey: 'flight_time', }, { - header: 'Task Area', + header: 'Task Area in km²', accessorKey: 'task_area', }, // { @@ -32,9 +32,9 @@ export default function TableSection() { return [ ...acc, { - id: curr?.id, + id: `Task# ${curr?.project_task_index}`, flight_time: curr?.flight_time || '-', - task_area: curr?.task_area, + task_area: Number(curr?.task_area)?.toFixed(3), // status: curr?.state, }, ]; From 0970fa5ab6caacf9032a4211913f0a0bdd598a94 Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 14:45:01 +0545 Subject: [PATCH 02/24] feat(individual-project): show project boundary on map --- .../IndividualProject/MapSection/index.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx index 357abb2e..1b3a233c 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx @@ -54,6 +54,7 @@ const MapSection = () => { state => state.project.selectedTaskId, ); const tasksData = useTypedSelector(state => state.project.tasksData); + const projectArea = useTypedSelector(state => state.project.projectArea); const { data: taskStates } = useGetTaskStatesQuery(id as string, { enabled: !!tasksData, @@ -152,6 +153,27 @@ const MapSection = () => { height: '100%', }} > + {projectArea && ( + + )} + {taskStatusObj && tasksData && tasksData?.map((task: Record) => { From c65079a81acb546a072401ed1c8f79cf17aef058 Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 16:04:07 +0545 Subject: [PATCH 03/24] feat: create Legend component --- src/frontend/src/assets/images/area-icon.png | Bin 0 -> 952 bytes .../IndividualProject/MapSection/Legend.tsx | 55 ++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 src/frontend/src/assets/images/area-icon.png create mode 100644 src/frontend/src/components/IndividualProject/MapSection/Legend.tsx diff --git a/src/frontend/src/assets/images/area-icon.png b/src/frontend/src/assets/images/area-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4ed9019b4e24dc54463aa938d977192b25823fd1 GIT binary patch literal 952 zcmV;p14sOcP)b0WNOL;!!QkmLLigCg3ojv^k{N2nTW?t&RAMt#L8g9jmC8pG%SVKoor@oVr&eq z&(6GdTS1#iVVL40Bk*W^93Gn{B=Aa*d~guH&dhkv#2}&?rBKuu#|H*nm_GdUBNzb^ zXd^WRS}%p70T@LmQHGMyilR`^suT)A?YcmuS}AOYV%<(*WYE4u;xk^8-AZ9p#SkpZ z0wtr9DU7NZIL-lZK2ME->1lYjveMBMMipmr&sBk{Ta$nL`;c2)bg!LQsE}cQZ*NzA z8(@zd9``SIyHDs0xf13*Q9qA>_D_B1_P%M)~LZy3ai5 z@Kn$|ErEg`+QKL=F~%}s-_x1ElZ6HMB&D9n;i`Ga;bG>934v`9mZ zDBq!hWQn6~PeFM-b`4ZjqbNfY4i8hu{@HM1StfU!Rn>g7j=+?sT7@i+?X1)iS9bUw aM9@9iIf*B { + const [showLegendItems, setShowLegendItems] = useState(false); + return ( +
+
+
Legend
+ setShowLegendItems(!showLegendItems)} + > + {showLegendItems ? 'expand_less' : 'expand_more'} + +
+ {showLegendItems && ( +
+
+
+
Finished Tasks
+
+
+
+
Requested Tasks
+
+
+
+ area-icon +
+
Locked Tasks
+
+
+
+
Remaining Task
+
+
+
+ area-icon +
+
Project Area
+
+
+
+
Unflyable Areas
+
+
+ )} +
+ ); +}; + +export default Legend; From d6c665f734fcdbeac3bfcbfbe605fe5d38b65d51 Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 16:04:39 +0545 Subject: [PATCH 04/24] feat(individual-project): add legend on map --- .../src/components/IndividualProject/MapSection/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx index 1b3a233c..d2a04950 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx @@ -23,6 +23,7 @@ import { postTaskStatus } from '@Services/project'; import { useMutation } from '@tanstack/react-query'; import { toast } from 'react-toastify'; import hasErrorBoundary from '@Utils/hasErrorBoundary'; +import Legend from './Legend'; const MapSection = () => { const { id } = useParams(); @@ -259,6 +260,7 @@ const MapSection = () => { : navigate(`/projects/${id}/tasks/${selectedTaskId}`) } /> + ); From d319c8db1a473855579429547b95c7fd5502035c Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 16:25:22 +0545 Subject: [PATCH 05/24] style(individual-project): increase project area line width and locked task opacity for better visualization --- .../src/components/IndividualProject/MapSection/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx index d2a04950..c8a4bef1 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx @@ -169,7 +169,7 @@ const MapSection = () => { type: 'line', paint: { 'line-color': '#D73F3F', - 'line-width': 1, + 'line-width': 2, }, }} /> @@ -193,7 +193,7 @@ const MapSection = () => { paint: { 'fill-color': '#98BBC8', 'fill-outline-color': '#484848', - 'fill-opacity': 0.6, + 'fill-opacity': 0.8, }, } : taskStatusObj?.[`${task?.id}`] === 'REQUEST_FOR_MAPPING' From 464237bef83915bd14d47d75e26c901617daa896 Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 16:28:20 +0545 Subject: [PATCH 06/24] feat(individual-project): show no-fly-zone on map --- .../IndividualProject/MapSection/Legend.tsx | 2 +- .../IndividualProject/MapSection/index.tsx | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx b/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx index 64b5dd01..3d875178 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx @@ -43,7 +43,7 @@ const Legend = () => {
Project Area
-
+
Unflyable Areas
diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx index c8a4bef1..0962aa4a 100644 --- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx +++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx @@ -175,6 +175,28 @@ const MapSection = () => { /> )} + {projectData?.no_fly_zones_geojson && ( + + )} + {taskStatusObj && tasksData && tasksData?.map((task: Record) => { From cfb19879506debdca53ed63725f43d43e35b53de Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 17:58:15 +0545 Subject: [PATCH 07/24] feat(project-creation): add measurementType state on redux slice --- src/frontend/src/store/slices/createproject.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/frontend/src/store/slices/createproject.ts b/src/frontend/src/store/slices/createproject.ts index 63023805..abf0f070 100644 --- a/src/frontend/src/store/slices/createproject.ts +++ b/src/frontend/src/store/slices/createproject.ts @@ -7,6 +7,7 @@ export interface CreateProjectState { projectId: number | null; activeStep: number; keyParamOption: 'basic' | 'advanced'; + measurementType: 'gsd' | 'altitude'; contributionsOption: 'public' | 'invite_with_email'; generateTaskOption: 'divide_hexagon' | 'divide_rectangle'; isNoflyzonePresent: 'yes' | 'no'; @@ -25,6 +26,7 @@ const initialState: CreateProjectState = { projectId: null, activeStep: 1, keyParamOption: 'basic', + measurementType: 'gsd', contributionsOption: 'public', generateTaskOption: 'divide_rectangle', isNoflyzonePresent: 'no', From fbed1674ee68451643a3ff6386a80dd5c214e79c Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 18:00:50 +0545 Subject: [PATCH 08/24] feat(project-creation): add option to input `GSD` or `altitude` on project creation --- .../CreateprojectLayout/index.tsx | 5 ++ .../FormContents/KeyParameters/index.tsx | 71 +++++++++++++++---- 2 files changed, 64 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx b/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx index 18f563a5..941950b0 100644 --- a/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx +++ b/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx @@ -77,6 +77,9 @@ const CreateprojectLayout = () => { const requireApprovalFromManagerForLocking = useTypedSelector( state => state.createproject.requireApprovalFromManagerForLocking, ); + const measurementType = useTypedSelector( + state => state.createproject.measurementType, + ); const initialState: FieldValues = { name: '', @@ -213,6 +216,8 @@ const CreateprojectLayout = () => { if (isNoflyzonePresent === 'no') delete refactoredData?.outline_no_fly_zones; delete refactoredData?.dem; + if (measurementType === 'gsd') delete refactoredData?.altitude_from_ground; + else delete refactoredData?.gsd_cm_px; // make form data with value JSON stringify to combine value on single json / form data with only 2 keys (backend didn't found project_info on non-stringified data) const formData = new FormData(); diff --git a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx index 167f2332..7acf9b15 100644 --- a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx +++ b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable camelcase */ import { useTypedDispatch, useTypedSelector } from '@Store/hooks'; import { FormControl, Label, Input } from '@Components/common/FormUI'; -// import RadioButton from '@Components/common/RadioButton'; +import RadioButton from '@Components/common/RadioButton'; import ErrorMessage from '@Components/common/FormUI/ErrorMessage'; import { UseFormPropsType } from '@Components/common/FormUI/types'; import { setCreateProjectState } from '@Store/actions/createproject'; @@ -32,15 +32,31 @@ const FinalOutputOptions = [ }, ]; +const measurementTypeOptions = [ + { + name: 'GSD', + value: 'gsd', + label: 'GSD', + }, + { + name: 'Altitude', + value: 'altitude', + label: 'Altitude', + }, +]; + const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => { const dispatch = useTypedDispatch(); - const { register, errors, watch, control } = formProps; + const { register, errors, watch, control, setValue } = formProps; const final_output = watch('final_output'); const keyParamOption = useTypedSelector( state => state.createproject.keyParamOption, ); + const measurementType = useTypedSelector( + state => state.createproject.measurementType, + ); const isTerrainFollow = useTypedSelector( state => state.createproject.isTerrainFollow, ); @@ -60,18 +76,49 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => { /> */} {keyParamOption === 'basic' ? ( <> - - - + + { + dispatch(setCreateProjectState({ measurementType: val })); + setValue('gsd_cm_px', ''); + setValue('altitude_from_ground', ''); + }} + value={measurementType} /> - + + {measurementType === 'gsd' ? ( + + + + + + ) : ( + + + + + + )} From aa82a1bd9b9cb44b803b93e23b63d6a6d5cc41a8 Mon Sep 17 00:00:00 2001 From: Sujit Date: Wed, 21 Aug 2024 18:04:47 +0545 Subject: [PATCH 09/24] refactor(project-creartion): move constant data to separate file --- .../FormContents/KeyParameters/index.tsx | 36 +++---------------- src/frontend/src/constants/createProject.tsx | 32 +++++++++++++++++ 2 files changed, 36 insertions(+), 32 deletions(-) diff --git a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx index 7acf9b15..ed1258b2 100644 --- a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx +++ b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx @@ -7,44 +7,16 @@ import { UseFormPropsType } from '@Components/common/FormUI/types'; import { setCreateProjectState } from '@Store/actions/createproject'; import hasErrorBoundary from '@Utils/hasErrorBoundary'; // import { terrainOptions } from '@Constants/createProject'; -import orthoPhotoIcon from '@Assets/images/ortho-photo-icon.svg'; -import _3DModal from '@Assets/images/3d-model-icon.svg'; -import DTMIcon from '@Assets/images/DTM-Icon.svg'; -import DSMIcon from '@Assets/images/DSM-icon.svg'; import { FlexRow } from '@Components/common/Layouts'; import Switch from '@Components/RadixComponents/Switch'; import FileUpload from '@Components/common/UploadArea'; +import { + FinalOutputOptions, + measurementTypeOptions, +} from '@Constants/createProject'; import { Controller } from 'react-hook-form'; import OutputOptions from './OutputOptions'; -const FinalOutputOptions = [ - { label: '2D Orthophoto', value: 'ORTHOPHOTO_2D', icon: orthoPhotoIcon }, - { label: '3D Model', value: 'ORTHOPHOTO_3D', icon: _3DModal }, - { - label: 'Digital Terrain Model (DTM)', - value: 'DIGITAL_TERRAIN_MODEL', - icon: DTMIcon, - }, - { - label: 'Digital Surface Model (DSM)', - value: 'DIGITAL_SURFACE_MODEL', - icon: DSMIcon, - }, -]; - -const measurementTypeOptions = [ - { - name: 'GSD', - value: 'gsd', - label: 'GSD', - }, - { - name: 'Altitude', - value: 'altitude', - label: 'Altitude', - }, -]; - const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => { const dispatch = useTypedDispatch(); diff --git a/src/frontend/src/constants/createProject.tsx b/src/frontend/src/constants/createProject.tsx index 62c8c7a2..69d07037 100644 --- a/src/frontend/src/constants/createProject.tsx +++ b/src/frontend/src/constants/createProject.tsx @@ -10,6 +10,10 @@ import { Contributions, GenerateTask, } from '@Components/CreateProject/DescriptionContents'; +import orthoPhotoIcon from '@Assets/images/ortho-photo-icon.svg'; +import _3DModal from '@Assets/images/3d-model-icon.svg'; +import DTMIcon from '@Assets/images/DTM-Icon.svg'; +import DSMIcon from '@Assets/images/DSM-icon.svg'; export type StepComponentMap = { [key: number]: React.FC; @@ -155,3 +159,31 @@ export const lockApprovalOptions = [ { name: 'Required', label: 'Required', value: 'required' }, { name: 'Not Required', label: 'Not Required', value: 'not_required' }, ]; + +export const FinalOutputOptions = [ + { label: '2D Orthophoto', value: 'ORTHOPHOTO_2D', icon: orthoPhotoIcon }, + { label: '3D Model', value: 'ORTHOPHOTO_3D', icon: _3DModal }, + { + label: 'Digital Terrain Model (DTM)', + value: 'DIGITAL_TERRAIN_MODEL', + icon: DTMIcon, + }, + { + label: 'Digital Surface Model (DSM)', + value: 'DIGITAL_SURFACE_MODEL', + icon: DSMIcon, + }, +]; + +export const measurementTypeOptions = [ + { + name: 'GSD', + value: 'gsd', + label: 'GSD', + }, + { + name: 'Altitude', + value: 'altitude', + label: 'Altitude', + }, +]; From 75ed675f73f17f4f0cc9254e3b4ee2b6973f7aea Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:01:18 +0545 Subject: [PATCH 10/24] feat: get coordinates on properties on map feature click --- .../MapLibreComponents/AsyncPopup/index.tsx | 20 ++++++++++++++----- .../common/MapLibreComponents/types/index.ts | 1 + 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx b/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx index e4e464da..e054dbb8 100644 --- a/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx +++ b/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx @@ -25,6 +25,7 @@ export default function AsyncPopup({ onClose, buttonText = 'View More', hideButton = false, + getCoordOnProperties = false, }: IAsyncPopup) { const [properties, setProperties] = useState | null>( null, @@ -39,14 +40,23 @@ export default function AsyncPopup({ const features = map.queryRenderedFeatures(e.point); const clickedFeature = features?.[0]; if (!clickedFeature) return; - setProperties({ - ...clickedFeature.properties, - layer: clickedFeature.source, - }); + setProperties( + getCoordOnProperties + ? { + ...clickedFeature.properties, + layer: clickedFeature.source, + coordinates: e.lngLat, + } + : { + ...clickedFeature.properties, + layer: clickedFeature.source, + }, + ); + popup.setLngLat(e.lngLat); } map.on('click', displayPopup); - }, [map]); + }, [map, getCoordOnProperties]); useEffect(() => { if (!map || !properties) return; diff --git a/src/frontend/src/components/common/MapLibreComponents/types/index.ts b/src/frontend/src/components/common/MapLibreComponents/types/index.ts index 80295ab4..b7bcbef4 100644 --- a/src/frontend/src/components/common/MapLibreComponents/types/index.ts +++ b/src/frontend/src/components/common/MapLibreComponents/types/index.ts @@ -80,6 +80,7 @@ export interface IAsyncPopup { onClose?: () => void; buttonText?: string; hideButton?: boolean; + getCoordOnProperties?: boolean; } export type DrawModeTypes = DrawMode | null | undefined; From 856b94a597f14288304fcfef570451c5c2a8f61c Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:04:53 +0545 Subject: [PATCH 11/24] style(project-creation): replace `-` with `:` --- .../CreateProject/FormContents/KeyParameters/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx index ed1258b2..a7203153 100644 --- a/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx +++ b/src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx @@ -107,7 +107,7 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => { -

Recommended - 75%

+

Recommended : 75%

 @@ -124,7 +124,7 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => { -

Recommended - 60%

+

Recommended : 60%

 From 12aa95953f18fc0d59b5e1b5447d4fa18fd615e5 Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:06:58 +0545 Subject: [PATCH 12/24] feat(task-description): show description on popup of waypoints point on click --- .../DroneOperatorTask/MapSection/index.tsx | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx index ae60a800..8523f335 100644 --- a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx +++ b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-array-index-key */ -import { useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { LngLatBoundsLike, Map } from 'maplibre-gl'; import { useParams } from 'react-router-dom'; import { FeatureCollection } from 'geojson'; @@ -14,9 +14,11 @@ import { GeojsonType } from '@Components/common/MapLibreComponents/types'; import right from '@Assets/images/rightArrow.png'; import marker from '@Assets/images/marker.png'; import hasErrorBoundary from '@Utils/hasErrorBoundary'; +import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup'; const MapSection = () => { const { projectId, taskId } = useParams(); + const [popupData, setPopupData] = useState>({}); const { map, isMapLoaded } = useMapLibreGLMap({ containerId: 'dashboard-map', mapOptions: { @@ -61,6 +63,25 @@ const MapSection = () => { map?.fitBounds(bbox as LngLatBoundsLike, { padding: 25 }); }, [map, taskWayPoints]); + const getPopupUI = useCallback(() => { + return ( +
+
+

{popupData?.index}

+

+ {popupData?.coordinates?.lat}, {popupData?.coordinates?.lng}{' '} +

+
+
+

angle: {popupData?.angle} degree

+

+ gimble angle: {popupData?.gimbal_angle} degree +

+
+
+ ); + }, [popupData]); + return ( <>
@@ -102,6 +123,7 @@ const MapSection = () => { id="waypoint-points" geojson={taskWayPoints?.geojsonListOfPoint as GeojsonType} visibleOnMap={!!taskWayPoints} + interactions={['feature']} layerOptions={{ type: 'circle', paint: { @@ -141,6 +163,17 @@ const MapSection = () => { /> )} + + ) => { + setPopupData(properties); + }} + hideButton + getCoordOnProperties + /> +
From 3104866205ae46c017e45179f50def82361d2d9b Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:23:37 +0545 Subject: [PATCH 13/24] feat(task-descripion): add altitude on waypoints point click popup --- .../components/DroneOperatorTask/MapSection/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx index 8523f335..47cb6611 100644 --- a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx +++ b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx @@ -73,10 +73,15 @@ const MapSection = () => {

-

angle: {popupData?.angle} degree

+

Angle: {popupData?.angle} degree

- gimble angle: {popupData?.gimbal_angle} degree + Gimble angle: {popupData?.gimbal_angle} degree

+ {popupData?.altitude && ( +

+ Altitude: {popupData?.altitude} meter +

+ )}
); From 9f2bedae9aedadf321b793245a5e3577e70320a3 Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:29:48 +0545 Subject: [PATCH 14/24] feat(dashboard): wrap requested task listing component with hasErrorboundary --- src/frontend/src/components/Dashboard/RequestLogs/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/Dashboard/RequestLogs/index.tsx b/src/frontend/src/components/Dashboard/RequestLogs/index.tsx index a2c98142..9d70e5a0 100644 --- a/src/frontend/src/components/Dashboard/RequestLogs/index.tsx +++ b/src/frontend/src/components/Dashboard/RequestLogs/index.tsx @@ -3,6 +3,7 @@ import { FlexColumn } from '@Components/common/Layouts'; import { Button } from '@Components/RadixComponents/Button'; import { postTaskStatus } from '@Services/project'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import hasErrorBoundary from '@Utils/hasErrorBoundary'; import { toast } from 'react-toastify'; const RequestLogs = () => { @@ -79,4 +80,4 @@ const RequestLogs = () => {
); }; -export default RequestLogs; +export default hasErrorBoundary(RequestLogs); From cc807fc6d89f8326e699d171b2403492e1898ef3 Mon Sep 17 00:00:00 2001 From: Sujit Date: Thu, 22 Aug 2024 10:47:14 +0545 Subject: [PATCH 15/24] feat(project-creation): make project description input a text area --- .../FormContents/BasicInformation/index.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/components/CreateProject/FormContents/BasicInformation/index.tsx b/src/frontend/src/components/CreateProject/FormContents/BasicInformation/index.tsx index 1b043dcc..84cce562 100644 --- a/src/frontend/src/components/CreateProject/FormContents/BasicInformation/index.tsx +++ b/src/frontend/src/components/CreateProject/FormContents/BasicInformation/index.tsx @@ -1,13 +1,14 @@ import { FormControl, Label, Input } from '@Components/common/FormUI'; import ErrorMessage from '@Components/common/FormUI/ErrorMessage'; import { UseFormPropsType } from '@Components/common/FormUI/types'; +import { Controller } from 'react-hook-form'; export default function BasicInformation({ formProps, }: { formProps: UseFormPropsType; }) { - const { register, errors } = formProps; + const { register, errors, control } = formProps; return (
@@ -23,14 +24,18 @@ export default function BasicInformation({ - - value.trim(), - })} + + ( +