handle parent trek press

GeotrekCE · Oct 6, 2023 · 7e1107a · 7e1107a
1 parent f93d160
commit 7e1107a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -357,6 +357,7 @@ declare namespace LocalJSX {
         "isLargeView"?: boolean;
         "onDescriptionReferenceIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onInformationDeskIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
+        "onParentTrekPress"?: (event: GrwTrekDetailCustomEvent<number>) => void;
         "onParkingIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onPoiIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;
         "onSensitiveAreaIsInViewport"?: (event: GrwTrekDetailCustomEvent<boolean>) => void;

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -76,6 +76,18 @@ export class GrwApp {
     window.history.pushState({}, '', url);
   }
 
+  @Listen('parentTrekPress', { target: 'window' })
+  onParentTrekPress(event: CustomEvent<number>) {
+    state.currentTrek = null;
+    this.currentTrekId = event.detail;
+    this.showTrek = true;
+    this.showTrekMap = false;
+    const url = new URL(window.location.toString());
+    url.searchParams.set('trek', this.currentTrekId.toString());
+    url.searchParams.delete('parentTrek');
+    window.history.pushState({}, '', url);
+  }
+
   @Listen('resize', { target: 'window' })
   onWindowResize() {
     this.handleView();

diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx
@@ -77,6 +77,7 @@ export class GrwTrekDetail {
   @Event() sensitiveAreaIsInViewport: EventEmitter<boolean>;
   @Event() informationDeskIsInViewport: EventEmitter<boolean>;
   @Event() poiIsInViewport: EventEmitter<boolean>;
+  @Event() parentTrekPress: EventEmitter<number>;
   @State() currentTrek: Trek;
   @State() difficulty: Difficulty;
   @State() route: Route;
@@ -457,9 +458,9 @@ export class GrwTrekDetail {
             {this.currentTrek.description_teaser && <div class="description-teaser" innerHTML={this.currentTrek.description_teaser}></div>}
             {this.currentTrek.ambiance && <div class="ambiance" innerHTML={this.currentTrek.ambiance}></div>}
             <div class="divider"></div>
-            {state.parentTrek && (
+            {state.parentTrekId && state.parentTrek && this.currentTrek.id !== state.parentTrekId && (
               <div class="parent-trek-container">
-                <button class="parent-trek-title">
+                <button class="parent-trek-title" onClick={() => this.parentTrekPress.emit(state.parentTrekId)}>
                   <div>&lt;</div>
                   {state.parentTrek.name}
                 </button>

diff --git a/src/components/grw-trek-detail/readme.md b/src/components/grw-trek-detail/readme.md
@@ -27,6 +27,7 @@
 | ---------------------------------- | ----------- | ---------------------- |
 | `descriptionReferenceIsInViewport` |             | `CustomEvent<boolean>` |
 | `informationDeskIsInViewport`      |             | `CustomEvent<boolean>` |
+| `parentTrekPress`                  |             | `CustomEvent<number>`  |
 | `parkingIsInViewport`              |             | `CustomEvent<boolean>` |
 | `poiIsInViewport`                  |             | `CustomEvent<boolean>` |
 | `sensitiveAreaIsInViewport`        |             | `CustomEvent<boolean>` |