103 lines
3.9 KiB
HTML
103 lines
3.9 KiB
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">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>
|
|
<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>Symbol</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef>Name</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Weight Column -->
|
|
<ng-container matColumnDef="weight">
|
|
<th mat-header-cell *matHeaderCellDef>Volume</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.weight }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Symbol Column -->
|
|
<ng-container matColumnDef="symbol">
|
|
<th mat-header-cell *matHeaderCellDef>Worth</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>
|
|
<!-- 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übersicht</div>
|
|
</div>
|
|
<mat-card class="placeholder"></mat-card>
|
|
</div>
|
|
</mat-grid-tile>
|
|
<!-- Transaktions -->
|
|
<mat-grid-tile colspan="1" rowspan="1" class="right-side">
|
|
<div class="depotOverview">
|
|
<div class="heading fix-right-side">
|
|
<div class="vertical-center">Transaktionen</div>
|
|
</div>
|
|
<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>
|