This blog article will describe how the sessions are listed in the public pages of an event in Open Event Frontend, which allows the user to view all the sessions of an event. The sessions are filtered as per date. The primary end point of Open Event API with which we are concerned with for fetching the the users details is GET /v1/events/{event_identifier}/sessions
The route of the public page fetches all the sessions of a particular events and filters them as per the criteria selected by the user. The user can view the sessions of a particular day, week or month. The user can also view the list of all the sessions. The query written in the route is:
async model(params) { const eventDetails = this.modelFor('public'); let sessions = null; if (params.session_status === 'today') { sessions = await this.get('store').query('session', { filter: [ { and: [ { name : 'event', op : 'has', val : { name : 'identifier', op : 'eq', val : eventDetails.id } }, { name : 'starts-at', op : 'ge', val : moment().startOf('day').toISOString() }, { name : 'starts-at', op : 'lt', val : moment().endOf('day').toISOString() } ] } ] }); } else { sessions = await this.get('store').query('session', { filter: [ { name : 'event', op : 'has', val : { name : 'identifier', op : 'eq', val : eventDetails.id } } ] }); } return { event : eventDetails, session : sessions }; }
The view route is located at app/e/{event_identifier}/sessions/all. This route will show all the sessions of the selected event. Similarly /week will show the sessions of a week and /month will show the sessions of a month.Four joint buttons are used in the UI of the public page to redirect to these routes.
To list the sessions ember component of session cards is used to include a session in a card with the details of the session like the time, abstract etc and also the session’s track and the details of the speakers like the name, information and social media accounts. In the template of the route this component is called and used in the UI within an ember component. In case there are no sessions that exist between a given time period, a helper text is displayed stating “No sessions exist for the given period”.
class="ui buttons"> {{#link-to 'public.sessions.list' model.event.id 'all' class="ui button"}}{{t 'All'}}{{/link-to}} {{#link-to 'public.sessions.list' model.event.id 'today' class="ui button"}}{{t 'Today'}}{{/link-to}} {{#link-to 'public.sessions.list' model.event.id 'week' class="ui button"}}{{t 'Week'}}{{/link-to}} {{#link-to 'public.sessions.list' model.event.id 'month' class="ui button"}}{{t 'Month'}}{{/link-to}}class="ui raised very padded text container segment"> {{#each model.session as |session|}} {{public/session-item session=session}} {{else}}class="ui disabled header">{{t 'No Sessions exist for this time period'}}{{/each}} </div>Resources
- Official Ember Model docs: https://github.com/ebryn/ember-model
- Ember JS- route: https://guides.emberjs.com/release/routing/defining-your-routes
- Open Event API Docs: https://open-event-api.herokuapp.com/
- ember JS- Conditionally rendering Templates: https://guides.emberjs.com/v1.12.0/templates/rendering-with-helpers