-
diff --git a/src/app/movie-rating/movie-rating.component.html b/src/app/movie-rating/movie-rating.component.html
index a8e4c76..9427cf9 100644
--- a/src/app/movie-rating/movie-rating.component.html
+++ b/src/app/movie-rating/movie-rating.component.html
@@ -1,3 +1,3 @@
-
+
{{ ratingText() }}
diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts
index 60951ab..8dfb344 100644
--- a/src/app/movie-rating/movie-rating.component.ts
+++ b/src/app/movie-rating/movie-rating.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, computed } from '@angular/core';
+import { Component, input, computed, HostBinding } from '@angular/core';
@Component({
selector: 'app-movie-rating',
@@ -7,6 +7,11 @@ import { Component, input, computed } from '@angular/core';
styleUrl: './movie-rating.component.css'
})
export class MovieRatingComponent {
+
+ @HostBinding('class') get hostClasses(): string {
+ return this.ratingColor();
+ }
+
rating = input
+
+ brightness_alert
+
+
diff --git a/src/app/no-seats-in-hall/no-seats-in-hall.component.ts b/src/app/no-seats-in-hall/no-seats-in-hall.component.ts
new file mode 100644
index 0000000..bf6ce88
--- /dev/null
+++ b/src/app/no-seats-in-hall/no-seats-in-hall.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-no-seats-in-hall',
+ standalone: false,
+ templateUrl: './no-seats-in-hall.component.html',
+ styleUrl: './no-seats-in-hall.component.css'
+})
+export class NoSeatsInHallComponent {
+
+}
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css
new file mode 100644
index 0000000..367c809
--- /dev/null
+++ b/src/app/order/order.component.css
@@ -0,0 +1,19 @@
+mat-stepper {
+ background: transparent !important;
+}
+::ng-deep .mat-step-header {
+ background-color: transparent !important;
+}
+
+
+::ng-deep .mat-horizontal-stepper-header{
+ pointer-events: none !important;
+}
+
+.performance-info-space {
+ margin-top: calc(var(--spacing) * 24)
+}
+
+::ng-deep .checkbox-invalid.mat-mdc-checkbox .mat-internal-form-field {
+ color: red !important;
+}
diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
new file mode 100644
index 0000000..dce14e7
--- /dev/null
+++ b/src/app/order/order.component.html
@@ -0,0 +1,161 @@
+Huch?! Keine Sitzplätze?
+Hast du ein Glück, Stehplätze sind kostenlos.
+
+
+@if (loadingService.loading$ | async){
+
+
+ Warenkorb
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
new file mode 100644
index 0000000..f1c0989
--- /dev/null
+++ b/src/app/order/order.component.ts
@@ -0,0 +1,70 @@
+import { SelectedSeatsService } from './../selected-seats.service';
+import { LoadingService } from './../loading.service';
+import { Sitzkategorie, Vorstellung } from '@infinimotion/model-frontend';
+import { Component, computed, inject, input } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
+
+@Component({
+ selector: 'app-order',
+ standalone: false,
+ templateUrl: './order.component.html',
+ styleUrl: './order.component.css'
+})
+export class OrderComponent {
+ paymentForm!: FormGroup;
+ dataForm!: FormGroup;
+
+ submitted = false;
+
+ constructor(private fb: FormBuilder) {}
+
+ ngOnInit(): void {
+ this.paymentForm = this.fb.group({
+ cardNumber: ['', [Validators.required, Validators.pattern(/^\d{16}$/)]],
+ cardName: ['', [Validators.required, Validators.minLength(3)]],
+ expiry: ['', [Validators.required, Validators.pattern(/^(0[1-9]|1[0-2])\/\d{2}$/)]],
+ cvv: ['', [Validators.required, Validators.pattern(/^\d{3,4}$/)]],
+ });
+ this.dataForm = this.fb.group({
+ name: ['', [Validators.required, Validators.minLength(3)]],
+ email: ['', [Validators.required, Validators.email]],
+ accept: ['', Validators.requiredTrue],
+ });
+ }
+
+ get fData() { return this.dataForm.controls; }
+ get fPayment() { return this.paymentForm.controls; }
+
+ onSubmit() {
+ if (this.paymentForm.invalid) return;
+ console.log('Zahlungsdaten:', this.paymentForm.value);
+ }
+
+ onStepChange(event: StepperSelectionEvent) {
+ this.submitted = false;
+ }
+
+ stupidCheckboxWorkaround() {
+ this.submitted = true;
+ }
+
+ performance = input
+
+}
+@else if (performance()) {
+
+
+
+
+
+ @for (seatCategory of seatCategories(); track $index) {
+
+
+
+
+
+
+
+ + Tickets gesamt: +
++ {{ getPriceDisplay(totalPrice()) }} +
+
+
+
+
+
+
+
diff --git a/src/app/performance-info/performance-info.component.ts b/src/app/performance-info/performance-info.component.ts
new file mode 100644
index 0000000..f648154
--- /dev/null
+++ b/src/app/performance-info/performance-info.component.ts
@@ -0,0 +1,30 @@
+import { Component, input } from '@angular/core';
+import { Vorstellung } from '@infinimotion/model-frontend';
+
+@Component({
+ selector: 'app-performance-info',
+ standalone: false,
+ templateUrl: './performance-info.component.html',
+ styleUrl: './performance-info.component.css'
+})
+export class PerformanceInfoComponent {
+ performance = input.required
+ ![Movie Poster]()
+
+
+
+
+
+{{ getStartTimeString() }} • {{ performance().hall.name }}
+{{ movie().title }}
+
+
+ {{ seatCategory().name }}
+
+
diff --git a/src/app/seat-selection/seat-selection.component.ts b/src/app/seat-selection/seat-selection.component.ts
new file mode 100644
index 0000000..9c5ca14
--- /dev/null
+++ b/src/app/seat-selection/seat-selection.component.ts
@@ -0,0 +1,27 @@
+import { SelectedSeatsService } from './../selected-seats.service';
+import { Component, computed, inject, input } from '@angular/core';
+import { Sitzkategorie } from '@infinimotion/model-frontend';
+
+@Component({
+ selector: 'app-seat-selection',
+ standalone: false,
+ templateUrl: './seat-selection.component.html',
+ styleUrl: './seat-selection.component.css'
+})
+export class SeatSelectionComponent {
+ seatCategory = input.required
+
+ {{ seatCategory().icon }}
+
+
+ {{ getPriceDisplay(seatCategory().price) }}
+× {{ selectedSeatsByCategory() }}
+{{ getPriceDisplay(totalCategoryPrice()) }}
+shopping-cart works!
diff --git a/src/app/shopping-cart/shopping-cart.component.ts b/src/app/shopping-cart/shopping-cart.component.ts new file mode 100644 index 0000000..382aba1 --- /dev/null +++ b/src/app/shopping-cart/shopping-cart.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-shopping-cart', + standalone: false, + templateUrl: './shopping-cart.component.html', + styleUrl: './shopping-cart.component.css' +}) +export class ShoppingCartComponent { + +} diff --git a/src/app/theater-layout/theater-layout.component.css b/src/app/theater-layout/theater-layout.component.css index e69de29..055c8c8 100644 --- a/src/app/theater-layout/theater-layout.component.css +++ b/src/app/theater-layout/theater-layout.component.css @@ -0,0 +1,4 @@ +:host { +border-radius: 0.5rem; + background-color: white; +} diff --git a/src/app/theater-layout/theater-layout.component.html b/src/app/theater-layout/theater-layout.component.html index a864e27..cd0560d 100644 --- a/src/app/theater-layout/theater-layout.component.html +++ b/src/app/theater-layout/theater-layout.component.html @@ -1,3 +1,10 @@ -@for (row of seatsPerRow(); track $index) { -
+
++ Leinwand +
+
+ @for (row of seatsPerRow(); track $index) {
+
diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
index bb9e257..c4c736e 100644
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -1,9 +1,9 @@
-
-
- - Leinwand -
-
-
+
+
+
diff --git a/src/app/theater-overlay/theater-overlay.component.ts b/src/app/theater-overlay/theater-overlay.component.ts
index b319bf8..362f1ed 100644
--- a/src/app/theater-overlay/theater-overlay.component.ts
+++ b/src/app/theater-overlay/theater-overlay.component.ts
@@ -1,8 +1,8 @@
import {Component, inject, OnInit} from '@angular/core';
import {HttpService} from '../http.service';
import {LoadingService} from '../loading.service';
-import {catchError, of, tap} from 'rxjs';
-import {Sitzplatz} from '@infinimotion/model-frontend';
+import {catchError, forkJoin, of, tap} from 'rxjs';
+import {Sitzkategorie, Sitzplatz, Vorstellung} from '@infinimotion/model-frontend';
import {TheaterSeatState} from '../model/theater-seat-state.model';
import {ActivatedRoute} from '@angular/router';
import {SelectedSeatsService} from '../selected-seats.service';
@@ -19,42 +19,62 @@ export class TheaterOverlayComponent implements OnInit {
showId!: number;
seatsPerRow: { seat: Sitzplatz, state: TheaterSeatState }[][] = []
+ performance: Vorstellung | undefined;
+ seatCategories: Sitzkategorie[] = [];
constructor(private route: ActivatedRoute, private selectedSeatService : SelectedSeatsService) {}
- ngOnInit() {
- this.showId = Number(this.route.snapshot.paramMap.get('id')!);
- this.loadShowSeats();
- this.selectedSeatService.clearSelectedSeatsList();
- }
+ngOnInit() {
+ this.showId = Number(this.route.snapshot.paramMap.get('id')!);
+ this.selectedSeatService.clearSelectedSeatsList();
+ this.loadPerformanceAndSeats();
+}
- loadShowSeats() {
- this.loading.show();
- this.http.getSeatsByShowId(this.showId).pipe(
- tap((data) => {
- this.seatsPerRow = this.converter(data)
- this.loading.hide();
- }),
- catchError(err => {
- this.loading.showError(err);
- console.error('Fehler beim Laden der Vorstellung', err);
- return of([]);
- })
- ).subscribe();
- }
+loadPerformanceAndSeats() {
+ this.loading.show();
+
+ forkJoin({
+ performance: this.http.getPerformaceById(this.showId),
+ seats: this.http.getSeatsByShowId(this.showId)
+ }).pipe(
+ tap(({ performance, seats }) => {
+ this.performance = performance;
+ this.seatsPerRow = this.converter(seats);
+ this.loading.hide();
+ }),
+ catchError(err => {
+ this.loading.showError(err);
+ console.error('Fehler beim Laden', err);
+ return of({ performance: null, seats: [] });
+ })
+ ).subscribe();
+}
converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): {
seat: Sitzplatz,
state: TheaterSeatState
}[][] {
let rows: { seat: Sitzplatz, state: TheaterSeatState }[][] = [];
+ const categoryMap = new Map