Skip to content

Commit

Permalink
add touristic events list
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastyen
bastyen committed Jan 4, 2024
1 parent 6078d78 commit a0d4f88
Show file tree
Hide file tree
Showing 24 changed files with 995 additions and 121 deletions.
103 changes: 82 additions & 21 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,27 +131,47 @@ export namespace Components {
"portals": string;
"structures": string;
"themes": string;
"touristicContentId": string;
}
interface GrwTouristicEventCard {
"isInsideHorizontalList": boolean;
"isLargeView": boolean;
"touristicEvent": TouristicEvent;
}
interface GrwTouristicEventCardProvider {
interface GrwTouristicEventDetail {
"colorBackground": string;
"colorOnPrimaryContainer": string;
"colorOnSecondaryContainer": string;
"colorOnSurface": string;
"colorPrimaryApp": string;
"colorPrimaryContainer": string;
"colorSecondaryContainer": string;
"colorSurfaceContainerLow": string;
"isLargeView": boolean;
}
interface GrwTouristicEventProvider {
"api": string;
"languages": string;
"portals": string;
"touristicEventId": string;
}
interface GrwTouristicEventDetail {
"colorBackground": string;
"colorOnPrimaryContainer": string;
interface GrwTouristicEventsList {
"colorOnSecondaryContainer": string;
"colorOnSurface": string;
"colorPrimaryApp": string;
"colorPrimaryContainer": string;
"colorSecondaryContainer": string;
"colorSurfaceContainerLow": string;
"isLargeView": boolean;
"resetStoreOnDisconnected": boolean;
}
interface GrwTouristicEventsProvider {
"api": string;
"cities": string;
"districts": string;
"inBbox": string;
"languages": string;
"portals": string;
"structures": string;
"themes": string;
}
interface GrwTrekCard {
"colorOnSecondaryContainer": string;
Expand Down Expand Up @@ -325,18 +345,30 @@ declare global {
prototype: HTMLGrwTouristicEventCardElement;
new (): HTMLGrwTouristicEventCardElement;
};
interface HTMLGrwTouristicEventCardProviderElement extends Components.GrwTouristicEventCardProvider, HTMLStencilElement {
}
var HTMLGrwTouristicEventCardProviderElement: {
prototype: HTMLGrwTouristicEventCardProviderElement;
new (): HTMLGrwTouristicEventCardProviderElement;
};
interface HTMLGrwTouristicEventDetailElement extends Components.GrwTouristicEventDetail, HTMLStencilElement {
}
var HTMLGrwTouristicEventDetailElement: {
prototype: HTMLGrwTouristicEventDetailElement;
new (): HTMLGrwTouristicEventDetailElement;
};
interface HTMLGrwTouristicEventProviderElement extends Components.GrwTouristicEventProvider, HTMLStencilElement {
}
var HTMLGrwTouristicEventProviderElement: {
prototype: HTMLGrwTouristicEventProviderElement;
new (): HTMLGrwTouristicEventProviderElement;
};
interface HTMLGrwTouristicEventsListElement extends Components.GrwTouristicEventsList, HTMLStencilElement {
}
var HTMLGrwTouristicEventsListElement: {
prototype: HTMLGrwTouristicEventsListElement;
new (): HTMLGrwTouristicEventsListElement;
};
interface HTMLGrwTouristicEventsProviderElement extends Components.GrwTouristicEventsProvider, HTMLStencilElement {
}
var HTMLGrwTouristicEventsProviderElement: {
prototype: HTMLGrwTouristicEventsProviderElement;
new (): HTMLGrwTouristicEventsProviderElement;
};
interface HTMLGrwTrekCardElement extends Components.GrwTrekCard, HTMLStencilElement {
}
var HTMLGrwTrekCardElement: {
Expand Down Expand Up @@ -383,8 +415,10 @@ declare global {
"grw-touristic-contents-list": HTMLGrwTouristicContentsListElement;
"grw-touristic-contents-provider": HTMLGrwTouristicContentsProviderElement;
"grw-touristic-event-card": HTMLGrwTouristicEventCardElement;
"grw-touristic-event-card-provider": HTMLGrwTouristicEventCardProviderElement;
"grw-touristic-event-detail": HTMLGrwTouristicEventDetailElement;
"grw-touristic-event-provider": HTMLGrwTouristicEventProviderElement;
"grw-touristic-events-list": HTMLGrwTouristicEventsListElement;
"grw-touristic-events-provider": HTMLGrwTouristicEventsProviderElement;
"grw-trek-card": HTMLGrwTrekCardElement;
"grw-trek-detail": HTMLGrwTrekDetailElement;
"grw-trek-provider": HTMLGrwTrekProviderElement;
Expand Down Expand Up @@ -464,6 +498,7 @@ declare namespace LocalJSX {
"isLargeView"?: boolean;
"nameLayer"?: string;
"onTouristicContentCardPress"?: (event: GrwMapCustomEvent<number>) => void;
"onTouristicEventCardPress"?: (event: GrwMapCustomEvent<number>) => void;
"onTrekCardPress"?: (event: GrwMapCustomEvent<number>) => void;
"resetStoreOnDisconnected"?: boolean;
"urlLayer"?: string;
Expand Down Expand Up @@ -523,28 +558,50 @@ declare namespace LocalJSX {
"portals"?: string;
"structures"?: string;
"themes"?: string;
"touristicContentId"?: string;
}
interface GrwTouristicEventCard {
"isInsideHorizontalList"?: boolean;
"isLargeView"?: boolean;
"onCardTouristicEventMouseLeave"?: (event: GrwTouristicEventCardCustomEvent<any>) => void;
"onCardTouristicEventMouseOver"?: (event: GrwTouristicEventCardCustomEvent<number>) => void;
"onTouristicEventCardPress"?: (event: GrwTouristicEventCardCustomEvent<number>) => void;
"touristicEvent"?: TouristicEvent;
}
interface GrwTouristicEventCardProvider {
interface GrwTouristicEventDetail {
"colorBackground"?: string;
"colorOnPrimaryContainer"?: string;
"colorOnSecondaryContainer"?: string;
"colorOnSurface"?: string;
"colorPrimaryApp"?: string;
"colorPrimaryContainer"?: string;
"colorSecondaryContainer"?: string;
"colorSurfaceContainerLow"?: string;
"isLargeView"?: boolean;
}
interface GrwTouristicEventProvider {
"api"?: string;
"languages"?: string;
"portals"?: string;
"touristicEventId"?: string;
}
interface GrwTouristicEventDetail {
"colorBackground"?: string;
"colorOnPrimaryContainer"?: string;
interface GrwTouristicEventsList {
"colorOnSecondaryContainer"?: string;
"colorOnSurface"?: string;
"colorPrimaryApp"?: string;
"colorPrimaryContainer"?: string;
"colorSecondaryContainer"?: string;
"colorSurfaceContainerLow"?: string;
"isLargeView"?: boolean;
"resetStoreOnDisconnected"?: boolean;
}
interface GrwTouristicEventsProvider {
"api"?: string;
"cities"?: string;
"districts"?: string;
"inBbox"?: string;
"languages"?: string;
"portals"?: string;
"structures"?: string;
"themes"?: string;
}
interface GrwTrekCard {
"colorOnSecondaryContainer"?: string;
Expand Down Expand Up @@ -626,8 +683,10 @@ declare namespace LocalJSX {
"grw-touristic-contents-list": GrwTouristicContentsList;
"grw-touristic-contents-provider": GrwTouristicContentsProvider;
"grw-touristic-event-card": GrwTouristicEventCard;
"grw-touristic-event-card-provider": GrwTouristicEventCardProvider;
"grw-touristic-event-detail": GrwTouristicEventDetail;
"grw-touristic-event-provider": GrwTouristicEventProvider;
"grw-touristic-events-list": GrwTouristicEventsList;
"grw-touristic-events-provider": GrwTouristicEventsProvider;
"grw-trek-card": GrwTrekCard;
"grw-trek-detail": GrwTrekDetail;
"grw-trek-provider": GrwTrekProvider;
Expand All @@ -654,8 +713,10 @@ declare module "@stencil/core" {
"grw-touristic-contents-list": LocalJSX.GrwTouristicContentsList & JSXBase.HTMLAttributes<HTMLGrwTouristicContentsListElement>;
"grw-touristic-contents-provider": LocalJSX.GrwTouristicContentsProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicContentsProviderElement>;
"grw-touristic-event-card": LocalJSX.GrwTouristicEventCard & JSXBase.HTMLAttributes<HTMLGrwTouristicEventCardElement>;
"grw-touristic-event-card-provider": LocalJSX.GrwTouristicEventCardProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicEventCardProviderElement>;
"grw-touristic-event-detail": LocalJSX.GrwTouristicEventDetail & JSXBase.HTMLAttributes<HTMLGrwTouristicEventDetailElement>;
"grw-touristic-event-provider": LocalJSX.GrwTouristicEventProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicEventProviderElement>;
"grw-touristic-events-list": LocalJSX.GrwTouristicEventsList & JSXBase.HTMLAttributes<HTMLGrwTouristicEventsListElement>;
"grw-touristic-events-provider": LocalJSX.GrwTouristicEventsProvider & JSXBase.HTMLAttributes<HTMLGrwTouristicEventsProviderElement>;
"grw-trek-card": LocalJSX.GrwTrekCard & JSXBase.HTMLAttributes<HTMLGrwTrekCardElement>;
"grw-trek-detail": LocalJSX.GrwTrekDetail & JSXBase.HTMLAttributes<HTMLGrwTrekDetailElement>;
"grw-trek-provider": LocalJSX.GrwTrekProvider & JSXBase.HTMLAttributes<HTMLGrwTrekProviderElement>;
Expand Down
2 changes: 1 addition & 1 deletion src/components/grw-app/grw-app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ grw-app {

.app-container {
position: relative;
background-color: var(--color-background);
width: 100%;
height: 100%;
overflow: hidden;
Expand All @@ -29,7 +30,6 @@ grw-app {
.header-container,
.large-view-header-container {
background-color: var(--color-background);
box-shadow: var(--elevation-2);
height: var(--header-height);
.arrow-back-container {
display: flex;
Expand Down
78 changes: 67 additions & 11 deletions src/components/grw-app/grw-app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@ import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stenci
import { translate } from 'i18n/i18n';
import state, { onChange, reset } from 'store/store';
import { mode } from 'types/types';
import { handleTouristicContentsFiltersAndSearch, handleTreksFiltersAndSearch, touristicContentsFilters, treksFilters } from 'utils/utils';
import {
handleTouristicContentsFiltersAndSearch,
handleTouristicEventsFiltersAndSearch,
handleTreksFiltersAndSearch,
touristicContentsFilters,
touristicEventsFilters,
treksFilters,
} from 'utils/utils';

@Component({
tag: 'grw-app',
Expand Down Expand Up @@ -153,6 +160,8 @@ export class GrwApp {
state.mode = 'treks';
} else if (this.touristicContents) {
state.mode = 'touristicContents';
} else if (this.touristicEvents) {
state.mode = 'touristicEvents';
}
const url = new URL(window.location.toString());
const trekParam = url.searchParams.get('trek');
Expand Down Expand Up @@ -192,6 +201,13 @@ export class GrwApp {
}

onDetailsClose() {
if (this.treks) {
state.mode = 'treks';
} else if (this.touristicContents) {
state.mode = 'touristicContents';
} else if (this.touristicEvents) {
state.mode = 'touristicEvents';
}
this.currentTouristicContentId = null;
this.showTouristicContent = false;
this.showTouristicContentMap = false;
Expand Down Expand Up @@ -315,6 +331,13 @@ export class GrwApp {
state.selectedActivitiesFilters = 0;
state.selectedLocationFilters = 0;
state.currentTouristicContents = handleTouristicContentsFiltersAndSearch();
} else if (mode === 'touristicEvents' && state.currentTouristicEvents) {
touristicEventsFilters.forEach(filter => {
state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
});
state.selectedActivitiesFilters = 0;
state.selectedLocationFilters = 0;
state.currentTouristicEvents = handleTouristicEventsFiltersAndSearch();
}
state.mode = mode;
}
Expand Down Expand Up @@ -343,11 +366,16 @@ export class GrwApp {
'--header-height': Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 ? '136px' : '64px',
}}
>
{!state.currentTreks && !state.currentTrek && !state.currentTouristicContent && !state.currentTouristicEvent && !state.currentTouristicContents && (
<div class="init-loader-container">
<span class="loader"></span>
</div>
)}
{!state.currentTreks &&
!state.currentTrek &&
!state.currentTouristicContent &&
!state.currentTouristicEvent &&
!state.currentTouristicContents &&
!state.currentTouristicEvents && (
<div class="init-loader-container">
<span class="loader"></span>
</div>
)}
{this.treks && state.mode === 'treks' && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && !state.currentTreks && (
<grw-treks-provider
api={this.api}
Expand Down Expand Up @@ -393,7 +421,19 @@ export class GrwApp {
portals={this.portals}
></grw-touristic-contents-provider>
)}
{(state.currentTreks || state.currentTrek || state.touristicContents || state.currentTouristicContent || state.currentTouristicEvent) && (
{this.touristicEvents && state.mode === 'touristicEvents' && !state.currentTouristicEvents && !this.showTouristicEvent && (
<grw-touristic-events-provider
api={this.api}
languages={this.languages}
in-bbox={this.inBbox}
cities={this.cities}
districts={this.districts}
structures={this.structures}
themes={this.themes}
portals={this.portals}
></grw-touristic-events-provider>
)}
{(state.currentTreks || state.currentTrek || state.touristicContents || state.touristicEvents || state.currentTouristicContent || state.currentTouristicEvent) && (
<div class="app-container">
<div
class={`${this.isLargeView ? 'large-view-header-container' : 'header-container'}${
Expand All @@ -412,6 +452,11 @@ export class GrwApp {
{translate[state.language].home.segment.touristicContents}
</label>
)}
{this.touristicContents && (
<label class={`segment${state.mode === 'touristicEvents' ? ' selected-segment' : ''}`} onClick={() => this.changeMode('touristicEvents')}>
{translate[state.language].home.segment.touristicEvents}
</label>
)}
</div>
)}
{!this.showTrek && !this.showTouristicContent && !this.showTouristicEvent ? (
Expand Down Expand Up @@ -448,7 +493,7 @@ export class GrwApp {
>
{state.mode === 'treks' && this.treks && (
<grw-treks-list
reset-store-on-disconnected="false"
reset-store-on-disconnected={'false'}
is-large-view={this.isLargeView}
color-primary-app={this.colorPrimaryApp}
color-on-surface={this.colorOnSurface}
Expand All @@ -459,7 +504,7 @@ export class GrwApp {
)}
{state.mode === 'touristicContents' && this.touristicContents && (
<grw-touristic-contents-list
reset-store-on-disconnected="false"
reset-store-on-disconnected={'false'}
is-large-view={this.isLargeView}
color-primary-app={this.colorPrimaryApp}
color-on-surface={this.colorOnSurface}
Expand All @@ -468,6 +513,17 @@ export class GrwApp {
color-surface-container-low={this.colorSurfaceContainerLow}
></grw-touristic-contents-list>
)}
{state.mode === 'touristicEvents' && this.touristicEvents && (
<grw-touristic-events-list
reset-store-on-disconnected={'false'}
is-large-view={this.isLargeView}
color-primary-app={this.colorPrimaryApp}
color-on-surface={this.colorOnSurface}
color-secondary-container={this.colorSecondaryContainer}
color-on-secondary-container={this.colorOnSecondaryContainer}
color-surface-container-low={this.colorSurfaceContainerLow}
></grw-touristic-events-list>
)}
</div>
{(this.showTrek && !state.currentTrek) ||
(this.showTouristicContent && !state.currentTouristicContent) ||
Expand All @@ -485,7 +541,7 @@ export class GrwApp {
visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
zIndex: !this.showTrekMap ? '1' : '0',
}}
reset-store-on-disconnected="false"
reset-store-on-disconnected={'false'}
color-primary-app={this.colorPrimaryApp}
color-on-surface={this.colorOnSurface}
color-primary-container={this.colorPrimaryContainer}
Expand Down Expand Up @@ -538,7 +594,7 @@ export class GrwApp {
</div>
)}
<grw-map
reset-store-on-disconnected="false"
reset-store-on-disconnected={'false'}
class={this.isLargeView ? 'large-view-app-map-container' : 'app-map-container'}
style={{
visibility:
Expand Down
Loading

0 comments on commit a0d4f88

Please sign in to comment.