@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/geotrek-rando-widget.cjs.js +2 -2
  2. package/dist/cjs/{grw-app_10.cjs.entry.js → grw-app_11.cjs.entry.js} +172 -58
  3. package/dist/cjs/{index-c6f73e30.js → index-c2c4531d.js} +46 -1
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +1 -0
  6. package/dist/collection/components/grw-app/grw-app.css +69 -5
  7. package/dist/collection/components/grw-app/grw-app.js +24 -5
  8. package/dist/collection/components/grw-filter/grw-filter.css +29 -0
  9. package/dist/collection/components/grw-filter/grw-filter.js +132 -0
  10. package/dist/collection/components/grw-map/grw-map.js +37 -31
  11. package/dist/collection/components/grw-trek-card/grw-trek-card.css +66 -32
  12. package/dist/collection/components/grw-trek-card/grw-trek-card.js +34 -10
  13. package/dist/collection/components/grw-trek-detail/grw-trek-detail.js +1 -1
  14. package/dist/collection/components/grw-treks-list/grw-treks-list.css +16 -3
  15. package/dist/collection/components/grw-treks-list/grw-treks-list.js +27 -5
  16. package/dist/collection/store/grw-trek-provider.js +24 -10
  17. package/dist/collection/store/grw-treks-provider.js +12 -3
  18. package/dist/collection/store/store.js +3 -0
  19. package/dist/collection/stories/App.js +8 -10
  20. package/dist/collection/stories/App.stories.js +4 -3
  21. package/dist/collection/stories/TrekMap.stories.js +3 -2
  22. package/dist/collection/stories/TreksList.js +8 -8
  23. package/dist/collection/stories/TreksMap.stories.js +3 -2
  24. package/dist/components/grw-app.js +15 -4
  25. package/dist/components/grw-filter.d.ts +11 -0
  26. package/dist/components/grw-filter.js +6 -0
  27. package/dist/components/grw-filter2.js +95 -0
  28. package/dist/components/grw-map2.js +37 -31
  29. package/dist/components/grw-trek-card2.js +10 -5
  30. package/dist/components/grw-trek-provider2.js +24 -10
  31. package/dist/components/grw-treks-list2.js +9 -6
  32. package/dist/components/grw-treks-provider2.js +12 -3
  33. package/dist/components/store.js +3 -0
  34. package/dist/esm/geotrek-rando-widget.js +2 -2
  35. package/dist/esm/{grw-app_10.entry.js → grw-app_11.entry.js} +172 -59
  36. package/dist/esm/{index-7aa9e822.js → index-fe16e7b6.js} +46 -1
  37. package/dist/esm/loader.js +2 -2
  38. package/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js +1 -1
  39. package/dist/geotrek-rando-widget/p-8c206aec.js +2 -0
  40. package/dist/geotrek-rando-widget/p-ed8706fb.entry.js +1 -0
  41. package/dist/types/components/grw-app/grw-app.d.ts +2 -0
  42. package/dist/types/components/grw-filter/grw-filter.d.ts +9 -0
  43. package/dist/types/components/grw-trek-card/grw-trek-card.d.ts +6 -4
  44. package/dist/types/components/grw-treks-list/grw-treks-list.d.ts +1 -0
  45. package/dist/types/components.d.ts +23 -0
  46. package/dist/types/store/store.d.ts +7 -1
  47. package/dist/types/types/types.d.ts +23 -0
  48. package/package.json +1 -1
  49. package/readme.md +4 -5
  50. package/dist/geotrek-rando-widget/p-332ba9ab.js +0 -2
  51. package/dist/geotrek-rando-widget/p-73bc92fe.entry.js +0 -1
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
2
2
  import { s as state, o as onChange } from './store.js';
3
3
  import { d as durationImage, f as formatDuration, l as lengthImage, a as formatLength, b as ascentImage, c as formatAscent } from './length.js';
4
4
 
5
- const grwTrekCardCss = ".trek-card-container{font-family:\"Roboto\";width:350px;height:auto;border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image{border-radius:8px 8px 0px 0px;width:100%;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-card-container .sub-container{padding:12px}.trek-card-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:12px}.trek-card-container .sub-container .description{max-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}.trek-card-container .sub-container .description p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.trek-card-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-card-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}";
5
+ const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:flex;flex-direction:column;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row,.trek-card-large-view-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:flex;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:flex;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
6
6
 
