Feat/flightplan rotation (#400)

* feat: implement api to save rotated flight plan

* refactor: remove type from flightPlan mutation

* refactor: update condition to show update image button

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx

@@ -291,42 +291,43 @@ const DescriptionBox = () => {
               </Button>
             </div>
           )}
-          {taskAssetsInformation?.state === 'IMAGE_PROCESSING_FAILED' && (
-            <div className="naxatw-flex naxatw-flex-col naxatw-gap-1 naxatw-pb-4">
-              <Label>
-                <p className="naxatw-text-[0.875rem] naxatw-font-semibold naxatw-leading-normal naxatw-tracking-[0.0175rem] naxatw-text-[#D73F3F]">
-                  Upload Images
+          {taskAssetsInformation?.state === 'IMAGE_PROCESSING_FAILED' ||
+            (taskAssetsInformation?.state === 'IMAGE_UPLOADED' && (
+              <div className="naxatw-flex naxatw-flex-col naxatw-gap-1 naxatw-pb-4">
+                <Label>
+                  <p className="naxatw-text-[0.875rem] naxatw-font-semibold naxatw-leading-normal naxatw-tracking-[0.0175rem] naxatw-text-[#D73F3F]">
+                    Upload Images
+                  </p>
+                </Label>
+                <SwitchTab
+                  options={[
+                    {
+                      name: 'image-upload-for',
+                      value: 'add',
+                      label: 'Add to existing',
+                    },
+                    {
+                      name: 'image-upload-for',
+                      value: 'replace',
+                      label: 'Replace existing',
+                    },
+                  ]}
+                  valueKey="value"
+                  selectedValue={uploadedImageType}
+                  activeClassName="naxatw-bg-red naxatw-text-white"
+                  onChange={(selected: Record<string, any>) => {
+                    dispatch(setUploadedImagesType(selected.value));
+                  }}
+                />
+                <p className="naxatw-px-1 naxatw-py-1 naxatw-text-xs">
+                  Note:{' '}
+                  {uploadedImageType === 'add'
+                    ? 'Uploaded images will be added with the existing images.'
+                    : 'Uploaded images will be replaced with all the existing images and starts processing.'}
                 </p>
-              </Label>
-              <SwitchTab
-                options={[
-                  {
-                    name: 'image-upload-for',
-                    value: 'add',
-                    label: 'Add to existing',
-                  },
-                  {
-                    name: 'image-upload-for',
-                    value: 'replace',
-                    label: 'Replace existing',
-                  },
-                ]}
-                valueKey="value"
-                selectedValue={uploadedImageType}
-                activeClassName="naxatw-bg-red naxatw-text-white"
-                onChange={(selected: Record<string, any>) => {
-                  dispatch(setUploadedImagesType(selected.value));
-                }}
-              />
-              <p className="naxatw-px-1 naxatw-py-1 naxatw-text-xs">
-                Note:{' '}
-                {uploadedImageType === 'add'
-                  ? 'Uploaded images will be added with the existing images.'
-                  : 'Uploaded images will be replaced with all the existing images and starts processing.'}
-              </p>
-              <UploadsBox label="" />
-            </div>
-          )}
+                <UploadsBox label="" />
+              </div>
+            ))}
         </div>
       )}
     </>

src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx

@@ -16,7 +16,7 @@ import LocateUser from '@Components/common/MapLibreComponents/LocateUser';
 import MapContainer from '@Components/common/MapLibreComponents/MapContainer';
 import { GeojsonType } from '@Components/common/MapLibreComponents/types';
 import { Button } from '@Components/RadixComponents/Button';
-import { postTaskWaypoint } from '@Services/tasks';
+import { postRotatedTaskWayPoint, postTaskWaypoint } from '@Services/tasks';
 import AsyncPopup from '@Components/common/MapLibreComponents/NewAsyncPopup';
 import { toggleModal } from '@Store/actions/common';
 import {
@@ -480,6 +480,31 @@ const MapSection = ({ className }: { className?: string }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dragging, isMapLoaded, map]);
 
+  const { mutate: postRotatedFlightPlan, isLoading: flighplanIsUpdating } =
+    useMutation({
+      mutationFn: postRotatedTaskWayPoint,
+      onSuccess: () => {
+        toast.success('Flight plan rotated successfully');
+        queryClient.invalidateQueries(['task-waypoints']);
+      },
+      onError: (err: any) => {
+        toast.error(err?.response?.data?.detail || err.message);
+      },
+    });
+
+  function handeSaveRotatedFlightPlan() {
+    if (!map || !isMapLoaded) return;
+    const pointsSource = map.getSource('waypoint-points');
+
+    if (pointsSource && pointsSource instanceof GeoJSONSource) {
+      const pointsData = pointsSource?._data;
+      postRotatedFlightPlan({
+        taskId,
+        data: JSON.stringify(pointsData),
+      });
+    }
+  }
+
   return (
     <>
       <div
@@ -634,14 +659,17 @@ const MapSection = ({ className }: { className?: string }) => {
                 withLoader
                 leftIcon="save"
                 className="naxatw-w-[10.8rem] naxatw-bg-red"
+                isLoading={flighplanIsUpdating}
+                disabled={rotationAngle === 0}
+                onClick={() => handeSaveRotatedFlightPlan()}
               >
                 <FlexColumn className="naxatw-gap-1">
                   <p className="naxatw-leading-3 naxatw-tracking-wide">
                     Save Rotated Flight Plan
                   </p>
                   {/* <p className="naxatw-font-normal naxatw-leading-3">
-                    Rotated: {rotationAngle.toFixed(2)}°
-                  </p> */}
+                  Rotated: {rotationAngle.toFixed(2)}°
+                </p> */}
                 </FlexColumn>
               </Button>
             </div>

src/frontend/src/constants/createProject.tsx

@@ -321,4 +321,3 @@ export const demFileOptions = [
   },
   { name: 'Upload DEM File', label: 'Upload DEM File', value: 'manual' },
 ];
-

src/frontend/src/services/tasks.ts

@@ -23,3 +23,10 @@ export const getTaskAssetsInfo = (projectId: string, taskId: string) =>
 
 export const postProcessImagery = (projectId: string, taskId: string) =>
   authenticated(api).post(`/projects/process_imagery/${projectId}/${taskId}/`);
+
+export const postRotatedTaskWayPoint = (payload: Record<string, any>) => {
+  const { taskId, data } = payload;
+  return authenticated(api).post(`/waypoint/${taskId}/generate-kmz/`, data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};