Merge pull request #239 from hotosm/feat/user-profile

Feat: download orthophoto
hotosm · Sep 26, 2024 · 644be84 · 644be84
2 parents 179770c + ec6b1ed
commit 644be84
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 18 deletions.
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -84,7 +84,7 @@ export default function App() {
         </PromptDialog>
         <div
           id="app_playground"
-          className="app_playground scrollbar naxatw-overflow-y-auto naxatw-px-3"
+          className="app_playground scrollbar naxatw-overflow-y-auto naxatw-px-3 md:naxatw-px-0"
           style={{
             height: 'calc(100vh-3.5rem)',
           }}

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx
@@ -1,20 +1,19 @@
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { format } from 'date-fns';
+import { toast } from 'react-toastify';
 import {
   useGetIndividualTaskQuery,
   useGetTaskAssetsInfo,
   useGetTaskWaypointQuery,
 } from '@Api/tasks';
-import { useState } from 'react';
-// import { useTypedSelector } from '@Store/hooks';
-import { format } from 'date-fns';
+import { Button } from '@Components/RadixComponents/Button';
 import DescriptionBoxComponent from './DescriptionComponent';
 import QuestionBox from '../QuestionBox';
 import UploadsInformation from '../UploadsInformation';
 
 const DescriptionBox = () => {
-  // const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
   const [flyable, setFlyable] = useState('yes');
-  // const { secondPage } = secondPageStates;
   const { taskId, projectId } = useParams();
 
   const { data: taskWayPoints }: any = useGetTaskWaypointQuery(
@@ -98,6 +97,32 @@ const DescriptionBox = () => {
       },
     });
 
+  const handleDownloadResult = () => {
+    if (!taskAssetsInformation?.assets_url) return;
+
+    fetch(`${taskAssetsInformation?.assets_url}`, { method: 'GET' })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Network response was ${response.statusText}`);
+        }
+        return response.blob();
+      })
+      .then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'assets.zip';
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.URL.revokeObjectURL(url);
+      })
+      .catch(error =>
+        toast.error(`There wan an error while downloading file
+          ${error}`),
+      );
+  };
+
   return (
     <>
       <div className="naxatw-flex naxatw-flex-col naxatw-gap-5">
@@ -109,12 +134,13 @@ const DescriptionBox = () => {
           />
         ))}
       </div>
-      {/* {!secondPage && <QuestionBox />} */}
-      <QuestionBox
-        setFlyable={setFlyable}
-        flyable={flyable}
-        haveNoImages={taskAssetsInformation?.image_count === 0}
-      />
+      {taskAssetsInformation?.image_count === 0 && (
+        <QuestionBox
+          setFlyable={setFlyable}
+          flyable={flyable}
+          haveNoImages={taskAssetsInformation?.image_count === 0}
+        />
+      )}
 
       {taskAssetsInformation?.image_count > 0 && (
         <div className="naxatw-flex naxatw-flex-col naxatw-gap-5">
@@ -130,6 +156,18 @@ const DescriptionBox = () => {
               },
             ]}
           />
+          <div className="">
+            <Button
+              variant="ghost"
+              className="naxatw-bg-red naxatw-text-white disabled:!naxatw-cursor-not-allowed disabled:naxatw-bg-gray-500 disabled:naxatw-text-white"
+              leftIcon="download"
+              iconClassname="naxatw-text-[1.125rem]"
+              onClick={() => handleDownloadResult()}
+              disabled={!taskAssetsInformation?.assets_url}
+            >
+              Download Result
+            </Button>
+          </div>
         </div>
       )}
     </>

diff --git a/...ntend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/LoadingBox/index.tsx b/...ntend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/LoadingBox/index.tsx
@@ -1,5 +1,6 @@
 import Icon from '@Components/common/Icon';
 import { toggleModal } from '@Store/actions/common';
+import { useQueryClient } from '@tanstack/react-query';
 import { useDispatch } from 'react-redux';
 
 interface IFilesUploadingPopOverProps {
@@ -16,12 +17,12 @@ const FilesUploadingPopOver = ({
   uploadedFiles,
 }: IFilesUploadingPopOverProps) => {
   const dispatch = useDispatch();
-  // const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
-  // function to close modal
+  // function to close modal and refetch task assets to update the UI
   function closeModal() {
+    queryClient.invalidateQueries(['task-assets-info']);
     setTimeout(() => {
-      // navigate('/dashboard');
       dispatch(toggleModal());
     }, 2000);
     return null;

diff --git a/...frontend/src/components/DroneOperatorTask/DescriptionSection/UploadsInformation/index.tsx b/...frontend/src/components/DroneOperatorTask/DescriptionSection/UploadsInformation/index.tsx
@@ -1,8 +1,8 @@
 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">
+      <div className="naxatw-flex naxatw-w-full naxatw-flex-col naxatw-gap-2">
+        <div className="naxatw-flex naxatw-flex-col naxatw-gap-2">
           <p className="naxatw-text-[0.875rem] naxatw-font-semibold naxatw-leading-normal naxatw-tracking-[0.0175rem] naxatw-text-[#D73F3F]">
             Upload Information
           </p>

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/index.tsx
@@ -96,7 +96,6 @@ const DroneOperatorDescriptionBox = () => {
       .then(blob => {
         const url = window.URL.createObjectURL(blob);
         const link = document.createElement('a');
-        // link.setAttribute('download', '');
         link.href = url;
         link.download = 'flight_plan.kmz';
         document.body.appendChild(link);