fab-manager/app/assets/templates/admin/events/monitoring.html.erb

<div class="col-md-6 m-b m-t">
  <select ng-model="selectedTimezone" class="form-control">
    <option value="" translate>{{ 'events_to_come' }}</option>
    <option value="passed" translate>{{ 'passed_events' }}</option>
    <option value="all" translate>{{ 'all_events' }}</option>
  </select>
</div>

<table class="table">
  <thead>
  <tr>
    <th style="width:30%" translate>{{ 'title' }}</th>
    <th style="width:30%" translate>{{ 'dates' }}</th>
	<th style="width:10%" translate>{{ 'booking' }}</th>
    <th style="width:30%"></th>
  </tr>
  </thead>
  <tbody>
  <tr height="80px" ng-repeat="event in filtered = (events | eventsReservationsFilter:selectedTimezone)">
  
    <td style="vertical-align:middle">
      <a ui-sref="app.public.events_show({id: event.id})">{{ event.title }} </a>
    </td>

    <td style="vertical-align:middle">
	
      <!--One day event-->
	  <span ng-if="(event.start_date | amDateFormat:'LL')==(event.end_date | amDateFormat:'LL')">
		{{ 'on_DATE' | translate:{DATE:(event.start_date | amDateFormat:'LL')} }}
        <span ng-if="event.all_day == 'false'">
          {{ 'from_TIME' | translate:{TIME:(event.start_date | amDateFormat:'LT')} }}
          <span class="text-sm font-thin" translate>{{ 'to_time' }}</span>
          {{event.end_date | amDateFormat:'LT'}}
        </span>		
	  </span>
    
      <!--Multiple days envent-->	
	  <span ng-if="(event.start_date | amDateFormat:'LL')!=(event.end_date | amDateFormat:'LL')">
	    {{'from_DATE' | translate:{DATE:(event.start_date | amDateFormat:'LL')} }} 
	    {{'to_date' | translate}} {{event.end_date | amDateFormat:'LL'}} 
        <br ng-if="event.all_day == 'false'"/>
        <span ng-if="event.all_day == 'false'">
          {{ 'from_TIME' | translate:{TIME:(event.start_date | amDateFormat:'LT')} }}
          <span class="text-sm font-thin" translate>{{ 'to_time' }}</span>
          {{event.end_date | amDateFormat:'LT'}}
        </span>		
      </span>
    </td>

	<td style="vertical-align:middle">
	  <span class="ng-binding" ng-if="event.nb_total_places > 0">{{ event.nb_total_places - event.nb_free_places }} / {{ event.nb_total_places }}</span>
	  <span class="badge font-sbold cancelled" ng-if="event.nb_total_places < 0" translate>{{ 'cancelled' }}</span>
      <span class="badge font-sbold" ng-if="!event.nb_total_places" translate>{{ 'free_entry' }}</span>
	</td>
	
    <td style="vertical-align:middle">
      <div class="buttons">
        <button class="btn btn-default" ui-sref="app.admin.event_reservations({id: event.id})">
          <i class="fa fa-bookmark"></i> {{ 'view_reservations' | translate }}
        </button>
        <button class="btn btn-default" ui-sref="app.admin.events_edit({id: event.id})">
          <i class="fa fa-edit"></i> {{ 'edit' | translate }}
        </button>
      </div>
    </td>
  </tr>
  </tbody>
</table>

<div class="row">
  <div class="col-lg-12 text-center">
    <a class="btn btn-warning" ng-click="loadMoreEvents()" ng-if="paginateActive" translate>{{ 'load_the_next_events' }}</a>
  </div>
</div>