style: format HTML and TypeScript files for consistency

frontend/src/app/feature/home/home.component.html

@@ -81,10 +81,16 @@
             [isOpen]="isDepositModalOpen"
             (closeModalEmitter)="closeDepositModal()"
           ></app-deposit>
-          <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded" (click)="openTransactionModal()">
+          <button
+            class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded"
+            (click)="openTransactionModal()"
+          >
             Transaktionen
           </button>
-          <app-transaction-history [isOpen]="isTransactionModalOpen" (closeEventEmitter)="closeTransactionModal()" />
+          <app-transaction-history
+            [isOpen]="isTransactionModalOpen"
+            (closeEventEmitter)="closeTransactionModal()"
+          />
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Kontoeinstellungen
           </button>
@@ -105,7 +111,9 @@
           >
             <div>
               <p class="text-sm font-medium">{{ transaction.status }}</p>
-              <p class="text-xs text-text-secondary">{{ transaction.createdAt | date : 'd.m.Y H:m'}}</p>
+              <p class="text-xs text-text-secondary">
+                {{ transaction.createdAt | date: 'd.m.Y H:m' }}
+              </p>
             </div>
             <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
               {{ transaction.amount | currency: 'EUR' }}

frontend/src/app/feature/home/home.component.ts

@@ -14,7 +14,16 @@ import { TransactionData } from '../../model/TransactionData';
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe, TransactionHistoryComponent],
+  imports: [
+    NavbarComponent,
+    CurrencyPipe,
+    NgFor,
+    DepositComponent,
+    ConfirmationComponent,
+    AsyncPipe,
+    DatePipe,
+    TransactionHistoryComponent,
+  ],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -25,9 +34,8 @@ export default class HomeComponent implements OnInit {
 
   constructor(
     public route: ActivatedRoute,
-    public router: Router,
+    public router: Router
-  ) {
+  ) {}
-  }
 
   ngOnInit() {
     this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true';
@@ -80,7 +88,8 @@ export default class HomeComponent implements OnInit {
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactionData: Observable<TransactionData> = inject(TransactionService).getUsersTransactions(5);
+  recentTransactionData: Observable<TransactionData> =
+    inject(TransactionService).getUsersTransactions(5);
 
   openDepositModal() {
     this.isDepositModalOpen = true;
@@ -94,8 +103,7 @@ export default class HomeComponent implements OnInit {
     this.isDepositSuccessful = true;
   }
 
-  openTransactionModal()
+  openTransactionModal() {
-  {
     this.isTransactionModalOpen = true;
   }
 

frontend/src/app/feature/transaction-history/transaction-history.component.html

@@ -1,9 +1,19 @@
-<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
+<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed">
   <div class="modal-card" [@cardAnimation]>
-    <button type="button" (click)="closeDialog()" class="absolute top-2 right-2 text-text-secondary">
+    <button
+      type="button"
+      (click)="closeDialog()"
+      class="absolute top-2 right-2 text-text-secondary"
+    >
       <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
-        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        <path
-              d="M18 6L6 18M6 6l12 12" />
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
       </svg>
     </button>
     <h2 class="modal-heading">Transaktionen</h2>
@@ -12,7 +22,7 @@
       <div class="flex justify-between items-center mb-4">
         <div>
           <p class="text-sm font-medium">{{ transaction.status }}</p>
-          <p class="text-xs text-text-secondary">{{ transaction.createdAt | date : 'd.m.Y H:m' }}</p>
+          <p class="text-xs text-text-secondary">{{ transaction.createdAt | date: 'd.m.Y H:m' }}</p>
         </div>
         <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
           {{ transaction.amount | currency: 'EUR' }}
@@ -20,16 +30,29 @@
       </div>
     } @empty {
       <div class="flex justify-center items-center w-full h-32">
-        <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full border-gray-300 border-t-gree-600" role="status">
+        <div
+          class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full border-gray-300 border-t-gree-600"
+          role="status"
+        >
           <span class="sr-only">Loading...</span>
         </div>
       </div>
     }
     <div class="inline inline-flex w-full gap-2">
-      <button type="button" (click)="back()" class="button-primary w-full py-2" [disabled]="offset <= 0">
+      <button
+        type="button"
+        (click)="back()"
+        class="button-primary w-full py-2"
+        [disabled]="offset <= 0"
+      >
         <
       </button>
-      <button type="button" (click)="forward()" class="button-primary w-full py-2" [disabled]="!(transactionData$|async)?.hasMore">
+      <button
+        type="button"
+        (click)="forward()"
+        class="button-primary w-full py-2"
+        [disabled]="!(transactionData$ | async)?.hasMore"
+      >
         >
       </button>
     </div>

frontend/src/app/feature/transaction-history/transaction-history.component.ts

@@ -1,35 +1,34 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
 import { TransactionService } from '@service/transaction.service';
 import { Observable } from 'rxjs';
-import { Transaction } from '../../model/Transaction';
 import { AsyncPipe, CurrencyPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
 import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 import { TransactionData } from '../../model/TransactionData';
 
-const PER_PAGE = 5
+const PER_PAGE = 5;
 
 @Component({
   standalone: true,
   selector: 'app-transaction-history',
-  imports: [
+  imports: [NgForOf, AsyncPipe, CurrencyPipe, DatePipe, AnimatedNumberComponent, NgIf],
-    NgForOf,
-    AsyncPipe,
-    CurrencyPipe,
-    DatePipe,
-    AnimatedNumberComponent,
-    NgIf,
-  ],
   templateUrl: './transaction-history.component.html',
   styleUrl: './transaction-history.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TransactionHistoryComponent {
   @Input()
-  isOpen: boolean = false;
+  isOpen = false;
   @Output()
   closeEventEmitter = new EventEmitter<void>();
 
-  protected offset: number = 0;
+  protected offset = 0;
 
   private transactionService: TransactionService = inject(TransactionService);
   transactionData$: Observable<TransactionData> = this.loadTransactions();

frontend/src/app/service/transaction.service.ts

@@ -8,8 +8,8 @@ import { TransactionData } from '../model/TransactionData';
 export class TransactionService {
   private http: HttpClient = inject(HttpClient);
 
-  public getUsersTransactions(limit: number|null = null, offset: number|null = null) {
+  public getUsersTransactions(limit: number | null = null, offset: number | null = null) {
-    let baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);
+    const baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);
 
     if (limit !== null) {
       baseUrl.searchParams.append('limit', limit.toString());