Add basic dashboard

webservice/Frontend/Aktienbot/src/app/Views/dashboard/dashboard.component.html

@@ -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>

webservice/Frontend/Aktienbot/src/app/Views/dashboard/dashboard.component.scss

@@ -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%;
+}

webservice/Frontend/Aktienbot/src/app/Views/dashboard/dashboard.component.spec.ts

@@ -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();
+  });
+});

webservice/Frontend/Aktienbot/src/app/Views/dashboard/dashboard.component.ts

@@ -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;
+}

webservice/Frontend/Aktienbot/src/app/app.component.html

@@ -1,2 +1,3 @@
 <app-header></app-header>
-<router-outlet></router-outlet>
+<app-dashboard></app-dashboard>
+<!-- <router-outlet></router-outlet> -->

webservice/Frontend/Aktienbot/src/app/app.component.scss

@@ -0,0 +1 @@
+

webservice/Frontend/Aktienbot/src/app/app.module.ts

@@ -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],