infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add smooth scrolling and loading spinner to statistics

Browse Source 
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.
This commit is contained in:
Piet Ostendorp
2025-11-23 00:31:31 +01:00
parent c2823c4c2b
commit 2ecaf2d526
3 changed files with 112 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/app/statistics/statistics.component.html
View File

@@ -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>