Add data handling for transactions and stocks

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

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

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

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<any> {
-    time = time + 'T12:00:00.000';
+    time = time + 'T12:00:00.000Z';
-    return this.http.post(API_URL + 'transactions', {
+    price.toFixed(2);
-      headers: new HttpHeaders({
+    console.log(this.tokenStorage.getToken());
-        'Content-Type': 'application/json',
+    return this.http.post(
-        Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+      API_URL + 'transaction',
-      }),
+      {
-      responseType: 'text',
         count,
         price,
         symbol,
         time,
-    });
+      },
+      {
+        headers: new HttpHeaders({
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer ' + this.tokenStorage.getToken(),
+        }),
+      }
+    );
   }
 
   /**

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', () => {
+describe('TokenStorageService', () => {
-  let service: TokenService;
+  let service: TokenStorageService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(TokenService);
+    service = TestBed.inject(TokenStorageService);
   });
 
   it('should be created', () => {

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

@@ -4,49 +4,39 @@
     <div class="stockOverview">
       <div class="heading">
         <div class="vertical-center">Aktienübersicht</div>
-        <span class="spacer"></span>
-        <button
-          mat-icon-button
-          class="add-icon"
-          aria-label="Example icon-button with heart icon"
-          [disableRipple]="true"
-        >
-          <mat-icon>add</mat-icon>
-        </button>
       </div>
+      <mat-card class="placeholder">
         <div class="stockTable">
-        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+          <table mat-table [dataSource]="dataSourceTransactions">
             <!--- 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>Symbol</th>
-            <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+              <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
             </ng-container>
 
             <!-- Name Column -->
             <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Name</th>
+              <th mat-header-cell *matHeaderCellDef>Count</th>
-            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+              <td mat-cell *matCellDef="let element">{{ element.count }}</td>
             </ng-container>
 
             <!-- Weight Column -->
             <ng-container matColumnDef="weight">
-            <th mat-header-cell *matHeaderCellDef>Volume</th>
+              <th mat-header-cell *matHeaderCellDef>Time</th>
-            <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
+              <td mat-cell *matCellDef="let element">{{ element.time }}</td>
             </ng-container>
 
-          <!-- Symbol Column -->
+            <tr mat-header-row *matHeaderRowDef="displayedColumnsStocks"></tr>
-          <ng-container matColumnDef="symbol">
+            <tr
-            <th mat-header-cell *matHeaderCellDef>Worth</th>
+              mat-row
-            <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+              *matRowDef="let row; columns: displayedColumnsStocks"
-          </ng-container>
+            ></tr>
-
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
           </table>
         </div>
+      </mat-card>
     </div>
   </mat-grid-tile>
   <!-- Depot Overview -->
@@ -74,39 +64,40 @@
           <mat-icon>add</mat-icon>
         </button>
       </div>
-      <div class="stockTable">
+      <mat-card class="placeholder"
-        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+        ><div class="stockTable">
+          <table mat-table [dataSource]="dataSourceTransactions">
             <!--- 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>
+              <td mat-cell *matCellDef="let element">{{ element.count }}</td>
             </ng-container>
 
             <!-- Name Column -->
             <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>Pirce</th>
+              <th mat-header-cell *matHeaderCellDef>Price</th>
-            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+              <td mat-cell *matCellDef="let element">{{ element.price }}</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>
+              <td mat-cell *matCellDef="let element">{{ element.symbol }}</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>
+              <td mat-cell *matCellDef="let element">{{ element.time }}</td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
+          </table></div
-      </div>
+      ></mat-card>
     </div>
   </mat-grid-tile>
 </mat-grid-list>

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;
+  time: string;
-  lastTransaction: Date;
-  boughtPrice: Float32Array;
-  currentPrice: Float32Array;
 }
 
 //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;
 }

frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html

@@ -50,6 +50,7 @@
       [(ngModel)]="data.price"
       required
       #price="ngModel"
+      type="number"
     />
   </div>
   <div class="form-group footer-buttons">

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.count,
-          this.data.price
+          +this.data.price.toFixed(2)
         )
         .subscribe((data) => {
           console.log(data);