Add depot mechanics2

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

@@ -3,7 +3,7 @@
   <mat-grid-tile colspan="1" rowspan="2">
     <div class="stockOverview">
       <div class="heading">
-        <div class="vertical-center">Aktienübersicht</div>
+        <div class="vertical-center">Stocks</div>
       </div>
       <mat-card class="placeholder">
         <div class="stockTableLHS">
@@ -51,16 +51,55 @@
   <mat-grid-tile colspan="1" rowspan="1" class="right-side">
     <div class="depotOverview">
       <div class="heading fix-right-side">
-        <div class="vertical-center">Depotübersicht</div>
+        <div class="vertical-center">Depot</div>
       </div>
-      <mat-card class="placeholderRHS"></mat-card>
+      <mat-card class="placeholderRHS content-container">
+        <div class="content">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="value-set">
+                <h3>Portfolio Value</h3>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="value-set">
+                <h3>Portfolio Cost</h3>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="value-set">
+                <h3>Portfolio Profit</h3>
+              </div>
+            </div>
+          </div>
+          <br />
+          <div class="row">
+            <div class="col-6 col-sm-4">
+              <mat-icon>savings</mat-icon
+              ><span class="money">{{ depotCurrentValue.toFixed(2) }}</span>
+            </div>
+            <div class="col-6 col-sm-4">
+              <mat-icon>paid</mat-icon
+              ><span class="money">{{ depotCost.toFixed(2) }}</span>
+            </div>
+            <div class="col-6 col-sm-4">
+              <mat-icon>account_balance</mat-icon
+              ><span
+                class="money"
+                [ngClass]="{ green: profit >= 0, red: profit < 0 }"
+                >{{ profit.toFixed(2) }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </mat-card>
     </div>
   </mat-grid-tile>
   <!-- Transaktions -->
   <mat-grid-tile colspan="1" rowspan="1" class="right-side">
     <div class="depotOverviewDown">
       <div class="heading fix-right-side">
-        <div class="vertical-center">Transaktionen</div>
+        <div class="vertical-center">Transactions</div>
         <span class="spacer"></span>
         <button
           mat-icon-button

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

@@ -13,6 +13,7 @@
   margin-top: 10%;
   margin-left: 5%;
   margin-right: 10%;
+  text-align: center;
 }
 
 .depotOverviewDown {
@@ -40,6 +41,8 @@
   width: 100%;
   position: relative;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .fix-right-side {
@@ -60,7 +63,6 @@
 
 .add-icon {
   transform: scale(2);
-  margin-top: 2%;
   outline: none !important;
 }
 
@@ -80,10 +82,32 @@ table {
   height: 80%;
 }
 
-side-heading {
-  display: inline;
-}
-
 .mat-ripple-element {
   display: none !important;
 }
+
+.money {
+  margin-left: 2vw;
+}
+
+.green {
+  color: green;
+}
+
+.red {
+  color: red;
+}
+
+.row {
+  height: 20%;
+}
+
+.content {
+  height: inherit;
+}
+
+.content-container {
+  width: 100%;
+  display: grid;
+  align-items: center;
+}

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

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { DataService } from 'src/app/Services/data.service';
 import { MatDialog } from '@angular/material/dialog';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
+import { C } from '@angular/cdk/keycodes';
+import { HelperService } from 'src/app/Helpers/helper.service';
 
 export interface PeriodicElement {
   name: string;
@@ -41,16 +43,23 @@ export interface TransactionData {
   styleUrls: ['./dashboard.component.scss'],
 })
 export class DashboardComponent implements OnInit {
-  constructor(private dataService: DataService, public dialog: MatDialog) {}
+  constructor(
+    private helper: HelperService,
+    private dataService: DataService,
+    public dialog: MatDialog
+  ) {}
 
   dataSourceTransactions: TransactionData[] = [];
   dataSourceStocks: Stock[] = [];
+  depotCurrentValue: number = 0;
+  depotCost: number = 0;
+  profit: number = 0;
 
   ngOnInit() {
     this.dataService.getStockData().subscribe((response: any) => {
-      console.log('PORTFOLIO:' + response);
       var data = JSON.parse(response);
       for (let i = 0; i < data.data.length; i++) {
+        this.depotCurrentValue += data.data[i].current_price;
         STOCK_DATA.push({
           count: data.data[i].count,
           currentPrice: data.data[i].current_price,
@@ -58,14 +67,16 @@ export class DashboardComponent implements OnInit {
           time: data.data[i].last_transaction,
         });
       }
-      console.log(STOCK_DATA);
       this.dataSourceStocks = STOCK_DATA;
       //TODO move to helper service
+
+      this.profit += this.depotCurrentValue;
     });
+
     this.dataService.getTransactionData().subscribe((response: any) => {
-      console.log('TRANSACTIONS:' + response);
       var data = JSON.parse(response);
       for (let i = 0; i < data.data.length; i++) {
+        this.depotCost += data.data[i].price;
         TRANSACTION_DATA.push({
           symbol: data.data[i].symbol,
           time: data.data[i].time,
@@ -73,9 +84,10 @@ export class DashboardComponent implements OnInit {
           price: data.data[i].price,
         });
       }
-      console.log(TRANSACTION_DATA);
       this.dataSourceTransactions = TRANSACTION_DATA;
       //TODO move to helper service
+
+      this.profit -= this.depotCost;
     });
   }