Merge pull request #597 from GeotrekCE/develop

Develop > Master / Release 3.7.0

Author: camillemonchicourt

docs/changelog.md

@@ -1,5 +1,31 @@
 # Changelog
 
+3.7.0 (2022-03-11)
+------------------
+
+**🚀 New features**
+
+* Include 3D view in trek detail pages (#390)
+* Add ``maxLengthTrekAllowedFor3DRando`` setting to define the maximum length of a trek to enable the 3D view on its page (or to disable 3D view) (#390)
+* Add breadcrumb on detail and information pages (#506)
+* Add Open System reservation widget on trek detail pages with an ``id_reservation`` (#382)
+* Add ``reservationPartner`` and ``reservationProject`` settings to enable Open System reservation widget (#382)
+* Add a customizable color for each content category (treks, outdoor sites, services and events) to better differentiate content categories (#437)
+* Add content type name display on hover of pictograms in search page (#437)
+* Add the possibility to define outdoor sites, services and events suggestions on home page (#372)
+* Display more information on suggestions cards on home page (#372)
+* Improve layer controller on treks and outdoor sites detail pages (#449)
+* Add a panel on trek mobile map to display trek title, steps and altimetric profile (#452)
+* Display SVG theme pictograms in filters
+* Improve modale component
+* Add German, Spanish and Catalan translations (#571)
+
+**🐛 Fixes**
+
+* Fix categories display in mobile filters depending on contents and settings (#586)
+* Fix trek filters displayed in 3 columns (#377)
+* Display ``disabledInfrastructure`` and ``accessibilities`` in trek detail pages only if they have content
+
 3.6.0 (2022-02-07)
 ------------------
 

docs/customization.md

@@ -34,10 +34,11 @@ In json files, you can just override the primary keys you need. You have to over
   - `applicationName`: application name appearing on PWA
   - `enableReport`: to enable report form in trek detail pages
   - `enableSearchByMap`: to enable searching by map displayed area (bbox)
+  - `maxLengthTrekAllowedFor3DRando`: Maximum length of meters allowed to enable 3D mode in the current trek. Adjust this setting carefully as too long a trek could freeze your browser. If this setting is defined to `0` (or `mapSatelliteLayerUrl` from `map.json` is not set) the 3D mode feature is disabled for the whole application
 
 - `header.json` to define logo URL, default and available languages, number items to flatpages to display in navbar (see default values in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/header.json)
 
-- `home.json` to define homepage settings. You can define blocks to display and trek suggestion block with trek ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
+- `home.json` to define homepage settings. You can define blocks to display and trek suggestion block with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
 
   - In `welcomeBanner`, you can personnalize the cover on the homepage. You can add an asset on the top of the page: it can either be a video, a single picture or a carousel of images:
 
@@ -120,6 +121,19 @@ Example for Cevennes national park orange colors:
 }
 ```
 
+It's also possible to change category colors :
+
+```json
+{
+  "categories": {
+    "trek": "blue",
+    "events": "red",
+    "outdoor": "#62AB41",
+    "service": "#3B89A2"
+  }
+}
+```
+
 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...).
 
 ## Translations

docs/icons.md

@@ -1,6 +1,6 @@
 # Icons
 
-Geotrek V3 uses icons which images come from API. This file intends to help upload a right format for them in Geotrek Admin.
+Geotrek-rando V3 uses icons which images come from API. This file intends to help upload a right format for them in Geotrek-admin.
 
 ## Activity icons
 
@@ -10,15 +10,17 @@ Because of that, they have to be :
 - in **`svg` format**
 - **white**, or with a light color, by default (a color that is visible on a `primary1` background)
 - **without filled background** : only shapes or lines
+- without `width` and `height` attributes
 - preferrably, **no different colors**. If different colors are used, they will be lost anyway when the icon is modified. The icon has to stay readable with all its shapes and lines in one color.
+- with an usable licence and credits
 
-**Default activity icons**, not modified, are visible in search filter list or on map :
+**Default activity icons**, not modified, are visible in search filter list or on map 
 
 ![Activity Icon on filter list](assets/iconFilterList.png)
 
-Here that "Alpinisme" icon should have been white by default.
+Here the "Alpinisme" icon should have been white by default.
 
-**Modified activity icons** are visible on activity bar on home or details page :
+**Modified activity icons** are visible on activity bar on home or details page:
 
 ![Activity Icon modified on home](assets/iconHome.png)
 

frontend/config/global.json

@@ -8,6 +8,8 @@
   "enableTouristicEvents": true,
   "portalIds": [],
   "apiUrl": "https://geotrekdemo.ecrins-parcnational.fr/api/v2",
+  "reservationPartner": null,
+  "reservationProject": null,
   "googleAnalyticsId": null,
   "googleSiteVerificationToken": "eKAyxwaXAobFWQcJen0mnZ8T3CpLoN45JysXeNkRf38",
   "baseUrl": "http://127.0.0.1:3000",
@@ -17,5 +19,7 @@
   "enableIndexation": true,
   "enableReport": true,
   "enableSearchByMap": true,
-  "enableServerCache": true
-}
+  "enableServerCache": true,
+  "enableMeteoWidget": true,
+  "maxLengthTrekAllowedFor3DRando": 25000
+}

frontend/customization/config/global.json

@@ -8,6 +8,8 @@
   "enableTouristicEvents": true,
   "portalIds": [1],
   "apiUrl": "https://geotrekdemo.ecrins-parcnational.fr/api/v2",
+  "reservationPartner": "parcdesecrins",
+  "reservationProject": "parcdesecrins",
   "googleAnalyticsId": "G-8FSV2N4FXN",
   "googleSiteVerificationToken": "eKAyxwaXAobFWQcJen0mnZ8T3CpLoN45JysXeNkRf38",
   "baseUrl": "http://localhost:3000",

frontend/customization/config/home.json

@@ -14,12 +14,31 @@
     {
       "titleTranslationId": "home.territoryTreks",
       "iconUrl": "/icons/practice-pedestrian.svg",
-      "ids": ["2", "582", "586", "501", "771", "596", "604"]
+      "ids": ["2", "582", "586", "501", "771", "596"],
+      "type": "trek"
+    },
+    {
+      "titleTranslationId": "home.events",
+      "iconUrl": "/icons/category-events.svg",
+      "ids": ["1", "5"],
+      "type": "events"
+    },
+    {
+      "titleTranslationId": "home.outdoor",
+      "iconUrl": "/icons/practice-outdoor.svg",
+      "ids": ["65", "12", "79"],
+      "type": "outdoor"
+    },
+    {
+      "titleTranslationId": "home.services",
+      "iconUrl": "/icons/category-services.svg",
+      "ids": ["1", "6", "476"],
+      "type": "service"
     },
     {
       "titleTranslationId": "home.itinerantTreks",
       "iconUrl": "/icons/practice-pedestrian.svg",
-      "ids": ["501", "771"]
+      "ids": ["501", "771", "604"]
     }
   ]
 }

frontend/next.config.js

@@ -24,6 +24,20 @@ module.exports = withPlugins(plugins, {
   webpack(config) {
     config.resolve.modules.push(path.resolve('./src'));
 
+    Object.assign(config.resolve.alias, {
+      // GSAP aliases are useful for @makina-corpus/rando3d package
+      EasePack: 'gsap/src/uncompressed/easing/EasePack.js',
+      TweenLite: 'gsap/src/uncompressed/TweenLite.js',
+      TimelineLite: 'gsap/src/uncompressed/TimelineLite.js',
+      BezierPlugin: 'gsap/src/uncompressed/plugins/BezierPlugin.js',
+      DirectionalRotationPlugin: 'gsap/src/uncompressed/plugins/DirectionalRotationPlugin.js',
+    });
+
+    config.module.rules.push({
+      test: /\.html$/,
+      use: 'raw-loader',
+    });
+
     return config;
   },
   pwa: {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@makina-corpus/rando3d": "^1.3.1",
     "@next/bundle-analyzer": "11.1.2",
     "@raruto/leaflet-elevation": "1.7.0",
     "@sentry/browser": "6.13.2",
@@ -128,12 +129,14 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "4.12.3",
     "full-icu": "1.3.4",
+    "gsap": "1.16.1",
     "html-loader-jest": "^0.2.1",
     "isomorphic-fetch": "^3.0.0",
     "jest": "27.2.1",
     "next-server": "^9.0.5",
     "nock": "13.1.3",
     "prettier": "2.4.1",
+    "raw-loader": "^4.0.2",
     "react-addons-test-utils": "^15.6.2",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "^8.0.2",

frontend/src/components/3D/3D.style.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { colorPalette } from 'stylesheet';
+
+export const Wrapper = styled.div`
+  width: 90vw;
+  height: 90vh;
+  background-color: ${colorPalette.greyDarkColored};
+  background-image: url(/images/3d/background.jpg);
+  background-size: 100% 100%;
+`;
+export const Control = styled.div`
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 0 0 0.35em 0.35em;
+`;
+
+export const Camera = styled.ul`
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 0.35em 0 0 0.35em;
+`;
+
+export const CameraItem = styled.li`
+  border-left: 1px solid transparent;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
+  &.camera--disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+  &.camera--selected {
+    cursor: auto;
+    border-left-color: white;
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const LoaderOverlay = styled.div`
+  background-color: rgba(255, 255, 255, 0.2);
+`;
+
+export const PoiSide = styled.div`
+  background-color: rgba(20, 20, 20, 0.8);
+  top: 0;
+  left: -100%;
+  width: 24rem;
+  height: 100%;
+  transition: left 0.3s ease-out;
+  &.opened {
+    left: 0;
+  }
+`;
+
+export const Poi = styled.div`
+  background-color: rgba(255, 255, 255, 0.2);
+  position: absolute;
+  width: auto;
+  height: auto;
+  padding: 2px;
+  border-radius: 0.35em;
+  text-align: center;
+  display: none;
+`;

frontend/src/components/3D/Interface.tsx

@@ -0,0 +1,115 @@
+import Image from 'next/image';
+import { MessageFormatElement, useIntl } from 'react-intl';
+import { Camera, CameraItem, Control } from './3D.style';
+
+const getControls = (t: Record<string, string> | Record<string, MessageFormatElement[]>) => [
+  {
+    control: 'examine',
+    title: t['rando3D.views.examine.title'],
+    steps: [
+      {
+        label: t['rando3D.instructions.zoom'],
+        action: <strong>{t['rando3D.actions.scrollMouse']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.lookAround'],
+        action: <strong>{t['rando3D.actions.leftClick']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.moveAround'],
+        action: <Image width={50} height={33} src="/images/3d/icon_783__.png" alt="" />,
+      },
+    ],
+    cameraTitle: t['rando3D.views.examine.cameraTitle'],
+  },
+  {
+    control: 'bird',
+    title: t['rando3D.views.bird.title'],
+    steps: [
+      {
+        label: t['rando3D.instructions.zoom'],
+        action: <strong>{t['rando3D.actions.scrollMouse']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.lookAround'],
+        action: <strong>{t['rando3D.actions.leftClick']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.moveAround'],
+        action: <Image width={50} height={33} src="/images/3d/icon_783__.png" alt="" />,
+      },
+    ],
+    cameraTitle: t['rando3D.views.bird.cameraTitle'],
+  },
+  {
+    control: 'hiker',
+    title: t['rando3D.views.hiker.title'],
+    steps: [
+      {
+        label: t['rando3D.instructions.lookAround'],
+        action: <strong>{t['rando3D.actions.leftClick']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.playPause'],
+        action: <strong>{t['rando3D.actions.space']}</strong>,
+      },
+      {
+        label: t['rando3D.instructions.stop'],
+        action: <strong>{t['rando3D.actions.enter']}</strong>,
+      },
+    ],
+    cameraTitle: t['rando3D.views.examine.hiker'],
+  },
+];
+
+const Interface: React.FC = () => {
+  const { messages } = useIntl();
+  const controls = getControls(messages);
+  return (
+    <section className="interface absolute inset-0 pointer-events-none z-10">
+      {controls.map(({ control, title, steps }) => (
+        <Control
+          key={control}
+          className={`controls controls--${control} absolute top-0 right-0 w-70 p-4 hidden`}
+        >
+          <h2 className="text-2xl mb-2">{title}</h2>
+          <p className="controls-description mb-2" />
+          {steps.map(({ label, action }, index) => (
+            <span key={index} className="block m-1">
+              {label} <span className="font-bold">{action}</span>
+            </span>
+          ))}
+        </Control>
+      ))}
+
+      <Camera className="camera_switcher absolute hidden top-90 right-0 w-15 pointer-events-auto">
+        {controls.map(({ control, cameraTitle }) => (
+          <CameraItem
+            key={control}
+            className={`camera camera--${control} camera--disabled text-center cursor-pointer`}
+          >
+            <button type="button" className="block">
+              <Image width="100%" height="100%" src={`/images/3d/camera-${control}.svg`} alt="" />
+              <span className="block">{cameraTitle}</span>
+            </button>
+          </CameraItem>
+        ))}
+      </Camera>
+
+      <div className="absolute bottom-1 left-2 block pointer-events-auto">
+        <a
+          className="geotrek_link"
+          href="https://makina-corpus.com/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Image width={80} height={80} src="/images/3d/logo-makina-corpus.svg" />
+        </a>
+      </div>
+
+      <strong className="absolute bottom-1 right-2">©IGN</strong>
+    </section>
+  );
+};
+
+export default Interface;