providing statistic data in statistic component

src/app/app-module.ts

@@ -62,6 +62,7 @@ import { PurchaseSuccessComponent } from './purchase-success/purchase-success.co
 import { PurchaseFailedComponent } from './purchase-failed/purchase-failed.component';
 import { TicketSmallComponent } from './ticket-small/ticket-small.component';
 import { TicketListComponent } from './ticket-list/ticket-list.component';
+import { StatisticsComponent } from './statistics/statistics.component';
 
 
 @NgModule({
@@ -105,6 +106,7 @@ import { TicketListComponent } from './ticket-list/ticket-list.component';
     PurchaseFailedComponent,
     TicketSmallComponent,
     TicketListComponent,
+    StatisticsComponent,
   ],
   imports: [
     AppRoutingModule,

src/app/app-routing-module.ts

@@ -8,6 +8,7 @@ import { ScheduleComponent } from './schedule/schedule.component';
 import { TheaterOverlayComponent} from './theater-overlay/theater-overlay.component';
 import { MovieImporterComponent } from './movie-importer/movie-importer.component';
 import { AuthGuard } from './auth.guard';
+import {StatisticsComponent} from './statistics/statistics.component';
 
 const routes: Routes = [
   // Seiten ohne Layout
@@ -28,6 +29,12 @@ const routes: Routes = [
         data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee'
       },
       { path: 'selection/performance/:id', component: TheaterOverlayComponent},
+      {
+        path: 'admin/statistics',
+        component: StatisticsComponent,
+        canActivate: [AuthGuard],
+        data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee'
+      },
     ],
   },
 

src/app/http.service.ts

@@ -1,4 +1,13 @@
-import { Kinosaal, Sitzplatz, Vorstellung, Film, OmdbSearch, Bestellung, Eintrittskarte } from '@infinimotion/model-frontend';
+import {
+  Kinosaal,
+  Sitzplatz,
+  Vorstellung,
+  Film,
+  OmdbSearch,
+  Bestellung,
+  Eintrittskarte,
+  StatisticsReduced, StatisticsFilm
+} from '@infinimotion/model-frontend';
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
 import { Observable } from "rxjs";
@@ -154,8 +163,12 @@ export class HttpService {
   /* Show-Seats APIs */
 
   /* GET /api/show-seats/{show} */
-  getSeatsByShowId(show: number): Observable<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}> {
-    return this.http.get<{seats:Sitzplatz[], reserved:Sitzplatz[], booked:Sitzplatz[]}>(`${this.baseUrl}show-seats/${show}`);
+  getSeatsByShowId(show: number): Observable<{ seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }> {
+    return this.http.get<{
+      seats: Sitzplatz[],
+      reserved: Sitzplatz[],
+      booked: Sitzplatz[]
+    }>(`${this.baseUrl}show-seats/${show}`);
   }
 
 
@@ -164,12 +177,20 @@ export class HttpService {
   /* GET /api/importer/search */
   searchMovie(query: string): Observable<OmdbSearch> {
     return this.http.get<OmdbSearch>(`${this.baseUrl}importer/search`, {
-      params: { title: query }
+      params: {title: query}
     });
   }
 
   /* POST /api/importer/import */
   importMovie(imdbId: string): Observable<Film> {
-      return this.http.post<Film>(`${this.baseUrl}importer/import?id=${imdbId}`, {})
+    return this.http.post<Film>(`${this.baseUrl}importer/import?id=${imdbId}`, {})
+  }
+
+
+  /* Statistics APIs */
+
+  /* GET /api/statistics/list */
+  getStatisticsList(): Observable<StatisticsReduced> {
+    return this.http.get<StatisticsReduced>(`${this.baseUrl}statistics/list`)
   }
 }

src/app/navbar/navbar.component.ts

@@ -11,6 +11,7 @@ export class NavbarComponent {
   navItems: { label:string, path:string }[] = [
     {label: 'Programm', path: '/schedule'},
     {label: 'Film importieren', path: '/admin/movie-importer'},
+    {label: 'Statistiken', path: '/admin/statistics'},
   ]
 
   private auth = inject(AuthService)

src/app/statistics/statistics.component.html

@@ -0,0 +1,6 @@
+<button
+  (click)="loadData()"
+  class="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600"
+>
+  Liste laden
+</button>

src/app/statistics/statistics.component.ts

@@ -0,0 +1,38 @@
+import {Component, inject} from '@angular/core';
+import {HttpService} from '../http.service';
+import {
+  Eintrittskarte,
+  Film,
+  StatisticsFilm,
+  StatisticsFilmReduced,
+  StatisticsReduced, StatisticsVorstellungReduced,
+  Vorstellung
+} from '@infinimotion/model-frontend';
+
+@Component({
+  selector: 'app-statistics',
+  standalone: false,
+  templateUrl: './statistics.component.html',
+  styleUrl: './statistics.component.css',
+})
+export class StatisticsComponent {
+  private http = inject(HttpService);
+  private movies: StatisticsFilmReduced[] = []
+  private shows: StatisticsVorstellungReduced[] = []
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  loadData() {
+    this.http.getStatisticsList().subscribe({
+      next: (response) => {
+        this.movies = response.movies;
+        this.shows = response.shows;
+        console.log(this.movies)
+        console.log(this.shows)
+      },
+      error: (err) => console.error('Fehler beim Laden der Statistiken', err),
+    });
+  }
+}