Add reservation code download feature

Introduces a download button in the reservation success component to allow users to download their reservation code as a text file. Adds utility methods in PdfService for downloading text and JSON files, and integrates the new download functionality into the component.

src/app/pdf.service.ts

@@ -7,7 +7,6 @@ import { Eintrittskarte } from '@infinimotion/model-frontend';
   providedIn: 'root',
 })
 export class PdfService {
-
   private ticketsGreatedSignal = signal(0);
   private totalTicketsSignal = signal(0);
 
@@ -108,4 +107,35 @@ export class PdfService {
 
     return `Ticket_${orderCode}_${timestamp}.pdf`;
   }
+
+  downloadTextFile(content: string, filename: string = 'textdatei.txt'): void {
+
+    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+    const url = window.URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    window.URL.revokeObjectURL(url);
+  }
+
+  downloadJsonFile(data: any, filename: string = 'data.json'): void {
+    const content = JSON.stringify(data, null, 2);
+    const blob = new Blob([content], { type: 'application/json' });
+    const url = window.URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  }
 }
+

src/app/reservation-success/reservation-success.component.html

@@ -2,8 +2,12 @@
   <h1 class="text-xl font-bold">Reservierung erfolgreich!</h1>
 
   <p class="text-center" style="white-space: pre-line;">{{ infoText }}</p>
-  <div class="bg-white text-5xl font-mono rounded-md shadow-sm w-fit h-fit p-4 py-2 my-4">
+  <div class="flex gap-3 items-baseline">
-    <strong>{{ order().code }}</strong>
+    <div style="width: 30px;"></div>
+    <div class="bg-white text-5xl font-mono rounded-md shadow-sm w-fit h-fit p-4 py-2 my-4">
+      <strong>{{ order().code }}</strong>
+    </div>
+    <mat-icon style="font-size: 30px; width: 30px; height: 30px;" class="cursor-pointer opacity-50 hover:opacity-100" (click)="downloadReservationCode()">download</mat-icon>
   </div>
 
   <button routerLink="/checkout/order/{{ order().code }}" type="button" mat-button matButton="filled" color="accent" class="success-button mt-2 w-80">{{ buttonText }}</button>

src/app/reservation-success/reservation-success.component.ts

@@ -1,5 +1,6 @@
 import { Bestellung } from '@infinimotion/model-frontend';
-import { Component, input, OnInit, output } from '@angular/core';
+import { Component, inject, input, OnInit, output } from '@angular/core';
+import { PdfService } from '../pdf.service';
 
 @Component({
   selector: 'app-reservation-success',
@@ -14,6 +15,8 @@ export class ReservationSuccessComponent implements OnInit {
   infoText!: string;
   buttonText!: string;
 
+  pdfService = inject(PdfService);
+
   ngOnInit(): void {
     this.infoText = this.moreThanOne()?
     'Ihre Sitzplätze wurden erfolgreich reserviert.\nBitte nennen sie den folgenden Code an der Kasse, um Ihre Reservierung in eine Buchung umzuwandeln' :
@@ -23,4 +26,18 @@ export class ReservationSuccessComponent implements OnInit {
     'Tickets jetzt online bezahlen' :
     'Ticket jetzt online bezahlen';
   }
+
+  downloadReservationCode(): void {
+    const code = this.order().code;
+    const origin = window.location.origin;
+    const url = `${origin}/checkout/order/${code}`;
+
+    const text = this.moreThanOne()?
+    'Vielen Dank für Ihre Bestellung. Ihre Sitzplätze wurden reserviert.\n\nIhr Reservierungscode lautet:\n' + code + '\n\nSie erhalten Ihre Eintrittskarten nachdem Sie Ihre Bestellung bezahlt haben.\nJetzt bezahlen: ' + url:
+    'Vielen Dank für Ihre Bestellung. Ihr Sitzplatz wurde reserviert.\n\nIhr Reservierungscode lautet:\n' + code + '\n\nSie erhalten Ihre Eintrittskarte nachdem Sie Ihre Bestellung bezahlt haben.\nJetzt bezahlen: ' + url;
+
+    const timestamp = new Date().getTime();
+    const filename =  `Order_${code}_${timestamp}.txt`
+    this.pdfService.downloadTextFile(text, filename);
+  }
 }