pathetic attempt to implement a filter for statistics

src/app/app-module.ts

@@ -27,6 +27,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
+import {MatSelectModule} from '@angular/material/select';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -71,6 +72,7 @@ import { ZoomWarningComponent } from './zoom-warning/zoom-warning.component';
 import { PricelistComponent } from './pricelist/pricelist.component';
 
 
+
 @NgModule({
   declarations: [
     App,
@@ -116,38 +118,39 @@ import { PricelistComponent } from './pricelist/pricelist.component';
     ZoomWarningComponent,
     PricelistComponent,
   ],
-  imports: [
-    AppRoutingModule,
-    BrowserModule,
-    ReactiveFormsModule,
-    CommonModule,
-    FormsModule,
-    MatIconModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatAutocompleteModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatIconButton,
-    MatDividerModule,
-    MatButtonModule,
-    MatDialogClose,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatCheckboxModule,
-    MatStepperModule,
-    NgxMaskDirective,
-    NgxMaskPipe,
-    QRCodeComponent,
-    MatBadgeModule,
-    MatTooltipModule,
-    MatPaginatorModule,
-    MatTableModule,
-  ],
+    imports: [
+        AppRoutingModule,
+        BrowserModule,
+        ReactiveFormsModule,
+        CommonModule,
+        FormsModule,
+        MatIconModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatSnackBarModule,
+        MatAutocompleteModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatIconButton,
+        MatDividerModule,
+        MatButtonModule,
+        MatDialogClose,
+        MatDialogTitle,
+        MatDialogContent,
+        MatDialogActions,
+        MatCheckboxModule,
+        MatStepperModule,
+        NgxMaskDirective,
+        NgxMaskPipe,
+        QRCodeComponent,
+        MatBadgeModule,
+        MatTooltipModule,
+        MatPaginatorModule,
+        MatTableModule,
+        MatSelectModule,
+    ],
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideHttpClient(

src/app/statistics/statistics.component.css

@@ -0,0 +1,6 @@
+.gradient-text {
+  background: linear-gradient(to right, #6366f1, #db2777);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

src/app/statistics/statistics.component.html

@@ -1,7 +1,19 @@
 <app-menu-header label="Statistiken"></app-menu-header>
 
-  <div class="table-table-container">
+<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Movie-Statistiken </h2>
 
+<mat-form-field appearance="fill">
+  <mat-label>Filter</mat-label>
+  <mat-select (selectionChange)="filterByCategory($event.value)">
+    <mat-option value="na" class="flex justify-center"></mat-option>
+    @for(filterValue of valuesToFilter; track $index){
+      <mat-option [value]="filterValue" class="flex justify-center"> {{filterValue}} </mat-option>
+    }
+  </mat-select>
+</mat-form-field>
+
+
+  <div class="table-table-container">
     <table mat-table [dataSource]="movies" class="example-table">
 
       <ng-container matColumnDef="id">
@@ -37,8 +49,9 @@
   <mat-paginator [length]="movieResultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
 
 
-<div class="show-table-container">
+<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Show-Statistiken </h2>
 
+<div class="show-table-container">
   <table mat-table [dataSource]="shows" class="example-table">
 
     <ng-container matColumnDef="id">

src/app/statistics/statistics.component.ts

@@ -5,7 +5,7 @@ import {
   StatisticsVorstellung,
 } from '@infinimotion/model-frontend';
 import {LoadingService} from '../loading.service';
-import {firstValueFrom, forkJoin} from 'rxjs';
+import {filter, firstValueFrom, forkJoin} from 'rxjs';
 
 @Component({
   selector: 'app-statistics',
@@ -19,6 +19,7 @@ export class StatisticsComponent {
   protected shows: StatisticsVorstellung[] = [];
   protected moviesDisplayedColumns: string[] = ['id', 'title', 'earnings', 'tickets'];
   protected showsDisplayedColumns: string[] = ['id', 'hall', 'movie_title', 'date', 'earnings', 'tickets'];
+  protected valuesToFilter: string[] = ['title', 'date', 'earnings', 'tickets'];
   protected movieResultsLength: number = 0;
   protected showsResultLength: number = 0;
 
@@ -53,4 +54,26 @@ export class StatisticsComponent {
     return new Date(date).toLocaleString("de");
   }
 
+  filterByCategory(filter: string) {
+    switch (filter) {
+      case this.valuesToFilter[0]: //title
+        this.movies = this.movies.sort((a, b) => a.movieTitle.localeCompare(b.movieTitle));
+        this.shows = this.shows.sort((a, b) => a.movieTitle.localeCompare(b.movieTitle));
+        //console.log(this.movies, this.shows);
+        break;
+      case this.valuesToFilter[1]: //date
+        this.shows = this.shows.sort((a,b) => new Date(a.showStart).getTime() - new Date(b.showStart).getTime());
+        break;
+      case this.valuesToFilter[2]: //earnings
+        this.movies = this.movies.sort((a, b) => a.earnings - b.earnings);
+        this.shows = this.shows.sort((a, b) => a.earnings - b.earnings);
+        break;
+      case this.valuesToFilter[3]:  //tickets
+        this.movies = this.movies.sort((a, b) => a.tickets - b.tickets);
+        this.shows = this.shows.sort((a, b) => a.tickets - b.tickets);
+        break;
+      default:
+    }
+
+  }
 }

src/app/zoom-warning/zoom-warning.component.ts

@@ -1,4 +1,4 @@
-import { DeviceDetectionService } from './../device-detection.service';
+import { DeviceDetectionService } from '../device-detection.service';
 import { Component, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
 import { filter, Subject, takeUntil } from 'rxjs';
 import { ZoomDetectionService } from '../zoom-detection.service';