movie-performance component links to /selection/performance/:id 🚀

src/app/app-routing-module.ts

@@ -19,7 +19,7 @@ const routes: Routes = [
     children: [
       { path: '', component: MainComponent },
       { path: 'schedule', component: ScheduleComponent },
-      { path: 'theater-overlay', component: TheaterOverlayComponent},
+      { path: 'selection/performance/:id', component: TheaterOverlayComponent}, //?
     ],
   },
 

src/app/movie-performance/movie-performance.component.html

@@ -1,4 +1,4 @@
-<a routerLink="/schedule" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
+<a [routerLink]="route" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
 
   <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
     <p>{{ hall() }}</p>

src/app/movie-performance/movie-performance.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, computed } from '@angular/core';
+import {Component, input, computed, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-movie-performance',
@@ -6,12 +6,18 @@ import { Component, input, computed } from '@angular/core';
   templateUrl: './movie-performance.component.html',
   styleUrl: './movie-performance.component.css'
 })
-export class MoviePerformanceComponent {
+export class MoviePerformanceComponent implements OnInit {
   id = input.required<number>();
   hall = input.required<string>();
   start = input.required<Date>();
   utilisation = input<number | undefined>();
 
+  route: string = '';
+
+  ngOnInit() {
+    this.route = `../selection/performance/${this.id()}`;
+  }
+
   startTime = computed(() =>
     this.start().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
   );
@@ -43,4 +49,5 @@ export class MoviePerformanceComponent {
     return '';
   });
 
+
 }

src/app/navbar/navbar.component.ts

@@ -13,6 +13,5 @@ export class NavbarComponent {
 
   navItems:{label:string, path:string}[] = [
     {label: 'Programm', path: '/schedule'},
-    {label: 'Kinosaal-test', path: '/theater-overlay'},
   ]
 }

src/app/theater-overlay/theater-overlay.component.ts

@@ -4,6 +4,7 @@ import {LoadingService} from '../loading.service';
 import {catchError, of, tap} from 'rxjs';
 import {Sitzplatz} from '@infinimotion/model-frontend';
 import {TheaterSeatState} from '../model/theater-seat-state.model';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-theater-overlay',
@@ -14,17 +15,20 @@ import {TheaterSeatState} from '../model/theater-seat-state.model';
 export class TheaterOverlayComponent implements OnInit {
   private http = inject(HttpService);
   private loading = inject(LoadingService)
-  show = input.required<number>();
 
+  showId!: number;
   seatsPerRow: { seat: Sitzplatz, state: TheaterSeatState }[][] = []
 
+  constructor(private route: ActivatedRoute) {}
+
   ngOnInit() {
+    this.showId = Number(this.route.snapshot.paramMap.get('id')!);
     this.loadShowSeats();
   }
 
   loadShowSeats() {
     this.loading.show();
-    this.http.getSeatsByShowId(2).pipe(
+    this.http.getSeatsByShowId(this.showId).pipe(
       tap((data) => {
         let rows = this.converter(data)
         this.loading.hide();