SkydiveLogs/Front/skydivelogs-app/src/app/summary/summary.component.html

<div class="content">
  <div class="paragraph">
    <label class="left160">{{ 'Summary_TotalJumps' | translate }}</label>
    <span>: {{ totalJumps }}</span>
  </div>

  <div class="paragraph">
    <label class="left160">{{ 'Summary_TotalCutaways' | translate }}</label>
    <span>: {{ totalCutaways }}</span>
  </div>

  <div class="paragraph">
    <label class="left160">{{ 'Summary_LastJump' | translate }}</label>
    <span>: {{ lastJump }}</span>
  </div>

  <div class="paragraph" style="margin-top: 20px;">
    <label class="left160">{{ 'Summary_Refresh' | translate }}</label>
    <mat-icon aria-hidden="false" aria-label="Force the refresh of the stats" style="cursor: pointer;"
              (click)='refreshStats()'>cached</mat-icon>
  </div>

  <mat-tab-group mat-align-tabs="left" animationDuration="0ms" 
                 (selectedIndex)="0" (selectedTabChange)="onTabChanged($event);">
    <mat-tab label="{{ 'Summary_LastMonth_Title' | translate }}">
      <ng-template matTabContent>
        <div class="containerFlex">
          <fieldset class="contentFlex">
            <legend>{{ 'Summary_LastMonth_ByDz' | translate }}</legend>
            <table mat-table [dataSource]="dsJumpForLastMonthByDz">
              <ng-container matColumnDef="label">
                <td mat-cell *matCellDef="let element">{{element.label}}</td>
              </ng-container>
              <ng-container matColumnDef="nb">
                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
              </ng-container>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </fieldset>
          <fieldset class="contentFlex">
            <legend>{{ 'Summary_LastMonth_ByJumpType' | translate }}</legend>
            <table mat-table [dataSource]="dsJumpForLastMonthByJumpType">
              <ng-container matColumnDef="label">
                <td mat-cell *matCellDef="let element">{{element.label}}</td>
              </ng-container>
              <ng-container matColumnDef="nb">
                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
              </ng-container>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </fieldset>
        </div>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_LastYear_Title' | translate }}">
      <ng-template matTabContent>
        <div class="containerFlex">
          <fieldset class="contentFlex">
            <legend>{{ 'Summary_LastYear_ByDz' | translate }}</legend>
            <table mat-table [dataSource]="dsJumpForLastYearByDz">
              <ng-container matColumnDef="label">
                <td mat-cell *matCellDef="let element">{{element.label}}</td>
              </ng-container>
              <ng-container matColumnDef="nb">
                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
              </ng-container>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </fieldset>
          <fieldset class="contentFlex">
            <legend>{{ 'Summary_LastYear_ByJumpType' | translate }}</legend>
            <table mat-table [dataSource]="dsJumpForLastYearByJumpType">
              <ng-container matColumnDef="label">
                <td mat-cell *matCellDef="let element">{{element.label}}</td>
              </ng-container>
              <ng-container matColumnDef="nb">
                <td mat-cell *matCellDef="let element">{{element.nb}}</td>
              </ng-container>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </fieldset>
        </div>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_ByDz_Title' | translate }}">
      <ng-template matTabContent>
        <table mat-table [dataSource]="dsNbJumpByDz">
          <ng-container matColumnDef="label">
            <td mat-cell *matCellDef="let element">{{element.label}}</td>
          </ng-container>
          <ng-container matColumnDef="nb">
            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
          </ng-container>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_ByAircraft_Title' | translate }}">
      <ng-template matTabContent>
        <table mat-table [dataSource]="dsNbJumpByAircraft">
          <ng-container matColumnDef="label">
            <td mat-cell *matCellDef="let element">{{element.label}}</td>
          </ng-container>
          <ng-container matColumnDef="nb">
            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
          </ng-container>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_ByGear_Title' | translate }}">
      <ng-template matTabContent>
        <table mat-table [dataSource]="dsNbJumpByGear">
          <ng-container matColumnDef="label">
            <td mat-cell *matCellDef="let element">{{element.label}}</td>
          </ng-container>
          <ng-container matColumnDef="nb">
            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
          </ng-container>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_ByJumpType_Title' | translate }}">
      <ng-template matTabContent>
        <table mat-table [dataSource]="dsNbJumpByType">
          <ng-container matColumnDef="label">
            <td mat-cell *matCellDef="let element">{{element.label}}</td>
          </ng-container>
          <ng-container matColumnDef="nb">
            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
          </ng-container>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </ng-template>
    </mat-tab>

    <mat-tab label="{{ 'Summary_ByYear_Title' | translate }}">
      <ng-template matTabContent>
        <table mat-table [dataSource]="dsNbJumpByYear">
          <ng-container matColumnDef="label">
            <td mat-cell *matCellDef="let element">{{element.label}}</td>
          </ng-container>
          <ng-container matColumnDef="nb">
            <td mat-cell *matCellDef="let element">{{element.nb}}</td>
          </ng-container>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>