From b40a8ca801c8f12acfd774d5e60bc4d98c2a549e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radek=20Pu=C5=A1?= <pusradek@fit.cvut.cz>
Date: Sun, 8 Dec 2019 01:30:07 +0100
Subject: [PATCH] future transactions template
---
.../ClientApp/src/app/home/home.component.css | 10 +++++
.../src/app/home/home.component.html | 23 +++++++++-
.../ClientApp/src/app/home/home.component.ts | 42 ++++++++++++++++++-
3 files changed, 73 insertions(+), 2 deletions(-)
diff --git a/Core/Core/ClientApp/src/app/home/home.component.css b/Core/Core/ClientApp/src/app/home/home.component.css
index 6cc9047..1cdfeef 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.css
+++ b/Core/Core/ClientApp/src/app/home/home.component.css
@@ -18,3 +18,13 @@
.chart{
max-width: 20em;
}
+
+table {
+ width: 100%;
+}
+
+.mat-column-name {
+ max-width: 7em;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
diff --git a/Core/Core/ClientApp/src/app/home/home.component.html b/Core/Core/ClientApp/src/app/home/home.component.html
index 839b243..a2866f0 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.html
+++ b/Core/Core/ClientApp/src/app/home/home.component.html
@@ -15,7 +15,28 @@
</div>
<div class="row justify-content-center"><div class="col-md-auto"> </div></div>
<div class="row justify-content-center">
- <div id="Forecast_Table" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">forecast_table_placeholder</div></div></div>
+ <div id="Forecast_Table" class="col-md-auto, chart">
+ <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+ <!-- Position Column -->
+ <ng-container matColumnDef="position">
+ <th mat-header-cell *matHeaderCellDef> No. </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> Weight </th>
+ <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
+ <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+ </div>
<div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div>
</div>
<!--<div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>-->
diff --git a/Core/Core/ClientApp/src/app/home/home.component.ts b/Core/Core/ClientApp/src/app/home/home.component.ts
index 4be59bc..ed27bd1 100644
--- a/Core/Core/ClientApp/src/app/home/home.component.ts
+++ b/Core/Core/ClientApp/src/app/home/home.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { LoginService } from '../login/login.service';
import { Chart } from 'angular-highcharts';
import { HomeService } from './home.service';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
@Component({
selector: 'app-home',
@@ -11,6 +12,11 @@ import { HomeService } from './home.service';
})
/** home component*/
export class HomeComponent implements OnInit {
+ @ViewChild(MatPaginator, { static: true })
+ paginator: MatPaginator;
+ dataSource: MatTableDataSource<PeriodicElement>;
+ displayedColumns: string[] = ['position', 'name', 'weight'];
+
LoginStatus$: Observable<boolean>;
Username$: Observable<string>;
@@ -21,9 +27,13 @@ export class HomeComponent implements OnInit {
/** home ctor */
constructor(private LoginService: LoginService, private HomeService: HomeService) {
+ //this.dataSource = new MatTableDataSource<PeriodicElement>([]);
+ this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
}
ngOnInit() {
+ this.dataSource.paginator = this.paginator;
+
this.LoginStatus$ = this.LoginService.IsLoggedIn;
this.Username$ = this.LoginService.CurrentUsername;
this.HistoryPieChart = this.HomeService.GetHistoryPie();
@@ -35,3 +45,33 @@ export class HomeComponent implements OnInit {
this.LoginService.logout();
}
}
+
+export interface PeriodicElement {
+ name: string;
+ position: number;
+ weight: number;
+ symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+ { position: 1, name: 'HydrogennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnX', 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: 'Sodium', weight: 22.9897, symbol: 'Na' },
+ { position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
+ { position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
+ { position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
+ { position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
+ { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
+ { position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
+ { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
+ { position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
+ { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
+];
--
GitLab