Links details Viewpoints and map interaction

GeotrekCE · Oct 10, 2023 · 5f22dbe · 5f22dbe
1 parent fcdccfd
commit 5f22dbe
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx
@@ -126,6 +126,8 @@ export const DetailsMap: React.FC<PropsType> = props => {
     toggleServiceVisibility,
     infrastructureVisibility,
     toggleInfrastructureVisibility,
+    viewPointVisibility,
+    toggleViewPointVisibility,
     annotationViewpointVisibility,
     toggleAnnotationViewpointVisibility,
   } = useDetailsMap();
@@ -255,6 +257,7 @@ export const DetailsMap: React.FC<PropsType> = props => {
                 props.service && props.service.length > 0 ? serviceVisibility : null
               }
               infrastructureVisibility={props.infrastructure ? infrastructureVisibility : null}
+              viewPointVisibility={props.viewPoints ? viewPointVisibility : null}
               toggleTrekChildrenVisibility={toggleTrekChildrenVisibility}
               togglePoiVisibility={togglePoiVisibility}
               toggleReferencePointsVisibility={toggleReferencePointsVisibility}
@@ -265,6 +268,7 @@ export const DetailsMap: React.FC<PropsType> = props => {
               toggleSignageVisibility={toggleSignageVisibility}
               toggleServiceVisibility={toggleServiceVisibility}
               toggleInfrastructureVisibility={toggleInfrastructureVisibility}
+              toggleViewPointVisiblity={toggleViewPointVisibility}
             />
             {props.trekGeometry && (
               <TrekMarkersAndCourse
@@ -303,6 +307,9 @@ export const DetailsMap: React.FC<PropsType> = props => {
               signageVisibility={signageVisibility}
               serviceVisibility={serviceVisibility}
               infrastructureVisibility={infrastructureVisibility}
+              viewPoints={props.viewPoints}
+              viewPointVisibility={viewPointVisibility}
+              setMapId={props.setMapId}
             />
             {props.displayAltimetricProfile === true && props.trekGeoJSON && (
               <AltimetricProfile id="altimetric-profile" trekGeoJSON={props.trekGeoJSON} />

diff --git a/frontend/src/components/Map/DetailsMap/MapChildren.tsx b/frontend/src/components/Map/DetailsMap/MapChildren.tsx
@@ -6,9 +6,10 @@ import { OutdoorSite } from 'modules/outdoorSite/interface';
 import { SensitiveAreaGeometry } from 'modules/sensitiveArea/interface';
 import { SignageDictionary } from 'modules/signage/interface';
 import { InfrastructureDictionary } from 'modules/infrastructure/interface';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useMediaPredicate } from 'react-media-hook';
 import { Infrastructure } from 'components/Icons/Infrastructure';
+import { ViewPoint } from 'modules/viewPoint/interface';
 import { GeometryListProps } from './DetailsMap';
 
 import { MarkersWithIcon } from './MarkersWithIcon';
@@ -20,6 +21,7 @@ import { SensitiveAreas } from './SensitiveAreas';
 import { GeometryList } from './GeometryList';
 import { TrekChildren } from './TrekChildren';
 import { Visibility } from './useDetailsMap';
+import ViewPointMarkers from './ViewPointMarkers';
 
 export interface PointWithIcon {
   location: { x: number; y: number };
@@ -52,6 +54,9 @@ type Props = {
   service?: PointWithIcon[];
   infrastructureVisibility: Visibility;
   infrastructure?: InfrastructureDictionary | null;
+  viewPointVisibility?: Visibility;
+  viewPoints?: ViewPoint[];
+  setMapId?: (id: string) => void;
 };
 
 export const MapChildren: React.FC<Props> = props => {
@@ -122,6 +127,10 @@ export const MapChildren: React.FC<Props> = props => {
       {props.serviceVisibility === 'DISPLAYED' && <MarkersWithIcon points={props.service} />}
 
       {(isMobile || visibleSection === 'report') && props.reportVisibility && <PointReport />}
+
+      {(props.viewPointVisibility === 'DISPLAYED' || visibleSection === 'medias') && (
+        <ViewPointMarkers viewPoints={props.viewPoints} setMapId={props.setMapId} />
+      )}
     </>
   );
 };
diff --git a/frontend/src/components/Map/DetailsMap/useDetailsMap.tsx b/frontend/src/components/Map/DetailsMap/useDetailsMap.tsx
@@ -21,6 +21,7 @@ export const useDetailsMap = () => {
   const [signageVisibility, setSignageVisibility] = useState<Visibility>('HIDDEN');
   const [serviceVisibility, setServiceVisibility] = useState<Visibility>('HIDDEN');
   const [infrastructureVisibility, setInfrastructureVisibility] = useState<Visibility>('HIDDEN');
+  const [viewPointVisibility, setViewPointVisibility] = useState<Visibility>('HIDDEN');
   const [annotationViewpointVisibility, setAnnotationViewpointVisibility] =
     useState<Visibility>('DISPLAYED');
 
@@ -39,6 +40,7 @@ export const useDetailsMap = () => {
   const toggleSignageVisibility = () => setSignageVisibility(toggleVisibility);
   const toggleServiceVisibility = () => setServiceVisibility(toggleVisibility);
   const toggleInfrastructureVisibility = () => setInfrastructureVisibility(toggleVisibility);
+  const toggleViewPointVisibility = () => setViewPointVisibility(toggleVisibility);
   const toggleAnnotationViewpointVisibility = () =>
     setAnnotationViewpointVisibility(toggleVisibility);
 
@@ -63,6 +65,8 @@ export const useDetailsMap = () => {
     toggleServiceVisibility,
     infrastructureVisibility,
     toggleInfrastructureVisibility,
+    viewPointVisibility,
+    toggleViewPointVisibility,
     annotationViewpointVisibility,
     toggleAnnotationViewpointVisibility,
   };

diff --git a/frontend/src/components/pages/details/components/DetailsMedias/DetailsMedias.tsx b/frontend/src/components/pages/details/components/DetailsMedias/DetailsMedias.tsx
@@ -6,6 +6,8 @@ import { FormattedMessage } from 'react-intl';
 import { cn } from 'services/utils/cn';
 import { Minus } from 'components/Icons/Minus';
 import { Plus } from 'components/Icons/Plus';
+import { useListAndMapContext } from 'modules/map/ListAndMapContext';
+import { ViewPoint as ViewPointIcon } from 'components/Icons/ViewPoint';
 
 interface DetailsMediasProps {
   className?: string;
@@ -38,6 +40,8 @@ export const DetailsMedias: React.FC<DetailsMediasProps> = ({
     return null;
   }
 
+  const { setHoveredCardId } = useListAndMapContext();
+
   return (
     <div className={className}>
       <TitleTag
@@ -46,6 +50,7 @@ export const DetailsMedias: React.FC<DetailsMediasProps> = ({
           TitleTag === 'h2' ? 'text-Mobile-H1 desktop:text-H2' : 'text-Mobile-C1 desktop:text-H4',
         )}
       >
+        <ViewPointIcon size={34} />
         <FormattedMessage id="viewPoint.title" />
         {asAccordion && (
           <button
@@ -86,6 +91,12 @@ export const DetailsMedias: React.FC<DetailsMediasProps> = ({
             <li
               key={viewPoint.id}
               className="shrink-0 relative desktop:flex items-stretch border border-solid border-greySoft hover:border-blackSemiTransparent transition rounded-xl overflow-hidden row w-60 desktop:w-auto"
+              onMouseEnter={() => {
+                !asAccordion && setHoveredCardId(`DETAILS-VIEWPOINT-${viewPoint.id}`);
+              }}
+              onMouseLeave={() => {
+                !asAccordion && setHoveredCardId(null);
+              }}
             >
               <div className="relative shrink-0 w-full overflow-hidden h-resultCardDesktop desktop:w-resultCardDesktop">
                 <ImageWithLegend