SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

feat(transaction-history): add transaction history feature with modal

Browse source
This commit is contained in:
csimonis 2025-04-23 11:02:49 +02:00
commit 9817fb95db
6 changed files with 57 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/feature/home/home.component.html
View file

@ -81,9 +81,10 @@
[isOpen]="isDepositModalOpen"
(closeModalEmitter)="closeDepositModal()"
></app-deposit>
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
<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()" />
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
Kontoeinstellungen
</button>
@ -103,8 +104,8 @@
*ngFor="let transaction of recentTransactions|async"
>
<div>
<p class="text-sm font-medium">{{ transaction.type }}</p>
<p class="text-xs text-text-secondary">{{ transaction.createdAt | date }}</p>
<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>
</div>
<span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
{{ transaction.amount | currency: 'EUR' }}

23
frontend/src/app/feature/home/home.component.ts
View file

@ -8,22 +8,26 @@ import { NavbarComponent } from '@shared/components/navbar/navbar.component';
import { Game } from 'app/model/Game';
import { Observable, of } from 'rxjs';
import { TransactionService } from '@service/transaction.service';
import format from 'ajv/dist/vocabularies/format';
import { TransactionHistoryComponent } from '../transaction-history/transaction-history.component';
@Component({
selector: 'app-homepage',
standalone: true,
imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe],
imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe, TransactionHistoryComponent],
templateUrl: './home.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomeComponent implements OnInit {
isDepositModalOpen = false;
isDepositSuccessful = false;
isTransactionModalOpen = false;
constructor(
public route: ActivatedRoute,
public router: Router
) {}
public router: Router,
) {
}
ngOnInit() {
this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true';
@ -81,6 +85,7 @@ export default class HomeComponent implements OnInit {
openDepositModal() {
this.isDepositModalOpen = true;
}
closeDepositModal() {
this.isDepositModalOpen = false;
}
@ -88,11 +93,23 @@ export default class HomeComponent implements OnInit {
openDepositConfirmationModal() {
this.isDepositSuccessful = true;
}
openTransactionModal()
{
this.isTransactionModalOpen = true;
}
closeDepositConfirmationModal() {
this.isDepositSuccessful = false;
}
closeTransactionModal() {
this.isTransactionModalOpen = false;
}
navigateToGame(route: string) {
this.router.navigate([route]);
}
protected readonly format = format;
}