SZUT/casino
4
1
Fork 0
Code Issues Pull requests 2 Releases 81 Packages 2 Wiki Activity Actions

feature: removed angular materials and implemented new deposit modal

Browse source
This commit is contained in:
Lea 2025-02-26 12:41:35 +01:00
parent 0100df89f5
commit 604d593fdc
10 changed files with 66 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/app/feature/deposit/deposit.component.html
View file

@ -1,21 +1,33 @@
<h2 mat-dialog-title class="text-xl font-semibold">Guthaben aufladen</h2>
<mat-dialog-content>
<form [formGroup]="form">
<div *ngIf="errorMsg">
{{ errorMsg }}
<ng-container
*ngIf="isOpen"
>
<div class="fixed inset-0 bg-black/70 z-50" (click)="closeModal()">
<div
*ngIf="isOpen"
class="card p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg z-50 min-w-[300px]"
>
<h2 class="text-xl section-heading">Guthaben aufladen</h2>
<form [formGroup]="form">
<div *ngIf="errorMsg">
{{ errorMsg }}
</div>
<div class="mb-2">
<label for="amount">Betrag</label>
<input
type="number"
id="amount"
formControlName="amount"
class="w-full px-2 py-1 bg-deep-blue-light text-white rounded my-1"
/>
</div>
</form>
<div class="my-1">
<button (click)="closeModal()" class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2">
Abbrechen
</button>
<button (click)="submit()" class="button-base w-full py-2">Einzahlen</button>
</div>
</div>
<div class="mb-2">
<label for="amount">Betrag</label>
<input
type="number"
id="amount"
formControlName="amount"
class="w-full px-2 py-1 bg-white text-black"
/>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-flat-button (click)="closeDialog()">Abbrechen</button>
<button mat-flat-button (click)="submit()">Einzahlen</button>
</mat-dialog-actions>
</div>
</ng-container>

20
frontend/src/app/feature/deposit/deposit.component.ts
View file

@ -1,17 +1,10 @@
import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { loadStripe, Stripe } from '@stripe/stripe-js';
import { DepositService } from '../../service/deposit.service';
import { debounceTime } from 'rxjs';
import { environment } from '../../../environments/environment';
import { NgIf } from '@angular/common';
import {
MatDialogActions,
MatDialogContent,
MatDialogRef,
MatDialogTitle,
} from '@angular/material/dialog';
import { MatButton } from '@angular/material/button';
@Component({
selector: 'app-deposit',
@ -19,20 +12,17 @@ import { MatButton } from '@angular/material/button';
imports: [
ReactiveFormsModule,
NgIf,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatButton,
],
templateUrl: './deposit.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DepositComponent implements OnInit {
@Input() isOpen: boolean = false;
@Output() close = new EventEmitter<void>();
protected form!: FormGroup;
protected errorMsg = '';
private stripe: Stripe | null = null;
private service: DepositService = inject(DepositService);
public dialogRef: MatDialogRef<DepositComponent> = inject(MatDialogRef<DepositComponent>);
async ngOnInit() {
this.form = new FormGroup({
@ -63,7 +53,7 @@ export class DepositComponent implements OnInit {
});
}
public closeDialog(): void {
this.dialogRef.close();
public closeModal() {
this.close.emit();
}
}