Add basic dashboard
This commit is contained in:
kevinpauer
parent
cb57a778fd
commit
2f352733d0
@ -0,0 +1,69 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<mat-card class="placeholder"></mat-card>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
@ -0,0 +1,63 @@
|
||||
// left gird
|
||||
.stockOverview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
//right grids
|
||||
.depotOverview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10%;
|
||||
margin-left: 5%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
.stockTable {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: xx-large;
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fix-right-side {
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
transform: scale(2);
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
margin-left: 2.5%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 100%;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
describe('DashboardComponent', () => {
|
||||
let component: DashboardComponent;
|
||||
let fixture: ComponentFixture<DashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
position: number;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss'],
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = ELEMENT_DATA;
|
||||
}
|
||||
@ -1,2 +1,3 @@
|
||||
<app-header></app-header>
|
||||
<router-outlet></router-outlet>
|
||||
<app-dashboard></app-dashboard>
|
||||
<!-- <router-outlet></router-outlet> -->
|
||||
|
||||
@ -4,15 +4,24 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { LoginComponent } from './Views/login/login.component';
|
||||
import { HeaderComponent } from './Views/header/header.component';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { DashboardComponent } from './Views/dashboard/dashboard.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent, LoginComponent, HeaderComponent],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
LoginComponent,
|
||||
HeaderComponent,
|
||||
DashboardComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
@ -20,6 +29,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
MatToolbarModule,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatGridListModule,
|
||||
MatCardModule,
|
||||
MatTableModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user