@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.5

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

@@ -4,19 +4,28 @@ import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
     this.showTrek = false;
-    this.showMap = false;
+    this.showTreksMap = false;
+    this.showTrekMap = false;
+    this.showFilters = false;
     this.isLargeView = false;
-    this.appName = 'Geotrek Rando Widget';
+    this.language = 'fr';
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryShade = '#4a0021';
+    this.colorPrimaryTint = '#974c6e';
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
-    this.largeViewSize = 664;
+    this.colorSensitiveArea = '#4974a5';
+    this.colorPoiIcon = '#974c6e';
+    this.handlePopStateBind = this.handlePopState.bind(this);
+    this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
+    const url = new URL(window.location.toString());
+    url.searchParams.set('trek', this.currentTrekId.toString());
+    window.history.pushState({}, '', url);
   }
   onWindowResize() {
     this.handleView();
@@ -26,31 +35,72 @@ export class GrwApp {
   }
   componentDidLoad() {
     this.handleView();
+    window.addEventListener('popstate', this.handlePopStateBind, false);
   }
   onTrekDetailsClose() {
+    this.forwardTrekId = this.currentTrekId;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
   handleView() {
     this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
-    this.showMap = this.isLargeView;
+    this.showTreksMap = this.isLargeView;
+    this.showTrekMap = this.isLargeView;
+  }
+  handleFilters() {
+    this.showFilters = !this.showFilters;
+  }
+  handlePopState() {
+    if (this.showTrek) {
+      this.onTrekDetailsClose();
+    }
+    else if (this.forwardTrekId) {
+      this.currentTrekId = this.forwardTrekId;
+      this.forwardTrekId = null;
+      this.showTrek = !this.showTrek;
+    }
+  }
+  handleShowMap() {
+    if (this.currentTrekId) {
+      this.showTrekMap = !this.showTrekMap;
+    }
+    else {
+      this.showTreksMap = !this.showTreksMap;
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('popstate', this.handlePopStateBind);
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
-      h("grw-treks-provider", { api: this.api, "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, "trek-id": this.currentTrekId }),
+    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", { class: "title" }, this.appName)),
+        h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' },
+          this.showTrek ? (h("div", { onClick: () => window.history.back(), 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", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
+            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-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-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon })),
+            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.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+          h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   static get is() { return "grw-app"; }
   static get encapsulation() { return "shadow"; }
@@ -78,6 +128,24 @@ 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,
@@ -214,24 +282,6 @@ export class GrwApp {
       "attribute": "practices",
       "reflect": false
     },
-    "appName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "app-name",
-      "reflect": false,
-      "defaultValue": "'Geotrek Rando Widget'"
-    },
     "urlLayer": {
       "type": "string",
       "mutable": false,
@@ -318,6 +368,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,
@@ -334,7 +402,7 @@ export class GrwApp {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     },
     "colorTrekLine": {
       "type": "string",
@@ -389,11 +457,49 @@ export class GrwApp {
       "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": {},
+    "showTreksMap": {},
+    "showTrekMap": {},
+    "showFilters": {},
     "isLargeView": {},
     "currentTrekId": {}
   }; }

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,31 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+:host a {
+  color: var(--color-primary);
+}
+
+.information-desk-img {
+  width: 180px;
+}
+.information-desk-img img {
+  width: 180px;
+  border-radius: 8px;
+}
+
+.information-desk-sub-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.information-desk-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 12px 0px;
+}
+
+.information-desk-description {
+  font-size: 16px;
+}

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

@@ -0,0 +1,53 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class GrwInformationDeskDetail {
+  render() {
+    return (h(Host, null,
+      this.informationDesk.photo_url && (h("div", { class: "information-desk-img" },
+        h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))),
+      h("div", { class: "information-desk-sub-container" },
+        this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name),
+        this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }),
+        this.informationDesk.postal_code ||
+          this.informationDesk.municipality ||
+          (this.informationDesk.street && (h("div", null,
+            this.informationDesk.postal_code,
+            ` ${this.informationDesk.municipality}`,
+            ` ${this.informationDesk.street}`))),
+        this.informationDesk.phone && (h("div", null,
+          h("a", { href: `tel:${this.informationDesk.phone}` }, this.informationDesk.phone))),
+        this.informationDesk.email && (h("div", null,
+          h("a", { href: `mailto:${this.informationDesk.email}` }, this.informationDesk.email))),
+        this.informationDesk.website && (h("div", null,
+          h("a", { href: `${this.informationDesk.website}` }, this.informationDesk.website))))));
+  }
+  static get is() { return "grw-information-desk-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-information-desk-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-information-desk-detail.css"]
+  }; }
+  static get properties() { return {
+    "informationDesk": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "InformationDesk",
+        "resolved": "{ id: number; name: string; description: string; type: InformationDeskType; phone: string; email: string; website: string; municipality: string; postal_code: string; street: string; photo_url: string; latitude: string; longitude: string; }",
+        "references": {
+          "InformationDesk": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -657,6 +657,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 grw-map {
+  font-family: "Roboto";
   display: block;
   height: 100%;
   max-height: 100vh;
@@ -719,4 +720,102 @@ grw-map {
   100% {
     transform: rotate(360deg);
   }
+}
+
+.leaflet-popup-content {
+  width: 144px;
+  margin: 0;
+}
+
+.trek-departure-popup {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  height: auto;
+  padding: 24px;
+}
+.trek-departure-popup img {
+  border-radius: 8px;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
+}
+.trek-departure-popup .trek-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  font-size: 12px;
+}
+.trek-departure-popup .trek-name-margin-top {
+  margin-top: 12px;
+}
+
+.poi-tooltip .poi-name,
+.poi-tooltip .information-desks-name,
+.poi-tooltip .sensitive-area-name,
+.information-desks-tooltip .poi-name,
+.information-desks-tooltip .information-desks-name,
+.information-desks-tooltip .sensitive-area-name,
+.sensitive-area-tooltip .poi-name,
+.sensitive-area-tooltip .information-desks-name,
+.sensitive-area-tooltip .sensitive-area-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.sensitiveAreasCheckboxContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+}
+.sensitiveAreasCheckboxContainer input,
+.sensitiveAreasCheckboxContainer label {
+  cursor: pointer;
+}
+.sensitiveAreasCheckboxContainer input {
+  margin: 0;
+}
+.sensitiveAreasCheckboxContainer label {
+  padding-left: 8px;
+}
+
+.poi-icon,
+.information-desks-icon {
+  background-color: var(--color-poi-icon);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.poi-icon img,
+.information-desks-icon img {
+  width: 36px !important;
+}
+
+.parking-icon {
+  background-color: #0000ff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  color: #ffffff;
+}
+
+.point-reference-icon {
+  background-color: #ff0000;
+  border: 1px solid #ffffff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  color: #ffffff;
 }