From a399fe781dcd29de28b8706399473bc3871138a2 Mon Sep 17 00:00:00 2001 From: Bastyen Date: Wed, 20 Mar 2024 16:34:46 +0100 Subject: [PATCH] fix: optimize offline --- package-lock.json | 7 + package.json | 1 + src/assets/arrow-back.svg | 1 + src/assets/backpack.svg | 1 + src/assets/call.svg | 1 + src/assets/check.svg | 1 + src/assets/close.svg | 1 + src/assets/delete.svg | 1 + src/assets/done.svg | 1 + src/assets/download.svg | 1 + src/assets/download_for_offline.svg | 1 + src/assets/filter_list.svg | 1 + src/assets/link.svg | 1 + src/assets/list.svg | 1 + src/assets/location_searching.svg | 1 + src/assets/mail.svg | 1 + src/assets/map.svg | 1 + src/assets/moving.svg | 1 + src/assets/offline_pin.svg | 1 + src/assets/open_in_full.svg | 1 + src/assets/refresh.svg | 1 + src/assets/search.svg | 1 + src/assets/summarize.svg | 1 + src/assets/timelapse.svg | 1 + src/assets/translate.svg | 1 + src/assets/warning.svg | 1 + src/components/grw-app/grw-app.tsx | 16 +- .../grw-common-button/grw-common-button.scss | 8 - .../grw-common-button/grw-common-button.tsx | 7 +- .../grw-extended-fab/grw-extended-fab.scss | 9 -- .../grw-extended-fab/grw-extended-fab.tsx | 9 +- src/components/grw-filter/grw-filter.scss | 9 -- src/components/grw-filter/grw-filter.tsx | 19 ++- .../grw-information-desk.scss | 8 - .../grw-information-desk.tsx | 25 ++- src/components/grw-map/grw-map.scss | 4 - src/components/grw-map/grw-map.tsx | 16 +- src/components/grw-poi-detail/grw-poi.scss | 4 - src/components/grw-poi-detail/grw-poi.tsx | 4 +- src/components/grw-search/grw-search.scss | 9 -- src/components/grw-search/grw-search.tsx | 6 +- .../grw-select-language.scss | 8 - .../grw-select-language.tsx | 6 +- src/components/grw-switch/grw-switch.scss | 8 - src/components/grw-switch/grw-switch.tsx | 6 +- .../grw-touristic-content-card.scss | 4 - .../grw-touristic-content-card.tsx | 6 +- .../grw-touristic-content-detail.scss | 8 - .../grw-touristic-content-detail.tsx | 14 +- .../grw-touristic-contents-list.scss | 8 - .../grw-touristic-event-card.scss | 4 - .../grw-touristic-event-card.tsx | 6 +- .../grw-touristic-event-detail.scss | 8 - .../grw-touristic-event-detail.tsx | 15 +- .../grw-touristic-events-list.scss | 8 - .../grw-trek-card/grw-trek-card.scss | 9 -- .../grw-trek-card/grw-trek-card.tsx | 55 ++----- .../grw-trek-detail/grw-trek-detail.scss | 12 +- .../grw-trek-detail/grw-trek-detail.tsx | 151 +++++------------- .../grw-treks-list/grw-treks-list.scss | 8 - src/global/global.scss | 5 - src/services/grw-db.service.ts | 4 +- src/store/grw-touristic-content-provider.tsx | 2 - src/store/grw-touristic-event-provider.tsx | 2 - src/store/grw-trek-provider.tsx | 87 ++++------ src/store/grw-treks-provider.tsx | 53 +++--- src/utils/utils.ts | 51 ++++-- stencil.config.ts | 3 +- 68 files changed, 246 insertions(+), 490 deletions(-) create mode 100644 src/assets/arrow-back.svg create mode 100644 src/assets/backpack.svg create mode 100644 src/assets/call.svg create mode 100644 src/assets/check.svg create mode 100644 src/assets/close.svg create mode 100644 src/assets/delete.svg create mode 100644 src/assets/done.svg create mode 100644 src/assets/download.svg create mode 100644 src/assets/download_for_offline.svg create mode 100644 src/assets/filter_list.svg create mode 100644 src/assets/link.svg create mode 100644 src/assets/list.svg create mode 100644 src/assets/location_searching.svg create mode 100644 src/assets/mail.svg create mode 100644 src/assets/map.svg create mode 100644 src/assets/moving.svg create mode 100644 src/assets/offline_pin.svg create mode 100644 src/assets/open_in_full.svg create mode 100644 src/assets/refresh.svg create mode 100644 src/assets/search.svg create mode 100644 src/assets/summarize.svg create mode 100644 src/assets/timelapse.svg create mode 100644 src/assets/translate.svg create mode 100644 src/assets/warning.svg diff --git a/package-lock.json b/package-lock.json index f5a49b63..91d2a5ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ "@types/leaflet.markercluster": "^1.5.4", "babel-loader": "^9.1.3", "glob": "^9.3.4", + "stencil-inline-svg": "^1.1.0", "typescript": "^5.4.2", "vitepress": "^1.0.0-rc.45" } @@ -23360,6 +23361,12 @@ "node": ">= 0.8" } }, + "node_modules/stencil-inline-svg": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/stencil-inline-svg/-/stencil-inline-svg-1.1.0.tgz", + "integrity": "sha512-couT89xzsoycwHOIAgnl3WBpXaVRQ3ZlUBINo7HsT/AtWaFW9cxGlAzsK2JzkzxK7yUuoeIpdH2fNlvuH06DRg==", + "dev": true + }, "node_modules/stop-iteration-iterator": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", diff --git a/package.json b/package.json index 6f293ee2..a41d98d3 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@types/leaflet.markercluster": "^1.5.4", "babel-loader": "^9.1.3", "glob": "^9.3.4", + "stencil-inline-svg": "^1.1.0", "typescript": "^5.4.2", "vitepress": "^1.0.0-rc.45" }, diff --git a/src/assets/arrow-back.svg b/src/assets/arrow-back.svg new file mode 100644 index 00000000..3c30733a --- /dev/null +++ b/src/assets/arrow-back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/backpack.svg b/src/assets/backpack.svg new file mode 100644 index 00000000..4c9bd70d --- /dev/null +++ b/src/assets/backpack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/call.svg b/src/assets/call.svg new file mode 100644 index 00000000..7a09a9fa --- /dev/null +++ b/src/assets/call.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/check.svg b/src/assets/check.svg new file mode 100644 index 00000000..ca2c672e --- /dev/null +++ b/src/assets/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/close.svg b/src/assets/close.svg new file mode 100644 index 00000000..6ce1edf2 --- /dev/null +++ b/src/assets/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/delete.svg b/src/assets/delete.svg new file mode 100644 index 00000000..2040c2b6 --- /dev/null +++ b/src/assets/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/done.svg b/src/assets/done.svg new file mode 100644 index 00000000..ca2c672e --- /dev/null +++ b/src/assets/done.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/download.svg b/src/assets/download.svg new file mode 100644 index 00000000..259bec73 --- /dev/null +++ b/src/assets/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/download_for_offline.svg b/src/assets/download_for_offline.svg new file mode 100644 index 00000000..24f8940f --- /dev/null +++ b/src/assets/download_for_offline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/filter_list.svg b/src/assets/filter_list.svg new file mode 100644 index 00000000..f63c7f24 --- /dev/null +++ b/src/assets/filter_list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/link.svg b/src/assets/link.svg new file mode 100644 index 00000000..7ea331e1 --- /dev/null +++ b/src/assets/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/list.svg b/src/assets/list.svg new file mode 100644 index 00000000..b32bee26 --- /dev/null +++ b/src/assets/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/location_searching.svg b/src/assets/location_searching.svg new file mode 100644 index 00000000..69d4f814 --- /dev/null +++ b/src/assets/location_searching.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/mail.svg b/src/assets/mail.svg new file mode 100644 index 00000000..e07a2376 --- /dev/null +++ b/src/assets/mail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/map.svg b/src/assets/map.svg new file mode 100644 index 00000000..68419ae6 --- /dev/null +++ b/src/assets/map.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/moving.svg b/src/assets/moving.svg new file mode 100644 index 00000000..ad93f43a --- /dev/null +++ b/src/assets/moving.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/offline_pin.svg b/src/assets/offline_pin.svg new file mode 100644 index 00000000..cec9ec1d --- /dev/null +++ b/src/assets/offline_pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/open_in_full.svg b/src/assets/open_in_full.svg new file mode 100644 index 00000000..26c1f6e1 --- /dev/null +++ b/src/assets/open_in_full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/refresh.svg b/src/assets/refresh.svg new file mode 100644 index 00000000..72c5c960 --- /dev/null +++ b/src/assets/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 00000000..d7a6a05e --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/summarize.svg b/src/assets/summarize.svg new file mode 100644 index 00000000..ac5b0778 --- /dev/null +++ b/src/assets/summarize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/timelapse.svg b/src/assets/timelapse.svg new file mode 100644 index 00000000..208c2e34 --- /dev/null +++ b/src/assets/timelapse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/translate.svg b/src/assets/translate.svg new file mode 100644 index 00000000..c32377e2 --- /dev/null +++ b/src/assets/translate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/warning.svg b/src/assets/warning.svg new file mode 100644 index 00000000..da1e7eba --- /dev/null +++ b/src/assets/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx index 9e94c0d6..e5b7f1cb 100644 --- a/src/components/grw-app/grw-app.tsx +++ b/src/components/grw-app/grw-app.tsx @@ -1,7 +1,9 @@ +import { Capacitor } from '@capacitor/core'; import { Component, Host, h, Listen, State, Prop, Element, Watch, Event, EventEmitter, Fragment } from '@stencil/core'; import { translate } from 'i18n/i18n'; import state, { reset } from 'store/store'; -import { handleTreksFiltersAndSearch } from 'utils/utils'; +import { handleTreksFiltersAndSearch, imagesRegExp, revokeObjectURL } from 'utils/utils'; +import ArrowBackIcon from '../../assets/arrow-back.svg'; @Component({ tag: 'grw-app', @@ -279,6 +281,13 @@ export class GrwApp { handleBackButton() { if (window.history.state && window.history.state.isInitialHistoryWithDetails) { + if (state.currentTrek.offline && !Capacitor.isNativePlatform()) { + revokeObjectURL(state.currentPois, imagesRegExp, ['url']); + revokeObjectURL(state.trekTouristicEvents, imagesRegExp, ['url']); + revokeObjectURL(state.trekTouristicContents, imagesRegExp, ['url']); + revokeObjectURL(state.currentInformationDesks, imagesRegExp); + revokeObjectURL(state.currentTrek, imagesRegExp, ['url']); + } this.onDetailsClose(); const url = new URL(window.location.toString()); url.searchParams.delete('trek'); @@ -561,10 +570,7 @@ export class GrwApp { ) : (
)} diff --git a/src/components/grw-common-button/grw-common-button.scss b/src/components/grw-common-button/grw-common-button.scss index 51407f13..eec3b332 100644 --- a/src/components/grw-common-button/grw-common-button.scss +++ b/src/components/grw-common-button/grw-common-button.scss @@ -1,11 +1,3 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - .common-button { user-select: none; cursor: pointer; diff --git a/src/components/grw-common-button/grw-common-button.tsx b/src/components/grw-common-button/grw-common-button.tsx index 14ba8375..13a6ca34 100644 --- a/src/components/grw-common-button/grw-common-button.tsx +++ b/src/components/grw-common-button/grw-common-button.tsx @@ -1,4 +1,6 @@ import { Component, Host, Prop, h } from '@stencil/core'; +import RefreshIcon from '../../assets/refresh.svg'; +import FilterListIcon from '../../assets/filter_list.svg'; @Component({ tag: 'grw-common-button', @@ -20,10 +22,7 @@ export class GrwCommonButton { }} > )} @@ -85,10 +87,7 @@ export class GrwInformationDeskDetail { )} {this.informationDesk.phone && (
- {/* @ts-ignore */} - - call - + {this.informationDesk.phone} @@ -96,10 +95,7 @@ export class GrwInformationDeskDetail { )} {this.informationDesk.email && (
- {/* @ts-ignore */} - - mail - + {this.informationDesk.email} @@ -107,10 +103,7 @@ export class GrwInformationDeskDetail { )} {this.informationDesk.website && (
- {/* @ts-ignore */} - - link - + {this.informationDesk.website} diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss index aa60dc08..e82e66d9 100644 --- a/src/components/grw-map/grw-map.scss +++ b/src/components/grw-map/grw-map.scss @@ -3,10 +3,6 @@ @use '~@raruto/leaflet-elevation/dist/leaflet-elevation.min.css'; @use '~leaflet.markercluster/dist/MarkerCluster.css'; -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - #map { position: relative; font-family: var(--font-family); diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx index d0917530..af1a358d 100644 --- a/src/components/grw-map/grw-map.tsx +++ b/src/components/grw-map/grw-map.tsx @@ -99,56 +99,56 @@ export class GrwMap { @Listen('stepsIsInViewport', { target: 'window' }) stepsIsInViewport(event: CustomEvent) { - if (this.currentStepsLayer) { + if (this.currentStepsLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentStepsLayer); } } @Listen('descriptionIsInViewport', { target: 'window' }) descriptionIsInViewport(event: CustomEvent) { - if (this.currentReferencePointsLayer) { + if (this.currentReferencePointsLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentReferencePointsLayer); } } @Listen('parkingIsInViewport', { target: 'window' }) parkingIsInViewport(event: CustomEvent) { - if (this.currentParkingLayer) { + if (this.currentParkingLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentParkingLayer); } } @Listen('informationDeskIsInViewport', { target: 'window' }) onInformationDesksIsInViewport(event: CustomEvent) { - if (this.currentInformationDesksLayer) { + if (this.currentInformationDesksLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentInformationDesksLayer); } } @Listen('sensitiveAreaIsInViewport', { target: 'window' }) sensitiveAreaIsInViewport(event: CustomEvent) { - if (this.currentSensitiveAreasLayer) { + if (this.currentSensitiveAreasLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentSensitiveAreasLayer); } } @Listen('poiIsInViewport', { target: 'window' }) poiIsInViewport(event: CustomEvent) { - if (this.currentPoisLayer) { + if (this.currentPoisLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentPoisLayer); } } @Listen('touristicContentsIsInViewport', { target: 'window' }) touristicContentsIsInViewport(event: CustomEvent) { - if (this.currentToutisticContentsLayer) { + if (this.currentToutisticContentsLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currentToutisticContentsLayer); } } @Listen('touristicEventsIsInViewport', { target: 'window' }) touristicEventsIsInViewport(event: CustomEvent) { - if (this.currenttouristicEventsLayer) { + if (this.currenttouristicEventsLayer && this.layersControl) { this.handleLayerVisibility(event.detail, this.currenttouristicEventsLayer); } } diff --git a/src/components/grw-poi-detail/grw-poi.scss b/src/components/grw-poi-detail/grw-poi.scss index f16ac54a..8a18ee03 100644 --- a/src/components/grw-poi-detail/grw-poi.scss +++ b/src/components/grw-poi-detail/grw-poi.scss @@ -6,10 +6,6 @@ z-index: 0; } -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { display: flex; flex-direction: column; diff --git a/src/components/grw-poi-detail/grw-poi.tsx b/src/components/grw-poi-detail/grw-poi.tsx index de75792f..1ff64331 100644 --- a/src/components/grw-poi-detail/grw-poi.tsx +++ b/src/components/grw-poi-detail/grw-poi.tsx @@ -27,7 +27,9 @@ export class GrwPoiDetail { @Listen('trekDownloadedSuccessConfirm', { target: 'window' }) onTrekDownloadedSuccessConfirm() { - this.swiperPoi.slideTo(0); + if (this.swiperPoi) { + this.swiperPoi.slideTo(0); + } this.offline = true; } diff --git a/src/components/grw-search/grw-search.scss b/src/components/grw-search/grw-search.scss index 10d66313..91515f40 100644 --- a/src/components/grw-search/grw-search.scss +++ b/src/components/grw-search/grw-search.scss @@ -1,18 +1,9 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { display: flex; justify-content: center; align-items: center; .icon { color: var(--color-on-primary-container); - font-size: 24px; position: absolute; left: 32px; z-index: 20; diff --git a/src/components/grw-search/grw-search.tsx b/src/components/grw-search/grw-search.tsx index a525cc28..9d48ae6c 100644 --- a/src/components/grw-search/grw-search.tsx +++ b/src/components/grw-search/grw-search.tsx @@ -1,6 +1,7 @@ import { Component, Host, Prop, h } from '@stencil/core'; import state from 'store/store'; import { handleTouristicContentsFiltersAndSearch, handleTouristicEventsFiltersAndSearch, handleTreksFiltersAndSearch } from 'utils/utils'; +import SearchIcon from '../../assets/search.svg'; @Component({ tag: 'grw-search', @@ -28,10 +29,7 @@ export class GrwSearch { '--font-family': this.fontFamily, }} > - {/* @ts-ignore */} - - search - + this.onSearchChange(e)} type="search" placeholder="Rechercher" value={state.searchValue}> ); diff --git a/src/components/grw-select-language/grw-select-language.scss b/src/components/grw-select-language/grw-select-language.scss index b1d7e74d..4d12ad6e 100644 --- a/src/components/grw-select-language/grw-select-language.scss +++ b/src/components/grw-select-language/grw-select-language.scss @@ -1,11 +1,3 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { display: flex; align-items: center; diff --git a/src/components/grw-select-language/grw-select-language.tsx b/src/components/grw-select-language/grw-select-language.tsx index 739a47ce..2c43809c 100644 --- a/src/components/grw-select-language/grw-select-language.tsx +++ b/src/components/grw-select-language/grw-select-language.tsx @@ -1,5 +1,6 @@ import { Component, Host, h } from '@stencil/core'; import state from 'store/store'; +import TranslateIcon from '../../assets/translate.svg'; @Component({ tag: 'grw-select-language', @@ -17,10 +18,7 @@ export class GrwSelectLanguage { render() { return ( - {/* @ts-ignore */} - - translate - + this.action()} type="checkbox" id="darkmode" name="darkmode" /> - {/* @ts-ignore */} - - done - + diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss index 166420b9..ace562f9 100644 --- a/src/components/grw-touristic-content-card/grw-touristic-content-card.scss +++ b/src/components/grw-touristic-content-card/grw-touristic-content-card.scss @@ -6,10 +6,6 @@ z-index: 0; } -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { a { color: var(--color-primary-app); diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx b/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx index 78c90964..25f4dd27 100644 --- a/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx +++ b/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx @@ -31,7 +31,9 @@ export class GrwTouristicContentCard { @Listen('trekDownloadedSuccessConfirm', { target: 'window' }) onTrekDownloadedSuccessConfirm() { - this.swiperTouristicContent.slideTo(0); + if (this.swiperTouristicContent) { + this.swiperTouristicContent.slideTo(0); + } this.offline = true; } @@ -128,7 +130,7 @@ export class GrwTouristicContentCard { { diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss index 435391ef..5a47f03b 100644 --- a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss +++ b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss @@ -2,14 +2,6 @@ @use '~swiper/modules/navigation/navigation.scss'; @use '~swiper/modules/pagination/pagination.scss'; -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - .swiper { z-index: 0; } diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx index 671ccf5d..d7944987 100644 --- a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx +++ b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx @@ -2,6 +2,8 @@ import { Build, Component, Host, Prop, State, getAssetPath, h } from '@stencil/c import { translate } from 'i18n/i18n'; import state from 'store/store'; import Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper'; +import CloseIcon from '../../assets/close.svg'; +import DownloadIcon from '../../assets/download.svg'; @Component({ tag: 'grw-touristic-content-detail', @@ -103,16 +105,13 @@ export class GrwTouristicContentDetail {
{this.displayFullscreen && (
this.handleFullscreen(true)}> - {/* @ts-ignore */} - - close - +
)}
{legend}
- this.handleFullscreen()} /> + this.handleFullscreen()} />
); }) @@ -156,10 +155,7 @@ export class GrwTouristicContentDetail {
- {/* @ts-ignore */} - - download - + PDF diff --git a/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss b/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss index 284fef1a..2169b18c 100644 --- a/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss +++ b/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss @@ -1,11 +1,3 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { width: 100%; height: 100%; diff --git a/src/components/grw-touristic-event-card/grw-touristic-event-card.scss b/src/components/grw-touristic-event-card/grw-touristic-event-card.scss index d2b4cc65..180b77c5 100644 --- a/src/components/grw-touristic-event-card/grw-touristic-event-card.scss +++ b/src/components/grw-touristic-event-card/grw-touristic-event-card.scss @@ -6,10 +6,6 @@ z-index: 0; } -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { a { color: var(--color-primary-app); diff --git a/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx b/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx index 33540d05..41090b49 100644 --- a/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx +++ b/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx @@ -32,7 +32,9 @@ export class GrwTouristicEvent { @Listen('trekDownloadedSuccessConfirm', { target: 'window' }) onTrekDownloadedSuccessConfirm() { - this.swiperTouristicEvent.slideTo(0); + if (this.swiperTouristicEvent) { + this.swiperTouristicEvent.slideTo(0); + } this.offline = true; } @@ -129,7 +131,7 @@ export class GrwTouristicEvent { { diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss index d980d061..f8ea3ac7 100644 --- a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss +++ b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss @@ -6,14 +6,6 @@ z-index: 0; } -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { --swiper-navigation-size: 24px; --swiper-navigation-color: var(--color-on-primary-container); diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx index 8150d227..ce7d772c 100644 --- a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx +++ b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx @@ -2,6 +2,8 @@ import { Build, Component, Host, Prop, State, getAssetPath, h } from '@stencil/c import { translate } from 'i18n/i18n'; import state from 'store/store'; import Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper'; +import CloseIcon from '../../assets/close.svg'; +import DownloadIcon from '../../assets/download.svg'; @Component({ tag: 'grw-touristic-event-detail', @@ -64,6 +66,7 @@ export class GrwTouristicEventDetail { render() { const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`); + const touristicEventType = state.touristicEventTypes && state.currentTouristicEvent && @@ -103,16 +106,13 @@ export class GrwTouristicEventDetail {
{this.displayFullscreen && (
this.handleFullscreen(true)}> - {/* @ts-ignore */} - - close - +
)}
{legend}
- this.handleFullscreen()} /> + this.handleFullscreen()} />
); }) @@ -179,10 +179,7 @@ export class GrwTouristicEventDetail {
- {/* @ts-ignore */} - - download - + PDF diff --git a/src/components/grw-touristic-events-list/grw-touristic-events-list.scss b/src/components/grw-touristic-events-list/grw-touristic-events-list.scss index 383df179..3e750f15 100644 --- a/src/components/grw-touristic-events-list/grw-touristic-events-list.scss +++ b/src/components/grw-touristic-events-list/grw-touristic-events-list.scss @@ -1,11 +1,3 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { width: 100%; height: 100%; diff --git a/src/components/grw-trek-card/grw-trek-card.scss b/src/components/grw-trek-card/grw-trek-card.scss index 69d8654a..7935f0db 100644 --- a/src/components/grw-trek-card/grw-trek-card.scss +++ b/src/components/grw-trek-card/grw-trek-card.scss @@ -1,11 +1,3 @@ -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - .trek-card-container, .trek-card-large-view-container { cursor: pointer; @@ -185,7 +177,6 @@ top: 16px; right: 16px; position: absolute; - font-size: 24px; color: var(--color-on-surface); } } diff --git a/src/components/grw-trek-card/grw-trek-card.tsx b/src/components/grw-trek-card/grw-trek-card.tsx index 46ecf881..c0ed6ecb 100644 --- a/src/components/grw-trek-card/grw-trek-card.tsx +++ b/src/components/grw-trek-card/grw-trek-card.tsx @@ -3,6 +3,10 @@ import { trekIsAvailableOffline } from 'services/treks.service'; import state, { onChange } from 'store/store'; import { City, Difficulty, Practice, Route, Themes, Trek } from 'types/types'; import { formatDuration, formatLength, formatAscent } from 'utils/utils'; +import OfflinePinIcon from '../../assets/offline_pin.svg'; +import TimelapseIcon from '../../assets/timelapse.svg'; +import OpenInFullIcon from '../../assets/open_in_full.svg'; +import MovingIcon from '../../assets/moving.svg'; @Component({ tag: 'grw-trek-card', @@ -83,6 +87,7 @@ export class GrwTrekCard { render() { const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`); + return ( {this.isAvailableOffline && (
- {/* @ts-ignore */} - - offline_pin - +
)} {this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 ? ( @@ -165,43 +167,26 @@ export class GrwTrekCard {
{this.difficulty && (
- {this.difficulty.pictogram && ( - - )} + {this.difficulty.pictogram && } {this.difficulty.label}
)}
- {/* @ts-ignore */} - - timelapse - + {formatDuration(this.currentTrek.duration)}
- {/* @ts-ignore */} - - open_in_full - + {formatLength(this.currentTrek.length_2d)}
- {/* @ts-ignore */} - - moving - + {formatAscent(this.currentTrek.ascent)} @@ -209,29 +194,13 @@ export class GrwTrekCard { {!this.isStep && (
- {this.route?.pictogram && ( - - )} + {this.route?.pictogram && } {this.route?.route}
- {this.practice?.pictogram && ( - - )} + {this.practice?.pictogram && } {this.practice?.name} diff --git a/src/components/grw-trek-detail/grw-trek-detail.scss b/src/components/grw-trek-detail/grw-trek-detail.scss index ec4dc7e0..52204436 100644 --- a/src/components/grw-trek-detail/grw-trek-detail.scss +++ b/src/components/grw-trek-detail/grw-trek-detail.scss @@ -7,14 +7,6 @@ z-index: 0; } -.material-symbols { - font-family: 'Material Symbols Outlined'; -} - -.material-symbols-outlined { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; -} - :host { --swiper-navigation-size: 24px; --swiper-navigation-color: var(--color-on-primary-container); @@ -130,7 +122,6 @@ grw-trek-detail { justify-content: flex-start; align-items: center; .icon { - font-size: 24px; width: 24px; height: auto; color: var(--color-primary-app); @@ -434,8 +425,7 @@ grw-trek-detail { border: 2px solid var(--color-outline); border-radius: var(--border-radius, 12px); font-size: 16px; - .material-symbols { - font-size: 24px; + .icon img { width: 26px; margin-right: 8px; } diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx index 4327543e..91c33d34 100644 --- a/src/components/grw-trek-detail/grw-trek-detail.tsx +++ b/src/components/grw-trek-detail/grw-trek-detail.tsx @@ -10,6 +10,16 @@ import L from 'leaflet'; import { getDistricts, getPoisNearTrek, getSensitiveAreasNearTrek, getTrek, getTreksList } from 'services/treks.service'; import { getTouristicContentsNearTrek } from 'services/touristic-contents.service'; import { getTouristicEventsNearTrek } from 'services/touristic-events.service'; +import CloseIcon from '../../assets/close.svg'; +import TimelapseIcon from '../../assets/timelapse.svg'; +import OpenInFullIcon from '../../assets/open_in_full.svg'; +import MovingIcon from '../../assets/moving.svg'; +import DownloadForOfflineIcon from '../../assets/download_for_offline.svg'; +import DeleteIcon from '../../assets/delete.svg'; +import DownloadIcon from '../../assets/download.svg'; +import WarningIcon from '../../assets/warning.svg'; +import BackpackIcon from '../../assets/backpack.svg'; +import CallIcon from '../../assets/call.svg'; const threshold = 1; const presentation: Option = { @@ -669,7 +679,7 @@ export class GrwTrekDetail { await writeOrUpdateFilesInStore(state.networks, imagesRegExp); // // download trek images - await writeOrUpdateFilesInStore(this.currentTrek, imagesRegExp, true); + await writeOrUpdateFilesInStore(this.currentTrek, imagesRegExp, true, ['url']); // // download trek data await writeOrUpdateDataInStore('difficulties', state.difficulties); @@ -704,17 +714,17 @@ export class GrwTrekDetail { }, ]); - await writeOrUpdateFilesInStore(state.currentPois, imagesRegExp, true); + await writeOrUpdateFilesInStore(state.currentPois, imagesRegExp, true, ['url']); await writeOrUpdateFilesInStore(state.currentInformationDesks, imagesRegExp, true); // download items data - await writeOrUpdateFilesInStore(state.trekTouristicContents, imagesRegExp, true); + await writeOrUpdateFilesInStore(state.trekTouristicContents, imagesRegExp, true, ['url']); state.trekTouristicContents.forEach(trekTouristicContent => { trekTouristicContent.offline = true; }); await writeOrUpdateDataInStore('touristicContents', state.trekTouristicContents); - await writeOrUpdateFilesInStore(state.trekTouristicEvents, imagesRegExp, true); + await writeOrUpdateFilesInStore(state.trekTouristicEvents, imagesRegExp, true, ['url']); state.trekTouristicEvents.forEach(trekTouristicEvent => { trekTouristicEvent.offline = true; }); @@ -753,7 +763,7 @@ export class GrwTrekDetail { trekSteps[index].touristicEvents = stepsTouristicEventsResponses[index].results.map(trekTouristicEvent => trekTouristicEvent.id); trekSteps[index].sensitiveAreas = stepsSensitiveAreasResponses[index].results.map(currentSensitiveArea => currentSensitiveArea.id); await writeOrUpdateDataInStore('treks', [trekSteps[index]]); - await writeOrUpdateFilesInStore(trekSteps[index], imagesRegExp, true); + await writeOrUpdateFilesInStore(trekSteps[index], imagesRegExp, true, ['url']); } } @@ -762,7 +772,9 @@ export class GrwTrekDetail { state.currentTreks = state.treks; } state.currentTreks.find(trek => trek.id === this.currentTrek.id).offline = true; - this.swiperImages.slideTo(0); + if (this.swiperImages) { + this.swiperImages.slideTo(0); + } this.offline = true; this.trekDownloadedSuccessConfirm.emit(); } @@ -862,6 +874,7 @@ export class GrwTrekDetail { render() { const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`); + return ( {this.displayFullscreen && (
this.handleFullscreen(true)}> - {/* @ts-ignore */} - - close - +
)}
@@ -1021,7 +1031,7 @@ export class GrwTrekDetail { this.handleFullscreen()} /* @ts-ignore */ @@ -1035,14 +1045,7 @@ export class GrwTrekDetail { ); }) ) : ( - + )}
@@ -1068,58 +1071,33 @@ export class GrwTrekDetail {
{this.difficulty && (
- {this.difficulty.pictogram && ( - - )} + {this.difficulty.pictogram && } {this.difficulty.label}
)}
- {/* @ts-ignore */} - - timelapse - + {formatDuration(this.currentTrek?.duration)}
- {this.route?.pictogram && ( - - )} + {this.route?.pictogram && } {this.route?.route}
- {/* @ts-ignore */} - - open_in_full - + {formatLength(this.currentTrek.length_2d)}
{this.currentTrek.ascent && (
- {/* @ts-ignore */} - - moving - + {formatAscent(this.currentTrek.ascent)} @@ -1127,25 +1105,14 @@ export class GrwTrekDetail { )} {this.currentTrek.descent && (
- {/* @ts-ignore */} - - moving - + {formatDescent(this.currentTrek.descent)}
)}
- {this.practice?.pictogram && ( - - )} + {this.practice?.pictogram && } {this.practice?.name} @@ -1155,13 +1122,7 @@ export class GrwTrekDetail { const currentNetwork = state.networks.find(network => network.id === networkId); return (
- + {currentNetwork.label} @@ -1188,10 +1149,7 @@ export class GrwTrekDetail {
{this.enableOffline && !this.offline && (