style: format HTML and TypeScript files for consistency

2025-04-23 12:30:10 +02:00 · 2025-04-23 12:30:10 +02:00 · d46ec45f4a
commit d46ec45f4a
parent 0eaccb4453
5 changed files with 72 additions and 34 deletions
--- a/frontend/src/app/feature/home/home.component.html
+++ b/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' }}
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/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;
  }

--- a/frontend/src/app/feature/transaction-history/transaction-history.component.html
+++ b/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"
-              d="M18 6L6 18M6 6l12 12" />
+        <path
+          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>
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.ts
+++ b/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: [
-    NgForOf,
-    AsyncPipe,
-    CurrencyPipe,
-    DatePipe,
-    AnimatedNumberComponent,
-    NgIf,
-  ],
+  imports: [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();
--- a/frontend/src/app/service/transaction.service.ts
+++ b/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) {
-    let baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);
+  public getUsersTransactions(limit: number | null = null, offset: number | null = null) {
+    const baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);

    if (limit !== null) {
      baseUrl.searchParams.append('limit', limit.toString());