DHBW/TelegramAktienBot
1
0
Fork 0
Code Issues 6 Pull Requests 26 Actions Packages Projects Releases Wiki Activity

Add skeletton for profile page

Browse Source
This commit is contained in:
kevinpauer 2022-04-03 22:32:20 +02:00
parent 9de1258f7f
commit 9115908365
13 changed files with 392 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/Services/bot.service.spec.ts Normal file
View File

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

31
frontend/src/app/Services/bot.service.ts Normal file
View File

@ -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<any> {
return this.http.post(API_URL + 'telegram', {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.tokenStorage.getToken(),
}),
responseType: 'text',
telegram_user_id,
});
}
}

37
frontend/src/app/Services/data.service.ts
View File

@ -16,6 +16,42 @@ export class DataService {
private tokenStorage: TokenStorageService
) {}
/**
* @returns Observable
*/
public getUserData(): Observable<any> {
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<any> {
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<any> {
time = time + 'T12:00:00.000';
return this.http.post(API_URL + 'transactions', {
headers: new HttpHeaders({
'Content-Type': 'application/json',

2
frontend/src/app/Views/header/header.component.html
View File

@ -1,5 +1,5 @@
<mat-toolbar>
<span>Aktienbot</span>
<a href=""><span>Aktienbot</span></a>
<span class="example-spacer"></span>
<button
mat-icon-button

5
frontend/src/app/Views/header/header.component.scss
View File

@ -1,3 +1,8 @@
.example-spacer {
flex: 1 1 auto;
}
a {
color: white;
text-decoration: none; /* no underline */
}

28
frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.html Normal file
View File

@ -0,0 +1,28 @@
<div class="containeer">
<h1 mat-dialog-title>Aktion bestätigen</h1>
<div mat-dialog-content class="content">
<span>Sind sie sicher, dass sie diese Handlung abschließen wollen?</span>
</div>
<div mat-dialog-actions class="form-group footer-buttons">
<div class="inner">
<button
id="cancelButton"
class="btn btn-primary btn-block"
(click)="returnBack()"
[mat-dialog-close]="false"
>
Cancel
</button>
</div>
<div class="inner">
<button
id="okButton"
class="btn btn-danger btn-block"
(click)="confirm()"
[mat-dialog-close]="true"
>
Ok
</button>
</div>
</div>
</div>

18
frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.scss Normal file
View File

@ -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%;
}

25
frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.spec.ts Normal file
View File

@ -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<ConfirmationDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ConfirmationDialogComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ConfirmationDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

16
frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts Normal file
View File

@ -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() {}
}

136
frontend/src/app/Views/profile/profile.component.html
View File

@ -1 +1,135 @@
<p>profile works!</p>
<mat-grid-list cols="2">
<mat-grid-tile>
<mat-card class="card">
<mat-card-title class="card-title">Profile Information</mat-card-title>
<mat-card-content>
<form
class="example-form form"
name="form"
(ngSubmit)="f.form.valid && openDialog('updateUser')"
#f="ngForm"
novalidate
>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Username</mat-label>
<input
type="text"
name="username"
matInput
[formControl]="userNameFormControl"
placeholder="Ex. patrick-bateman"
[(ngModel)]="form.username"
#username
/>
<mat-error *ngIf="userNameFormControl.hasError('required')">
Username is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>{{ form.email }}</mat-label>
<input
type="email"
matInput
name="email"
disabled
placeholder="Ex. patrickbateman@example.com"
/>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Password</mat-label>
<input
type="password"
matInput
name="password"
[formControl]="passwordFormControl"
placeholder="Password"
minlength="6"
[(ngModel)]="form.password"
#password
/>
<mat-error
*ngIf="
passwordFormControl.hasError('minlength') &&
!passwordFormControl.hasError('required')
"
>
Please enter a valid password
</mat-error>
<mat-error *ngIf="passwordFormControl.hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Repeat Password</mat-label>
<input
type="password"
matInput
[formControl]="passwordFormControl"
placeholder="Ex. pat@example.com"
/>
<mat-error
*ngIf="
passwordFormControl.hasError('minLength') &&
!passwordFormControl.hasError('required')
"
>
Please enter a valid password
</mat-error>
<mat-error *ngIf="passwordFormControl.hasError('required')">
Password is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="form-group footer-buttons">
<button
class="btn btn-primary btn-block"
[disabled]="
passwordFormControl.hasError('required') ||
passwordFormControl.hasError('minLength') ||
userNameFormControl.hasError('required')
"
>
Update
</button>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-card class="card">
<mat-card-title class="card-title">Add Telegram Id</mat-card-title>
<mat-card-content>
<form
name="form"
(ngSubmit)="f.form.valid && openDialog('addTelegram')"
#f="ngForm"
novalidate
class="backgorund form"
>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Telegram UserId</mat-label>
<input
type="text"
matInput
[formControl]="telegramIdFormControl"
[(ngModel)]="userId"
required
placeholder="Ex. 123456789"
/>
<mat-error *ngIf="telegramIdFormControl.hasError('required')">
Id is <strong>required</strong>
</mat-error>
</mat-form-field>
<div class="form-group footer-buttons">
<button
class="btn btn-primary btn-block"
[disabled]="telegramIdFormControl.hasError('required')"
>
Add
</button>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>

22
frontend/src/app/Views/profile/profile.component.scss
View File

@ -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%;
}

53
frontend/src/app/Views/profile/profile.component.ts
View File

@ -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}`);
});
}
}

7
frontend/src/app/app.module.ts
View File

@ -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],