From c5e66b47206d8fd8583129ffca902e9faf443aad Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Thu, 31 Mar 2022 22:32:42 +0200 Subject: [PATCH 1/5] Add transaction skeletton --- frontend/src/app/Services/auth.service.ts | 2 +- frontend/src/app/Services/data.service.ts | 40 ++++++++++++- .../Views/dashboard/dashboard.component.html | 10 ++++ .../Views/dashboard/dashboard.component.scss | 8 +++ .../Views/dashboard/dashboard.component.ts | 36 ++++++++++- .../user-dialog/user-dialog.component.html | 60 +++++++++++++++++++ .../user-dialog/user-dialog.component.scss | 9 +++ .../user-dialog/user-dialog.component.spec.ts | 25 ++++++++ .../user-dialog/user-dialog.component.ts | 36 +++++++++++ frontend/src/app/app.module.ts | 4 ++ 10 files changed, 225 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html create mode 100644 frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.scss create mode 100644 frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.spec.ts create mode 100644 frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts diff --git a/frontend/src/app/Services/auth.service.ts b/frontend/src/app/Services/auth.service.ts index 85ad53a..4d0ed48 100644 --- a/frontend/src/app/Services/auth.service.ts +++ b/frontend/src/app/Services/auth.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; -const AUTH_API = 'https://aktienbot.flokaiser.com/api/user'; +const AUTH_API = 'https://gruppe1.testsites.info/api/user'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), }; diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index bbd1863..412efb7 100644 --- a/frontend/src/app/Services/data.service.ts +++ b/frontend/src/app/Services/data.service.ts @@ -2,16 +2,23 @@ import { Injectable, OnInit } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { delay, Observable } from 'rxjs'; import { TokenStorageService } from './token.service'; -const API_URL = 'https://aktienbot.flokaiser.com/api/'; +const API_URL = 'https://gruppe1.testsites.info/api/'; @Injectable({ providedIn: 'root', }) export class DataService { + /** + * @param {HttpClient} privatehttp + * @param {TokenStorageService} privatetokenStorage + */ constructor( private http: HttpClient, private tokenStorage: TokenStorageService ) {} + /** + * @returns Observable + */ public getStockData(): Observable { return this.http.get(API_URL + 'portfolio', { headers: new HttpHeaders({ @@ -22,6 +29,9 @@ export class DataService { }); } + /** + * @returns Observable + */ public getTransactionData(): Observable { return this.http.get(API_URL + 'transactions', { headers: new HttpHeaders({ @@ -32,6 +42,34 @@ export class DataService { }); } + /** + * @param {string} symbol + * @param {Date} time + * @param {number} count + * @param {number} price + * @returns Observable + */ + public createTransaction( + symbol: string, + time: Date, + count: number, + price: number + ): Observable { + return this.http.post(API_URL + 'transactions', { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + symbol, + time, + count, + price, + }); + } + + /** + * @returns Observable + */ public getKeywords(): Observable { return this.http.get(API_URL + 'keywords', { headers: new HttpHeaders({ diff --git a/frontend/src/app/Views/dashboard/dashboard.component.html b/frontend/src/app/Views/dashboard/dashboard.component.html index 5c1b401..3b2f32b 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.html +++ b/frontend/src/app/Views/dashboard/dashboard.component.html @@ -63,6 +63,16 @@
Transaktionen
+ +
diff --git a/frontend/src/app/Views/dashboard/dashboard.component.scss b/frontend/src/app/Views/dashboard/dashboard.component.scss index 7bc1360..85474ee 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.scss +++ b/frontend/src/app/Views/dashboard/dashboard.component.scss @@ -62,3 +62,11 @@ table { .placeholder { height: 100%; } + +side-heading { + display: inline; +} + +.mat-ripple-element { + display: none !important; +} diff --git a/frontend/src/app/Views/dashboard/dashboard.component.ts b/frontend/src/app/Views/dashboard/dashboard.component.ts index 27a6140..a04fd72 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.ts +++ b/frontend/src/app/Views/dashboard/dashboard.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { throwToolbarMixedModesError } from '@angular/material/toolbar'; import { DataService } from 'src/app/Services/data.service'; -import { TokenStorageService } from 'src/app/Services/token.service'; +import { MatDialog } from '@angular/material/dialog'; +import { UserDialogComponent } from './user-dialog/user-dialog.component'; export interface PeriodicElement { name: string; @@ -43,13 +43,21 @@ const ELEMENT_DATA: PeriodicElement[] = [ { position: 20, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, ]; +export interface TransactionData { + symbol: string; + time: Date; + count: number; + price: number; +} + @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'], }) export class DashboardComponent implements OnInit { - constructor(private dataService: DataService) {} + constructor(private dataService: DataService, public dialog: MatDialog) {} + ngOnInit() { this.dataService.getStockData().subscribe((response: any) => { console.log(response); @@ -61,6 +69,28 @@ export class DashboardComponent implements OnInit { }); } + symbol: string = ''; + time: Date = new Date(); + count: number = 0.0; + price: number = 0.0; + + openDialog(): void { + const dialogRef = this.dialog.open(UserDialogComponent, { + width: '50vw', + height: '55vh', + data: { + symbol: this.symbol, + time: this.time, + count: this.count, + price: this.price, + }, + }); + + dialogRef.afterClosed().subscribe((result) => { + console.log('The dialog was closed'); + }); + } + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; } diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html new file mode 100644 index 0000000..67e6e52 --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html @@ -0,0 +1,60 @@ +

Neue Transaktion hinzufügen

+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+ diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.scss b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.scss new file mode 100644 index 0000000..80e25e5 --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.scss @@ -0,0 +1,9 @@ +.spacer { + flex-grow: 1; + width: 5%; +} + +.footer-buttons { + display: flex; + width: 100%; +} diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.spec.ts b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.spec.ts new file mode 100644 index 0000000..4db6f9c --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserDialogComponent } from './user-dialog.component'; + +describe('UserDialogComponent', () => { + let component: UserDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UserDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UserDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts new file mode 100644 index 0000000..ef4b05b --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts @@ -0,0 +1,36 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, +} from '@angular/material/dialog'; +import { DataService } from 'src/app/Services/data.service'; + +import { TransactionData } from '../dashboard.component'; + +@Component({ + selector: 'app-user-dialog', + templateUrl: './user-dialog.component.html', + styleUrls: ['./user-dialog.component.scss'], +}) +export class UserDialogComponent implements OnInit { + constructor( + private dataService: DataService, + public dialog: MatDialog, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: TransactionData + ) {} + + ngOnInit(): void {} + + onSubmit() { + console.log(this.data); + this.dataService.createTransaction( + this.data.symbol, + this.data.time, + this.data.count, + this.data.price + ); + this.dialog.closeAll(); + } +} diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1e925aa..17f8e27 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -10,6 +10,7 @@ import { MatGridListModule } from '@angular/material/grid-list'; import { MatCardModule } from '@angular/material/card'; import { MatTableModule } from '@angular/material/table'; import { MatMenuModule } from '@angular/material/menu'; +import { MatDialogModule } from '@angular/material/dialog'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -20,6 +21,7 @@ import { DashboardComponent } from './Views/dashboard/dashboard.component'; import { RegisterComponent } from './Views/register/register.component'; import { ProfileComponent } from './Views/profile/profile.component'; import { BotSettingsComponent } from './Views/bot-settings/bot-settings.component'; +import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.component'; @NgModule({ declarations: [ @@ -30,6 +32,7 @@ import { BotSettingsComponent } from './Views/bot-settings/bot-settings.componen RegisterComponent, ProfileComponent, BotSettingsComponent, + UserDialogComponent, ], imports: [ BrowserModule, @@ -44,6 +47,7 @@ import { BotSettingsComponent } from './Views/bot-settings/bot-settings.componen FormsModule, HttpClientModule, MatMenuModule, + MatDialogModule, ], providers: [], bootstrap: [AppComponent], From 9de1258f7f75a9a4e9fa123a47e6b8c2880c559b Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Sat, 2 Apr 2022 12:44:50 +0200 Subject: [PATCH 2/5] Add new createTransaction method --- frontend/src/app/Services/auth.service.ts | 13 +++++++++++ frontend/src/app/Services/data.service.ts | 9 ++++---- frontend/src/app/Services/token.service.ts | 22 +++++++++++++++++++ .../Views/dashboard/dashboard.component.ts | 4 ++-- .../user-dialog/user-dialog.component.ts | 16 +++++++++----- 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/Services/auth.service.ts b/frontend/src/app/Services/auth.service.ts index 4d0ed48..a4dff21 100644 --- a/frontend/src/app/Services/auth.service.ts +++ b/frontend/src/app/Services/auth.service.ts @@ -11,12 +11,25 @@ const httpOptions = { }) export class AuthService { constructor(private http: HttpClient) {} + + /** + * @param {string} email + * @param {string} password + * @returns Observable + */ login(email: string, password: string): Observable { return this.http.post(AUTH_API + '/login', { email, password, }); } + + /** + * @param {string} email + * @param {string} username + * @param {string} password + * @returns Observable + */ register(email: string, username: string, password: string): Observable { return this.http.post( AUTH_API + '/register', diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index 412efb7..a11b78a 100644 --- a/frontend/src/app/Services/data.service.ts +++ b/frontend/src/app/Services/data.service.ts @@ -51,8 +51,8 @@ export class DataService { */ public createTransaction( symbol: string, - time: Date, - count: number, + time: string, + count: BigInt, price: number ): Observable { return this.http.post(API_URL + 'transactions', { @@ -60,10 +60,11 @@ export class DataService { 'Content-Type': 'application/json', Authorization: 'Bearer ' + this.tokenStorage.getToken(), }), - symbol, - time, + responseType: 'text', count, price, + symbol, + time, }); } diff --git a/frontend/src/app/Services/token.service.ts b/frontend/src/app/Services/token.service.ts index f56b112..8460ed6 100644 --- a/frontend/src/app/Services/token.service.ts +++ b/frontend/src/app/Services/token.service.ts @@ -6,20 +6,42 @@ const USER_KEY = 'auth-user'; }) export class TokenStorageService { constructor() {} + + /** + * @returns void + */ signOut(): void { window.sessionStorage.clear(); } + + /** + * @param {string} token + * @returns void + */ public saveToken(token: string): void { window.sessionStorage.removeItem(TOKEN_KEY); window.sessionStorage.setItem(TOKEN_KEY, token); } + + /** + * @returns string + */ public getToken(): string | null { return window.sessionStorage.getItem(TOKEN_KEY); } + + /** + * @param {any} user + * @returns void + */ public saveUser(user: any): void { window.sessionStorage.removeItem(USER_KEY); window.sessionStorage.setItem(USER_KEY, JSON.stringify(user)); } + + /** + * @returns any + */ public getUser(): any { const user = window.sessionStorage.getItem(USER_KEY); if (user) { diff --git a/frontend/src/app/Views/dashboard/dashboard.component.ts b/frontend/src/app/Views/dashboard/dashboard.component.ts index a04fd72..3cb280b 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.ts +++ b/frontend/src/app/Views/dashboard/dashboard.component.ts @@ -45,8 +45,8 @@ const ELEMENT_DATA: PeriodicElement[] = [ export interface TransactionData { symbol: string; - time: Date; - count: number; + time: string; + count: BigInt; price: number; } diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts index ef4b05b..a777286 100644 --- a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts @@ -25,11 +25,17 @@ export class UserDialogComponent implements OnInit { onSubmit() { console.log(this.data); - this.dataService.createTransaction( - this.data.symbol, - this.data.time, - this.data.count, - this.data.price + console.log( + this.dataService + .createTransaction( + this.data.symbol, + this.data.time, + this.data.count, + this.data.price + ) + .subscribe((data) => { + console.log(data); + }) ); this.dialog.closeAll(); } From 91159083650cb0f5af42fa76cb8de4d1ec205920 Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Sun, 3 Apr 2022 22:32:20 +0200 Subject: [PATCH 3/5] Add skeletton for profile page --- frontend/src/app/Services/bot.service.spec.ts | 16 +++ frontend/src/app/Services/bot.service.ts | 31 ++++ frontend/src/app/Services/data.service.ts | 37 +++++ .../app/Views/header/header.component.html | 2 +- .../app/Views/header/header.component.scss | 5 + .../confirmation-dialog.component.html | 28 ++++ .../confirmation-dialog.component.scss | 18 +++ .../confirmation-dialog.component.spec.ts | 25 ++++ .../confirmation-dialog.component.ts | 16 +++ .../app/Views/profile/profile.component.html | 136 +++++++++++++++++- .../app/Views/profile/profile.component.scss | 22 +++ .../app/Views/profile/profile.component.ts | 53 ++++++- frontend/src/app/app.module.ts | 7 +- 13 files changed, 392 insertions(+), 4 deletions(-) create mode 100644 frontend/src/app/Services/bot.service.spec.ts create mode 100644 frontend/src/app/Services/bot.service.ts create mode 100644 frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.html create mode 100644 frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss create mode 100644 frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts create mode 100644 frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts diff --git a/frontend/src/app/Services/bot.service.spec.ts b/frontend/src/app/Services/bot.service.spec.ts new file mode 100644 index 0000000..6b208f5 --- /dev/null +++ b/frontend/src/app/Services/bot.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { BotService } from './bot.service'; + +describe('BotService', () => { + let service: BotService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(BotService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/Services/bot.service.ts b/frontend/src/app/Services/bot.service.ts new file mode 100644 index 0000000..29df378 --- /dev/null +++ b/frontend/src/app/Services/bot.service.ts @@ -0,0 +1,31 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { TokenStorageService } from './token.service'; + +const API_URL = 'https://gruppe1.testsites.info/api/'; + +@Injectable({ + providedIn: 'root', +}) +export class BotService { + constructor( + private http: HttpClient, + private tokenStorage: TokenStorageService + ) {} + + /** + * @param {string} telegramUserID + * @returns Observable + */ + public createTransaction(telegram_user_id: string): Observable { + return this.http.post(API_URL + 'telegram', { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + responseType: 'text', + telegram_user_id, + }); + } +} diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index a11b78a..423756b 100644 --- a/frontend/src/app/Services/data.service.ts +++ b/frontend/src/app/Services/data.service.ts @@ -16,6 +16,42 @@ export class DataService { private tokenStorage: TokenStorageService ) {} + /** + * @returns Observable + */ + public getUserData(): Observable { + return this.http.get(API_URL + 'user', { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + responseType: 'text', + }); + } + + /** + * @param {string} email + * @param {string} username + * @param {string} password + * @returns Observable + */ + public updateUserData( + email: string, + username: string, + password: string + ): Observable { + return this.http.put(API_URL + 'user', { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + responseType: 'text', + email, + username, + password, + }); + } + /** * @returns Observable */ @@ -55,6 +91,7 @@ export class DataService { count: BigInt, price: number ): Observable { + time = time + 'T12:00:00.000'; return this.http.post(API_URL + 'transactions', { headers: new HttpHeaders({ 'Content-Type': 'application/json', diff --git a/frontend/src/app/Views/header/header.component.html b/frontend/src/app/Views/header/header.component.html index d72ba56..ecf3ffb 100644 --- a/frontend/src/app/Views/header/header.component.html +++ b/frontend/src/app/Views/header/header.component.html @@ -1,5 +1,5 @@ - Aktienbot + Aktienbot + +
+ +
+ + diff --git a/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss new file mode 100644 index 0000000..b960d19 --- /dev/null +++ b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss @@ -0,0 +1,18 @@ +.footer-buttons { + width: 100%; + text-align: center; +} + +.spacer { + flex-grow: 1; + width: 5%; +} + +.inner { + display: inline-block; + width: 50%; +} + +.content { + height: 80%; +} diff --git a/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts new file mode 100644 index 0000000..80bb525 --- /dev/null +++ b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmationDialogComponent } from './confirmation-dialog.component'; + +describe('ConfirmationDialogComponent', () => { + let component: ConfirmationDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ConfirmationDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmationDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts new file mode 100644 index 0000000..7b5445a --- /dev/null +++ b/frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-confirmation-dialog', + templateUrl: './confirmation-dialog.component.html', + styleUrls: ['./confirmation-dialog.component.scss'], +}) +export class ConfirmationDialogComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} + + confirm() {} + + returnBack() {} +} diff --git a/frontend/src/app/Views/profile/profile.component.html b/frontend/src/app/Views/profile/profile.component.html index 9df0576..7bdb5cc 100644 --- a/frontend/src/app/Views/profile/profile.component.html +++ b/frontend/src/app/Views/profile/profile.component.html @@ -1 +1,135 @@ -

profile works!

+ + + + Profile Information + +
+ + Username + + + Username is required + + + + {{ form.email }} + + + + Password + + + Please enter a valid password + + + Password is required + + + + Repeat Password + + + Please enter a valid password + + + Password is required + + +
+ +
+ + + + + + + Add Telegram Id + +
+ + Telegram UserId + + + Id is required + + +
+ +
+ + + + + diff --git a/frontend/src/app/Views/profile/profile.component.scss b/frontend/src/app/Views/profile/profile.component.scss index e69de29..d30d37b 100644 --- a/frontend/src/app/Views/profile/profile.component.scss +++ b/frontend/src/app/Views/profile/profile.component.scss @@ -0,0 +1,22 @@ +.form { + width: 100%; +} + +.card { + width: 90%; + height: 80%; + margin: 5%; +} + +.example-full-width { + width: 100%; +} + +.card-title { + padding-bottom: 2.5vh; +} + +mat-grid { + width: 100%; + height: 100%; +} diff --git a/frontend/src/app/Views/profile/profile.component.ts b/frontend/src/app/Views/profile/profile.component.ts index 89b667f..7350ea9 100644 --- a/frontend/src/app/Views/profile/profile.component.ts +++ b/frontend/src/app/Views/profile/profile.component.ts @@ -1,4 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { FormControl, PatternValidator, Validators } from '@angular/forms'; +import { MatDialog } from '@angular/material/dialog'; +import { BotService } from 'src/app/Services/bot.service'; +import { DataService } from 'src/app/Services/data.service'; +import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component'; @Component({ selector: 'app-profile', @@ -6,7 +11,53 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./profile.component.scss'], }) export class ProfileComponent implements OnInit { - constructor() {} + userNameFormControl = new FormControl('', [Validators.required]); + passwordFormControl = new FormControl('', [ + Validators.required, + Validators.minLength(6), + ]); + telegramIdFormControl = new FormControl('', [Validators.required]); + + userId = ''; + + form: any = { + username: null, + email: 'example@web.com', + password: null, + }; + + constructor( + private botService: BotService, + private dataService: DataService, + public dialog: MatDialog + ) {} ngOnInit(): void {} + + onSubmit() { + console.log('NASE1'); + } + + updateUser() { + const { username, email, password } = this.form; + console.log('NASE2'); + } + + openDialog(action: string) { + const dialogRef = this.dialog.open(ConfirmationDialogComponent, { + width: '50vw', + height: '20vh', + }); + + dialogRef.afterClosed().subscribe((result) => { + if (result === true) { + if (action === 'addTelegram') { + this.onSubmit(); + } else if (action === 'updateUser') { + this.updateUser(); + } + } + console.log(`Dialog result: ${result}`); + }); + } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 17f8e27..122dc77 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { MatToolbarModule } from '@angular/material/toolbar'; @@ -11,6 +11,7 @@ import { MatCardModule } from '@angular/material/card'; import { MatTableModule } from '@angular/material/table'; import { MatMenuModule } from '@angular/material/menu'; import { MatDialogModule } from '@angular/material/dialog'; +import { MatInputModule } from '@angular/material/input'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -22,6 +23,7 @@ import { RegisterComponent } from './Views/register/register.component'; import { ProfileComponent } from './Views/profile/profile.component'; import { BotSettingsComponent } from './Views/bot-settings/bot-settings.component'; import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.component'; +import { ConfirmationDialogComponent } from './Views/profile/confirmation-dialog/confirmation-dialog.component'; @NgModule({ declarations: [ @@ -33,6 +35,7 @@ import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.c ProfileComponent, BotSettingsComponent, UserDialogComponent, + ConfirmationDialogComponent, ], imports: [ BrowserModule, @@ -48,6 +51,8 @@ import { UserDialogComponent } from './Views/dashboard/user-dialog/user-dialog.c HttpClientModule, MatMenuModule, MatDialogModule, + MatInputModule, + ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent], From 16ad83ae404e5e35637ec9f10f72d33b0bbe7ead Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Mon, 4 Apr 2022 23:13:02 +0200 Subject: [PATCH 4/5] Add data handling for transactions and stocks --- frontend/src/app/Helpers/helper.service.ts | 6 +- frontend/src/app/Models/stock.model.ts | 6 - frontend/src/app/Services/data.service.ts | 32 +++-- .../src/app/Services/token.service.spec.ts | 8 +- .../Views/dashboard/dashboard.component.html | 121 ++++++++---------- .../Views/dashboard/dashboard.component.ts | 63 +++++---- .../user-dialog/user-dialog.component.html | 1 + .../user-dialog/user-dialog.component.ts | 6 +- 8 files changed, 123 insertions(+), 120 deletions(-) diff --git a/frontend/src/app/Helpers/helper.service.ts b/frontend/src/app/Helpers/helper.service.ts index ac7ca1c..cfb0d3d 100644 --- a/frontend/src/app/Helpers/helper.service.ts +++ b/frontend/src/app/Helpers/helper.service.ts @@ -1,10 +1,8 @@ import { Injectable } from '@angular/core'; -import { Stock } from '../Models/stock.model'; @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class HelperService { - - constructor() { } + constructor() {} } diff --git a/frontend/src/app/Models/stock.model.ts b/frontend/src/app/Models/stock.model.ts index 4220de6..e69de29 100644 --- a/frontend/src/app/Models/stock.model.ts +++ b/frontend/src/app/Models/stock.model.ts @@ -1,6 +0,0 @@ -export class Stock { - count = 0; - price = 0; - symbol = ''; - time = ''; -} diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index 423756b..0a5eb26 100644 --- a/frontend/src/app/Services/data.service.ts +++ b/frontend/src/app/Services/data.service.ts @@ -88,21 +88,27 @@ export class DataService { public createTransaction( symbol: string, time: string, - count: BigInt, + count: number, price: number ): Observable { - time = time + 'T12:00:00.000'; - return this.http.post(API_URL + 'transactions', { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + this.tokenStorage.getToken(), - }), - responseType: 'text', - count, - price, - symbol, - time, - }); + time = time + 'T12:00:00.000Z'; + price.toFixed(2); + console.log(this.tokenStorage.getToken()); + return this.http.post( + API_URL + 'transaction', + { + count, + price, + symbol, + time, + }, + { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + } + ); } /** diff --git a/frontend/src/app/Services/token.service.spec.ts b/frontend/src/app/Services/token.service.spec.ts index 7930902..bff5e17 100644 --- a/frontend/src/app/Services/token.service.spec.ts +++ b/frontend/src/app/Services/token.service.spec.ts @@ -1,13 +1,13 @@ import { TestBed } from '@angular/core/testing'; -import { TokenService } from './token.service'; +import { TokenStorageService } from './token.service'; -describe('TokenService', () => { - let service: TokenService; +describe('TokenStorageService', () => { + let service: TokenStorageService; beforeEach(() => { TestBed.configureTestingModule({}); - service = TestBed.inject(TokenService); + service = TestBed.inject(TokenStorageService); }); it('should be created', () => { diff --git a/frontend/src/app/Views/dashboard/dashboard.component.html b/frontend/src/app/Views/dashboard/dashboard.component.html index 3b2f32b..7f0b5e9 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.html +++ b/frontend/src/app/Views/dashboard/dashboard.component.html @@ -4,49 +4,39 @@
Aktienübersicht
- -
-
-
- + +
+
+ - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - -
Symbol{{ element.position }}Symbol{{ element.symbol }}Name{{ element.name }}Count{{ element.count }}Volume{{ element.weight }}Time{{ element.time }}Worth{{ element.symbol }}
-
+ + + +
+ @@ -74,39 +64,40 @@ add -
- - - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - -
Count{{ element.position }}Count{{ element.count }}Pirce{{ element.name }}Price{{ element.price }}Symbol{{ element.weight }}Symbol{{ element.symbol }}Time{{ element.symbol }}Time{{ element.time }}
-
+ + + diff --git a/frontend/src/app/Views/dashboard/dashboard.component.ts b/frontend/src/app/Views/dashboard/dashboard.component.ts index 3cb280b..c1dc35e 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.ts +++ b/frontend/src/app/Views/dashboard/dashboard.component.ts @@ -11,11 +11,10 @@ export interface PeriodicElement { } export interface Stock { + count: number; + // price: number; symbol: string; - count: Float32Array; - lastTransaction: Date; - boughtPrice: Float32Array; - currentPrice: Float32Array; + time: string; } //symbol count lastTransaction boughtPrice currentPrice(+?) @@ -24,29 +23,15 @@ const ELEMENT_DATA: PeriodicElement[] = [ { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, - { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, - { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, - { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, - { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, - { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, - { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, - { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, - { position: 11, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, - { position: 12, name: 'Helium', weight: 4.0026, symbol: 'He' }, - { position: 13, name: 'Lithium', weight: 6.941, symbol: 'Li' }, - { position: 14, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, - { position: 15, name: 'Boron', weight: 10.811, symbol: 'B' }, - { position: 16, name: 'Carbon', weight: 12.0107, symbol: 'C' }, - { position: 17, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, - { position: 18, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, - { position: 19, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, - { position: 20, name: 'Neon', weight: 20.1797, symbol: 'Ne' }, ]; +var TRANSACTION_DATA: TransactionData[] = []; +var STOCK_DATA: Stock[] = []; + export interface TransactionData { symbol: string; time: string; - count: BigInt; + count: number; price: number; } @@ -58,14 +43,41 @@ export interface TransactionData { export class DashboardComponent implements OnInit { constructor(private dataService: DataService, public dialog: MatDialog) {} + dataSourceTransactions: TransactionData[] = []; + dataSourceStocks: Stock[] = []; + ngOnInit() { this.dataService.getStockData().subscribe((response: any) => { - console.log(response); + console.log('PORTFOLIO:' + response); + var data = JSON.parse(response); + for (let i = 0; i < data.data.length; i++) { + STOCK_DATA.push({ + count: data.data[i].count, + // price: data.data[i].price, + symbol: data.data[i].symbol, + time: data.data[i].last_transaction, + }); + } + console.log(STOCK_DATA); + this.dataSourceStocks = STOCK_DATA; //TODO map data on array for display + //TODO move to helper service }); this.dataService.getTransactionData().subscribe((response: any) => { - console.log(response); + console.log('TRANSACTIONS:' + response); + var data = JSON.parse(response); + for (let i = 0; i < data.data.length; i++) { + TRANSACTION_DATA.push({ + symbol: data.data[i].symbol, + time: data.data[i].time, + count: data.data[i].count, + price: data.data[i].price, + }); + } + console.log(TRANSACTION_DATA); + this.dataSourceTransactions = TRANSACTION_DATA; //TODO map data on array for display + //TODO move to helper service }); } @@ -91,6 +103,7 @@ export class DashboardComponent implements OnInit { }); } - displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + displayedColumns: string[] = ['weight', 'position', 'name', 'symbol']; + displayedColumnsStocks: string[] = ['position', 'name', 'weight']; dataSource = ELEMENT_DATA; } diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html index 67e6e52..21b87cf 100644 --- a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html @@ -50,6 +50,7 @@ [(ngModel)]="data.price" required #price="ngModel" + type="number" />
diff --git a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts index a777286..bc73c9b 100644 --- a/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts @@ -24,14 +24,14 @@ export class UserDialogComponent implements OnInit { ngOnInit(): void {} onSubmit() { - console.log(this.data); + //TODO check tat price is decimal console.log( this.dataService .createTransaction( this.data.symbol, this.data.time, - this.data.count, - this.data.price + +this.data.count, + +this.data.price.toFixed(2) ) .subscribe((data) => { console.log(data); From 4c7506d8b22031ff01ebac998a98e86333db532d Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Tue, 5 Apr 2022 19:23:52 +0200 Subject: [PATCH 5/5] Add API calls for profile component --- frontend/src/app/Services/bot.service.ts | 15 ---- frontend/src/app/Services/data.service.ts | 36 ---------- .../src/app/Services/profile.service.spec.ts | 16 +++++ frontend/src/app/Services/profile.service.ts | 69 +++++++++++++++++++ .../Views/dashboard/dashboard.component.ts | 3 - .../app/Views/profile/profile.component.html | 2 +- .../app/Views/profile/profile.component.ts | 31 +++++++-- frontend/src/app/app-routing.module.ts | 4 +- 8 files changed, 113 insertions(+), 63 deletions(-) create mode 100644 frontend/src/app/Services/profile.service.spec.ts create mode 100644 frontend/src/app/Services/profile.service.ts diff --git a/frontend/src/app/Services/bot.service.ts b/frontend/src/app/Services/bot.service.ts index 29df378..27c8290 100644 --- a/frontend/src/app/Services/bot.service.ts +++ b/frontend/src/app/Services/bot.service.ts @@ -13,19 +13,4 @@ export class BotService { private http: HttpClient, private tokenStorage: TokenStorageService ) {} - - /** - * @param {string} telegramUserID - * @returns Observable - */ - public createTransaction(telegram_user_id: string): Observable { - return this.http.post(API_URL + 'telegram', { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + this.tokenStorage.getToken(), - }), - responseType: 'text', - telegram_user_id, - }); - } } diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index 0a5eb26..213e35b 100644 --- a/frontend/src/app/Services/data.service.ts +++ b/frontend/src/app/Services/data.service.ts @@ -16,42 +16,6 @@ export class DataService { private tokenStorage: TokenStorageService ) {} - /** - * @returns Observable - */ - public getUserData(): Observable { - return this.http.get(API_URL + 'user', { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + this.tokenStorage.getToken(), - }), - responseType: 'text', - }); - } - - /** - * @param {string} email - * @param {string} username - * @param {string} password - * @returns Observable - */ - public updateUserData( - email: string, - username: string, - password: string - ): Observable { - return this.http.put(API_URL + 'user', { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + this.tokenStorage.getToken(), - }), - responseType: 'text', - email, - username, - password, - }); - } - /** * @returns Observable */ diff --git a/frontend/src/app/Services/profile.service.spec.ts b/frontend/src/app/Services/profile.service.spec.ts new file mode 100644 index 0000000..2ddf7f2 --- /dev/null +++ b/frontend/src/app/Services/profile.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ProfileService } from './profile.service'; + +describe('ProfileService', () => { + let service: ProfileService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ProfileService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/Services/profile.service.ts b/frontend/src/app/Services/profile.service.ts new file mode 100644 index 0000000..b23a9b3 --- /dev/null +++ b/frontend/src/app/Services/profile.service.ts @@ -0,0 +1,69 @@ +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { TokenStorageService } from './token.service'; + +const API_URL = 'https://gruppe1.testsites.info/api/'; + +@Injectable({ + providedIn: 'root', +}) +export class ProfileService { + constructor( + private tokenStorage: TokenStorageService, + private http: HttpClient + ) {} + + /** + * @returns Observable + */ + public getUserData(): Observable { + return this.http.get(API_URL + 'user', { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + responseType: 'text', + }); + } + + /** + * @param {string} username + * @param {number} password + * @returns Observable + */ + public updateProfile(username: string, password: number): Observable { + return this.http.put( + API_URL + 'user', + { + username, + password, + }, + { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + } + ); + } + + /** + * @param {string} telegramUserID + * @returns Observable + */ + public addTelegramId(telegram_user_id: string): Observable { + return this.http.post( + API_URL + 'telegram', + { + telegram_user_id, + }, + { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + this.tokenStorage.getToken(), + }), + } + ); + } +} diff --git a/frontend/src/app/Views/dashboard/dashboard.component.ts b/frontend/src/app/Views/dashboard/dashboard.component.ts index c1dc35e..1ac94a2 100644 --- a/frontend/src/app/Views/dashboard/dashboard.component.ts +++ b/frontend/src/app/Views/dashboard/dashboard.component.ts @@ -53,14 +53,12 @@ export class DashboardComponent implements OnInit { for (let i = 0; i < data.data.length; i++) { STOCK_DATA.push({ count: data.data[i].count, - // price: data.data[i].price, symbol: data.data[i].symbol, time: data.data[i].last_transaction, }); } console.log(STOCK_DATA); this.dataSourceStocks = STOCK_DATA; - //TODO map data on array for display //TODO move to helper service }); this.dataService.getTransactionData().subscribe((response: any) => { @@ -76,7 +74,6 @@ export class DashboardComponent implements OnInit { } console.log(TRANSACTION_DATA); this.dataSourceTransactions = TRANSACTION_DATA; - //TODO map data on array for display //TODO move to helper service }); } diff --git a/frontend/src/app/Views/profile/profile.component.html b/frontend/src/app/Views/profile/profile.component.html index 7bdb5cc..37a5180 100644 --- a/frontend/src/app/Views/profile/profile.component.html +++ b/frontend/src/app/Views/profile/profile.component.html @@ -114,7 +114,7 @@ [formControl]="telegramIdFormControl" [(ngModel)]="userId" required - placeholder="Ex. 123456789" + #telegramId /> Id is required diff --git a/frontend/src/app/Views/profile/profile.component.ts b/frontend/src/app/Views/profile/profile.component.ts index 7350ea9..324d7a8 100644 --- a/frontend/src/app/Views/profile/profile.component.ts +++ b/frontend/src/app/Views/profile/profile.component.ts @@ -1,8 +1,10 @@ +import { i18nMetaToJSDoc } from '@angular/compiler/src/render3/view/i18n/meta'; import { Component, OnInit } from '@angular/core'; import { FormControl, PatternValidator, Validators } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { BotService } from 'src/app/Services/bot.service'; import { DataService } from 'src/app/Services/data.service'; +import { ProfileService } from 'src/app/Services/profile.service'; import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component'; @Component({ @@ -23,24 +25,40 @@ export class ProfileComponent implements OnInit { form: any = { username: null, email: 'example@web.com', - password: null, + password: 'password', }; constructor( - private botService: BotService, - private dataService: DataService, + private profileService: ProfileService, public dialog: MatDialog ) {} - ngOnInit(): void {} + ngOnInit(): void { + this.profileService.getUserData().subscribe((result) => { + console.log(result); + result = JSON.parse(result); + this.form.username = result.data.username; + this.form.password = result.data.password; + this.userId = result.data.telegram_user_id; + }); + } onSubmit() { - console.log('NASE1'); + if (this.userId != '') { + console.log(this.userId); + this.profileService.addTelegramId(this.userId).subscribe((result) => { + console.log(result); + }); + } } updateUser() { const { username, email, password } = this.form; - console.log('NASE2'); + this.profileService + .updateProfile(this.form.username, this.form.password) + .subscribe((result) => { + console.log(result); + }); } openDialog(action: string) { @@ -57,7 +75,6 @@ export class ProfileComponent implements OnInit { this.updateUser(); } } - console.log(`Dialog result: ${result}`); }); } } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 6d05a46..5d53f26 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,5 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { BotService } from './Services/bot.service'; +import { BotSettingsComponent } from './Views/bot-settings/bot-settings.component'; import { DashboardComponent } from './Views/dashboard/dashboard.component'; import { LoginComponent } from './Views/login/login.component'; import { ProfileComponent } from './Views/profile/profile.component'; @@ -24,7 +26,7 @@ const routes: Routes = [ }, { path: 'settings', - component: ProfileComponent, + component: BotSettingsComponent, }, ];