Improve Http Request

frontend/src/app/Helpers/auth.interceptor.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/common/http';
 import { TokenStorageService } from '../Services/token.service';
 import { Observable } from 'rxjs';
-const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
+const TOKEN_HEADER_KEY = 'Authorization';
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   constructor(private token: TokenStorageService) {}

frontend/src/app/Helpers/helper.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HelperService } from './helper.service';
+
+describe('HelperService', () => {
+  let service: HelperService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HelperService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/Helpers/helper.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { Stock } from '../Models/stock.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HelperService {
+
+  constructor() { }
+}

frontend/src/app/Models/stock.model.ts

@@ -0,0 +1,6 @@
+export class Stock {
+  count = 0;
+  price = 0;
+  symbol = '';
+  time = '';
+}

frontend/src/app/Services/data.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { delay, Observable } from 'rxjs';
 import { TokenStorageService } from './token.service';
 const API_URL = 'https://aktienbot.flokaiser.com/api/';
 @Injectable({
@@ -12,26 +12,32 @@ export class DataService {
     private tokenStorage: TokenStorageService
   ) {}
 
-  headers = new HttpHeaders({
-    'Content-Type': 'application/json',
-    Authorization: 'Bearer ' + this.tokenStorage.getToken(),
-  });
-
-  async getStockData() {
-    await this.http
-      .get(API_URL + 'portfolio', {
-        headers: this.headers,
-        responseType: 'text',
-      })
-      .subscribe((data) => {
-        console.log(data);
-        return data;
-      });
+  public getStockData(): Observable<any> {
+    return this.http.get(API_URL + 'portfolio', {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
+      responseType: 'text',
+    });
   }
 
-  getKeywords(): Observable<any> {
+  public getTransactionData(): Observable<any> {
+    return this.http.get(API_URL + 'transactions', {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
+      responseType: 'text',
+    });
+  }
+
+  public getKeywords(): Observable<any> {
     return this.http.get(API_URL + 'keywords', {
-      headers: this.headers,
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      }),
       responseType: 'text',
     });
   }

frontend/src/app/Views/dashboard/dashboard.component.html

@@ -64,7 +64,39 @@
       <div class="heading fix-right-side">
         <div class="vertical-center">Transaktionen</div>
       </div>
-      <mat-card class="placeholder"></mat-card>
+      <div class="stockTable">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+          <!--- Note that these columns can be defined in any order.
+                The actual rendered columns are set as a property on the row definition" -->
+
+          <!-- Position Column -->
+          <ng-container matColumnDef="position">
+            <th mat-header-cell *matHeaderCellDef>Count</th>
+            <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>Pirce</th>
+            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+          </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container matColumnDef="weight">
+            <th mat-header-cell *matHeaderCellDef>Symbol</th>
+            <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="symbol">
+            <th mat-header-cell *matHeaderCellDef>Time</th>
+            <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+      </div>
     </div>
   </mat-grid-tile>
 </mat-grid-list>

frontend/src/app/Views/dashboard/dashboard.component.ts

@@ -1,6 +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';
 
 export interface PeriodicElement {
   name: string;
@@ -49,11 +50,15 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class DashboardComponent implements OnInit {
   constructor(private dataService: DataService) {}
-
-  //TODO avoid using ngOnInit() like this
-  //TODO fix server problems
-  async ngOnInit() {
-    const data = await this.dataService.getStockData();
+  ngOnInit() {
+    this.dataService.getStockData().subscribe((response: any) => {
+      console.log(response);
+      //TODO map data on array for display
+    });
+    this.dataService.getTransactionData().subscribe((response: any) => {
+      console.log(response);
+      //TODO map data on array for display
+    });
   }
 
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

frontend/src/app/Views/login/login.component.ts

@@ -29,7 +29,7 @@ export class LoginComponent implements OnInit {
     private router: Router
   ) {}
 
-  //ngOnInit() checks if a
+  //ngOnInit() checks if a user is logged in
   ngOnInit(): void {
     this.tokenStorage.signOut();
     if (this.tokenStorage.getToken()) {