From 2aae14184423771f3a944e4cbbe8ff92216203aa Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 2 Feb 2021 10:59:22 +0100 Subject: [PATCH] + Added Dashboard Navbar + Added Transitions + Added Shadows + Added LogIn Page --- src/app/backend.service.ts | 8 ++- src/app/dashboard/dashboard.component.css | 8 +++ src/app/dashboard/dashboard.component.html | 3 +- src/app/dashboard/header/header.component.css | 56 ++++++++++++++++++- .../dashboard/header/header.component.html | 19 ++++++- .../dashboard/overview/overview.component.ts | 6 +- src/app/payment/payment.component.ts | 4 +- src/assets/admin.svg | 2 +- src/assets/dash.svg | 2 +- src/assets/dashboard.svg | 3 + src/assets/history.svg | 2 +- src/assets/settings.svg | 4 ++ 12 files changed, 102 insertions(+), 15 deletions(-) create mode 100644 src/assets/dashboard.svg create mode 100644 src/assets/settings.svg diff --git a/src/app/backend.service.ts b/src/app/backend.service.ts index e8c3e35..3981f4b 100644 --- a/src/app/backend.service.ts +++ b/src/app/backend.service.ts @@ -65,7 +65,7 @@ export interface IInvoice { }) export class BackendService { - SERVER_URL = 'http://192.168.178.26:2009'; + SERVER_URL = 'http://localhost:2009'; // Fill with empty data invoice: IInvoice = { @@ -107,7 +107,7 @@ export class BackendService { /** * Subscribe to the real-time status of the selected invoice. */ - subscribeTo(selector: string): void { + subscribeTo(): void { this.socket.on('subscribe', (status: boolean) => { if (status) { this.updateInvoice(); @@ -120,7 +120,7 @@ export class BackendService { this.confirmations = update.count; }); - this.socket.emit('subscribe', { selector }); + this.socket.emit('subscribe', { selector: this.invoice.selector }); } /** @@ -137,6 +137,8 @@ export class BackendService { */ setInvoice(selector: string): Promise { return new Promise(async (resolve, reject) => { + console.log('Sel.:', selector); + if (selector === undefined || selector === 'undefined' || selector === '') { reject('There is no selector. Please set one before calling setInvoice(...)'); return; diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css index e69de29..7f7fce2 100644 --- a/src/app/dashboard/dashboard.component.css +++ b/src/app/dashboard/dashboard.component.css @@ -0,0 +1,8 @@ +.bg { + position: fixed; + background-color: #1D1D28; + top: 0; + left: 0; + height: 100vh; + width: 100vw; +} \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 51213bf..46e1627 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,2 +1,3 @@ - +
+ \ No newline at end of file diff --git a/src/app/dashboard/header/header.component.css b/src/app/dashboard/header/header.component.css index 8121253..b2c182a 100644 --- a/src/app/dashboard/header/header.component.css +++ b/src/app/dashboard/header/header.component.css @@ -3,14 +3,64 @@ top: 1rem; left: 5vw; width: 90vw; + height: 100%; + max-height: 35px; + padding: 15px; margin: 0 auto; background-color: #27293D; z-index: 999; border-radius: 8px; + transition: .2s ease; + box-shadow: 0 1.1px 12.5px -23px rgba(0, 0, 0, 0.014), 0 2.4px 23.6px -23px rgba(0, 0, 0, 0.027), 0 4.1px 33.4px -23px rgba(0, 0, 0, 0.038), 0 6.2px 42.1px -23px rgba(0, 0, 0, 0.045), 0 8.9px 49.9px -23px rgba(0, 0, 0, 0.05), 0 12.6px 57.5px -23px rgba(0, 0, 0, 0.054), 0 17.8px 65.8px -23px rgba(0, 0, 0, 0.058), 0 25.9px 76.9px -23px rgba(0, 0, 0, 0.062), 0 39.9px 96.3px -23px rgba(0, 0, 0, 0.066), 0 71px 148px -23px rgba(0, 0, 0, 0.07); } -.history-svg {} +.header:hover { + max-height: 55px; + transition: .2s ease; +} -.admin-svg { - fill: white; +.icon::after { + content: ' '; + opacity: 0; +} + +.header:hover .icon::after { + content: "Test"; + color: white; + opacity: 1; + transition: .2s ease; + transition: .5s opacity ease; +} + +.icon:hover { + transform: translateY(-5px); +} + +.grid-container { + display: grid; + grid-template-columns: 32px 32px 1fr 32px 32px; + grid-template-rows: 1fr; + gap: 20px 30px; + grid-template-areas: "dashboard history . settings admin"; +} + +.dashboard { + grid-area: dashboard; +} + +.history { + grid-area: history; +} + +.settings { + grid-area: settings; +} + +.admin { + grid-area: admin; +} + +.icon { + grid-row: 1; + transition: .2s ease; } \ 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 f25c373..8802aea 100644 --- a/src/app/dashboard/header/header.component.html +++ b/src/app/dashboard/header/header.component.html @@ -1,5 +1,18 @@
- - - + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/dashboard/overview/overview.component.ts b/src/app/dashboard/overview/overview.component.ts index 6a32601..b233b1c 100644 --- a/src/app/dashboard/overview/overview.component.ts +++ b/src/app/dashboard/overview/overview.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { DashboardService } from 'src/app/dashboard.service'; @Component({ selector: 'app-overview', @@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core'; }) export class OverviewComponent implements OnInit { - constructor() { } + constructor(private dashboard: DashboardService) { } ngOnInit(): void { + if (this.dashboard.user === undefined) { + this.dashboard.login('admin', 'password'); + } } } diff --git a/src/app/payment/payment.component.ts b/src/app/payment/payment.component.ts index 8a7d498..7f31a53 100644 --- a/src/app/payment/payment.component.ts +++ b/src/app/payment/payment.component.ts @@ -39,7 +39,6 @@ export class PaymentComponent implements OnInit { ngOnInit(): void { this.route.params.subscribe(params => { this.paymentSelector = params.id; - this.backend.subscribeTo(this.paymentSelector); this.get(); }); @@ -126,7 +125,10 @@ export class PaymentComponent implements OnInit { } async get(): Promise { + console.log('Selector:', this.paymentSelector); + const res = await this.backend.setInvoice(this.paymentSelector); + this.backend.subscribeTo(); this.status = this.backend.getStatus(); this.backend.getConfirmation().catch(); this.ready = true; diff --git a/src/assets/admin.svg b/src/assets/admin.svg index 4adef78..5293b19 100644 --- a/src/assets/admin.svg +++ b/src/assets/admin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/dash.svg b/src/assets/dash.svg index 280d48a..8cfd9d0 100644 --- a/src/assets/dash.svg +++ b/src/assets/dash.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/dashboard.svg b/src/assets/dashboard.svg new file mode 100644 index 0000000..5d89e74 --- /dev/null +++ b/src/assets/dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/history.svg b/src/assets/history.svg index 9a422ca..10b63fc 100644 --- a/src/assets/history.svg +++ b/src/assets/history.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/settings.svg b/src/assets/settings.svg new file mode 100644 index 0000000..0cf867f --- /dev/null +++ b/src/assets/settings.svg @@ -0,0 +1,4 @@ + + + +