From fe2cc875f098e33eacfda25eb8bcaa1c7cb5e037 Mon Sep 17 00:00:00 2001 From: Felix Date: Sun, 3 Jan 2021 12:42:34 +0100 Subject: [PATCH 1/5] add component "dashboard" --- src/app/app.module.ts | 4 ++- src/app/dashboard/dashboard.component.css | 0 src/app/dashboard/dashboard.component.html | 1 + src/app/dashboard/dashboard.component.spec.ts | 25 +++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 15 +++++++++++ 5 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/dashboard.component.css create mode 100644 src/app/dashboard/dashboard.component.html create mode 100644 src/app/dashboard/dashboard.component.spec.ts create mode 100644 src/app/dashboard/dashboard.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f7197b8..5f6063d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,7 @@ import { SocketIoConfig, SocketIoModule } from 'ngx-socket-io'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from 'src/routes'; import { NotFoundComponent } from './not-found/not-found.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; @@ -22,7 +23,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; PaymentComponent, PayComponent, HelloComponent, - NotFoundComponent + NotFoundComponent, + DashboardComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..9c5fce9 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..5ec4ff8 --- /dev/null +++ b/src/app/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..38138a3 --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.css'] +}) +export class DashboardComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From c6e798716f923e5b652deae07a39523c86ca33bb Mon Sep 17 00:00:00 2001 From: Felix Date: Sun, 3 Jan 2021 12:42:34 +0100 Subject: [PATCH 2/5] merge master --- src/app/app.module.ts | 4 ++- src/app/dashboard/dashboard.component.css | 0 src/app/dashboard/dashboard.component.html | 1 + src/app/dashboard/dashboard.component.spec.ts | 25 +++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 15 +++++++++++ 5 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/dashboard.component.css create mode 100644 src/app/dashboard/dashboard.component.html create mode 100644 src/app/dashboard/dashboard.component.spec.ts create mode 100644 src/app/dashboard/dashboard.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 06874cd..f14ccd9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from 'src/routes'; import { NotFoundComponent } from './not-found/not-found.component'; import { CartComponent } from './cart/cart.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; @@ -24,7 +25,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; PayComponent, HelloComponent, NotFoundComponent, - CartComponent + CartComponent, + DashboardComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..9c5fce9 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..5ec4ff8 --- /dev/null +++ b/src/app/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..38138a3 --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.css'] +}) +export class DashboardComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From 41d5f95810a69cac766cd99093f6a88ca0ac2ed2 Mon Sep 17 00:00:00 2001 From: Felix Date: Sun, 3 Jan 2021 12:57:43 +0100 Subject: [PATCH 3/5] add login subcomponent --- src/app/app.module.ts | 4 ++- src/app/dashboard/login/login.component.css | 0 src/app/dashboard/login/login.component.html | 1 + .../dashboard/login/login.component.spec.ts | 25 +++++++++++++++++++ src/app/dashboard/login/login.component.ts | 15 +++++++++++ 5 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/app/dashboard/login/login.component.css create mode 100644 src/app/dashboard/login/login.component.html create mode 100644 src/app/dashboard/login/login.component.spec.ts create mode 100644 src/app/dashboard/login/login.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f14ccd9..bd2a24a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,6 +14,7 @@ import { AppRoutingModule } from 'src/routes'; import { NotFoundComponent } from './not-found/not-found.component'; import { CartComponent } from './cart/cart.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +import { LoginComponent } from './dashboard/login/login.component'; const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; @@ -26,7 +27,8 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; HelloComponent, NotFoundComponent, CartComponent, - DashboardComponent + DashboardComponent, + LoginComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/login/login.component.css b/src/app/dashboard/login/login.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/login/login.component.html b/src/app/dashboard/login/login.component.html new file mode 100644 index 0000000..147cfc4 --- /dev/null +++ b/src/app/dashboard/login/login.component.html @@ -0,0 +1 @@ +

login works!

