add touristic content

GeotrekCE · Oct 20, 2023 · 125007c · 125007c
1 parent b0a6f16
commit 125007c
Show file tree

Hide file tree

Showing 21 changed files with 478 additions and 55 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -5,8 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { InformationDesk, Poi, SensitiveArea, Trek } from "types/types";
-export { InformationDesk, Poi, SensitiveArea, Trek } from "types/types";
+import { InformationDesk, Poi, SensitiveArea, TouristicContent, Trek } from "types/types";
+export { InformationDesk, Poi, SensitiveArea, TouristicContent, Trek } from "types/types";
 export namespace Components {
     interface GrwApp {
         "api": string;
@@ -53,7 +53,7 @@ export namespace Components {
         "filterType": string;
         "segment": string;
     }
-    interface GrwInformationDeskDetail {
+    interface GrwInformationDesk {
         "informationDesk": InformationDesk;
     }
     interface GrwMap {
@@ -74,7 +74,7 @@ export namespace Components {
         "useGradient": boolean;
         "zoom": number;
     }
-    interface GrwPoiDetail {
+    interface GrwPoi {
         "poi": Poi;
     }
     interface GrwSearch {
@@ -84,6 +84,9 @@ export namespace Components {
     interface GrwSensitiveAreaDetail {
         "sensitiveArea": SensitiveArea;
     }
+    interface GrwTouristicContent {
+        "touristicContent": TouristicContent;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer": string;
         "colorOnSurface": string;
@@ -140,9 +143,9 @@ export interface GrwAppCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLGrwAppElement;
 }
-export interface GrwInformationDeskDetailCustomEvent<T> extends CustomEvent<T> {
+export interface GrwInformationDeskCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLGrwInformationDeskDetailElement;
+    target: HTMLGrwInformationDeskElement;
 }
 export interface GrwMapCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -169,23 +172,23 @@ declare global {
         prototype: HTMLGrwFilterElement;
         new (): HTMLGrwFilterElement;
     };
-    interface HTMLGrwInformationDeskDetailElement extends Components.GrwInformationDeskDetail, HTMLStencilElement {
+    interface HTMLGrwInformationDeskElement extends Components.GrwInformationDesk, HTMLStencilElement {
     }
-    var HTMLGrwInformationDeskDetailElement: {
-        prototype: HTMLGrwInformationDeskDetailElement;
-        new (): HTMLGrwInformationDeskDetailElement;
+    var HTMLGrwInformationDeskElement: {
+        prototype: HTMLGrwInformationDeskElement;
+        new (): HTMLGrwInformationDeskElement;
     };
     interface HTMLGrwMapElement extends Components.GrwMap, HTMLStencilElement {
     }
     var HTMLGrwMapElement: {
         prototype: HTMLGrwMapElement;
         new (): HTMLGrwMapElement;
     };
-    interface HTMLGrwPoiDetailElement extends Components.GrwPoiDetail, HTMLStencilElement {
+    interface HTMLGrwPoiElement extends Components.GrwPoi, HTMLStencilElement {
     }
-    var HTMLGrwPoiDetailElement: {
-        prototype: HTMLGrwPoiDetailElement;
-        new (): HTMLGrwPoiDetailElement;
+    var HTMLGrwPoiElement: {
+        prototype: HTMLGrwPoiElement;
+        new (): HTMLGrwPoiElement;
     };
     interface HTMLGrwSearchElement extends Components.GrwSearch, HTMLStencilElement {
     }
@@ -205,6 +208,12 @@ declare global {
         prototype: HTMLGrwSensitiveAreaDetailElement;
         new (): HTMLGrwSensitiveAreaDetailElement;
     };
+    interface HTMLGrwTouristicContentElement extends Components.GrwTouristicContent, HTMLStencilElement {
+    }
+    var HTMLGrwTouristicContentElement: {
+        prototype: HTMLGrwTouristicContentElement;
+        new (): HTMLGrwTouristicContentElement;
+    };
     interface HTMLGrwTrekCardElement extends Components.GrwTrekCard, HTMLStencilElement {
     }
     var HTMLGrwTrekCardElement: {
@@ -238,12 +247,13 @@ declare global {
     interface HTMLElementTagNameMap {
         "grw-app": HTMLGrwAppElement;
         "grw-filter": HTMLGrwFilterElement;
-        "grw-information-desk-detail": HTMLGrwInformationDeskDetailElement;
+        "grw-information-desk": HTMLGrwInformationDeskElement;
         "grw-map": HTMLGrwMapElement;
-        "grw-poi-detail": HTMLGrwPoiDetailElement;
+        "grw-poi": HTMLGrwPoiElement;
         "grw-search": HTMLGrwSearchElement;
         "grw-select-language": HTMLGrwSelectLanguageElement;
         "grw-sensitive-area-detail": HTMLGrwSensitiveAreaDetailElement;
+        "grw-touristic-content": HTMLGrwTouristicContentElement;
         "grw-trek-card": HTMLGrwTrekCardElement;
         "grw-trek-detail": HTMLGrwTrekDetailElement;
         "grw-trek-provider": HTMLGrwTrekProviderElement;
@@ -298,9 +308,9 @@ declare namespace LocalJSX {
         "filterType"?: string;
         "segment"?: string;
     }
-    interface GrwInformationDeskDetail {
+    interface GrwInformationDesk {
         "informationDesk"?: InformationDesk;
-        "onCenterOnMap"?: (event: GrwInformationDeskDetailCustomEvent<{ latitude: number; longitude: number }>) => void;
+        "onCenterOnMap"?: (event: GrwInformationDeskCustomEvent<{ latitude: number; longitude: number }>) => void;
     }
     interface GrwMap {
         "attributionLayer"?: string;
@@ -321,7 +331,7 @@ declare namespace LocalJSX {
         "useGradient"?: boolean;
         "zoom"?: number;
     }
-    interface GrwPoiDetail {
+    interface GrwPoi {
         "poi"?: Poi;
     }
     interface GrwSearch {
@@ -331,6 +341,9 @@ declare namespace LocalJSX {
     interface GrwSensitiveAreaDetail {
         "sensitiveArea"?: SensitiveArea;
     }
+    interface GrwTouristicContent {
+        "touristicContent"?: TouristicContent;
+    }
     interface GrwTrekCard {
         "colorOnSecondaryContainer"?: string;
         "colorOnSurface"?: string;
@@ -362,6 +375,7 @@ declare namespace LocalJSX {
         "onPoiIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onSensitiveAreaIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onStepsIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onTouristicContentsIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "resetStoreOnDisconnected"?: boolean;
         "trek"?: Trek;
         "weather"?: boolean;
@@ -395,12 +409,13 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "grw-app": GrwApp;
         "grw-filter": GrwFilter;
-        "grw-information-desk-detail": GrwInformationDeskDetail;
+        "grw-information-desk": GrwInformationDesk;
         "grw-map": GrwMap;
-        "grw-poi-detail": GrwPoiDetail;
+        "grw-poi": GrwPoi;
         "grw-search": GrwSearch;
         "grw-select-language": GrwSelectLanguage;
         "grw-sensitive-area-detail": GrwSensitiveAreaDetail;
+        "grw-touristic-content": GrwTouristicContent;
         "grw-trek-card": GrwTrekCard;
         "grw-trek-detail": GrwTrekDetail;
         "grw-trek-provider": GrwTrekProvider;
@@ -414,12 +429,13 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "grw-app": LocalJSX.GrwApp & JSXBase.HTMLAttributes<HTMLGrwAppElement>;
             "grw-filter": LocalJSX.GrwFilter & JSXBase.HTMLAttributes<HTMLGrwFilterElement>;
-            "grw-information-desk-detail": LocalJSX.GrwInformationDeskDetail & JSXBase.HTMLAttributes<HTMLGrwInformationDeskDetailElement>;
+            "grw-information-desk": LocalJSX.GrwInformationDesk & JSXBase.HTMLAttributes<HTMLGrwInformationDeskElement>;
             "grw-map": LocalJSX.GrwMap & JSXBase.HTMLAttributes<HTMLGrwMapElement>;
-            "grw-poi-detail": LocalJSX.GrwPoiDetail & JSXBase.HTMLAttributes<HTMLGrwPoiDetailElement>;
+            "grw-poi": LocalJSX.GrwPoi & JSXBase.HTMLAttributes<HTMLGrwPoiElement>;
             "grw-search": LocalJSX.GrwSearch & JSXBase.HTMLAttributes<HTMLGrwSearchElement>;
             "grw-select-language": LocalJSX.GrwSelectLanguage & JSXBase.HTMLAttributes<HTMLGrwSelectLanguageElement>;
             "grw-sensitive-area-detail": LocalJSX.GrwSensitiveAreaDetail & JSXBase.HTMLAttributes<HTMLGrwSensitiveAreaDetailElement>;
+            "grw-touristic-content": LocalJSX.GrwTouristicContent & JSXBase.HTMLAttributes<HTMLGrwTouristicContentElement>;
             "grw-trek-card": LocalJSX.GrwTrekCard & JSXBase.HTMLAttributes<HTMLGrwTrekCardElement>;
             "grw-trek-detail": LocalJSX.GrwTrekDetail & JSXBase.HTMLAttributes<HTMLGrwTrekDetailElement>;
             "grw-trek-provider": LocalJSX.GrwTrekProvider & JSXBase.HTMLAttributes<HTMLGrwTrekProviderElement>;

diff --git a/src/components/grw-app/readme.md b/src/components/grw-app/readme.md
@@ -78,8 +78,9 @@ graph TD;
   grw-treks-list --> grw-trek-card
   grw-trek-detail --> grw-trek-card
   grw-trek-detail --> grw-sensitive-area-detail
-  grw-trek-detail --> grw-information-desk-detail
-  grw-trek-detail --> grw-poi-detail
+  grw-trek-detail --> grw-information-desk
+  grw-trek-detail --> grw-poi
+  grw-trek-detail --> grw-touristic-content
   style grw-app fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/...k-detail/grw-information-desk-detail.scss → ...nformation-desk/grw-information-desk.scss b/...k-detail/grw-information-desk-detail.scss → ...nformation-desk/grw-information-desk.scss
diff --git a/...sk-detail/grw-information-desk-detail.tsx → ...information-desk/grw-information-desk.tsx b/...sk-detail/grw-information-desk-detail.tsx → ...information-desk/grw-information-desk.tsx
@@ -2,8 +2,8 @@ import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/c
 import { InformationDesk } from 'types/types';
 
 @Component({
-  tag: 'grw-information-desk-detail',
-  styleUrl: 'grw-information-desk-detail.scss',
+  tag: 'grw-information-desk',
+  styleUrl: 'grw-information-desk.scss',
   shadow: true,
 })
 export class GrwInformationDeskDetail {

diff --git a/...nts/grw-information-desk-detail/readme.md → ...components/grw-information-desk/readme.md b/...nts/grw-information-desk-detail/readme.md → ...components/grw-information-desk/readme.md
@@ -28,8 +28,8 @@
 ### Graph
 ```mermaid
 graph TD;
-  grw-trek-detail --> grw-information-desk-detail
-  style grw-information-desk-detail fill:#f9f,stroke:#333,stroke-width:4px
+  grw-trek-detail --> grw-information-desk
+  style grw-information-desk fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -222,7 +222,8 @@
 .sensitive-area-tooltip {
   .poi-name,
   .information-desks-name,
-  .sensitive-area-name {
+  .sensitive-area-name,
+  .touristic-content-name {
     color: var(--color-primary-app);
     font-weight: 400;
     font-size: 16px;
@@ -251,7 +252,8 @@
 }
 
 .poi-icon,
-.information-desks-icon {
+.information-desks-icon,
+.touristic-content-icon {
   background-color: var(--color-poi-icon);
   border-radius: 50%;
   display: flex;

diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx
@@ -52,6 +52,7 @@ export class GrwMap {
   currentSensitiveAreasLayer: L.GeoJSON<any>;
   currentPoisLayer: L.GeoJSON<any>;
   currentInformationDesksLayer: L.GeoJSON<any>;
+  currentToutisticContentsLayer: L.GeoJSON<any>;
   elevationControl: L.Control.Layers;
   layersControl: L.Control.Layers;
   userLayersState: {
@@ -110,6 +111,13 @@ export class GrwMap {
     }
   }
 
+  @Listen('touristicContentsIsInViewport', { target: 'window' })
+  touristicContentsIsInViewport(event: CustomEvent<boolean>) {
+    if (this.currentToutisticContentsLayer) {
+      this.handleLayerVisibility(event.detail, this.currentToutisticContentsLayer);
+    }
+  }
+
   @Listen('cardTrekMouseOver', { target: 'window' })
   onCardTrekMouseOver(event: CustomEvent<number>) {
     if (!state.parentTrek && (!state.selectedTrekId || state.selectedTrekId !== event.detail)) {
@@ -461,6 +469,47 @@ export class GrwMap {
       });
     }
 
+    if (state.touristicContents && state.touristicContents.length > 0) {
+      const currentTouristicContentsFeatureCollection: FeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+
+      for (const touristicContent of state.touristicContents) {
+        currentTouristicContentsFeatureCollection.features.push({
+          type: 'Feature',
+          properties: {
+            name: touristicContent.name,
+            category_pictogram: state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === touristicContent.category)?.pictogram,
+          },
+          geometry: touristicContent.geometry,
+        });
+      }
+
+      this.currentToutisticContentsLayer = L.geoJSON(currentTouristicContentsFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) =>
+          L.marker(latlng, {
+            icon: L.divIcon({
+              html: geoJsonPoint.properties.category_pictogram ? `<img src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
+              className: 'touristic-content-icon',
+              iconSize: 48,
+            } as any),
+            autoPanOnFocus: false,
+          } as any),
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const touristicContentTooltip = L.DomUtil.create('div');
+            touristicContentTooltip.className = 'poi-tooltip';
+            const touristicContentName = L.DomUtil.create('div');
+            touristicContentName.innerHTML = geoJsonPoint.properties.name;
+            touristicContentName.className = 'touristic-content-name';
+            touristicContentTooltip.appendChild(touristicContentName);
+            layer.bindTooltip(touristicContentTooltip).openTooltip();
+          });
+        },
+      });
+    }
+
     if (state.currentInformationDesks && state.currentInformationDesks.length > 0) {
       const currentInformationDesksFeatureCollection: FeatureCollection = {
         type: 'FeatureCollection',
@@ -663,6 +712,9 @@ export class GrwMap {
     if (this.currentPoisLayer) {
       overlays[translate[state.language].layers.pois] = this.currentPoisLayer;
     }
+    if (this.currentToutisticContentsLayer) {
+      overlays[translate[state.language].layers.touristicContents] = this.currentToutisticContentsLayer;
+    }
 
     if (this.layersControl) {
       Object.keys(overlays).forEach(key => {
@@ -917,6 +969,11 @@ export class GrwMap {
       this.map.removeLayer(this.currentStepsLayer);
       this.currentStepsLayer = null;
     }
+
+    if (this.currentToutisticContentsLayer) {
+      this.map.removeLayer(this.currentToutisticContentsLayer);
+      this.currentToutisticContentsLayer = null;
+    }
   }
 
   disconnectedCallback() {

diff --git a/...onents/grw-poi-detail/grw-poi-detail.scss → src/components/grw-poi-detail/grw-poi.scss b/...onents/grw-poi-detail/grw-poi-detail.scss → src/components/grw-poi-detail/grw-poi.scss
diff --git a/...ponents/grw-poi-detail/grw-poi-detail.tsx → src/components/grw-poi-detail/grw-poi.tsx b/...ponents/grw-poi-detail/grw-poi-detail.tsx → src/components/grw-poi-detail/grw-poi.tsx
@@ -4,8 +4,8 @@ import state from 'store/store';
 import { Poi } from 'types/types';
 
 @Component({
-  tag: 'grw-poi-detail',
-  styleUrl: 'grw-poi-detail.scss',
+  tag: 'grw-poi',
+  styleUrl: 'grw-poi.scss',
   shadow: true,
 })
 export class GrwPoiDetail {

diff --git a/src/components/grw-poi-detail/readme.md b/src/components/grw-poi-detail/readme.md
@@ -21,8 +21,8 @@
 ### Graph
 ```mermaid
 graph TD;
-  grw-trek-detail --> grw-poi-detail
-  style grw-poi-detail fill:#f9f,stroke:#333,stroke-width:4px
+  grw-trek-detail --> grw-poi
+  style grw-poi fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------