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

<section class="heading b-b">
  <div class="row no-gutter">
    <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">
      <section class="heading-title">
        <h1 translate>{{ 'trainings_monitoring' }}</h1>
      </section>
    </div>

  </div>
</section>


<section class="m-lg">
  <div class="row">

    <div class="col-md-12">
      <uib-tabset justified="true">
        <uib-tab heading="{{ 'trainings' | translate }}">
          <button type="button" class="btn btn-warning m-t m-b" ng-click="addTraining()" translate>{{ 'add_a_new_training' }}</button>
          <div class="alert alert-warning" role="alert">
            {{ 'beware_when_creating_a_training_its_reservation_prices_are_initialized_to_zero' | translate }}
            {{ 'dont_forget_to_change_them_before_creating_slots_for_this_training' | translate }}
          </div>

          <table class="table">
            <thead>
              <tr>
                <th style="width:20%" translate>{{ 'name' }}</th>
                <th style="width:40%" translate>{{ 'associated_machines' }}</th>
                <th style="width:20%" translate>{{ 'number_of_tickets' }}</th>
                <th style="width:20%"></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="training in trainings">
                <td>
                  <span editable-text="training.name" e-name="name" e-form="rowform" e-required>
                    {{ training.name }}
                  </span>
                </td>
                <td>
                  <span editable-checklist="training.machine_ids" e-ng-options="m.id as m.name for m in machines" e-name="machine_ids" e-form="rowform">
                    {{ showMachines(training) }}
                  </span>
                </td>
                <td>
                  <span editable-number="training.nb_total_places" e-name="nb_total_places" e-form="rowform" e-required>
                    {{ training.nb_total_places }}
                  </span>
                </td>
                <td>
                  <form editable-form name="rowform" onbeforesave="saveTraining($data, training.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == training">
                    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-warning">
                      <i class="fa fa-check"></i>
                    </button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="cancelTraining(rowform, $index)" class="btn btn-default">
                      <i class="fa fa-times"></i>
                    </button>
                  </form>
                  <div class="buttons" ng-show="!rowform.$visible">
                    <button ng-click="openModalToSetDescription(training)" class="btn btn-default">
                      <i class="fa fa-comment-o"></i>
                    </button>
                    <button class="btn btn-default" ng-click="rowform.$show()">
                      <i class="fa fa-edit"></i> {{ 'edit' | translate }}
                    </button>
                    <button class="btn btn-danger" ng-click="removeTraining($index, training)">
                      <i class="fa fa-trash-o"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </uib-tab>

        <uib-tab heading="{{ 'trainings_monitoring' | translate }}">
          <table class="table">
            <thead>
              <tr>
                <th style="width:35%" translate>{{ 'training' }}</th>
                <th style="width:65%" translate>{{ 'date' }}</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="(training_name, years) in groupedAvailabilities">
                  <td>{{training_name}}</td>
                  <td>
                      <uib-accordion close-others="true">
                        <uib-accordion-group ng-repeat="months in years | toArray | orderBy:'$key':true" heading="{{ 'year_NUMBER' | translate:{NUMBER:months.$key} }}" is-open="accordions[training_name][months.$key].isOpenFirst" ng-if="!months.name" class="light-accordion">

                            <uib-accordion close-others="true">
                              <uib-accordion-group ng-repeat="days in months | toArray | orderBy:'$key':true" heading="{{ 'month_of_NAME' | translate:{NAME:formatMonth(days.$key)} }}" is-open="accordions[training_name][months.$key][days.$key].isOpenFirst" ng-if="days.$key" class="light-accordion">

                                  <uib-accordion close-others="true">
                                      <uib-accordion-group ng-repeat="(day, availabilities) in days" heading="{{formatDay(day, days.$key, months.$key)}}" is-open="accordions[training_name][months.$key][days.$key][day].isOpenFirst" class="light-accordion">
                                          <ul class="list-unstyled">
                                              <li ng-repeat="a in availabilities">
                                                  <a ng-click="showReservations(years.training, a)" class="btn btn-default">{{ a.start_at | amDateFormat:'LLL' }} - {{ a.end_at | amDateFormat:'LT' }}</a> <span class="label label-success" translate translate-values="{NUMBER:a.reservation_users.length}" translate-interpolation="messageformat"> {{ 'NUMBER_reservation' }}</span>
                                              </li>
                                          </ul>
                                      </uib-accordion-group>
                                  </uib-accordion>

                              </uib-accordion-group>
                            </uib-accordion>

                        </uib-accordion-group>
                      </uib-accordion>
                  </td>
              </tr>
            </tbody>
          </table>
        </uib-tab>
      </uib-tabset>
    </div>

  </div>
</section>