@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.4

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

@@ -1,40 +1,77 @@
-import { Component, Host, h, Listen, State, Prop } from '@stencil/core';
+import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stencil/core';
 import state from 'store/store';
 import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
+    this.showTrek = false;
+    this.showMap = false;
+    this.showFilters = false;
+    this.isLargeView = false;
+    this.language = 'fr';
     this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryShade = '#4a0021';
+    this.colorPrimaryTint = '#974c6e';
+    this.colorTrekLine = '#6b0030';
+    this.colorDepartureIcon = '#006b3b';
+    this.colorArrivalIcon = '#85003b';
+    this.colorSensitiveArea = '#4974a5';
+    this.colorPoiIcon = '#974c6e';
+    this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
   }
-  onWindowResize(event) {
-    this.showMap = !(event.composedPath()[0].innerWidth < 664);
+  onWindowResize() {
+    this.handleView();
+  }
+  watchPropHandler() {
+    window.dispatchEvent(new window.Event('resize'));
+  }
+  componentDidLoad() {
+    this.handleView();
   }
   onTrekDetailsClose() {
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
-  componentWillLoad() {
-    this.showMap = !(window.innerWidth < 664);
+  handleView() {
+    this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
+    this.showMap = this.isLargeView;
+  }
+  handleFilters() {
+    this.showFilters = !this.showFilters;
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
-      h("grw-treks-provider", { api: this.api, portals: this.portals },
-        h("div", { class: "header-container" }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)),
+    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.onTrekDetailsClose(), 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: "app-treks-list-container", style: { visibility: this.showTrek ? 'hidden' : 'visible', position: this.showTrek ? 'absolute' : 'relative' } },
-            h("grw-treks-list", null)),
-          this.showTrek && !state.currentTrek && (h("div", { class: "loader-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" }))),
-          this.showTrek && this.currentTrekId && (h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }, state.currentTrek && (h("div", { class: "app-trek-detail-container" },
-            h("grw-trek-detail", null))))),
-          h("div", { class: "app-map-container", style: { visibility: this.showMap ? 'visible' : 'hidden' } },
-            h("grw-map", null))),
-        h("div", { class: "map-visibility-button" },
+          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.showMap ? '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.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   static get is() { return "grw-app"; }
@@ -63,6 +100,109 @@ export class GrwApp {
       "attribute": "api",
       "reflect": false
     },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
+    "inBbox": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "in-bbox",
+      "reflect": false
+    },
+    "cities": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cities",
+      "reflect": false
+    },
+    "districts": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "districts",
+      "reflect": false
+    },
+    "structures": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "structures",
+      "reflect": false
+    },
+    "themes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "themes",
+      "reflect": false
+    },
     "portals": {
       "type": "string",
       "mutable": false,
@@ -80,6 +220,40 @@ export class GrwApp {
       "attribute": "portals",
       "reflect": false
     },
+    "routes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "routes",
+      "reflect": false
+    },
+    "practices": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "practices",
+      "reflect": false
+    },
     "appName": {
       "type": "string",
       "mutable": false,
@@ -98,6 +272,74 @@ export class GrwApp {
       "reflect": false,
       "defaultValue": "'Geotrek Rando Widget'"
     },
+    "urlLayer": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url-layer",
+      "reflect": false
+    },
+    "center": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "center",
+      "reflect": false
+    },
+    "zoom": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "zoom",
+      "reflect": false
+    },
+    "attribution": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "attribution",
+      "reflect": false
+    },
     "colorPrimary": {
       "type": "string",
       "mutable": false,
@@ -116,6 +358,24 @@ export class GrwApp {
       "reflect": false,
       "defaultValue": "'#6b0030'"
     },
+    "colorPrimaryShade": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-shade",
+      "reflect": false,
+      "defaultValue": "'#4a0021'"
+    },
     "colorPrimaryTint": {
       "type": "string",
       "mutable": false,
@@ -132,14 +392,111 @@ export class GrwApp {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
+    },
+    "colorTrekLine": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-trek-line",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorDepartureIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-departure-icon",
+      "reflect": false,
+      "defaultValue": "'#006b3b'"
+    },
+    "colorArrivalIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-arrival-icon",
+      "reflect": false,
+      "defaultValue": "'#85003b'"
+    },
+    "colorSensitiveArea": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-sensitive-area",
+      "reflect": false,
+      "defaultValue": "'#4974a5'"
+    },
+    "colorPoiIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-poi-icon",
+      "reflect": false,
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {
     "showTrek": {},
     "showMap": {},
+    "showFilters": {},
+    "isLargeView": {},
     "currentTrekId": {}
   }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "isLargeView",
+      "methodName": "watchPropHandler"
+    }]; }
   static get listeners() { return [{
       "name": "trekCardPress",
       "method": "onTrekCardPress",

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

@@ -0,0 +1,29 @@
+.filter-name {
+  margin-left: 8px;
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.filter-button-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.filter-button-container .filter-button,
+.filter-button-container .selected-filter-button {
+  user-select: none;
+  cursor: pointer;
+  border: 1px var(--color-primary) solid;
+  border-radius: 8px;
+  margin: 8px 0px 0px 8px;
+  padding: 8px;
+}
+.filter-button-container .filter-button {
+  color: var(--color-primary);
+  background-color: #ffffff;
+}
+.filter-button-container .selected-filter-button {
+  color: #ffffff;
+  background-color: var(--color-primary);
+}

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

@@ -0,0 +1,132 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import state from 'store/store';
+export class GrwFilter {
+  constructor() {
+    this.filters = [
+      { property: 'practices', trekProperty: 'practice', type: 'include' },
+      { property: 'difficulties', trekProperty: 'difficulty', type: 'include' },
+      { property: 'durations', trekProperty: 'duration', type: 'interval' },
+    ];
+  }
+  handleFilter(_event, filterToHandle) {
+    const filterFromState = [...state[this.filterType]];
+    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)
+      .selected;
+    state[this.filterType] = filterFromState;
+    let isUsingFilter = false;
+    let filtersTreks = [];
+    for (const filter of this.filters) {
+      const currentFiltersId = state[filter.property].filter(currentFilter => currentFilter.selected).map(currentFilter => currentFilter.id);
+      if (currentFiltersId.length > 0) {
+        if (filtersTreks.length > 0) {
+          if (filter.type === 'include') {
+            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)];
+          }
+        }
+        else {
+          if (!isUsingFilter) {
+            isUsingFilter = true;
+          }
+          if (filter.type === 'include') {
+            filtersTreks = [...state.treks.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 = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
+    }
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "filter-name" }, this.filterName),
+      h("div", { class: "filter-button-container" }, state[this.filterType].map(currentFilter => (h("div", { onClick: event => this.handleFilter(event, currentFilter), class: currentFilter.selected ? 'selected-filter-button' : 'filter-button' }, currentFilter[this.filterNameProperty]))))));
+  }
+  static get is() { return "grw-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-filter.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-filter.css"]
+  }; }
+  static get properties() { return {
+    "filterType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-type",
+      "reflect": false
+    },
+    "filterName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name",
+      "reflect": false
+    },
+    "filterNameProperty": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name-property",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.css

@@ -0,0 +1,30 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 8px 8px 8px;
+}
+
+.information-desk-img {
+  width: 180px;
+}
+.information-desk-img img {
+  width: 180px;
+  border-radius: 8px;
+}
+
+.information-desk-right-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+}
+
+.information-desk-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 0px 0px 8px 0px;
+}
+
+.information-desk-description {
+  font-size: 16px;
+}