SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 64 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/bun.lock
View file

@ -10,7 +10,6 @@
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/material": "~18.2.14",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
@ -93,8 +92,6 @@
"@angular/forms": ["@angular/forms@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-A67D867fu3DSBhdLWWZl/F5pr7v2+dRM2u3U7ZJ0ewh4a+sv+0yqWdJW+a8xIoiHxS+btGEJL2qAKJiH+MCFfg=="],
"@angular/material": ["@angular/material@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^18.0.0 || ^19.0.0", "@angular/cdk": "18.2.14", "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "@angular/forms": "^18.0.0 || ^19.0.0", "@angular/platform-browser": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q=="],
"@angular/platform-browser": ["@angular/platform-browser@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "18.2.13", "@angular/common": "18.2.13", "@angular/core": "18.2.13" }, "optionalPeers": ["@angular/animations"] }, "sha512-tu7ZzY6qD3ATdWFzcTcsAKe7M6cJeWbT/4/bF9unyGO3XBPcNYDKoiz10+7ap2PUd0fmPwvuvTvSNJiFEBnB8Q=="],
"@angular/platform-browser-dynamic": ["@angular/platform-browser-dynamic@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/compiler": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13" } }, "sha512-kbQCf9+8EpuJC7buBxhSiwBtXvjAwAKh6MznD6zd2pyCYqfY6gfRCZQRtK59IfgVtKmEONWI9grEyNIRoTmqJg=="],

3
frontend/package.json
View file

@ -19,7 +19,6 @@
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/material": "~18.2.14",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
@ -53,4 +52,4 @@
"typescript": "~5.5.2",
"typescript-eslint": "8.23.0"
}
}
}

2
frontend/src/app/app.config.ts
View file

@ -54,6 +54,6 @@ export const appConfig: ApplicationConfig = {
useClass: KeycloakBearerInterceptor,
multi: true,
},
provideAnimationsAsync(),
provideAnimationsAsync(), provideAnimationsAsync(),
],
};

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();
}
}

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

@ -22,7 +22,7 @@
<div class="slider-grid">
<div class="card group" *ngFor="let game of featuredGames">
<div class="relative">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
<div
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
@ -41,7 +41,7 @@
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="card group" *ngFor="let game of allGames">
<div class="relative">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
<div
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
@ -56,10 +56,14 @@
</div>
</div>
<div class="lg:col-span-1 space-y-6">
<div class="card p-4">
<h3 class="section-heading text-xl mb-4">Konto</h3>
<div class="space-y-4">
<button class="button-base w-full py-2" (click)="openDepositModal()">
Einzahlen
</button>
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
Transaktionen
</button>
@ -69,6 +73,8 @@
</div>
</div>
<app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
<div class="card p-4">
<h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
<div class="space-y-3">

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

@ -1,17 +1,20 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
import { CurrencyPipe, NgFor } from '@angular/common';
import { Game } from '../../model/Game';
import { Transaction } from '../../model/Transaction';
import {DepositComponent} from "../deposit/deposit.component";
@Component({
selector: 'app-homepage',
standalone: true,
imports: [NavbarComponent, CurrencyPipe, NgFor],
imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
templateUrl: './home.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class HomeComponent {
isDepositModalOpen = false;
featuredGames: Game[] = [
{
id: '1',
@ -67,4 +70,11 @@ export default class HomeComponent {
date: '2024-03-18',
},
];
openDepositModal(){
this.isDepositModalOpen = true;
}
closeDepositModal(){
this.isDepositModalOpen = false;
}
}

1
frontend/src/app/shared/components/navbar/navbar.component.ts
View file

@ -12,7 +12,6 @@ import { KeycloakService } from 'keycloak-angular';
export class NavbarComponent {
isMenuOpen = false;
private keycloakService: KeycloakService = inject(KeycloakService);
isLoggedIn = this.keycloakService.isLoggedIn();
login() {

6
frontend/src/index.html
View file

@ -6,8 +6,10 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

3
frontend/src/styles.css
View file

@ -145,3 +145,6 @@ a {
--mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
--mdc-dialog-container-shape: 6px important;
}
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }