From 91159083650cb0f5af42fa76cb8de4d1ec205920 Mon Sep 17 00:00:00 2001 From: kevinpauer Date: Sun, 3 Apr 2022 22:32:20 +0200 Subject: [PATCH] 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],