Merge pull request #472 from hotosm/fix/minor-fixes

Feat: Add Talk to us section and other minor fixes
hotosm · Feb 14, 2025 · b5b117e · b5b117e
2 parents aedd807 + 9653120
commit b5b117e
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 40 deletions.
diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx
@@ -71,7 +71,7 @@ const DescriptionBox = () => {
   >({
     mutationFn: postTaskStatus,
     onSuccess: () => {
-      queryClient.invalidateQueries({queryKey: ['task-description']});
+      queryClient.invalidateQueries({ queryKey: ['task-description'] });
     },
     onError: (err: any) => {
       toast.error(err.message);

diff --git a/...ntend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/LoadingBox/index.tsx b/...ntend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/LoadingBox/index.tsx
@@ -21,7 +21,7 @@ const FilesUploadingPopOver = ({
 
   // function to close modal and refetch task assets to update the UI
   function closeModal() {
-    queryClient.invalidateQueries({queryKey: ['task-description']});
+    queryClient.invalidateQueries({ queryKey: ['task-description'] });
     setTimeout(() => {
       dispatch(toggleModal());
     }, 2000);

diff --git a/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/MapBox/index.tsx b/src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/MapBox/index.tsx
@@ -21,15 +21,17 @@ import { toast } from 'react-toastify';
 import callApiSimultaneously from '@Utils/callApiSimultaneously';
 import chunkArray from '@Utils/createChunksOfArray';
 import { getImageUploadLink } from '@Services/droneOperator';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { postTaskStatus } from '@Services/project';
 import widthCalulator from '@Utils/percentageCalculator';
 import { point } from '@turf/helpers';
 import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
+import hasErrorBoundary from '@Utils/hasErrorBoundary';
 import FilesUploadingPopOver from '../LoadingBox';
 
 const ImageMapBox = () => {
   const dispatch = useTypedDispatch();
+  const queryClient = useQueryClient();
   const uploadedFilesNumber = useRef(0);
   const pathname = window.location.pathname?.split('/');
   const projectId = pathname?.[2];
@@ -137,6 +139,11 @@ const ImageMapBox = () => {
 
   const { mutate: updateStatus } = useMutation<any, any, any, unknown>({
     mutationFn: postTaskStatus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['task-assets-info'],
+      });
+    },
     onError: (err: any) => {
       toast.error(err.message);
     },
@@ -350,9 +357,11 @@ const ImageMapBox = () => {
           <p className="naxatw-text-lg naxatw-font-medium">
             {filesExifData.length} Images Selected
           </p>
-          <p className="naxatw-text-lg naxatw-font-medium naxatw-text-yellow-400">
-            {(pointsInsideTaskArea / filesExifData.length) * 100 || 0} % of the
-            uploaded images are from within the project area.
+          <p className="naxatw-text-lg naxatw-font-medium naxatw-text-yellow-600">
+            {Number(
+              100 - ((pointsInsideTaskArea / filesExifData.length) * 100 || 0),
+            ).toFixed(0)}
+            % of the uploaded images are from outside the project area.
           </p>
         </div>
         <div className="naxatw-mx-auto naxatw-w-fit">
@@ -377,4 +386,4 @@ const ImageMapBox = () => {
   );
 };
 
-export default ImageMapBox;
+export default hasErrorBoundary(ImageMapBox);
diff --git a/src/frontend/src/components/DroneOperatorTask/MapSection/MapSection.tsx b/src/frontend/src/components/DroneOperatorTask/MapSection/MapSection.tsx
@@ -191,7 +191,7 @@ const MapSection = ({ className }: { className?: string }) => {
 
   useEffect(() => {
     if (taskDataPolygon && map) {
-      const layers = map.getStyle().layers;
+      const layers = map.getStyle()?.layers;
       if (layers && layers.length > 0) {
         const firstLayerId = layers[4]?.id; // Get the first layer
         if (firstLayerId) {
@@ -503,6 +503,11 @@ const MapSection = ({ className }: { className?: string }) => {
       showOrthophoto ? 'none' : 'visible',
     );
     setShowOrthophoto(!showOrthophoto);
+    if (!showOrthophoto) {
+      map.fitBounds(
+        map.getSource(map.getLayer('task-orthophoto').source).bounds,
+      );
+    }
   };
   // end toggle layers
 

diff --git a/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx b/src/frontend/src/components/DroneOperatorTask/MapSection/index.tsx
@@ -519,7 +519,7 @@ const MapSection = ({ className }: { className?: string }) => {
       mutationFn: postRotatedTaskWayPoint,
       onSuccess: () => {
         toast.success('Flight plan rotated successfully');
-        queryClient.invalidateQueries({queryKey: ['task-waypoints']});
+        queryClient.invalidateQueries({ queryKey: ['task-waypoints'] });
       },
       onError: (err: any) => {
         toast.error(err?.response?.data?.detail || err.message);

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -255,7 +255,6 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
             }}
           />
         )}
-
         {projectData?.no_fly_zones_geojson && (
           <VectorLayer
             map={map as Map}
@@ -277,7 +276,6 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
             }}
           />
         )}
-
         {taskStatusObj &&
           tasksData &&
           tasksData?.map((task: Record<string, any>) => {
@@ -300,7 +298,6 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
               />
             );
           })}
-
         {/* visualize tasks orthophoto */}
         {visibleTaskOrthophoto?.map(orthophotoDetails => (
           <COGOrthophotoViewer
@@ -312,7 +309,6 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
           />
         ))}
         {/* visualize tasks orthophoto end */}
-
         {/* visualize overall project orthophoto */}
         {projectData?.orthophoto_url && (
           <COGOrthophotoViewer
@@ -323,27 +319,40 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
           />
         )}
         {/* visualize tasks orthophoto end */}
-
         {/* additional controls */}
         <div className="naxatw-absolute naxatw-left-[0.575rem] naxatw-top-[5.75rem] naxatw-z-30 naxatw-flex naxatw-h-fit naxatw-w-fit naxatw-flex-col naxatw-gap-3">
-          {projectData?.orthophoto_url && (
+          <div className="naxatw-flex naxatw-flex-col naxatw-gap-3">
+            {projectData?.orthophoto_url && (
+              <Button
+                variant="ghost"
+                className={`naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border !naxatw-px-[0.315rem] ${showOverallOrthophoto ? 'naxatw-border-red naxatw-bg-[#ffe0e0]' : 'naxatw-border-gray-400 naxatw-bg-[#F5F5F5]'}`}
+                onClick={() => handleToggleOverallOrthophoto()}
+              >
+                <ToolTip
+                  name="visibility"
+                  message="Show Orthophoto"
+                  symbolType="material-icons"
+                  iconClassName="!naxatw-text-xl !naxatw-text-black"
+                  className="naxatw-mt-[-4px]"
+                />
+              </Button>
+            )}
             <Button
               variant="ghost"
-              className={`naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border !naxatw-px-[0.315rem] ${showOverallOrthophoto ? 'naxatw-border-red naxatw-bg-[#ffe0e0]' : 'naxatw-border-gray-400 naxatw-bg-[#F5F5F5]'}`}
-              onClick={() => handleToggleOverallOrthophoto()}
+              className="naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border naxatw-border-gray-400 naxatw-bg-[#F5F5F5] !naxatw-px-[0.315rem]"
+              onClick={() => handleZoomToExtent()}
             >
               <ToolTip
-                name="visibility"
-                message="Show Orthophoto"
+                name="zoom_out_map"
+                message="Zoom to project area"
                 symbolType="material-icons"
                 iconClassName="!naxatw-text-xl !naxatw-text-black"
                 className="naxatw-mt-[-4px]"
               />
             </Button>
-          )}
+          </div>
         </div>
         {/*  additional controls */}
-
         <AsyncPopup
           map={map as Map}
           popupUI={getPopupUI}
@@ -417,23 +426,6 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
             )
           }
         />
-
-        {/* additional controls */}
-        <div className="naxatw-absolute naxatw-left-[0.575rem] naxatw-top-[5.75rem] naxatw-z-30 naxatw-flex naxatw-h-fit naxatw-w-fit naxatw-flex-col naxatw-gap-3">
-          <Button
-            variant="ghost"
-            className="naxatw-grid naxatw-h-[1.85rem] naxatw-place-items-center naxatw-border naxatw-border-gray-400 naxatw-bg-[#F5F5F5] !naxatw-px-[0.315rem]"
-            onClick={() => handleZoomToExtent()}
-          >
-            <ToolTip
-              name="zoom_out_map"
-              message="Zoom to project area"
-              symbolType="material-icons"
-              iconClassName="!naxatw-text-xl !naxatw-text-black"
-              className="naxatw-mt-[-4px]"
-            />
-          </Button>
-        </div>
         <Legend />
       </MapContainer>
 

diff --git a/src/frontend/src/components/LandingPage/Home/index.tsx b/src/frontend/src/components/LandingPage/Home/index.tsx
@@ -86,7 +86,7 @@ export default function Home() {
               Manager (Drone TM)
             </p>
             <p className="naxatw-animate-fade-up naxatw-text-[1.5rem] naxatw-leading-8 md:naxatw-mt-8 md:naxatw-text-2xl">
-              Together, WeMap - Open.Accurate. Accessible
+              Together, We Map - Open.Accurate. Accessible
             </p>
           </motion.div>
           {/* <div className="naxatw-mt-12 naxatw-flex naxatw-animate-fade-up naxatw-flex-col naxatw-items-center naxatw-gap-3 md:naxatw-flex-row">

diff --git a/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx b/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx
@@ -4,7 +4,7 @@ import useAuth from '@Hooks/useAuth';
 import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import { Button } from '@Components/RadixComponents/Button';
 import Image from '@Components/RadixComponents/Image';
-import droneTMLogo from '@Assets/images/LandingPage/DTM-logo-red.svg';
+import droneTMLogo from '@Assets/images/DTM-logo-black.svg';
 import projectCreator from '@Assets/images/LandingPage/project-creator.svg';
 import droneOperator from '@Assets/images/LandingPage/drone-operator.svg';
 import Icon from '@Components/common/Icon';

diff --git a/src/frontend/src/components/LandingPage/TalkToUs/index.tsx b/src/frontend/src/components/LandingPage/TalkToUs/index.tsx
@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+
+const TalkToUs = () => {
+  return (
+    <div className="naxatw-flex naxatw-justify-center naxatw-bg-red naxatw-py-24">
+      <div className="naxatw-flex naxatw-max-w-[560px] naxatw-flex-col naxatw-gap-5 naxatw-text-white">
+        <h2 className="naxatw-text-[60px]">Talk to Us</h2>
+        <div className="naxatw-flex naxatw-flex-col naxatw-items-center naxatw-justify-center">
+          <p className="naxatw-text-xl">For other queries mail us at </p>
+          <Link
+            className="naxatw-text-xl naxatw-font-bold hover:naxatw-underline"
+            to="mailto:dronetm@hotosm.org"
+          >
+            dronetm@hotosm.org
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TalkToUs;
diff --git a/src/frontend/src/components/LandingPage/index.tsx b/src/frontend/src/components/LandingPage/index.tsx
@@ -10,6 +10,7 @@ import CaseStudies from './CaseStudies';
 import ClientAndPartners from './ClientsAndPartners';
 import Footer from './Footer';
 import SignInOverlay from './SignInOverlay';
+import TalkToUs from './TalkToUs';
 
 export {
   Navbar,
@@ -24,4 +25,5 @@ export {
   ClientAndPartners,
   Footer,
   SignInOverlay,
+  TalkToUs,
 };
diff --git a/src/frontend/src/views/LandingPage/index.tsx b/src/frontend/src/views/LandingPage/index.tsx
@@ -12,6 +12,7 @@ import {
   ClientAndPartners,
   Footer,
   SignInOverlay,
+  TalkToUs,
 } from '@Components/LandingPage';
 import { AnimatePresence } from 'framer-motion';
 import MobileAppDownload from '@Components/LandingPage/MobileAppDownload';
@@ -33,6 +34,7 @@ export default function LandingPage() {
       <MajorImpacts />
       {/* <CaseStudies /> */}
       <ClientAndPartners />
+      <TalkToUs />
       <Footer />
     </main>
   );