7
7
  const GrwTrekCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
@@ -12,6 +12,7 @@ const GrwTrekCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
12
12
  this.trekCardPress = createEvent(this, "trekCardPress", 7);
13
13
  this.colorPrimary = '#6b0030';
14
14
  this.colorPrimaryTint = '#974c6e';
15
+ this.isLargeView = false;
15
16
  }
16
17
  componentWillLoad() {
17
18
  this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -19,6 +20,7 @@ const GrwTrekCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
19
20
  this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
20
21
  this.route = state.routes.find(route => route.id === this.currentTrek.route);
21
22
  this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
23
+ this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
22
24
  }
23
25
  onChange('currentTrek', () => {
24
26
  this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -26,14 +28,15 @@ const GrwTrekCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
26
28
  this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
27
29
  this.route = state.routes.find(route => route.id === this.currentTrek.route);
28
30
  this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
31
+ this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
29
32
  }
30
33
  });
31
34
  }
32
35
  render() {
33
36
  var _a, _b, _c, _d, _e, _f, _g, _h;
34
- return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-card-container" }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
35
- _d.label), h("div", { class: "icon-label duration" }, h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration)), h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
36
- _f.route)), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent)), h("div", { class: "icon-label practice" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
37
+ return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, h("div", { class: "departure" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.departure), h("div", { class: "name" }, (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.name), h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
38
+ _d.label), h("div", { class: "icon-label duration" }, h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent))), h("div", { class: "row" }, h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
39
+ _f.route), h("div", { class: "icon-label practice" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
37
40
  _h.name))))))));
38
41
  }
39
42
  static get style() { return grwTrekCardCss; }
@@ -41,10 +44,12 @@ const GrwTrekCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
41
44
  "trek": [16],
42
45
  "colorPrimary": [1, "color-primary"],
43
46
  "colorPrimaryTint": [1, "color-primary-tint"],
47
+ "isLargeView": [4, "is-large-view"],
44
48
  "currentTrek": [32],
45
49
  "difficulty": [32],
46
50
  "route": [32],
47
- "practice": [32]
51
+ "practice": [32],
52
+ "themes": [32]
48
53
  }]);
49
54
  function defineCustomElement() {
50
55
  if (typeof customElements === "undefined") {
@@ -10,21 +10,35 @@ const GrwTrekProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
10
10
  }
11
11
  componentWillLoad() {
12
12
  state.api = this.api;
13
+ const requests = [];
14
+ requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
15
+ requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
16
+ requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
17
+ requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
13
18
  return Promise.all([
14
- fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
15
- fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
16
- fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
17
- fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('[]')),
19
+ ...requests,
20
+ fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('null')),
18
21
  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`),
19
22
  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`),
20
- fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry,gpx,kml,pdf,parking_location`),
23
+ 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`),
21
24
  ])
22
25
  .then(responses => Promise.all(responses.map(response => response.json())))
