This blog article will illustrate how the admin statistics API for events and sessions is integrated and how the values of different types of sessions and events is added to the admin dashboard in Open Event Frontend.
The primary end point of Open Event API with which we are concerned with for fetching the statistics are
GET /v1/admin/statistics/events
GET /v1/admin/statistics/events
import Route from '@ember/routing/route'; export default Route.extend({ async model() { return { events: await this.get('store').queryRecord('admin-statistics-event', { filter: { name : 'id', op : 'eq', val : 1 } }) sessions: await this.get('store').queryRecord('admin-statistics-session', { filter: { name : 'id', op : 'eq', val : 1 } }) }; } });
The route file helps to fetch the total count of each type of session and event through the queries written in the code. queryRecord is used instead of query because a single record is expected to be returned by the API. The view route is /admin.
The model needs to extend the base model class and all the attributes of the model will be number since the all the data obtained via these models from the API will be numerical statistics.
For Events:
import attr from 'ember-data/attr'; import ModelBase from 'open-event-frontend/models/base';export default ModelBase.extend({ draft : attr('number'), published : attr('number'), past : attr('number') });
For Sessions:
import attr from 'ember-data/attr'; import ModelBase from 'open-event-frontend/models/base';export default ModelBase.extend({ confirmed : attr('number'), accepted : attr('number'), submitted : attr('number'), draft : attr('number'), rejected : attr('number'), pending : attr('number') });
Once we retrieve the values of the attributes from the queries written in the route file we display the values of pending, rejected, accepted sessions and published, draft, past events.
class="label"> {{t 'Accepted'}}class="value">class="ui teal label"> {{model.sessions.accepted}}</div> </div>class="ui small statistic">class="label"> {{t 'Draft'}}class="value">class="ui yellow label"> {{model.sessions.pending}}</div> </div>class="ui small statistic">class="label"> {{t 'Rejected'}}class="value">class="ui red label"> {{model.sessions.rejected}}Resources
- 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/