@geotrekce/geotrek-rando-widget 0.0.6 → 0.0.9

package/dist/collection/components/grw-app/grw-app.css

@@ -8,6 +8,7 @@
 .header-container,
 .large-view-header-container {
   display: flex;
+  flex-direction: row;
   align-items: center;
   background-color: var(--color-primary);
   height: 64px;
@@ -24,16 +25,26 @@
   width: 48px;
   height: auto;
 }
-.header-container .handle-filters-button,
-.large-view-header-container .handle-filters-button {
+.header-container .handle-filters-container,
+.large-view-header-container .handle-filters-container {
+  display: flex;
+  align-items: center;
+}
+.header-container .handle-filters-container .handle-filters-button,
+.large-view-header-container .handle-filters-container .handle-filters-button {
   user-select: none;
   cursor: pointer;
   color: var(--color-primary);
   background-color: #ffffff;
-  margin-left: 36px;
+  margin-left: 12px;
   border-radius: 8px;
   padding: 8px;
 }
+.header-container .handle-filters-container .current-treks-within-bounds-length,
+.large-view-header-container .handle-filters-container .current-treks-within-bounds-length {
+  margin-left: 12px;
+  color: #ffffff;
+}
 .header-container .attribution-container,
 .large-view-header-container .attribution-container {
   position: absolute;
@@ -78,12 +89,6 @@
 .filters-container .filter-margin-top {
   margin-top: 24px;
 }
-.filters-container .current-treks-length {
-  margin: 0px 0px 32px 8px;
-  color: var(--color-primary);
-  font-size: 24px;
-  font-weight: bold;
-}
 
 .back-filters-container {
   background-color: rgba(0, 0, 0, 0.5);
@@ -94,6 +99,7 @@
   top: 64px;
 }
 
+.init-loader-container,
 .loader-container,
 .large-view-loader-container {
   display: flex;
@@ -101,6 +107,7 @@
   align-items: center;
   height: 100%;
 }
+.init-loader-container .loader,
 .loader-container .loader,
 .large-view-loader-container .loader {
   width: 48px;
@@ -164,8 +171,8 @@
   font-size: 24px;
 }
 
+.init-loader-container,
 .loader-container {
-  position: absolute;
   width: 100%;
 }
 
@@ -185,7 +192,6 @@
 }
 
 .large-view-loader-container {
-  position: relative;
   width: 50%;
 }
 

package/dist/collection/components/grw-app/grw-app.js

@@ -1,5 +1,5 @@
 import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stencil/core';
-import state from 'store/store';
+import state, { onChange } from 'store/store';
 import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
@@ -17,8 +17,8 @@ export class GrwApp {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.handlePopStateBind = this.handlePopState.bind(this);
     this.largeViewSize = 1024;
+    this.handlePopStateBind = this.handlePopState.bind(this);
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
@@ -34,6 +34,14 @@ export class GrwApp {
     window.dispatchEvent(new window.Event('resize'));
   }
   componentDidLoad() {
+    onChange('trekNetworkError', () => {
+      if (state.trekNetworkError) {
+        const urlRedirect = new URL(window.location.toString());
+        urlRedirect.searchParams.delete('trek');
+        window.history.replaceState({}, '', urlRedirect);
+        this.onTrekDetailsClose();
+      }
+    });
     this.handleView();
     window.addEventListener('popstate', this.handlePopStateBind, false);
     const url = new URL(window.location.toString());
@@ -45,6 +53,7 @@ export class GrwApp {
     }
   }
   onTrekDetailsClose() {
+    state.currentTrek = null;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
@@ -92,13 +101,16 @@ export class GrwApp {
   render() {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } },
       h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }),
+      !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" },
+        h("span", { class: "loader" }))),
       this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }),
-      h("div", { class: "app-container" },
+      (state.currentTreks || state.currentTrek) && (h("div", { class: "app-container" },
         h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' },
-          this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")),
+          this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { class: "handle-filters-container" },
+            h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER"),
+            state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} randonnée${state.treksWithinBounds.length > 1 ? 's' : ''}`)))),
           !this.showTrek && this.showFilters && (h("div", { class: "options-container" },
             h("div", { class: "filters-container" },
-              h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`),
               h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"),
               h("div", null,
                 h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })),
@@ -118,7 +130,7 @@ export class GrwApp {
             h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))),
           h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })),
         h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } },
-          h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+          h("div", { onClick: () => this.handleShowMap() }, this.showTrek ? (this.showTrekMap ? 'Voir la fiche' : 'Voir la carte') : this.showTreksMap ? 'Voir la liste' : 'Voir la carte'))))));
   }
   static get is() { return "grw-app"; }
   static get encapsulation() { return "shadow"; }
