Merge pull request #228 from hotosm/image_information

Display uploaded image information  in frontend

src/frontend/src/api/tasks.ts

@@ -1,5 +1,9 @@
 /* eslint-disable import/prefer-default-export */
-import { getIndividualTask, getTaskWaypoint } from '@Services/tasks';
+import {
+  getIndividualTask,
+  getTaskAssetsInfo,
+  getTaskWaypoint,
+} from '@Services/tasks';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 export const useGetTaskWaypointQuery = (
@@ -28,3 +32,17 @@ export const useGetIndividualTaskQuery = (
     ...queryOptions,
   });
 };
+
+export const useGetTaskAssetsInfo = (
+  projectId: string,
+  taskId: string,
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['task-assets-info'],
+    enabled: !!taskId,
+    queryFn: () => getTaskAssetsInfo(projectId, taskId),
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};

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

@@ -1,10 +1,15 @@
 import { useParams } from 'react-router-dom';
-import { useGetIndividualTaskQuery, useGetTaskWaypointQuery } from '@Api/tasks';
+import {
+  useGetIndividualTaskQuery,
+  useGetTaskAssetsInfo,
+  useGetTaskWaypointQuery,
+} from '@Api/tasks';
 import { useState } from 'react';
 // import { useTypedSelector } from '@Store/hooks';
 import { format } from 'date-fns';
 import DescriptionBoxComponent from './DescriptionComponent';
 import QuestionBox from '../QuestionBox';
+import UploadsInformation from '../UploadsInformation';
 
 const DescriptionBox = () => {
   // const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
@@ -21,6 +26,8 @@ const DescriptionBox = () => {
       },
     },
   );
+  const { data: taskAssetsInformation }: Record<string, any> =
+    useGetTaskAssetsInfo(projectId as string, taskId as string);
 
   const { data: taskDescription }: Record<string, any> =
     useGetIndividualTaskQuery(taskId as string, {
@@ -103,7 +110,28 @@ const DescriptionBox = () => {
         ))}
       </div>
       {/* {!secondPage && <QuestionBox />} */}
-      <QuestionBox setFlyable={setFlyable} flyable={flyable} />
+      <QuestionBox
+        setFlyable={setFlyable}
+        flyable={flyable}
+        haveNoImages={taskAssetsInformation?.image_count === 0}
+      />
+
+      {taskAssetsInformation?.image_count > 0 && (
+        <div className="naxatw-flex naxatw-flex-col naxatw-gap-5">
+          <UploadsInformation
+            data={[
+              {
+                name: 'Image count',
+                value: taskAssetsInformation?.image_count,
+              },
+              {
+                name: 'Orthophoto available',
+                value: taskAssetsInformation?.assets_url ? 'Yes' : 'No',
+              },
+            ]}
+          />
+        </div>
+      )}
     </>
   );
 };

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

@@ -12,9 +12,14 @@ import UploadsBox from '../UploadsBox';
 interface IQuestionBoxProps {
   flyable: string;
   setFlyable: React.Dispatch<React.SetStateAction<any>>;
+  haveNoImages: boolean;
 }
 
-const QuestionBox = ({ flyable, setFlyable }: IQuestionBoxProps) => {
+const QuestionBox = ({
+  flyable,
+  setFlyable,
+  haveNoImages,
+}: IQuestionBoxProps) => {
   const { projectId, taskId } = useParams();
 
   const dispatch = useTypedDispatch();
@@ -119,7 +124,7 @@ const QuestionBox = ({ flyable, setFlyable }: IQuestionBoxProps) => {
             </Button>
           </div>
         </motion.div>
-        {flyable === 'yes' && <UploadsBox />}
+        {flyable === 'yes' && haveNoImages && <UploadsBox />}
       </div>
     </>
   );

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

@@ -3,7 +3,7 @@
 /* eslint-disable no-unused-vars */
 import { Button } from '@Components/RadixComponents/Button';
 import { toggleModal } from '@Store/actions/common';
-import { setFiles, showPopover } from '@Store/actions/droneOperatorTask';
+import { setFiles } from '@Store/actions/droneOperatorTask';
 import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 
 const UploadsBox = () => {

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

@@ -0,0 +1,29 @@
+const UploadsInformation = ({ data }: { data: Record<string, any>[] }) => {
+  return (
+    <>
+      <div className="naxatw-flex naxatw-w-full naxatw-flex-col naxatw-gap-5">
+        <div className="naxatw-flex naxatw-flex-col naxatw-gap-3">
+          <p className="naxatw-text-[0.875rem] naxatw-font-semibold naxatw-leading-normal naxatw-tracking-[0.0175rem] naxatw-text-[#D73F3F]">
+            Upload Information
+          </p>
+        </div>
+
+        {data.map(information => (
+          <div
+            className="naxatw-flex naxatw-w-full naxatw-gap-2"
+            key={information?.name}
+          >
+            <p className="naxatw-w-[6.875rem] naxatw-text-[0.75rem] naxatw-text-[#484848]">
+              {information?.name}
+            </p>
+            <p className="naxatw-text-[0.75rem] naxatw-text-[#484848]">:</p>
+            <p className="naxatw-text-[0.75rem] naxatw-text-[#484848]">
+              {information?.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+export default UploadsInformation;

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

@@ -96,7 +96,7 @@ const DroneOperatorDescriptionBox = () => {
   const handleDownloadFlightPlan = () => {
     fetch(
       `${BASE_URL}/waypoint/task/${taskId}/?project_id=${projectId}&download=true`,
-      {"method":'POST'}
+      { method: 'POST' },
     )
       .then(response => {
         if (!response.ok) {

src/frontend/src/services/tasks.ts

@@ -7,3 +7,6 @@ export const getTaskWaypoint = (projectId: string, taskId: string) =>
 
 export const getIndividualTask = (taskId: string) =>
   authenticated(api).get(`/tasks/${taskId}`);
+
+export const getTaskAssetsInfo = (projectId: string, taskId: string) =>
+  authenticated(api).get(`/projects/assets/${projectId}/${taskId}/`);