Styling

src/app/order/order.component.html

@@ -141,7 +141,7 @@
 
           <!-- Card Name -->
           <mat-form-field class="w-full">
-            <mat-label>Kartenname</mat-label>
+            <mat-label>Name des Besitzers</mat-label>
             <input matInput formControlName="cardName" />
             @if (fPayment['cardName'].hasError('minlength')) { <mat-error>Mindestens 3 Zeichen</mat-error> }
           </mat-form-field>

src/app/order/order.component.ts

@@ -27,11 +27,13 @@ export class OrderComponent {
   private httpService = inject(HttpService)
   private selectedSeatsService = inject(SelectedSeatsService);
 
+  confetti: any;
+
   constructor(private fb: FormBuilder) {}
 
   // Form-Validation
 
-  ngOnInit(): void {
+  async ngOnInit() {
     this.paymentForm = this.fb.group({
       cardNumber: ['', [Validators.required, Validators.pattern(/^\d{16}$/)]],
       cardName: ['', [Validators.required, Validators.minLength(3)]],
@@ -43,6 +45,7 @@ export class OrderComponent {
       email: ['', [Validators.required, Validators.email]],
       accept: ['', Validators.requiredTrue],
     });
+    this.confetti = (await import('canvas-confetti')).default;
   }
 
   get fData() { return this.dataForm.controls; }
@@ -116,7 +119,6 @@ export class OrderComponent {
     const order = this.generateNewOrderObject(this.dataForm.value.email, false);
     const seats = this.selectedSeatsService.getSelectedSeatsList();
     const performance = this.performance()!;
-    this.successful = true;
     this.sendToBackend(order, seats, performance);
     this.seatsReserved = true;
   }
@@ -128,7 +130,6 @@ export class OrderComponent {
     const order = this.generateNewOrderObject(this.dataForm.value.email, true);
     const seats = this.selectedSeatsService.getSelectedSeatsList();
     const performance = this.performance()!;
-    this.successful = true;
     this.sendToBackend(order, seats, performance);
     this.seatsPurchased = true;
   }
@@ -147,13 +148,28 @@ export class OrderComponent {
         });
 
         Promise.all(ticketCreations.map(obs => obs.toPromise()))
-          .then(createdTickets => {
+          .then(async createdTickets => {
             this.createdTickets = createdTickets.filter(
               (ticket): ticket is Eintrittskarte => ticket !== undefined
             );
 
+            this.successful = true;
+            this.selectedSeatsService.setCommitedTrue();
             this.loadingService.hide();
-            this.enableInputs();
+
+            this.confetti({
+              particleCount: 100,
+              angle: 0,
+              spread: 180,
+              origin: { x: -0.1, y: 0.75 }
+            });
+            this.confetti({
+              particleCount: 100,
+              angle: 180,
+              spread: 180,
+              origin: { x: 1.1, y: 0.75 }
+            });
+
           })
           .catch(err => {
             this.loadingService.showError(err);