Skip to content

Commit f58911e

Browse files
Anupam-dagarabhinavk96
Anupam-dagar
authored and
abhinavk96
committed
feat: Add option to hide map in explore route. (#3444)
* feat: Add option to hide map in explore route. Fixes: #3122 * Rename hideMap to toggleMap. * Rename property name for map reset. * Change component file to ES6 syntax. * Remove unused get.
1 parent 387affa commit f58911e

File tree

2 files changed

+158
-135
lines changed

2 files changed

+158
-135
lines changed

‎app/components/explore/side-bar.js

Lines changed: 154 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,175 @@
11
import Component from '@ember/component';
22
import moment from 'moment';
3-
import { computed } from '@ember/object';
3+
import { computed, action } from '@ember/object';
44
import { not } from '@ember/object/computed';
55
import { getDateRanges } from 'open-event-frontend/utils/dictionary/filters';
66

7-
export default Component.extend({
7+
export default class extends Component {
88

9-
classNames: ['ui', 'fluid', 'explore', 'vertical', 'menu'],
9+
classNames = ['ui', 'fluid', 'explore', 'vertical', 'menu'];
1010

11-
customStartDate: moment().toISOString(),
11+
customStartDate = moment().toISOString();
1212

13-
customEndDate : null,
14-
showFilters : false,
13+
customEndDate = null;
14+
showFilters = false;
15+
isMapVisible = true;
1516

16-
hideClearFilters: computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', 'ticket_type', 'cfs', function() {
17+
@computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', 'ticket_type', 'cfs')
18+
get hideClearFilters() {
1719
return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location || this.ticket_type || this.cfs);
18-
}),
20+
}
1921

20-
showAllCategories: computed('category', 'sub_category', function() {
22+
@computed('category', 'sub_category')
23+
get showAllCategories() {
2124
return !this.category || !this.sub_category;
25+
}
2226

23-
}),
24-
showAllTypes: not('event_type'),
25-
27+
showAllTypes = not('event_type');
2628

27-
dateRanges: computed(function() {
29+
@computed()
30+
get dateRanges() {
2831
return getDateRanges.bind(this)();
29-
}),
32+
}
3033

31-
showFiltersOnMobile: computed('device.isMobile', 'showFilters', function() {
34+
@computed('device.isMobile', 'showFilters')
35+
get showFiltersOnMobile() {
3236
return (!this.device.isMobile || this.showFilters);
33-
}),
34-
35-
actions: {
36-
onLocationChangeHandler(lat, lng) {
37-
this.setProperties({
38-
zoom: 17,
39-
lat,
40-
lng
41-
});
42-
},
43-
selectCategory(category, subCategory) {
44-
this.set('category', (category === this.category && !subCategory) ? null : category);
45-
this.set('sub_category', (!subCategory || subCategory === this.sub_category) ? null : subCategory);
46-
},
47-
48-
selectEventType(eventType) {
49-
this.set('event_type', eventType === this.event_type ? null : eventType);
50-
},
51-
52-
selectTicketType(ticketType) {
53-
this.set('ticket_type', ticketType === this.ticket_type ? null : ticketType);
54-
},
55-
56-
dateValidate(date) {
57-
if (moment(date).isAfter(this.customEndDate)) {
58-
this.set('customEndDate', date);
59-
}
37+
}
6038

61-
this.send('selectDateFilter', 'custom_dates');
62-
},
63-
64-
selectEventCfs(cfs) {
65-
this.set('cfs', cfs === this.cfs ? null : cfs);
66-
},
67-
68-
selectDateFilter(dateType) {
69-
let newStartDate = null;
70-
let newEndDate = null;
71-
72-
if (dateType === this.dateType && dateType !== 'custom_dates') {
73-
this.set('dateType', null);
74-
} else {
75-
this.set('dateType', dateType);
76-
switch (dateType) {
77-
case 'custom_dates':
78-
newStartDate = this.customStartDate;
79-
newEndDate = this.customEndDate;
80-
break;
81-
82-
case 'all_dates':
83-
break;
84-
85-
case 'today':
86-
newStartDate = moment().toISOString();
87-
newEndDate = moment().toISOString();
88-
break;
89-
90-
case 'tomorrow':
91-
newStartDate = moment().add(1, 'day').toISOString();
92-
newEndDate = newStartDate;
93-
break;
94-
95-
case 'this_week':
96-
newStartDate = moment().startOf('week').toISOString();
97-
newEndDate = moment().endOf('week').toISOString();
98-
break;
99-
100-
case 'this_weekend':
101-
newStartDate = moment().isoWeekday('Friday').toISOString();
102-
newEndDate = moment().isoWeekday('Sunday').toISOString();
103-
break;
104-
105-
case 'next_week':
106-
newStartDate = moment().isoWeekday('Monday').add(1, 'week').toISOString();
107-
newEndDate = moment().isoWeekday('Sunday').add(1, 'week').toISOString();
108-
break;
109-
110-
case 'this_month':
111-
newStartDate = moment().startOf('month').toISOString();
112-
newEndDate = moment().endOf('month').toISOString();
113-
break;
114-
115-
default:
116-
}
117-
}
39+
@action
40+
onLocationChangeHandler(lat, lng) {
41+
this.setProperties({
42+
zoom: 17,
43+
lat,
44+
lng
45+
});
46+
}
11847

119-
this.set('startDate', newStartDate);
120-
this.set('endDate', newEndDate);
121-
},
122-
123-
onDateChange() {
124-
this.send('selectDateFilter', 'custom_dates');
125-
},
126-
clearFilterCategory() {
127-
this.setProperties({
128-
category : null,
129-
sub_category : null
130-
});
131-
132-
},
133-
clearFilterTypes() {
134-
this.set('event_type', null);
135-
},
136-
137-
clearFilters() {
138-
this.setProperties({
139-
startDate : null,
140-
endDate : null,
141-
dateType : null,
142-
category : null,
143-
sub_category : null,
144-
event_type : null,
145-
location : null,
146-
ticket_type : null,
147-
cfs : null
148-
});
149-
},
150-
151-
toggleFilters() {
152-
this.set('showFilters', !this.showFilters);
48+
@action
49+
selectCategory(category, subCategory) {
50+
this.set('category', (category === this.category && !subCategory) ? null : category);
51+
this.set('sub_category', (!subCategory || subCategory === this.sub_category) ? null : subCategory);
52+
}
53+
54+
@action
55+
selectEventType(eventType) {
56+
this.set('event_type', eventType === this.event_type ? null : eventType);
57+
}
58+
59+
@action
60+
selectTicketType(ticketType) {
61+
this.set('ticket_type', ticketType === this.ticket_type ? null : ticketType);
62+
}
63+
64+
@action
65+
dateValidate(date) {
66+
if (moment(date).isAfter(this.customEndDate)) {
67+
this.set('customEndDate', date);
15368
}
69+
this.send('selectDateFilter', 'custom_dates');
70+
}
71+
72+
@action
73+
selectEventCfs(cfs) {
74+
this.set('cfs', cfs === this.cfs ? null : cfs);
75+
}
76+
77+
@action
78+
selectDateFilter(dateType) {
79+
let newStartDate = null;
80+
let newEndDate = null;
81+
82+
if (dateType === this.dateType && dateType !== 'custom_dates') {
83+
this.set('dateType', null);
84+
} else {
85+
this.set('dateType', dateType);
86+
switch (dateType) {
87+
case 'custom_dates':
88+
newStartDate = this.customStartDate;
89+
newEndDate = this.customEndDate;
90+
break;
91+
92+
case 'all_dates':
93+
break;
94+
95+
case 'today':
96+
newStartDate = moment().toISOString();
97+
newEndDate = moment().toISOString();
98+
break;
99+
100+
case 'tomorrow':
101+
newStartDate = moment().add(1, 'day').toISOString();
102+
newEndDate = newStartDate;
103+
break;
104+
105+
case 'this_week':
106+
newStartDate = moment().startOf('week').toISOString();
107+
newEndDate = moment().endOf('week').toISOString();
108+
break;
109+
110+
case 'this_weekend':
111+
newStartDate = moment().isoWeekday('Friday').toISOString();
112+
newEndDate = moment().isoWeekday('Sunday').toISOString();
113+
break;
114+
115+
case 'next_week':
116+
newStartDate = moment().isoWeekday('Monday').add(1, 'week').toISOString();
117+
newEndDate = moment().isoWeekday('Sunday').add(1, 'week').toISOString();
118+
break;
119+
120+
case 'this_month':
121+
newStartDate = moment().startOf('month').toISOString();
122+
newEndDate = moment().endOf('month').toISOString();
123+
break;
124+
125+
default:
126+
}
127+
}
128+
this.set('startDate', newStartDate);
129+
this.set('endDate', newEndDate);
130+
}
131+
132+
@action
133+
onDateChange() {
134+
this.send('selectDateFilter', 'custom_dates');
135+
}
136+
137+
@action
138+
clearFilterCategory() {
139+
this.setProperties({
140+
category : null,
141+
sub_category : null
142+
});
143+
144+
}
145+
146+
@action
147+
clearFilterTypes() {
148+
this.set('event_type', null);
149+
}
150+
151+
@action
152+
clearFilters() {
153+
this.setProperties({
154+
startDate : null,
155+
endDate : null,
156+
dateType : null,
157+
category : null,
158+
sub_category : null,
159+
event_type : null,
160+
location : null,
161+
ticket_type : null,
162+
cfs : null
163+
});
164+
}
165+
166+
@action
167+
toggleFilters() {
168+
this.set('showFilters', !this.showFilters);
169+
}
170+
171+
@action
172+
toggleMap() {
173+
this.toggleProperty('isMapVisible');
154174
}
155-
});
175+
}

‎app/templates/components/explore/side-bar.hbs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<div class="map item">
1+
<div class="map item {{if (not isMapVisible) 'mobile hidden'}}">
22
{{#g-map markersFitMode='live' lat=37.7833 lng=-122.4167 zoom=2 address=location class='google-maps' as |context|}}
33
{{g-map-address-marker context address=location onLocationChange=(action 'onLocationChangeHandler')}}
44
{{/g-map}}
55
</div>
6+
{{#if device.isMobile}}
7+
<div class="ui bottom attached button" role="button" {{action 'toggleMap'}}> {{if (not isMapVisible) 'Show' 'Hide'}} Map </div>
8+
{{/if}}
69
<div class="item">
710
<div class="ui input">
811
{{widgets/forms/places-autocomplete

0 commit comments

Comments
 (0)