Merge pull request #712 from GeotrekCE/develop

Develop > Master / 3.9.0

docs/changelog.md

@@ -1,5 +1,27 @@
 # Changelog
 
+3.9.0 (2022-06-22)
+------------------
+
+**🚀 New features**
+
+* Add tooltips on detail pages, on actions and information pictograms (#392)
+* Add dynamic ratings and rating descriptions on treks details pages (#541)
+* Add "gear" property on treks detail pages (#672)
+* Add sensitive areas on outdoor sites and courses detail pages (#671)
+* Add published infrastructures on treks and outdoor maps (#408)
+* Add services (other info) on treks and outdoor maps (#408)
+* Allow to exclude labels from treks search results (#418)
+* Display all cities on outdoor sites cards and detail pages (#669)
+* Display trek route on search map when hovering a trek in results list (#368)
+* Add ID on each page to be able to isolate them in CSS (#543)
+
+**🐛 Fixes**
+
+* Fix SSR of treks details pages without signage (#674)
+* Disable meteo and reservation widgets on offline detail pages (#622)
+* Don't display outdoor sites and courses on map controls if the site has none
+
 3.8.5 (2022-06-02)
 ------------------
 

docs/customization.md

@@ -60,7 +60,8 @@ In json files, you can just override the primary keys you need. You have to over
   - Contact information such as your name, address, phone number and email.
   - Links based on the key pair `label`/`url` (can be based on translation labels for multilingual) and/or the key `informationID` whose value is equal to a flatpage identifier.
 
-- `filter.json` to define filters to hide, their order and values (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/filter.json). If you want to hide some of the filter, you have to override their properties with `"display": false`
+- `filter.json` to define filters to hide, their order and values (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/filter.json). If you want to hide some of the filter, you have to override their properties with `"display": false`.
+  The `labels` filter contains an additional `withExclude` parameter. Its default value is `true`. By setting it to `true`, the user can filter the search by excluding a label (`withExclude` only works if your version of Geotrek Admin is equal to or higher than [2.77.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.77.0); please set it to `false` if this is not the case)
 - `map.json` to define basemaps URL and attributions, center (y, x), default and max zoom level (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/map.json).
 
   - You can also update the map layers. There are two map layers available:
@@ -138,7 +139,16 @@ It's also possible to change category colors :
 
 NB: If global config `groupTreksAndOutdoorFilters` is set to `true`,  the `outdoor` color is ignored in favor of the `trek` color.
 
-You can also override CSS in `customization/theme/style.css` file. To help overriding CSS, some ID have been added on main DIV components (header, logo, footer, cover, cards, results, maps, details...).
+## CSS
+
+You can override CSS in `customization/theme/style.css` file. To help overriding CSS, some ID have been added on main DIV components:
+- `home_content`, `home_activitiesBar`, `home_topHtml`, `home_section`, `home_activitySuggestion`, `banner_carousel`, etc on Homepage
+- `header_logo` in Header
+- Several similar ID on search and detail pages
+- `home_container` to isolate Home page
+- `search_container` to isolate Search page
+- `details_container` to isolate detail pages
+- `flatPage_container` to isolate static flatpages
 
 ## Translations
 

frontend/config/filter.json

@@ -124,5 +124,11 @@
     "id": "event",
     "type": "MULTIPLE",
     "display": true
+  },
+  {
+    "id": "labels",
+    "type": "MULTIPLE",
+    "display": true,
+    "withExclude": true
   }
 ]

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.8.5",
+  "version": "3.9.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",

frontend/src/components/Accessibility/index.tsx

@@ -116,9 +116,9 @@ const Accessibility = ({ details, language }: { details: Details; language: stri
                   <h2>
                     <FormattedMessage id={`details.accessibility_${k}`} /> :
                   </h2>
-                  <p>
+                  <div>
                     <HtmlText>{parse((details as any)[`accessibility_${k}`])}</HtmlText>
-                  </p>
+                  </div>
                 </div>
               );
             })}
@@ -130,9 +130,9 @@ const Accessibility = ({ details, language }: { details: Details; language: stri
             <h2>
               <FormattedMessage id={`details.${k}`} /> :
             </h2>
-            <p>
+            <div>
               <HtmlText>{parse((details as any)[k])}</HtmlText>
-            </p>
+            </div>
           </Row>
         ))}
     </div>

frontend/src/components/Icons/Infrastructure/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { GenericIconProps } from '../types';
+
+export const Infrastructure: React.FC<GenericIconProps> = ({
+  color = 'currentColor',
+  opacity,
+  className,
+  size,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 25 25"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      opacity={opacity}
+    >
+      <path
+        fill={color}
+        d="M24.8,9.7V8.6c0-0.5-0.2-0.9-0.5-1.2C24,7,23.6,6.8,23.1,6.8h-1.7c0-0.2,0.1-0.3,0.1-0.5V5.3c0-0.5-0.2-0.9-0.5-1.2
+        c-0.3-0.3-0.8-0.5-1.2-0.5h-6.1c-0.4,0-0.8,0.2-1.1,0.4c-0.3-0.3-0.7-0.4-1.1-0.4H5.3C4.8,3.5,4.3,3.7,4,4C3.7,4.3,3.5,4.8,3.5,5.3
+        v1.1c0,0.2,0,0.3,0.1,0.5H1.9C1.4,6.8,1,7,0.7,7.4C0.3,7.7,0.2,8.1,0.2,8.6v1.1c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.8,0.5,1.2,0.5h1.7
+        c0,0.2-0.1,0.3-0.1,0.5V13c0,0.2,0,0.3,0.1,0.5H1.9c-0.5,0-0.9,0.2-1.2,0.5c-0.3,0.3-0.5,0.8-0.5,1.2v1.1c0,0.5,0.2,0.9,0.5,1.2
+        C1,18,1.4,18.2,1.9,18.2h1.7c0,0.2-0.1,0.3-0.1,0.5v1.1c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.8,0.5,1.2,0.5h6.1c0.4,0,0.8-0.2,1.1-0.4
+        c0.3,0.3,0.7,0.4,1.1,0.4h6.1c0.5,0,0.9-0.2,1.2-0.5c0.3-0.3,0.5-0.8,0.5-1.2v-1.1c0-0.2,0-0.3-0.1-0.5h1.7c0.5,0,0.9-0.2,1.2-0.5
+        c0.3-0.3,0.5-0.8,0.5-1.2v-1.1c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5h-1.7c0.1-0.2,0.1-0.3,0.1-0.5V12
+        c0-0.2,0-0.3-0.1-0.5h1.7c0.5,0,0.9-0.2,1.2-0.5C24.7,10.6,24.8,10.2,24.8,9.7z M13.1,5.3c0-0.3,0.2-0.5,0.5-0.5h6.1
+        c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5h-1.9h-2.3h-1.9c-0.3,0-0.5-0.2-0.5-0.5V5.3z M16.1,15.3v1.1
+        c0,0.3-0.2,0.5-0.5,0.5H9.5c-0.3,0-0.5-0.2-0.5-0.5v-1.1c0-0.3,0.2-0.5,0.5-0.5h1.9h0h2.3h1.9C15.8,14.8,16.1,15,16.1,15.3z
+        M11.4,8.1h2.3h1.9c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5H9.5C9.2,10.2,9,10,9,9.7V8.6c0-0.3,0.2-0.5,0.5-0.5H11.4
+        L11.4,8.1z M4.8,6.3V5.3C4.8,5,5,4.8,5.3,4.8h6.1c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5H9.4H7.2H5.3
+        C5,6.8,4.8,6.6,4.8,6.3z M1.4,9.7V8.6c0-0.3,0.2-0.5,0.5-0.5h3.3h1.9c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5H1.9
+        C1.6,10.2,1.4,10,1.4,9.7z M7.2,11.5h2.3h1.9c0.3,0,0.5,0.2,0.5,0.5V13c0,0.3-0.2,0.5-0.5,0.5H5.3c-0.3,0-0.5-0.2-0.5-0.5V12
+        c0-0.3,0.2-0.5,0.5-0.5H7.2z M1.4,16.4v-1.1c0-0.3,0.2-0.5,0.5-0.5h3.3h1.9c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5H1.9
+        C1.6,16.9,1.4,16.7,1.4,16.4z M11.4,20.2H5.3c-0.3,0-0.5-0.2-0.5-0.5v-1.1c0-0.3,0.2-0.5,0.5-0.5h1.9h2.3h1.9c0.3,0,0.5,0.2,0.5,0.5
+        v1.1C11.9,20,11.7,20.2,11.4,20.2z M20.3,18.7v1.1c0,0.3-0.2,0.5-0.5,0.5h-6.1c-0.3,0-0.5-0.2-0.5-0.5v-1.1c0-0.3,0.2-0.5,0.5-0.5
+        h1.9h0h2.3h1.9C20,18.2,20.3,18.4,20.3,18.7z M23.1,14.8c0.3,0,0.5,0.2,0.5,0.5v1.1c0,0.3-0.2,0.5-0.5,0.5h-5.3
+        c-0.3,0-0.5-0.2-0.5-0.5v-1.1c0-0.3,0.2-0.5,0.5-0.5h1.9h0H23.1z M20.3,12V13c0,0.3-0.2,0.5-0.5,0.5h-6.1c-0.3,0-0.5-0.2-0.5-0.5V12
+        c0-0.3,0.2-0.5,0.5-0.5h1.9h0h2.3h1.9C20,11.5,20.3,11.7,20.3,12z M23.6,9.7c0,0.3-0.2,0.5-0.5,0.5h-5.3c-0.3,0-0.5-0.2-0.5-0.5V8.6
+        c0-0.3,0.2-0.5,0.5-0.5h1.9h0h3.3c0.3,0,0.5,0.2,0.5,0.5V9.7z"
+      />
+    </svg>
+  );
+};

frontend/src/components/Map/DetailsMap/DetailsMap.tsx

@@ -27,6 +27,7 @@ import { Check } from 'components/Icons/Check';
 import { FormattedMessage } from 'react-intl';
 import { InformationDesk } from 'modules/informationDesk/interface';
 import { SignageDictionary } from 'modules/signage/interface';
+import { InfrastructureDictionary } from 'modules/infrastructure/interface';
 import { BackButton } from '../components/BackButton';
 
 import { TrekMarkersAndCourse } from './TrekMarkersAndCourse';
@@ -81,6 +82,8 @@ export type PropsType = {
   displayAltimetricProfile?: boolean;
   informationDesks?: InformationDesk[];
   signage?: SignageDictionary | null;
+  service?: PointWithIcon[];
+  infrastructure?: InfrastructureDictionary | null;
 };
 export const DetailsMap: React.FC<PropsType> = props => {
   const { reportVisibility, setReportVisibility } = useDetailsAndMapContext();
@@ -108,7 +111,11 @@ export const DetailsMap: React.FC<PropsType> = props => {
     experiencesVisibility,
     toggleExperiencesVisibility,
     signageVisibility,
+    serviceVisibility,
     toggleSignageVisibility,
+    toggleServiceVisibility,
+    infrastructureVisibility,
+    toggleInfrastructureVisibility,
   } = useDetailsMap();
   const mapConfig = getMapConfig();
 
@@ -191,9 +198,17 @@ export const DetailsMap: React.FC<PropsType> = props => {
               ? informationDeskMobileVisibility
               : null
           }
-          coursesVisibility={props.courses ? coursesVisibility : null}
-          experiencesVisibility={props.experiences ? experiencesVisibility : null}
+          coursesVisibility={
+            Boolean(props.courses) && props.courses.length > 0 ? coursesVisibility : null
+          }
+          experiencesVisibility={
+            Boolean(props.experiences) && props.experiences.length > 0
+              ? experiencesVisibility
+              : null
+          }
           signageVisibility={props.signage ? signageVisibility : null}
+          serviceVisibility={props.service && props.service.length > 0 ? serviceVisibility : null}
+          infrastructureVisibility={props.infrastructure ? infrastructureVisibility : null}
           toggleTrekChildrenVisibility={toggleTrekChildrenVisibility}
           togglePoiVisibility={togglePoiVisibility}
           toggleReferencePointsVisibility={toggleReferencePointsVisibility}
@@ -202,6 +217,8 @@ export const DetailsMap: React.FC<PropsType> = props => {
           toggleCoursesVisibility={toggleCoursesVisibility}
           toggleExperiencesVisibility={toggleExperiencesVisibility}
           toggleSignageVisibility={toggleSignageVisibility}
+          toggleServiceVisibility={toggleServiceVisibility}
+          toggleInfrastructureVisibility={toggleInfrastructureVisibility}
         />
         {props.trekGeometry && (
           <TrekMarkersAndCourse
@@ -226,6 +243,8 @@ export const DetailsMap: React.FC<PropsType> = props => {
           trekChildrenGeometry={props.trekChildrenGeometry}
           sensitiveAreasGeometry={props.sensitiveAreas}
           signage={props.signage}
+          service={props.service}
+          infrastructure={props.infrastructure}
           trekChildrenMobileVisibility={trekChildrenMobileVisibility}
           poiMobileVisibility={poiMobileVisibility}
           referencePointsMobileVisibility={referencePointsMobileVisibility}
@@ -236,6 +255,8 @@ export const DetailsMap: React.FC<PropsType> = props => {
           experiencesVisibility={experiencesVisibility}
           informationDesks={props.informationDesks}
           signageVisibility={signageVisibility}
+          serviceVisibility={serviceVisibility}
+          infrastructureVisibility={infrastructureVisibility}
         />
         {props.displayAltimetricProfile === true && props.trekGeoJSON && (
           <AltimetricProfile id="altimetric-profile" trekGeoJSON={props.trekGeoJSON} />

frontend/src/components/Map/DetailsMap/MapChildren.tsx

@@ -5,15 +5,17 @@ import { Coordinate2D } from 'modules/interface';
 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 { useMediaPredicate } from 'react-media-hook';
+import { Infrastructure } from 'components/Icons/Infrastructure';
 import { TouristicContentGeometry } from './DetailsMap';
 
 import { MarkersWithIcon } from './MarkersWithIcon';
 import { PointReport } from './PointReport';
 import { PointsInformationDesk } from './PointsInformationDesk';
 import { PointsReference } from './PointsReference';
-import { PointsSignage } from './PointsSignage';
+import { PointsSecondary } from './PointsSecondary';
 import { SensitiveAreas } from './SensitiveAreas';
 import { TouristicContent } from './TouristicContent';
 import { TrekChildren } from './TrekChildren';
@@ -46,6 +48,10 @@ type Props = {
   informationDesks?: InformationDesk[];
   signageVisibility: Visibility;
   signage?: SignageDictionary | null;
+  serviceVisibility: Visibility;
+  service?: PointWithIcon[];
+  infrastructureVisibility: Visibility;
+  infrastructure?: InfrastructureDictionary | null;
 };
 
 export const MapChildren: React.FC<Props> = props => {
@@ -107,7 +113,13 @@ export const MapChildren: React.FC<Props> = props => {
         <PointsInformationDesk informationDesks={props.informationDesks} />
       )}
 
-      {props.signageVisibility === 'DISPLAYED' && <PointsSignage signage={props.signage} />}
+      {props.signageVisibility === 'DISPLAYED' && <PointsSecondary dictionary={props.signage} />}
+
+      {props.infrastructureVisibility === 'DISPLAYED' && (
+        <PointsSecondary dictionary={props.infrastructure} icon={Infrastructure} />
+      )}
+
+      {props.serviceVisibility === 'DISPLAYED' && <MarkersWithIcon points={props.service} />}
 
       {(isMobile || visibleSection === 'report') && props.reportVisibility && <PointReport />}
     </>

frontend/src/components/Map/DetailsMap/PointsSignage.tsx → frontend/src/components/Map/DetailsMap/PointsSecondary.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Tooltip } from 'react-leaflet';
 import { Signage } from 'components/Icons/Signage';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -7,30 +7,38 @@ import styled, { css } from 'styled-components';
 import { desktopOnly, getSpacing } from 'stylesheet';
 import { textEllipsisAfterNLines } from 'services/cssHelpers';
 import { RawCoordinate2D } from 'modules/interface';
+import { InfrastructureDictionary } from 'modules/infrastructure/interface';
+import { FormattedMessage } from 'react-intl';
 import { HoverableMarker } from '../components/HoverableMarker';
 
-export type PointsSignageProps = {
-  signage?: SignageDictionary | null;
+export type PointsSecondaryProps = {
+  dictionary?: SignageDictionary | InfrastructureDictionary | null;
+  icon?: FC;
 };
 
 type Locations = {
+  accessibility?: string | null;
   description: string;
   name: string;
-  imageUrl: string | undefined;
+  imageUrl: string | null;
   pictogramUri: string;
   position: RawCoordinate2D;
   type: string;
 }[];
 
-export const PointsSignage: React.FC<PointsSignageProps> = ({ signage }) => {
+export const PointsSecondary: React.FC<PointsSecondaryProps> = ({
+  dictionary,
+  icon: Icon = Signage,
+}) => {
   const locations: Locations = useMemo(() => {
-    return Object.values(signage ?? {})
+    return Object.values(dictionary ?? {})
       .filter(({ geometry }) => Boolean(geometry?.coordinates))
-      .map(({ description, geometry, name, type, imageUrl }) => ({
+      .map(({ accessibility, description, geometry, name, type, imageUrl }) => ({
+        accessibility,
         description,
         imageUrl,
         name,
-        pictogramUri: type.pictogram ?? renderToStaticMarkup(<Signage color="white" />),
+        pictogramUri: type.pictogram ?? renderToStaticMarkup(<Icon color="white" />),
         position: [geometry.coordinates[1], geometry.coordinates[0]],
         type: type.label,
       }));
@@ -52,18 +60,28 @@ export const PointsSignage: React.FC<PointsSignageProps> = ({ signage }) => {
         >
           <StyledTooltip>
             <div className="flex flex-col">
-              {location.imageUrl !== undefined && <CoverImage src={location.imageUrl} alt="" />}
+              {location.imageUrl !== null && <CoverImage src={location.imageUrl} alt="" />}
               <div className="p-4">
                 <div className="text-P2 mb-1 text-greyDarkColored">{location.type}</div>
                 <Name className="text-Mobile-C1 text-primary1 font-bold desktop:text-H4">
                   {location.name}
                 </Name>
-                <p
-                  className="text-P2 mb-1"
-                  dangerouslySetInnerHTML={{
-                    __html: location.description,
-                  }}
-                />
+                {Boolean(location.description) && (
+                  <p
+                    className="text-P2 my-2"
+                    dangerouslySetInnerHTML={{
+                      __html: location.description,
+                    }}
+                  />
+                )}
+                {Boolean(location.accessibility) && (
+                  <p className="text-P2 my-2">
+                    <strong className="font-bold">
+                      <FormattedMessage id="details.accessibility" /> :
+                    </strong>{' '}
+                    {location.accessibility}
+                  </p>
+                )}
               </div>
             </div>
           </StyledTooltip>

frontend/src/components/Map/DetailsMap/useDetailsMap.tsx

@@ -19,6 +19,8 @@ export const useDetailsMap = () => {
   const [coursesVisibility, setCoursesVisibility] = useState<Visibility>('HIDDEN');
   const [experiencesVisibility, setExperiencesVisibility] = useState<Visibility>('HIDDEN');
   const [signageVisibility, setSignageVisibility] = useState<Visibility>('HIDDEN');
+  const [serviceVisibility, setServiceVisibility] = useState<Visibility>('HIDDEN');
+  const [infrastructureVisibility, setInfrastructureVisibility] = useState<Visibility>('HIDDEN');
 
   const toggleTrekChildrenVisibility = () => setTrekChildrenVisibility(toggleVisibility);
 
@@ -33,6 +35,8 @@ export const useDetailsMap = () => {
   const toggleExperiencesVisibility = () => setExperiencesVisibility(toggleVisibility);
   const toggleCoursesVisibility = () => setCoursesVisibility(toggleVisibility);
   const toggleSignageVisibility = () => setSignageVisibility(toggleVisibility);
+  const toggleServiceVisibility = () => setServiceVisibility(toggleVisibility);
+  const toggleInfrastructureVisibility = () => setInfrastructureVisibility(toggleVisibility);
 
   return {
     trekChildrenMobileVisibility,
@@ -51,5 +55,9 @@ export const useDetailsMap = () => {
     toggleExperiencesVisibility,
     signageVisibility,
     toggleSignageVisibility,
+    serviceVisibility,
+    toggleServiceVisibility,
+    infrastructureVisibility,
+    toggleInfrastructureVisibility,
   };
 };