From 2ecaf2d526f980acc60b7edd83b1569208ce7950 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Sun, 23 Nov 2025 00:31:31 +0100
Subject: [PATCH] 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 +
 src/app/statistics/statistics.component.html | 138 ++++++++++++-------
 src/app/statistics/statistics.component.ts   |  32 +++--
 3 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css
index 60459a7..a784c2e 100644
--- a/src/app/statistics/statistics.component.css
+++ b/src/app/statistics/statistics.component.css
@@ -4,3 +4,7 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+html {
+  scroll-behavior: smooth;
+}
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index 184d756..b453c6d 100644
--- a/src/app/statistics/statistics.component.html
+++ b/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>
diff --git a/src/app/statistics/statistics.component.ts b/src/app/statistics/statistics.component.ts
index 1745cb4..81b14a0 100644
--- a/src/app/statistics/statistics.component.ts
+++ b/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());
+    }
+  }
 }