@@ -335,11 +347,11 @@ export class GrwApp {
       "reflect": false
     },
     "zoom": {
-      "type": "any",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,

package/dist/collection/components/grw-filter/grw-filter.js

@@ -23,18 +23,17 @@ export class GrwFilter {
             filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
           }
           else if (filter.type === 'interval') {
-            let minValue;
-            let maxValue;
-            for (const currentFilterId of currentFiltersId) {
-              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
-              if (isNaN(minValue) || currentFilter.minValue < minValue) {
-                minValue = currentFilter.minValue;
-              }
-              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
-                maxValue = currentFilter.maxValue;
-              }
-            }
-            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+            filtersTreks = [
+              ...filtersTreks.filter(trek => {
+                for (const currentFilterId of currentFiltersId) {
+                  const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+                  if (trek[filter.trekProperty] >= currentFilter.minValue && trek[filter.trekProperty] <= currentFilter.maxValue) {
+                    return true;
+                  }
+                }
+                return false;
+              }),
+            ];
           }
         }
         else {

package/dist/collection/components/grw-map/grw-map.js

@@ -16,7 +16,7 @@ export class GrwMap {
     this.colorPoiIcon = '#974c6e';
     this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
   }
-  componentDidLoad() {
+  connectedCallback() {
     this.map = L.map(this.element, {
       center: this.center.split(',').map(Number),
       zoom: this.zoom,
@@ -29,15 +29,17 @@ export class GrwMap {
     if (state.currentTrek) {
       this.addTrek();
     }
-    else if (state.currentTrek) {
+    else if (state.currentTreks) {
       this.addTreks();
     }
     onChange('currentTreks', () => {
       if (state.currentTrek) {
+        this.removeTreks();
         this.addTrek();
       }
       else if (state.currentTreks) {
         this.addTreks();
+        this.removeTrek();
       }
     });
     onChange('currentTrek', () => {
@@ -58,18 +60,20 @@ export class GrwMap {
       type: 'FeatureCollection',
       features: [],
     };
-    for (const trek of state.currentTreks) {
-      trekscurrentDepartureCoordinates.push(trek.departure_geom);
-      treksFeatureCollection.features.push({
-        type: 'Feature',
-        geometry: { type: 'Point', coordinates: trek.departure_geom },
-        properties: {
-          id: trek.id,
-          name: trek.name,
-          practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
-          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
-        },
-      });
+    if (state.currentTreks) {
+      for (const trek of state.currentTreks) {
+        trekscurrentDepartureCoordinates.push(trek.departure_geom);
+        treksFeatureCollection.features.push({
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: trek.departure_geom },
+          properties: {
+            id: trek.id,
+            name: trek.name,
+            practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
+            imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
+          },
+        });
+      }
     }
     if (!this.treksLayer) {
       if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
@@ -77,7 +81,9 @@ export class GrwMap {
         this.map.fitBounds(bounds);
       }
       else {
-        this.map.fitBounds(state.currentMapTreksBounds);
+        if (state.currentMapTreksBounds) {
+          this.map.fitBounds(state.currentMapTreksBounds);
+        }
       }
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
@@ -113,6 +119,9 @@ export class GrwMap {
         const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
         this.map.fitBounds(bounds);
       }
+      else {
+        this.map.fire('moveend');
+      }
       this.treksLayer.clearLayers();
       this.treksLayer.addData(treksFeatureCollection);
     }

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -10,7 +10,7 @@ export class GrwTrekCard {
     this.colorPrimaryTint = '#974c6e';
     this.isLargeView = false;
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
     if (this.currentTrek) {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);

package/dist/collection/components/grw-trek-detail/grw-trek-detail.js

@@ -10,7 +10,7 @@ export class GrwTrekDetail {
     this.colorPrimaryShade = '#4a0021';
     this.colorPrimaryTint = '#974c6e';
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
     if (this.currentTrek) {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
@@ -20,7 +20,9 @@ export class GrwTrekDetail {
       this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
       this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
       this.accessibilities = state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
-      this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
+      if (state.accessibilitiesLevel) {
+        this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
+      }
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -31,6 +33,10 @@ export class GrwTrekDetail {
         this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
         this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
         this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
+        this.accessibilities = state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
+        if (state.accessibilitiesLevel) {
+          this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
+        }
       }
     });
   }
@@ -81,7 +87,9 @@ export class GrwTrekDetail {
         h("div", { innerHTML: this.currentTrek.arrival }))),
       this.currentTrek.altimetric_profile && (h("div", { class: "altimetric-profile-container" },
         h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"),
-        h("img", { src: this.currentTrek.altimetric_profile }))),
+        h("img", { src: this.currentTrek.altimetric_profile.endsWith('.json')
+            ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
+            : `${this.currentTrek.altimetric_profile}?format=svg` }))),
       this.currentTrek.access && (h("div", { class: "access-container" },
         h("div", { class: "access-title" }, "Acc\u00E8s routier"),
         h("div", { class: "access", innerHTML: this.currentTrek.access }))),

package/dist/collection/components/grw-treks-list/grw-treks-list.css

@@ -4,18 +4,6 @@
   height: 100%;
   max-height: 100vh;
   overflow-y: auto;
-}
-
-.current-treks-length {
-  width: 100%;
-  text-align: center;
-  padding: 32px 0px;
-  color: var(--color-primary);
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.current-treks-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

package/dist/collection/components/grw-treks-list/grw-treks-list.js

@@ -6,19 +6,25 @@ export class GrwTreksList {
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
     this.isLargeView = false;
-    this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
+    this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
   }
-  componentWillLoad() {
+  connectedCallback() {
+    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    if (state.currentTreks) {
+      this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
+    }
     onChange('currentTreks', () => {
-      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
       this.element.scroll({ top: 0 });
-      this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
+      if (state.currentTreks) {
+        this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
+      }
     });
     onChange('treksWithinBounds', () => {
-      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
       this.element.scroll({ top: 0 });
-      this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
+      if (state.treksWithinBounds) {
+        this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
+      }
     });
   }
   handleInfiniteScroll(event) {
@@ -31,10 +37,11 @@ export class GrwTreksList {
       }
     }
   }
+  disconnectedCallback() {
+    this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+  }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
-      h("div", { class: "current-treks-length" }, `${state.treksWithinBounds.length} résultat${state.treksWithinBounds.length > 1 ? 's' : ''}`),
-      h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
   }
   static get is() { return "grw-treks-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/store/grw-trek-provider.js

@@ -3,27 +3,33 @@ import state from 'store/store';
 export class GrwTrekProvider {
   constructor() {
     this.language = 'fr';
+    this.trekNetworkError = false;
+    this.controller = new AbortController();
+    this.signal = this.controller.signal;
   }
-  componentWillLoad() {
+  connectedCallback() {
     state.api = this.api;
     const requests = [];
-    requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
-    requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
-    requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
-    requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
-    return Promise.all([
+    requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }) : new Response('null'));
+    requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`, { signal: this.signal }) : new Response('null'));
+    requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }) : new Response('null'));
+    requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }) : new Response('null'));
+    Promise.all([
       ...requests,
-      fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`).catch(() => new Response('null')),
-      fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`),
-      fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`),
-      fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`),
-      fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`),
-      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`),
-      fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`),
+      fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`, {
+        signal: this.signal,
+      }).catch(() => new Response('null')),
+      fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`, { signal: this.signal }).catch(() => new Response('null')),
+      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`, { signal: this.signal }),
+      fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`, { signal: this.signal }),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`, { signal: this.signal }),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
       .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
+      state.trekNetworkError = false;
       if (difficulties) {
         state.difficulties = difficulties.results;
       }
@@ -42,14 +48,21 @@ export class GrwTrekProvider {
       state.labels = labels.results;
       state.sources = sources.results;
       state.accessibilities = accessibilities.results;
-      state.accessibilitiesLevel = accessibilitiesLevel.results;
+      if (accessibilitiesLevel) {
+        state.accessibilitiesLevel = accessibilitiesLevel.results;
+      }
       state.currentPois = pois.results;
       state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
+    })
+      .catch(() => {
+      state.trekNetworkError = true;
     });
   }
   disconnectedCallback() {
+    this.controller.abort();
     state.currentTrek = null;
+    state.trekNetworkError = false;
   }
   render() {
     return h(Host, null);

package/dist/collection/store/grw-treks-provider.js

@@ -3,8 +3,10 @@ import state from 'store/store';
 export class GrwTreksProvider {
   constructor() {
     this.language = 'fr';
+    this.controller = new AbortController();
+    this.signal = this.controller.signal;
   }
-  componentWillLoad() {
+  connectedCallback() {
     state.api = this.api;
     let treksRequest = `${this.api}trek/?language=${this.language}&published=true`;
     this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
@@ -16,15 +18,16 @@ export class GrwTreksProvider {
     this.routes && (treksRequest += `&routes=${this.routes}`);
     this.practices && (treksRequest += `&practices=${this.practices}`);
     treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
-    return Promise.all([
-      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
-      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
-      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
-      fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
-      fetch(treksRequest),
+    Promise.all([
+      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
+      fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }),
+      fetch(treksRequest, { signal: this.signal }),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
       .then(([difficulties, routes, practices, themes, treks]) => {
+      state.treksNetworkError = false;
       state.difficulties = difficulties.results;
       state.routes = routes.results;
       state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
@@ -38,7 +41,12 @@ export class GrwTreksProvider {
       state.treks = treks.results;
       state.currentTreks = treks.results;
       state.treksWithinBounds = treks.results;
-    });
+    })
+      .catch(() => (state.treksNetworkError = true));
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+    state.treksNetworkError = false;
   }
   render() {
     return h(Host, null);

package/dist/collection/store/store.js

@@ -1,9 +1,9 @@
 import { createStore } from '@stencil/store';
 const { state, onChange } = createStore({
   api: '',
-  treks: [],
-  currentTreks: [],
-  treksWithinBounds: [],
+  treks: null,
+  currentTreks: null,
+  treksWithinBounds: null,
   currentMapTreksBounds: null,
   difficulties: [],
   routes: [],
@@ -18,6 +18,8 @@ const { state, onChange } = createStore({
   currentTrek: null,
   currentPois: null,
   currentInformationDesks: null,
+  treksNetworkError: false,
+  trekNetworkError: false,
 });
 export { onChange };
 export default state;

package/dist/components/grw-app.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as state } from './store.js';
+import { o as onChange, s as state } from './store.js';
 import { d as defineCustomElement$b } from './grw-filter2.js';
 import { d as defineCustomElement$a } from './grw-information-desk-detail2.js';
 import { d as defineCustomElement$9 } from './grw-map2.js';
@@ -13,7 +13,7 @@ import { d as defineCustomElement$2 } from './grw-treks-provider2.js';
 
 const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
 
-const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.header-container .handle-filters-button,.large-view-header-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:36px;border-radius:8px;padding:8px}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.filters-container .current-treks-length{margin:0px 0px 32px 8px;color:var(--color-primary);font-size:24px;font-weight:bold}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
+const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;flex-direction:row;align-items:center;background-color:var(--color-primary);height:64px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.header-container .handle-filters-container,.large-view-header-container .handle-filters-container{display:flex;align-items:center}.header-container .handle-filters-container .handle-filters-button,.large-view-header-container .handle-filters-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:12px;border-radius:8px;padding:8px}.header-container .handle-filters-container .current-treks-within-bounds-length,.large-view-header-container .handle-filters-container .current-treks-within-bounds-length{margin-left:12px;color:#ffffff}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.init-loader-container,.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.init-loader-container .loader,.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.init-loader-container,.loader-container{width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
 
 const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -34,8 +34,8 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.handlePopStateBind = this.handlePopState.bind(this);
     this.largeViewSize = 1024;
+    this.handlePopStateBind = this.handlePopState.bind(this);
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
@@ -51,6 +51,14 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     window.dispatchEvent(new window.Event('resize'));
   }
   componentDidLoad() {
+    onChange('trekNetworkError', () => {
+      if (state.trekNetworkError) {
+        const urlRedirect = new URL(window.location.toString());
+        urlRedirect.searchParams.delete('trek');
+        window.history.replaceState({}, '', urlRedirect);
+        this.onTrekDetailsClose();
+      }
+    });
     this.handleView();
     window.addEventListener('popstate', this.handlePopStateBind, false);
     const url = new URL(window.location.toString());
@@ -62,6 +70,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   onTrekDetailsClose() {
+    state.currentTrek = null;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
@@ -107,7 +116,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     window.removeEventListener('popstate', this.handlePopStateBind);
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`), h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), h("div", null, h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" }, h("span", { class: "loader" }))), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), (state.currentTreks || state.currentTrek) && (h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { class: "handle-filters-container" }, h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER"), state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} randonnée${state.treksWithinBounds.length > 1 ? 's' : ''}`)))), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), h("div", null, h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => this.handleShowMap() }, this.showTrek ? (this.showTrekMap ? 'Voir la fiche' : 'Voir la carte') : this.showTreksMap ? 'Voir la liste' : 'Voir la carte'))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -127,7 +136,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "practices": [1],
     "urlLayer": [1, "url-layer"],
     "center": [1],
-    "zoom": [8],
+    "zoom": [2],
     "attribution": [1],
     "colorPrimary": [1, "color-primary"],
     "colorPrimaryShade": [1, "color-primary-shade"],