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

<section class="heading b-b">
  <div class="row no-gutter b-b">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'fablab_events' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized(['admin'])">
      <section class="heading-actions wrapper">
        <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm upper text-sm" ui-sref="app.admin.events_new" role="button" translate>{{ 'add_an_event' }}</a>
      </section>
    </div>
  </div>

  <section class="m-lg">
    <div class="row">
      <div class="col-md-12">
        <uib-tabset justified="true">
          <uib-tab heading="{{ 'events_monitoring' | translate }}">

            <div class="col-md-6 m-b m-t">
              <select ng-model="selectedTimezone" class="form-control">
                <option value="" translate>{{ 'all_events' }}</option>
                <option value="passed" translate>{{ 'passed_events' }}</option>
                <option value="future" translate>{{ 'events_to_come' }}</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:40%"></th>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="event in filtered = (events | eventsReservationsFilter:selectedTimezone)">
                <td>
                  <a ui-sref="app.public.events_show({id: event.id})">{{ event.title }} </a>
                </td>
                <td>
                  <span> {{ 'from_DATE' | translate:{DATE:(event.start_date | amDateFormat:'LL')} }} <span class="text-sm font-thin" translate>{{ 'to_date' }}</span> {{event.end_date | amDateFormat:'LL'}}</span>
                  <br/>
                  <span ng-if="event.all_day == 'true'" translate>{{ 'all_day' }}</span>
                  <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>
                </td>
                <td>
                  <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>
          </uib-tab>


          <uib-tab heading="{{ 'manage_filters' | translate }}">
            <ng-include src="'<%= asset_path 'admin/events/filters.html' %>'"></ng-include>
          </uib-tab>
        </uib-tabset>
      </div>
    </div>
  </section>
</section>