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

<mat-grid-list cols="2" rowHeight="45%">
  <!-- Stocks -->
  <mat-grid-tile colspan="1" rowspan="2">
    <div class="stockOverview">
      <div class="heading">
        <div class="vertical-center">Stocks</div>
      </div>
      <mat-card class="placeholder">
        <div class="stockTableLHS">
          <table mat-table [dataSource]="dataSourceStocks">
            <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->

            <!-- Symbol Column -->
            <ng-container matColumnDef="count">
              <th mat-header-cell *matHeaderCellDef>Count</th>
              <td mat-cell *matCellDef="let element">{{ element.count }}</td>
            </ng-container>

            <!-- Count Column -->
            <ng-container matColumnDef="comment">
              <th mat-header-cell *matHeaderCellDef>Comment</th>
              <td mat-cell *matCellDef="let element">{{ element.comment }}</td>
            </ng-container>

            <!-- Time Column -->
            <ng-container matColumnDef="isin">
              <th mat-header-cell *matHeaderCellDef>ISIN/Symbol</th>
              <td mat-cell *matCellDef="let element">{{ element.isin }}</td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="current_price">
              <th mat-header-cell *matHeaderCellDef>Price</th>
              <td mat-cell *matCellDef="let element">
                {{ element.current_price }}€
              </td>
            </ng-container>

            <!-- Time Column -->
            <ng-container matColumnDef="last_transaction">
              <th mat-header-cell *matHeaderCellDef>Last Transaction</th>
              <td mat-cell *matCellDef="let element">
                {{ element.last_transaction }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumnsStocks"></tr>
            <tr
              mat-row
              *matRowDef="let row; columns: displayedColumnsStocks"
            ></tr>
          </table>
        </div>
      </mat-card>
    </div>
  </mat-grid-tile>
  <!-- Depot Overview -->
  <mat-grid-tile colspan="1" rowspan="1" class="right-side">
    <div class="depotOverview">
      <div class="heading fix-right-side">
        <div class="vertical-center">Depot</div>
      </div>
      <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">Transactions</div>
        <span class="spacer"></span>
        <button
          mat-icon-button
          class="add-icon"
          aria-label="Example icon-button with heart icon"
          [disableRipple]="true"
          (click)="openDialog()"
        >
          <mat-icon>add</mat-icon>
        </button>
      </div>
      <mat-card class="placeholderRHS"
        ><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.count }}</td>
            </ng-container>

            <!-- Comment Column -->
            <ng-container matColumnDef="comment">
              <th mat-header-cell *matHeaderCellDef>Comment</th>
              <td mat-cell *matCellDef="let element">{{ element.comment }}</td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>Price</th>
              <td mat-cell *matCellDef="let element">{{ element.price }}€</td>
            </ng-container>

            <!-- Weight Column -->
            <ng-container matColumnDef="weight">
              <th mat-header-cell *matHeaderCellDef>ISIN</th>
              <td mat-cell *matCellDef="let element">{{ element.isin }}</td>
            </ng-container>

            <!-- Symbol Column -->
            <ng-container matColumnDef="symbol">
              <th mat-header-cell *matHeaderCellDef>Time</th>
              <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></div
      ></mat-card>
    </div>
  </mat-grid-tile>
</mat-grid-list>