23
- .then(([difficulties, routes, practices, sensitiveAreas, pois, informationDesks, trek]) => {
24
- state.difficulties = difficulties.results;
25
- state.routes = routes.results;
26
- state.practices = practices.results;
27
- state.currentSensitiveAreas = sensitiveAreas.results;
26
+ .then(([difficulties, routes, practices, themes, sensitiveAreas, pois, informationDesks, trek]) => {
27
+ if (difficulties) {
28
+ state.difficulties = difficulties.results;
29
+ }
30
+ if (routes) {
31
+ state.routes = routes.results;
32
+ }
33
+ if (practices) {
34
+ state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
35
+ }
36
+ if (themes) {
37
+ state.themes = themes.results;
38
+ }
39
+ if (sensitiveAreas) {
40
+ state.currentSensitiveAreas = sensitiveAreas.results;
41
+ }
28
42
  state.currentPois = pois.results;
29
43
  state.currentInformationDesks = informationDesks.results;
30
44
  state.currentTrek = trek;
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
  import { o as onChange, s as state } from './store.js';
3
3
  import { d as defineCustomElement$1 } from './grw-trek-card2.js';
4
4
 
5
- const grwTreksListCss = ":host{font-family:\"Roboto\";display:flex;flex-wrap:wrap;justify-content:space-around;height:100%;max-height:100vh;overflow-y:auto}grw-trek-card{margin:6px}";
5
+ const grwTreksListCss = ":host{font-family:\"Roboto\";width:100%;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}grw-trek-card{margin:6px}";
6
6
 
7
7
  const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
@@ -12,19 +12,21 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
12
12
  this.treksToDisplay = [];
13
13
  this.colorPrimary = '#6b0030';
14
14
  this.colorPrimaryTint = '#974c6e';
15
+ this.isLargeView = false;
15
16
  this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
16
17
  this.step = 10;
17
18
  }
18
19
  componentWillLoad() {
19
- this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
20
- onChange('treks', () => {
21
- this.treksToDisplay = state.treks.slice(0, this.step);
20
+ onChange('currentTreks', () => {
21
+ this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
22
+ this.element.scroll({ top: 0 });
23
+ this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
22
24
  });
23
25
  }
24
26
  handleInfiniteScroll(event) {
25
27
  if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
26
28
  if (this.treksToDisplay.length < state.treks.length) {
27
- this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
29
+ this.treksToDisplay = state.currentTreks.slice(0, this.treksToDisplay.length + this.step >= state.currentTreks.length ? state.currentTreks.length : this.treksToDisplay.length + this.step);
28
30
  }
29
31
  else {
30
32
  this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
@@ -32,13 +34,14 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
32
34
  }
33
35
  }
34
36
  render() {
35
- return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
37
+ return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.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 }))))));
36
38
  }
37
39
  get element() { return this; }
38
40
  static get style() { return grwTreksListCss; }
39
41
  }, [1, "grw-treks-list", {
40
42
  "colorPrimary": [1, "color-primary"],
41
43
  "colorPrimaryTint": [1, "color-primary-tint"],
44
+ "isLargeView": [4, "is-large-view"],
42
45
  "treksToDisplay": [32]
43
46
  }]);
44
47
  function defineCustomElement() {
@@ -19,19 +19,28 @@ const GrwTreksProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
19
19
  this.portals && (treksRequest += `&portals=${this.portals}`);
20
20
  this.routes && (treksRequest += `&routes=${this.routes}`);
21
21
  this.practices && (treksRequest += `&practices=${this.practices}`);
22
- treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
22
+ treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
23
23
  return Promise.all([
24
24
  fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
25
25
  fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
26
26
  fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
27
+ fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
27
28
  fetch(treksRequest),
28
29
  ])
29
30
  .then(responses => Promise.all(responses.map(response => response.json())))
30
- .then(([difficulties, routes, practices, treks]) => {
31
+ .then(([difficulties, routes, practices, themes, treks]) => {
31
32
  state.difficulties = difficulties.results;
32
33
  state.routes = routes.results;
33
- state.practices = practices.results;
34
+ state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
35
+ state.themes = themes.results;
36
+ state.durations = [
37
+ { id: 1, name: '0 - 1h', minValue: 0, maxValue: 1, selected: false },
38
+ { id: 2, name: '1 - 2h', minValue: 1, maxValue: 2, selected: false },
39
+ { id: 3, name: '2 - 5h', minValue: 2, maxValue: 5, selected: false },
40
+ { id: 4, name: '5 - 10h', minValue: 5, maxValue: 10, selected: false },
41
+ ];
34
42
  state.treks = treks.results;
43
+ state.currentTreks = treks.results;
35
44
  });
36
45
  }
37
46
  render() {
@@ -187,9 +187,12 @@ const createStore = (defaultState, shouldUpdate) => {
187
187
  const { state, onChange } = createStore({
188
188
  api: '',
189
189
  treks: [],
190
+ currentTreks: [],
190
191
  difficulties: [],
191
192
  routes: [],
192
193
  practices: [],
194
+ themes: [],
195
+ durations: [],
193
196
  currentSensitiveAreas: null,
194
197
  currentPois: null,
195
198
  currentTrek: null,
@@ -1,4 +1,4 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-7aa9e822.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-fe16e7b6.js';
2
2
 
3
3
  /*
4
4
  Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- return bootstrapLazy([["grw-app_10",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
16
+ return bootstrapLazy([["grw-app_11",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]]], options);
17
17
  });