Open Event Front-end lets users customise the email preferences for the notifications for the events created by the user. The user can toggle the notifications for new paper is submitted, change in schedule of sessions, and reminder for event. In this post we will implement a functional UI for the email preferences in the application. How did we do it?
Creating email-preferences component
We create a component for the email-preferences component using ember-cli command:
Mock response from server
Each event has notification preferences for three services new papers, change in schedule & new event which are stored as a boolean in the server. Each response model contains all the flags for the email preferences.
Implementing UI for email preferences
We use ui-accordion for each event created by the user. The ui-accordion lets us toggle the display for content section, similar to jquery’s collapse-in class. You can find more about semantic ui’s ui-accordion here.Implementing UI for email-preferences-section
Each preference can be toggled using ui-checkbox from semantic ui. When a checkbox is toggled the respective flag in the model.
If any of the preference is not set i.e false, we toggle the status of the preferences to off. We use math helper or operation for setting the status of the preferences for each preference. We also toggle between the colour of the button between green and yellow, depending on the status of preferences setting.
This results to the following changes on the Open Event Front-end:
The source code for the example is available here.