Add reservation and purchase functionality

Introduces ReservationSuccess, ReservationFailed, PurchaseSuccess, PurchaseFailed, TicketSmall, and TicketList components for handling and displaying reservation and purchase outcomes. Updates order flow logic in OrderComponent to support reservation and purchase states, disables/enables form inputs during submission, and integrates new UI feedback. Also adds angularx-qrcode dependency and updates @infinimotion/model-frontend version.
This commit is contained in:
2025-11-14 17:56:33 +01:00
parent f165a91e3c
commit 50cac8ac24
30 changed files with 821 additions and 107 deletions

View File

@@ -0,0 +1,41 @@
.ticket-container {
max-height: 200px;
overflow-y: auto;
padding: 8px;
position: relative;
}
.ticket-container::before,
.ticket-container::after {
content: '';
position: sticky;
left: 0;
right: 0;
height: 20px;
pointer-events: none;
z-index: 2;
}
.ticket-container::before {
top: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
}
.ticket-container::after {
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
}
.ticket-container::-webkit-scrollbar {
width: 8px;
}
.ticket-container::-webkit-scrollbar-track {
background: transparent;
}
.ticket-container::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
border-radius: 4px;
}

View File

@@ -0,0 +1,9 @@
<div class="ticket-container">
@for (ticket of tickets(); track $index) {
<app-ticket-small [ticket]="ticket"></app-ticket-small>
@if ($index + 1 != tickets().length) {
<div class="h-2"></div>
}
}
</div>

View File

@@ -0,0 +1,12 @@
import { Component, input } from '@angular/core';
import { Eintrittskarte } from '@infinimotion/model-frontend';
@Component({
selector: 'app-ticket-list',
standalone: false,
templateUrl: './ticket-list.component.html',
styleUrl: './ticket-list.component.css',
})
export class TicketListComponent {
tickets = input.required<Eintrittskarte[]>();
}