frontend/src/app/statistics/statistics.component.html

<app-menu-header label="Statistiken" icon="bar_chart_4_bars "></app-menu-header>

<div class="p-10 pb-0 flex gap-4">
  <h2 (click)="scrollTo('movie')"
      class="text-xl mb-4 w-fit cursor-pointer hover:underline transition-colors">
    Movie-Statistiken
  </h2>

    <h2 (click)="scrollTo('show')"
      class="text-xl mb-4 w-fit cursor-pointer hover:underline transition-colors">
    Show-Statistiken
  </h2>
</div>


<div class="p-10">
  <h2 (click)="scrollTo('movie')" id="movie"
      class="text-2xl font-bold gradient-text mb-4 w-fit cursor-pointer hover:underline transition-colors">
    Movie-Statistiken
  </h2>

  <div class="table-table-container">
    <table mat-table [dataSource]="moviesDS" matSort #movieSort="matSort">

      <ng-container matColumnDef="movieId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="movieId" sortActionDescription="Sort by movieId">ID</th>
        <td mat-cell *matCellDef="let row">{{row.movieId}}</td>
      </ng-container>


      <ng-container matColumnDef="movieTitle">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle" sortActionDescription="Sort by movieTitle">Titel</th>
        <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
      </ng-container>

      <ng-container matColumnDef="movieEarnings">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="earnings" sortActionDescription="Sort by movieEarnings">
          Umsatz
        </th>
        <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
      </ng-container>

      <ng-container matColumnDef="movieTickets">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="tickets" sortActionDescription="Sort by movieTickets">
          Gebuchte Tickets
        </th>
        <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="moviesDisplayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: moviesDisplayedColumns;"></tr>
    </table>
  </div>

  @if (loading.loading$ | async){
    <div class="w-full h-full flex items-center justify-center mt-10">
      <mat-progress-spinner
        mode="indeterminate"
        diameter="75"
      ></mat-progress-spinner>
    </div>
  }

  <mat-paginator [length]="movieResultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
</div>


<div class="p-10">
  <h2 (click)="scrollTo('show')" id="show"
      class="text-2xl font-bold gradient-text mb-4 w-fit cursor-pointer hover:underline transition-colors">
    Show-Statistiken
  </h2>

  <div class="show-table-container">
    <table mat-table [dataSource]="showsDS" matSort #showSort="matSort">

      <ng-container matColumnDef="showId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="showId">ID</th>
        <td mat-cell *matCellDef="let row">{{row.showId}}</td>
      </ng-container>


      <ng-container matColumnDef="showHall">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="showHallName">Kinosaal</th>
        <td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
      </ng-container>

      <ng-container matColumnDef="showMovieTitle">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle">Film Name</th>
        <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
      </ng-container>

      <ng-container matColumnDef="showDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="showStart">Datum</th>
        <td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
      </ng-container>

      <ng-container matColumnDef="showEarnings">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="earnings">
          Umsatz
        </th>
        <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
      </ng-container>

      <ng-container matColumnDef="showTickets">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="tickets">
          Gebuchte Tickets
        </th>
        <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="showsDisplayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: showsDisplayedColumns;"></tr>
    </table>
  </div>

  @if (loading.loading$ | async){
    <div class="w-full h-full flex items-center justify-center mt-10">
      <mat-progress-spinner
        mode="indeterminate"
        diameter="75"
      ></mat-progress-spinner>
    </div>
  }

  <mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
</div>