diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 91fe33f..71faa70 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,7 +6,6 @@ import { HeaderComponent } from './header/header.component'; import { PaymentComponent } from './payment/payment.component'; import { QRCodeModule } from 'angularx-qrcode'; import { PayComponent } from './pay/pay.component'; -import { RouterModule } from '@angular/router'; import { HelloComponent } from './hello/hello.component'; import { SocketIoConfig, SocketIoModule } from 'ngx-socket-io'; import { HttpClientModule } from '@angular/common/http'; @@ -17,6 +16,9 @@ import { PushNotificationsModule } from 'ng-push-ivy'; import { ClipboardModule } from 'ngx-clipboard'; 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: {} }; @@ -30,7 +32,9 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; NotFoundComponent, CartComponent, DashboardComponent, - LoginComponent + LoginComponent, + OverviewComponent, + DashboardHeaderComponent ], imports: [ BrowserModule, @@ -39,7 +43,9 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} }; AppRoutingModule, SocketIoModule.forRoot(config), PushNotificationsModule, - ClipboardModule + ClipboardModule, + FormsModule, + SocketIoModule.forRoot(config) ], providers: [], bootstrap: [AppComponent] 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 } ]