Add smooth scrolling and loading spinner to statistics

Introduces smooth scrolling navigation between movie and show statistics sections, updates the header with an icon, and adds loading spinners during data fetch. Also exposes the loading service as public and refactors code for improved readability.

src/app/statistics/statistics.component.css

@@ -4,3 +4,7 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+html {
+  scroll-behavior: smooth;
+}

src/app/statistics/statistics.component.html

@@ -1,9 +1,26 @@
-<app-menu-header label="Statistiken"></app-menu-header>
+<app-menu-header label="Statistiken" icon="bar_chart_4_bars "></app-menu-header>
 
-<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Movie-Statistiken </h2>
+<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" class="example-table">
+    <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>
@@ -35,53 +52,76 @@
     </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>
-
-
-<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Show-Statistiken </h2>
-
-<div class="show-table-container">
-  <table mat-table [dataSource]="showsDS" matSort #showSort="matSort" class="example-table">
-
-    <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>
 
-<mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
 
+<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>

src/app/statistics/statistics.component.ts

@@ -1,15 +1,11 @@
-import {Component, effect, inject, signal, ViewChild} from '@angular/core';
-import {MatSort, Sort, MatSortModule} from '@angular/material/sort';
-import {HttpService} from '../http.service';
-import {
-  StatisticsFilm,
-  StatisticsVorstellung,
-} from '@infinimotion/model-frontend';
-import {LoadingService} from '../loading.service';
-import {firstValueFrom} from 'rxjs';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginatorModule} from '@angular/material/paginator';
-
+import { Component, inject, signal, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { HttpService } from '../http.service';
+import { StatisticsFilm, StatisticsVorstellung } from '@infinimotion/model-frontend';
+import { LoadingService } from '../loading.service';
+import { firstValueFrom } from 'rxjs';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-statistics',
@@ -32,7 +28,7 @@ export class StatisticsComponent {
   @ViewChild('movieSort') movieSort!: MatSort;
   @ViewChild('showSort') showSort!: MatSort;
 
-  private loading = inject(LoadingService);
+  public loading = inject(LoadingService);
 
   ngOnInit(): void {
     this.loading.show()
@@ -91,4 +87,14 @@ export class StatisticsComponent {
       }
     };
   }
+
+  scrollTo(id: string) {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const url = new URL(window.location.href);
+      url.hash = id;
+      history.replaceState(null, '', url.toString());
+    }
+  }
 }