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/auth.service.ts b/frontend/src/app/Services/auth.service.ts index c5de4fb..c011e2c 100644 --- a/frontend/src/app/Services/auth.service.ts +++ b/frontend/src/app/Services/auth.service.ts @@ -1,7 +1,8 @@ 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' }), }; @@ -11,12 +12,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/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..27c8290 --- /dev/null +++ b/frontend/src/app/Services/bot.service.ts @@ -0,0 +1,16 @@ +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 + ) {} +} diff --git a/frontend/src/app/Services/data.service.ts b/frontend/src/app/Services/data.service.ts index bbd1863..213e35b 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,42 @@ export class DataService { }); } + /** + * @param {string} symbol + * @param {Date} time + * @param {number} count + * @param {number} price + * @returns Observable + */ + public createTransaction( + symbol: string, + time: string, + count: number, + price: number + ): Observable { + 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(), + }), + } + ); + } + + /** + * @returns Observable + */ public getKeywords(): Observable { return this.http.get(API_URL + 'keywords', { headers: new HttpHeaders({ 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/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/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.html b/frontend/src/app/Views/dashboard/dashboard.component.html index 5c1b401..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 }}
-
+ + + +
+ @@ -63,40 +53,51 @@
Transaktionen
+ +
-
- - - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - -
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.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..1ac94a2 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; @@ -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,43 +23,84 @@ 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: 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) {} + + dataSourceTransactions: TransactionData[] = []; + dataSourceStocks: Stock[] = []; + ngOnInit() { this.dataService.getStockData().subscribe((response: any) => { - console.log(response); - //TODO map data on array for display + 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, + symbol: data.data[i].symbol, + time: data.data[i].last_transaction, + }); + } + console.log(STOCK_DATA); + this.dataSourceStocks = STOCK_DATA; + //TODO move to helper service }); this.dataService.getTransactionData().subscribe((response: any) => { - console.log(response); - //TODO map data on array for display + 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 move to helper service }); } - displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + 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[] = ['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 new file mode 100644 index 0000000..21b87cf --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html @@ -0,0 +1,61 @@ +

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..bc73c9b --- /dev/null +++ b/frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts @@ -0,0 +1,42 @@ +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() { + //TODO check tat price is decimal + console.log( + this.dataService + .createTransaction( + this.data.symbol, + this.data.time, + +this.data.count, + +this.data.price.toFixed(2) + ) + .subscribe((data) => { + console.log(data); + }) + ); + this.dialog.closeAll(); + } +} 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..37a5180 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..324d7a8 100644 --- a/frontend/src/app/Views/profile/profile.component.ts +++ b/frontend/src/app/Views/profile/profile.component.ts @@ -1,4 +1,11 @@ +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({ selector: 'app-profile', @@ -6,7 +13,68 @@ 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]); - ngOnInit(): void {} + userId = ''; + + form: any = { + username: null, + email: 'example@web.com', + password: 'password', + }; + + constructor( + private profileService: ProfileService, + public dialog: MatDialog + ) {} + + 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() { + if (this.userId != '') { + console.log(this.userId); + this.profileService.addTelegramId(this.userId).subscribe((result) => { + console.log(result); + }); + } + } + + updateUser() { + const { username, email, password } = this.form; + this.profileService + .updateProfile(this.form.username, this.form.password) + .subscribe((result) => { + console.log(result); + }); + } + + 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(); + } + } + }); + } } 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, }, ]; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 1e925aa..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'; @@ -10,6 +10,8 @@ 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 { MatInputModule } from '@angular/material/input'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -20,6 +22,8 @@ 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'; +import { ConfirmationDialogComponent } from './Views/profile/confirmation-dialog/confirmation-dialog.component'; @NgModule({ declarations: [ @@ -30,6 +34,8 @@ import { BotSettingsComponent } from './Views/bot-settings/bot-settings.componen RegisterComponent, ProfileComponent, BotSettingsComponent, + UserDialogComponent, + ConfirmationDialogComponent, ], imports: [ BrowserModule, @@ -44,6 +50,9 @@ import { BotSettingsComponent } from './Views/bot-settings/bot-settings.componen FormsModule, HttpClientModule, MatMenuModule, + MatDialogModule, + MatInputModule, + ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent],