Front-end

Read more about the article Adding Transition Effect Using RxJS And CSS In Voice Search UI Of Susper

Adding Transition Effect Using RxJS And CSS In Voice Search UI Of Susper

  Susper has been given a voice search feature through which it provides a user with a better experience of search. We introduced to enhance the speech-recognition user interface by adding transition effects. The transition effect was required to display appropriate messages according to voice being detected or not. The following messages were: When a user should start a voice search, it should display ‘Speak Now’ message for 1-2 seconds and then show up with message ‘Listening...’ to acknowledge user that now it is ready to recognize the voice which will be spoken. If a user should do not speak anything, it should display ‘Please check audio levels or your microphone working’ message in 3-4 seconds and should exit the voice search interface. The idea of speech UI was taken from the market leader and it was implemented in a similar way. On the homepage, it looks like this: On the results page, it looks like this: For creating transitions like, ‘Listening...’ and ‘Please check audio levels and microphone’ messages, we used CSS, RxJS Observables and timer() function. Let’s start with RxJS Observables and timer() function. RxJS Observables and timer() timer() is used to emit numbers in sequence in every specified duration or after a given duration. It acts as an observable. For example: let countdown = Observable.timer(2000); The above code will emit value of countdown in 2000 milliseconds. Similarly, let’s see another example: let countdown = Observable.timer(2000, 6000); The above code will emit value of countdown in 2000 milliseconds and subsequent values in every 6000 milliseconds. export class SpeechToTextComponent implements OnInit {   message: any = 'Speak Now';   timer: any;   subscription: any;   ticks: any;   miccolor: any = ‘#f44’; } ngOnInit() {   this.timer = Observable.timer(1500, 2000);   this.subscription = this.timer.subscribe(t => {   this.ticks = t;// it will throw listening message after 1.5   sec   if (t === 1) {     this.message = “Listening...”;   }// subsequent events will be performed in 2 secs interval   // as it has been defined in timer()   if (t === 4) {     this.message = “Please check your microphone audio levels.”;     this.miccolor = ‘#C2C2C2’; }// if no voice is given, it will throw audio level message // and unsubscribe to the event to exit back on homepage   if (t === 6) {     this.subscription.unsubscribe();     this.store.dispatch(new speechactions.SearchAction(false));   }  }); } The above code will throw following messages at a particular time. For creating the text-animation effect, most developers go for plain javascript. The text-animation effects can also be achieved by using pure CSS. Text animation using CSS @-webkit-keyframes typing {from {width:0;}} .spch {   font-weight: normal;   line-height: 1.2;   pointer-events: none;   position: none;   text-align: left;   -webkit-font-smoothing: antialiased;   transition: opacity .1s ease-in, margin-left .5s ease-in,                  top  0s linear 0.218s;   -webkit-animation: typing 2s steps(21,end), blink-caret .5s                       step-end infinite…

Continue ReadingAdding Transition Effect Using RxJS And CSS In Voice Search UI Of Susper
Read more about the article Hiding Intelligence of Susper When a Query is Empty or Erased with Angular

Hiding Intelligence of Susper When a Query is Empty or Erased with Angular

Recently, we have implemented intelligence feature in Susper using SUSI chat API to provide users answer a question without going deeper in search results. When a user types “height of Trump”, it shows answer like this: Problem which we faced after implementing the feature: When a user was erasing a query or query field was empty, Susper was still showing the answer of the intelligence component like this: The answer should not be displayed when a query is empty because the user is not asking any question. The answer was still displayed because it had received a response from SUSI API. How did we solve the problem? The problem was solved in two ways. By using if/else condition: We checked if the statement shown inside the component is similar to the if-and-else condition. If the condition is true, it should hide the component. Using [hidden] attribute method: The Angular 4 supports [hidden] attribute which acts as { display:none; } . [hidden] attribute generally works as ngShow and ngHide which was earlier supported by Angular 2. We preferred both the methods to solve the problem. The intelligence component is being loaded inside results component using <app-intelligence> element. Further, we added [hidden] attribute to this element like this : <app-intelligence [hidden]="hideIntelligence"></app-intelligence> We created hideIntelligence as variable and assign it as boolean. To check if a query is empty, searchdata variable was used. searchdata: any = {   query: ' ',   rows: 10,   start: 0 }; And then checked if a query is empty using if-else condition : // checks if query is empty or erased if (this.searchdata.query === ' ') {// display: none; is true   this.hideIntelligence = true; } else { // display: none; is false   this.hideIntelligence = false; }   Applying this solution, we succeeded in hiding the intelligence component. We would also had used *ngIf statement but we preferred using [hidden]. [hidden] modifies the display property.  *ngIf is a structural directive which creates or destroys content inside DOM. The source code for the implementation can be found here: https://github.com/fossasia/susper.com/pull/613 Resources: Structural directives in Angular 4: https://angular.io/guide/structural-directives Difference between *ngIf and [hidden]:  https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden  

Continue ReadingHiding Intelligence of Susper When a Query is Empty or Erased with Angular
Read more about the article Semantic-UI Validations for Forms in Open Event Frontend

Semantic-UI Validations for Forms in Open Event Frontend

Open Event Frontend requires forms at several places like at the time of login, for creation of events, taking the details of the user, creating discount codes for tickets etc.. Validations for these forms is a must, like in the above picture, we can see that many fields like discount code, amount etc. have been left empty, these null values when stored at backend can induce errors. Semantic-UI makes our life easier and provides us with it’s own validations. Its form validation behavior checks data against a set of criteria or rules before passing it along to the server. Let’s now dive deeper into Semantic validations, we’ll take discount code form as our example. The discount code form has many input fields and we have put checks at all of them, these checks are called rules here. We’ll discuss all the rules used in this form one by one Empty Here we check if the input box with the identifier discount_amount is empty or not, if it is empty, a prompt is shown with the given message.          identifier : 'discount_amount',          rules      : [            {              type   : 'empty',              prompt : this.l10n.t('Please enter the discount amount')            }          ] 2. Checked Here, we validate whether the checkbox is checked or not and if it is not, show corresponding message rules      : [    {      type   : 'checked',      prompt : this.l10n.t('Please select the appropriate choices')    }] 3. RegExp These checks are very important in input fields requiring passwords and codes, they specify the allowed input characters rules      : [{    type  : 'regExp',    value : '^[a-zA-Z0-9_-]*$' }] 4.Custom rules Many a times, we require some rules which are by default not given by semantic, here we can create custom rules. Like here, we want to check whether the user has not set max value lower than min. $.fn.form.settings.rules.checkMaxMin = () => {      if (this.get('data.minQuantity') > this.get('data.maxQuantity')) {        return false;      }      return true;    }; Here, we are creating our own custom rule checkMaxMin which returns boolean value depending upon minQuantity and maxQuantity. Now, this can be directly used as a rule identifier : 'min_order', optional   : true, rules      : [  {   type   : 'checkMaxMin',   prompt : this.l10n.t('Minimum value should not be greater than maximum')  }] You can find the above code here Additional Resources EmberJS.com: A good discussion about using Ember and Semantic validations together Philliphaydon.com: Post about creating registration form with validations

Continue ReadingSemantic-UI Validations for Forms in Open Event Frontend
Read more about the article Dynamic Segments in Open Event Frontend

Dynamic Segments in Open Event Frontend

In the Open Event Frontend project we have a page where we show all types of events. We have classified events into six classes like live, draft, past etc. Now each event type should have it’s own page describing it. What should we do now? Make six different routes corresponding to each class of event? Isn’t that too cumbersome. Is there any other method to do it? Dynamic segment is the answer to the above question. Dynamic segment is that segment of the path for a route that will change based on content of  the page. Dynamic segments are frequently used in Open Event Frontend. One such use is in /admin/events. Here we have button for different categories of events. We do not make separate routes for each of them, instead we use dynamic segments. We’ll have a single route and we will change the data in the route corresponding to the tab chosen. Lets now add dynamic segments to /admin/events. First of all we’ll add the following code snippet in router.js. this.route('events', function() {      this.route('list', { path: '/:events_status' });      this.route('import');    }); Here : signifies the presence of dynamic segment and it is followed by an identifier. It’s the identifier by which the route matches the corresponding model to show. Now as our route would show data depending upon the tab selected, we must change the title of page depending upon the same. For this we add the following code snippet in admin/events/list.js. Here we set the title of the page using titleToken() function and access the dynamic portion of url using params.events_status export default Route.extend({  titleToken() {    switch (this.get('params.events_status')) {      case 'live':        return this.l10n.t('Live');      case 'draft':        return this.l10n.t('Draft');      case 'past':        return this.l10n.t('Past');      case 'deleted':        return this.l10n.t('Deleted');    }  },  model(params) {    this.set('params', params);    return [{    // Events data    }];  } }); We’ll now link the tabs template/admin/events to the corresponding models using Link-to the helper.Here we have linked ‘Live’, ‘Draft’, ‘Past’, ‘Deleted’ buttons to dynamic segments. Let’s understand how it works.Let’s take example of Live button.Live button is linked to admin/events/list and this list is replaced by ‘live’. So our final route becomes admin/events/live. <div class="ui grid stackable">  <div class="row">    <div class="sixteen wide column">      {{#tabbed-navigation isNonPointing=true}}        {{#link-to 'admin.events.index' class='item'}}          {{t 'All Events'}}        {{/link-to}}        {{#link-to 'admin.events.list' 'live' class='item'}}          {{t 'All Live'}}        {{/link-to}}        {{#link-to 'admin.events.list' 'draft' class='item'}}          {{t 'All Draft'}}        {{/link-to}}        {{#link-to 'admin.events.list' 'past' class='item'}}          {{t 'All Past'}}        {{/link-to}}        {{#link-to 'admin.events.list' 'deleted' class='item'}}          {{t 'All Deleted'}}        {{/link-to}}        {{#link-to 'admin.events.import' class='item'}}          {{t 'Import'}}        {{/link-to}}      {{/tabbed-navigation}}    </div>  </div>  <div class="row">    {{outlet}}  </div> </div> Additional Resources Ember JS: Link-to helper Adding dynamic segment to your route by Rick Harrison

Continue ReadingDynamic Segments in Open Event Frontend
Read more about the article Create Discount Code Component in Open-Event-Frontend

Create Discount Code Component in Open-Event-Frontend

We in Open-Event-Frontend have given the event organiser the feature to create discount coupons for his or her event. Here the organiser can either enter the discount amount or discount percentage and can set even set the total number of coupons he wants to make available for his customers. We have also automatically generated an unique link for each discount coupon. We’ll be creating a separate component create-discount-code for creating discount codes.To create the component we’ll run the following command ember g component forms/events/view/create-discount-code This will create components/forms/events/view/create-discount-code.js templates/components/forms/events/view/create-discount-code.hbs tests/integration/components/forms/events/view/create-discount-code-test.js 1.Create-discount-code.hbs Here we have designed our form.We have nested all the fields used, inside semantic’s ui form class.Some of the helpers used in the form are Ember Input Helper We have used the ember input helper in following way for all the input fields.The attribute name,value corresponds to the id and value attached with the helper {{input type='text' name='discount_code' value=data.code}} Semantic Radio Button Ember radio buttons are used by the organizer to select between discount {{ui-radio label=(t 'Amount (US$)')           name='discount_type'             value='amount'           current='amount'           onChange=(action (mut selectedMode))}}   Date Time Picker We have given the organizer an additional option to set the validity of the discount code. For this we have used date-picker and time-picker component already present in Open-Event-Frontend in the following manner. <div class="fields">        <div class="wide field {{if device.isMobile 'sixteen' 'five'}}">          <label>{{t 'Valid from'}}</label>          {{widgets/forms/date-picker id='start_date' value=data.validFromDate rangePosition='start'}}          <div class="ui hidden divider"></div>          {{widgets/forms/time-picker id='start_time' value=data.validFromTime rangePosition='start'}}        </div>        <div class="wide field {{if device.isMobile 'sixteen' 'five'}}">          <label>{{t 'Expires on'}}</label>          {{widgets/forms/date-picker id='end_date' value=data.validTillDate rangePosition='end'}}          <div class="ui hidden divider"></div>          {{widgets/forms/time-picker id='end_time' value=data.validTillTime rangePosition='end'}}        </div>      </div> The above snippet will the following output 2.Create-discount-code.js Here we validate the form and provide it with an unique discount code url. We have generated the url using the event id and the discount code. discountLink: computed('data.code', function() {  const params = this.get('routing.router.router.state.params');  return location.origin + this.get('routing.router')                          .generate('public', params['events.view']                          .event_id,         { queryParams: { discount_code: this.get('data.code') } }); }), actions: {  submit() {    this.onValid(() => {    });  } } 3.Create-discount-code-test.js This is where we check whether our component is compatible with other components of the system or not. Here, for now, we are just making sure if our component renders or not, by checking the presence of 'Save'. import { test } from 'ember-qunit'; import moduleForComponent from 'open-event-frontend/tests/helpers/component-helper'; import hbs from 'htmlbars-inline-precompile'; moduleForComponent('forms/events/view/create-discount-code', 'Integration | Component | forms/events/view/create discount code'); test('it renders', function(assert) {  this.render(hbs`{{forms/events/view/create-discount-code routing=routing}}`);  assert.ok(this.$().html().trim().includes('Save')); }); Now, our component is ready, and the only part remaining is to place it in our application. We place it in app/templates/events/view/tickets/discount-codes/create.hbs in the given form. {{forms/events/view/create-discount-code data=model}} Here we have passed model from create-discount-code.js to data used in Create-discount-code.hbs Now our create discount code page is up and running Additional Resources Semantic UI: Forms Creating ember components

Continue ReadingCreate Discount Code Component in Open-Event-Frontend
Read more about the article Adding Messaging Route in Ember.js for Admin UI of Open Event Frontend

Adding Messaging Route in Ember.js for Admin UI of Open Event Frontend

In this blog post I am explaining how we implement a messages page for admins to keep track of all types of system messages sent to users in the Open Event Frontend. The page shows the types of messages sent out to various users at one place and as well as additional details. It offers configuration options to control which messages get sent out  as emails or notifications or both. And, the page shows when and what message should be sent via notification or mail. To create the messages page we’ll run the following command ember generate route admin/messages This will create router/admin/messages.js template/admin/messages.hbs tests/unit/admin/messages-test.js This command will also add  this.route('messages');  to router.js. As admin is the parent route for messages, messages will be nested inside admin in router.js this.route('admin', function(){   this.route('messages'); }); Let’s now understand the content of each of above files. Messages.js In admin/messages.js we have used titletoken helper to set the title of the tab. Here we have created the message model and added attribute like recipient, trigger, emailMessage, notificationMessage, options and sentAt. We have returned this model from the js file to template. import Ember from 'ember'; const { Route } = Ember; export default Route.extend({  titleToken() {    return this.l10n.t('Messages');  },  model() {    return [{      recipient: [        {          name: 'Organizer'        },        {          name: 'Speaker'        }      ],      trigger      : 'Title1',      emailMessage : {        subject : 'Email subject1',        message : 'Hi, the schedule for session1 has been changed'      },      notificationMessage: {        subject : 'Notification subject1',        message : 'Hi, the schedule for session1 has been changed'      },      option: {        mail         : true,        notification : false,        userControl  : true      },      sentAt: new Date()    }];  } });   Messages.hbs In template we have created a table and added classes like stackable and compact. Stackable class makes the table responsive and stacks all the rows for devices with smaller screen size. Compact class helps to show more number of rows at a time. Then in the template we iterate through the model using a loop. Here we have used other semantic-ui elements like ui ordered list , ui header, ui-checkbox inside the table. For options column we have three attributes denoting how the admin wants to send the message to the user. Here we have grouped three fields using the class grouped fields .In each field we have used semantic’s  ui-checkbox .In check-box we are mutating values on click by using mut helper. <div class="grouped fields">  <div class="field">    {{ui-checkbox checked=message.option.mail                  label=(t 'Mail')                        onChange=(action (mut message.option.mail))}}  </div>  <div class="field">    {{ui-checkbox checked=message.option.notification                  label=(t 'Notification')                  onChange=(action (mut message.option.notification))}}  </div>  <div class="field">    {{ui-checkbox checked=message.option.userControl                 label=(t 'User Control')                  onChange=(action (mut message.option.userControl))}}  </div> </div> We are getting date object from js and to convert it into human readable format we have used moment like {{moment-format message.sentAt 'dddd, DD MMMM YYYY'}} Messages-test.js import { test } from 'ember-qunit'; import moduleFor from 'open-event-frontend/tests/helpers/unit-helper'; moduleFor('route:admin/messages', 'Unit | Route | admin/messages', []); test('it exists', function(assert) {  let route = this.subject();  assert.ok(route); }); Using this we can test the existence…

Continue ReadingAdding Messaging Route in Ember.js for Admin UI of Open Event Frontend