Merge pull request #374 from hotosm/feat/drone-operator-image-upload-ui

Feat/drone operator image upload UI
hotosm · Dec 2, 2024 · 0a26cb1 · 0a26cb1
2 parents a65934e + c5b4b60
commit 0a26cb1
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 24 deletions.
diff --git a/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx b/src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx
@@ -45,18 +45,39 @@ const MapSection = ({
   );
   const noFlyZone = useTypedSelector(state => state.createproject.noFlyZone);
 
+  function filterDuplicateFeature(
+    featuresData: any[],
+    geojsonFeatureObject: Record<string, any>,
+  ) {
+    if (!geojsonFeatureObject) return [];
+    if (!featuresData) return [geojsonFeatureObject];
+    return featuresData.filter(
+      feature => feature.id !== geojsonFeatureObject.id,
+    );
+  }
+
   const handleDrawEnd = (geojson: GeojsonType | null) => {
     if (!geojson) return;
     if (drawProjectAreaEnable) {
       dispatch(setCreateProjectState({ drawnProjectArea: geojson }));
     } else {
+      // @ts-ignore
+      let combindFeatures = geojson?.features;
+      // @ts-ignore
+      if (drawnNoFlyZone?.features) {
+        combindFeatures = filterDuplicateFeature(
+          // @ts-ignore
+          drawnNoFlyZone?.features,
+          // @ts-ignore
+          geojson?.features[0],
+        );
+      }
       const collectiveGeojson: any = drawnNoFlyZone
         ? {
             // @ts-ignore
             ...drawnNoFlyZone,
             features: [
-              // @ts-ignore
-              ...(drawnNoFlyZone?.features || []),
+              ...(combindFeatures || []),
               // @ts-ignore
               ...(geojson?.features || []),
             ],

diff --git a/src/frontend/src/components/CreateProject/FormContents/DefineAOI/index.tsx b/src/frontend/src/components/CreateProject/FormContents/DefineAOI/index.tsx
@@ -241,7 +241,7 @@ const DefineAOI = ({ formProps }: { formProps: UseFormPropsType }) => {
                             data={value}
                             onChange={handleProjectAreaFileChange}
                             fileAccept=".geojson, .kml"
-                            placeholder="Upload project area (zipped shapefile, geojson or kml files)"
+                            placeholder="Upload project area (zipped geojson files)"
                             isValid={validateAreaOfFileUpload}
                             {...formProps}
                           />

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/QuestionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/QuestionBox/index.tsx
@@ -120,7 +120,7 @@ const QuestionBox = ({
               variant="ghost"
               className="naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
               onClick={() => handleSubmit()}
-              disabled={flyable === 'no' && comment.length < 6}
+              disabled={flyable === 'yes'}
               isLoading={commentIsUpdating}
             >
               Save

diff --git 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 { useGetTaskWaypointQuery } from '@Api/tasks';
+import { useGetTaskAssetsInfo, useGetTaskWaypointQuery } from '@Api/tasks';
 import marker from '@Assets/images/marker.png';
 import right from '@Assets/images/rightArrow.png';
 import BaseLayerSwitcherUI from '@Components/common/BaseLayerSwitcher';
@@ -29,6 +29,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import ToolTip from '@Components/RadixComponents/ToolTip';
+import Skeleton from '@Components/RadixComponents/Skeleton';
 import COGOrthophotoViewer from '@Components/common/MapLibreComponents/COGOrthophotoViewer';
 import { toast } from 'react-toastify';
 import GetCoordinatesOnClick from './GetCoordinatesOnClick';
@@ -224,6 +225,14 @@ const MapSection = ({ className }: { className?: string }) => {
     );
     setShowTakeOffPoint(!showTakeOffPoint);
   }
+  const {
+    data: taskAssetsInformation,
+    isFetching: taskAssetsInfoLoading,
+  }: Record<string, any> = useGetTaskAssetsInfo(
+    projectId as string,
+    taskId as string,
+  );
+
   return (
     <>
       <div
@@ -330,6 +339,7 @@ const MapSection = ({ className }: { className?: string }) => {
                 : 'Change Take off Point'}
             </Button>
           </div>
+
           <div className="naxatw-absolute naxatw-left-[0.575rem] naxatw-top-[5.75rem] naxatw-z-30 naxatw-h-fit">
             <Button
               variant="ghost"
@@ -338,28 +348,35 @@ const MapSection = ({ className }: { className?: string }) => {
             >
               <ToolTip
                 name="flight_take_off"
-                message="Show Take Off Point"
+                message="Show Flight Plan"
                 symbolType="material-icons"
                 iconClassName="!naxatw-text-xl !naxatw-text-black naxatw-w-[1.25rem]"
                 className="naxatw-mt-[-4px]"
               />
             </Button>
           </div>
-          <div className="naxatw-absolute naxatw-left-[0.575rem] naxatw-top-[8.25rem] naxatw-z-30 naxatw-h-fit">
-            <Button
-              variant="ghost"
-              className={`naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border naxatw-bg-[#F5F5F5] !naxatw-px-[0.315rem] ${showOrthoPhotoLayer ? 'naxatw-border-red' : 'naxatw-border-gray-400'}`}
-              onClick={() => handleOtrhophotoLayerView()}
-            >
-              <ToolTip
-                name="visibility"
-                message="Show Take Off Point"
-                symbolType="material-icons"
-                iconClassName="!naxatw-text-xl !naxatw-text-black"
-                className="naxatw-mt-[-4px]"
-              />
-            </Button>
-          </div>
+
+          {taskAssetsInfoLoading ? (
+            <Skeleton className="naxatw-h-[0.5rem] naxatw-w-[0.5rem] naxatw-rounded-sm" />
+          ) : (
+            taskAssetsInformation?.assets_url && (
+              <div className="naxatw-absolute naxatw-left-[0.575rem] naxatw-top-[8.25rem] naxatw-z-30 naxatw-h-fit">
+                <Button
+                  variant="ghost"
+                  className={`naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border naxatw-bg-[#F5F5F5] !naxatw-px-[0.315rem] ${showOrthoPhotoLayer ? 'naxatw-border-red' : 'naxatw-border-gray-400'}`}
+                  onClick={() => handleOtrhophotoLayerView()}
+                >
+                  <ToolTip
+                    name="visibility"
+                    message="Show Orthophoto"
+                    symbolType="material-icons"
+                    iconClassName="!naxatw-text-xl !naxatw-text-black"
+                    className="naxatw-mt-[-4px]"
+                  />
+                </Button>
+              </div>
+            )
+          )}
           <div className="naxatw-absolute naxatw-bottom-3 naxatw-right-[calc(50%-5.4rem)] naxatw-z-30 naxatw-h-fit lg:naxatw-right-3 lg:naxatw-top-3">
             <Button
               withLoader

diff --git a/src/frontend/src/components/UpdateUserDetails/Password/index.tsx b/src/frontend/src/components/UpdateUserDetails/Password/index.tsx
@@ -7,8 +7,10 @@ import { Button } from '@Components/RadixComponents/Button';
 import { patchUserProfile } from '@Services/common';
 import { useMutation } from '@tanstack/react-query';
 import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
+import { useNavigate } from 'react-router-dom';
 
 const Password = () => {
+  const navigate = useNavigate();
   const initialState = {
     old_password: '',
     password: '',
@@ -30,6 +32,7 @@ const Password = () => {
     mutationFn: payloadDataObject => patchUserProfile(payloadDataObject),
     onSuccess: () => {
       toast.success('Password Updated Successfully');
+      navigate('/dashboard');
     },
     onError: err => {
       // eslint-disable-next-line no-console
@@ -74,6 +77,11 @@ const Password = () => {
                 value: 8,
                 message: 'Password must have at least 8 characters',
               },
+              validate: {
+                notSameAsOld: value =>
+                  value !== password ||
+                  'New password cannot be the same as the old password',
+              },
             })}
           />
           <ErrorMessage message={formState.errors?.password?.message} />
@@ -85,8 +93,13 @@ const Password = () => {
             className="naxatw-mt-1"
             placeholder="Enter confirm password"
             {...register('confirm_password', {
-              validate: (value: string) =>
-                value === password || 'The passwords do not match',
+              validate: {
+                matchPassword: (value: string) =>
+                  value === password || 'The passwords do not match',
+                notSameAsOld: value =>
+                  value !== password ||
+                  'New password cannot be the same as the old password',
+              },
               // required: 'Confirm Password is Required',
             })}
           />

diff --git a/src/frontend/src/components/common/UserProfile/index.tsx b/src/frontend/src/components/common/UserProfile/index.tsx
@@ -57,7 +57,7 @@ export default function UserProfile() {
 
   return (
     <div
-      className="naxatw-relative"
+      className="naxatw-relative naxatw-z-50"
       tabIndex={0}
       onBlur={() => setToggle(false)}
     >