diff --git a/src/app/dashboard/login/login.component.spec.ts b/src/app/dashboard/login/login.component.spec.ts new file mode 100644 index 0000000..d2c0e6c --- /dev/null +++ b/src/app/dashboard/login/login.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/login/login.component.ts b/src/app/dashboard/login/login.component.ts new file mode 100644 index 0000000..4f58421 --- /dev/null +++ b/src/app/dashboard/login/login.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.css'] +}) +export class LoginComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From 976e3aa797cd90e18027f30d63861178b85b07c4 Mon Sep 17 00:00:00 2001 From: Felix Date: Sun, 3 Jan 2021 18:55:26 +0100 Subject: [PATCH 4/5] add login with dummy Data add login page add subcomponents --- src/app/app.module.ts | 8 +- src/app/dashboard.service.spec.ts | 16 +++ src/app/dashboard.service.ts | 28 ++++ src/app/dashboard/dashboard.component.html | 3 +- src/app/dashboard/dashboard.component.ts | 3 +- src/app/dashboard/header/header.component.css | 10 ++ .../dashboard/header/header.component.html | 3 + .../dashboard/header/header.component.spec.ts | 25 ++++ src/app/dashboard/header/header.component.ts | 20 +++ src/app/dashboard/login/login.component.css | 133 ++++++++++++++++++ src/app/dashboard/login/login.component.html | 11 +- src/app/dashboard/login/login.component.ts | 22 ++- .../dashboard/overview/overview.component.css | 0 .../overview/overview.component.html | 1 + .../overview/overview.component.spec.ts | 25 ++++ .../dashboard/overview/overview.component.ts | 15 ++ src/assets/history.svg | 1 + src/routes.ts | 11 ++ 18 files changed, 329 insertions(+), 6 deletions(-) create mode 100644 src/app/dashboard.service.spec.ts create mode 100644 src/app/dashboard.service.ts create mode 100644 src/app/dashboard/header/header.component.css create mode 100644 src/app/dashboard/header/header.component.html create mode 100644 src/app/dashboard/header/header.component.spec.ts create mode 100644 src/app/dashboard/header/header.component.ts create mode 100644 src/app/dashboard/overview/overview.component.css create mode 100644 src/app/dashboard/overview/overview.component.html create mode 100644 src/app/dashboard/overview/overview.component.spec.ts create mode 100644 src/app/dashboard/overview/overview.component.ts create mode 100644 src/assets/history.svg diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bd2a24a..2d81c54 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,9 @@ import { NotFoundComponent } from './not-found/not-found.component'; import { CartComponent } from './cart/cart.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { LoginComponent } from './dashboard/login/login.component'; +import { FormsModule } from '@angular/forms'; +import { OverviewComponent } from './dashboard/overview/overview.component'; +import { DashboardHeaderComponent } from './dashboard/header/header.component'; const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; @@ -28,13 +31,16 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; NotFoundComponent, CartComponent, DashboardComponent, - LoginComponent + LoginComponent, + OverviewComponent, + DashboardHeaderComponent ], imports: [ BrowserModule, QRCodeModule, HttpClientModule, AppRoutingModule, + FormsModule, SocketIoModule.forRoot(config) ], providers: [], diff --git a/src/app/dashboard.service.spec.ts b/src/app/dashboard.service.spec.ts new file mode 100644 index 0000000..79e72a6 --- /dev/null +++ b/src/app/dashboard.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DashboardService } from './dashboard.service'; + +describe('DashboardService', () => { + let service: DashboardService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DashboardService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard.service.ts b/src/app/dashboard.service.ts new file mode 100644 index 0000000..3b14b88 --- /dev/null +++ b/src/app/dashboard.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; + +export interface IUser { + username: string; + token: string; +} + +@Injectable({ + providedIn: 'root' +}) +export class DashboardService { + + user: IUser | undefined; + + constructor() { } + + login(username: string, password: string): boolean { + if (username === 'admin' && password === 'password') { + this.user = { + username: 'admin', + token: 'abc' + } + return true; + } else { + return false; + } + } +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 9c5fce9..8687f04 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1 +1,2 @@ -

dashboard works!

+ + \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 38138a3..b9a91a8 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { DashboardService } from '../dashboard.service'; @Component({ selector: 'app-dashboard', @@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core'; }) export class DashboardComponent implements OnInit { - constructor() { } + constructor(public dashboard: DashboardService) { } ngOnInit(): void { } diff --git a/src/app/dashboard/header/header.component.css b/src/app/dashboard/header/header.component.css new file mode 100644 index 0000000..6f04bdd --- /dev/null +++ b/src/app/dashboard/header/header.component.css @@ -0,0 +1,10 @@ +.header { + position: fixed; + top: 1rem; + left: 5vw; + width: 90vw; + margin: 0 auto; + background-color: #27293D; + z-index: 999; + border-radius: 8px; +} \ No newline at end of file diff --git a/src/app/dashboard/header/header.component.html b/src/app/dashboard/header/header.component.html new file mode 100644 index 0000000..d085ff5 --- /dev/null +++ b/src/app/dashboard/header/header.component.html @@ -0,0 +1,3 @@ +
+

HEADER

+
\ No newline at end of file diff --git a/src/app/dashboard/header/header.component.spec.ts b/src/app/dashboard/header/header.component.spec.ts new file mode 100644 index 0000000..381e8e8 --- /dev/null +++ b/src/app/dashboard/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/header/header.component.ts b/src/app/dashboard/header/header.component.ts new file mode 100644 index 0000000..1a76e2e --- /dev/null +++ b/src/app/dashboard/header/header.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { DashboardService } from 'src/app/dashboard.service'; + +@Component({ + selector: 'dashboard-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.css'] +}) +export class DashboardHeaderComponent implements OnInit { + + constructor( + public dashboard: DashboardService, + public router: Router + ) { } + + ngOnInit(): void { + } + +} diff --git a/src/app/dashboard/login/login.component.css b/src/app/dashboard/login/login.component.css index e69de29..7309446 100644 --- a/src/app/dashboard/login/login.component.css +++ b/src/app/dashboard/login/login.component.css @@ -0,0 +1,133 @@ +.frame { + background-color: #1D1D28; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + overflow: hidden; + font-family: 'Inter', sans-serif; +} + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400&display=swap'); +.btn { + display: inline-block; + *display: inline; + *zoom: 1; + padding: 4px 10px 4px; + margin-bottom: 0; + font-size: 13px; + line-height: 18px; + color: #333333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + background-color: #f5f5f5; + background-repeat: repeat-x; + border-color: #e6e6e6 #e6e6e6 #e6e6e6; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border: 1px solid #e6e6e6; + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; + *margin-left: .3em; +} + +.btn:hover, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + background-color: #e6e6e6; +} + +.btn-large { + padding: 9px 14px; + font-size: 15px; + line-height: normal; + border-radius: 5px; +} + +.btn:hover { + color: #333333; + text-decoration: none; + background-color: #e6e6e6; + background-position: 0 -15px; + transition: background-position 0.1s linear; + transition: ease 0.5; +} + +.btn-primary, +.btn-primary:hover { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + color: #ffffff; +} + +.btn-primary.active { + color: rgba(255, 255, 255, 0.75); +} + +.btn-primary { + background-color: #1D1D28; + background-image: linear-gradient(top, #6eb6de, #4a77d4); + background-repeat: repeat-x; + border: 1px solid #3762bc; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); + transition: ease; +} + +.btn-primary:hover, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + filter: none; + background-color: #4a77d4; +} + +.btn-block { + width: 100%; + display: block; +} + +* { + box-sizing: border-box; +} + +.login { + position: absolute; + top: 50%; + left: 50%; + margin: -150px 0 0 -150px; + width: 300px; + height: 300px; +} + +.login h1 { + color: #fff; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + letter-spacing: 1px; + text-align: center; + font-weight: 200; +} + +input { + width: 100%; + margin-bottom: 10px; + background: #1D1D28; + border: none; + outline: none; + padding: 10px; + font-size: 13px; + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border: 1px solid rgb(138, 138, 138); + border-radius: 4px; + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0), 0 1px 1px rgba(255, 255, 255, 0.2); + transition: box-shadow .5s ease; +} + +input:focus { + box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2); +} \ No newline at end of file diff --git a/src/app/dashboard/login/login.component.html b/src/app/dashboard/login/login.component.html index 147cfc4..ac07479 100644 --- a/src/app/dashboard/login/login.component.html +++ b/src/app/dashboard/login/login.component.html @@ -1 +1,10 @@ -

login works!

+
+ +
\ No newline at end of file diff --git a/src/app/dashboard/login/login.component.ts b/src/app/dashboard/login/login.component.ts index 4f58421..e0420ea 100644 --- a/src/app/dashboard/login/login.component.ts +++ b/src/app/dashboard/login/login.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { DashboardService } from 'src/app/dashboard.service'; @Component({ selector: 'app-login', @@ -7,9 +9,25 @@ import { Component, OnInit } from '@angular/core'; }) export class LoginComponent implements OnInit { - constructor() { } + username = ''; + password = ''; + + constructor( + public dashboard: DashboardService, + private router: Router + ) { } ngOnInit(): void { } -} + login() { + const loginStatus = this.dashboard.login(this.username, this.password); + + if (loginStatus) { + this.router.navigate(['dashboard', 'overview']); + } else { + // TODO: Meldung anzeigen + } + } + +} \ No newline at end of file diff --git a/src/app/dashboard/overview/overview.component.css b/src/app/dashboard/overview/overview.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/overview/overview.component.html b/src/app/dashboard/overview/overview.component.html new file mode 100644 index 0000000..57c67df --- /dev/null +++ b/src/app/dashboard/overview/overview.component.html @@ -0,0 +1 @@ +

overview works!

diff --git a/src/app/dashboard/overview/overview.component.spec.ts b/src/app/dashboard/overview/overview.component.spec.ts new file mode 100644 index 0000000..44a847e --- /dev/null +++ b/src/app/dashboard/overview/overview.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OverviewComponent } from './overview.component'; + +describe('OverviewComponent', () => { + let component: OverviewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ OverviewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(OverviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/overview/overview.component.ts b/src/app/dashboard/overview/overview.component.ts new file mode 100644 index 0000000..6a32601 --- /dev/null +++ b/src/app/dashboard/overview/overview.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-overview', + templateUrl: './overview.component.html', + styleUrls: ['./overview.component.css'] +}) +export class OverviewComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/assets/history.svg b/src/assets/history.svg new file mode 100644 index 0000000..9a422ca --- /dev/null +++ b/src/assets/history.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/routes.ts b/src/routes.ts index 74cce43..5dde117 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -1,11 +1,22 @@ import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; +import { DashboardComponent } from "./app/dashboard/dashboard.component"; +import { LoginComponent } from "./app/dashboard/login/login.component"; +import { OverviewComponent } from "./app/dashboard/overview/overview.component"; import { HelloComponent } from "./app/hello/hello.component"; import { NotFoundComponent } from "./app/not-found/not-found.component"; import { PayComponent } from "./app/pay/pay.component"; const routes: Routes = [ { path: 'pay/:id', component: PayComponent, data: { title: 'Payment' } }, + { path: 'dashboard', component: DashboardComponent, children: [ + { + path: 'login', component: LoginComponent + }, + { + path: 'overview', component: OverviewComponent + } + ]}, { path: '', component: HelloComponent }, { path: '**', component: NotFoundComponent } ] From c2ef9fe16d330cccd81754e051d513a7672d536e Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 6 Jan 2021 19:12:19 +0100 Subject: [PATCH 5/5] add SVG Images to HeaderBar --- src/app/dashboard/header/header.component.css | 6 ++++++ src/app/dashboard/header/header.component.html | 4 +++- src/app/dashboard/login/login.component.ts | 8 ++++++++ src/assets/admin.svg | 1 + src/assets/dash.svg | 1 + 5 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/assets/admin.svg create mode 100644 src/assets/dash.svg diff --git a/src/app/dashboard/header/header.component.css b/src/app/dashboard/header/header.component.css index 6f04bdd..8121253 100644 --- a/src/app/dashboard/header/header.component.css +++ b/src/app/dashboard/header/header.component.css @@ -7,4 +7,10 @@ background-color: #27293D; z-index: 999; border-radius: 8px; +} + +.history-svg {} + +.admin-svg { + fill: white; } \ No newline at end of file diff --git a/src/app/dashboard/header/header.component.html b/src/app/dashboard/header/header.component.html index d085ff5..f25c373 100644 --- a/src/app/dashboard/header/header.component.html +++ b/src/app/dashboard/header/header.component.html @@ -1,3 +1,5 @@
-

HEADER

+ + +
\ No newline at end of file diff --git a/src/app/dashboard/login/login.component.ts b/src/app/dashboard/login/login.component.ts index e0420ea..6b0dfe1 100644 --- a/src/app/dashboard/login/login.component.ts +++ b/src/app/dashboard/login/login.component.ts @@ -18,8 +18,16 @@ export class LoginComponent implements OnInit { ) { } ngOnInit(): void { + + const loginStatus = this.dashboard.login("admin", "password"); + if (loginStatus) { + this.router.navigate(['dashboard', 'overview']); + } else { + // TODO: Meldung anzeigen + } } + login() { const loginStatus = this.dashboard.login(this.username, this.password); diff --git a/src/assets/admin.svg b/src/assets/admin.svg new file mode 100644 index 0000000..4adef78 --- /dev/null +++ b/src/assets/admin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/dash.svg b/src/assets/dash.svg new file mode 100644 index 0000000..280d48a --- /dev/null +++ b/src/assets/dash.svg @@ -0,0 +1 @@ + \ No newline at end of file