WIP: Dashboard

package.json

@@ -12,16 +12,28 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.0.5",
+    "@angular/cdk": "^11.2.1",
     "@angular/common": "~11.0.5",
     "@angular/compiler": "~11.0.5",
     "@angular/core": "~11.0.5",
     "@angular/forms": "~11.0.5",
     "@angular/platform-browser": "~11.0.5",
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
+    "@fortawesome/angular-fontawesome": "^0.8.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@ng-select/ng-select": "^6.1.0",
+    "@swimlane/ngx-charts": "^17.0.0",
     "angularx-qrcode": "^10.0.11",
+    "d3-shape": "^2.1.0",
+    "echarts": "^5.0.2",
     "ng-push-ivy": "^1.0.7",
+    "ng2-charts": "^2.4.2",
     "ngx-clipboard": "^14.0.1",
+    "ngx-echarts": "^6.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
@@ -41,6 +53,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.0.2"

src/app/app.module.ts

@@ -6,15 +6,31 @@ 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 { 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 { PushNotificationsModule } from 'ng-push-ivy';
 import { ClipboardModule } from 'ngx-clipboard';
-import { environment } from '../environments/environment';
+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';
+import { ChartComponent } from './dashboard/chart/chart.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SummaryComponent } from './dashboard/summary/summary.component';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { WidgetComponent } from './dashboard/widget/widget.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {HistoryComponent } from './dashboard/history/history.component';
+import {SettingsComponent } from './dashboard/settings/settings.component';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import {BackendInterceptor} from './interceptor';
+
+
 
 @NgModule({
   declarations: [
@@ -24,17 +40,40 @@ import { environment } from '../environments/environment';
     PayComponent,
     HelloComponent,
     NotFoundComponent,
-    CartComponent
+    CartComponent,
+    DashboardComponent,
+    LoginComponent,
+    OverviewComponent,
+    DashboardHeaderComponent,
+    ChartComponent,
+    SummaryComponent,
+    WidgetComponent,
+    HistoryComponent,
+    SettingsComponent,
+
   ],
   imports: [
     BrowserModule,
     QRCodeModule,
     HttpClientModule,
     AppRoutingModule,
     PushNotificationsModule,
-    ClipboardModule
+    ClipboardModule,
+    FormsModule,
+    NgSelectModule,
+    BrowserAnimationsModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    }),
+    FontAwesomeModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: BackendInterceptor,
+      multi: true
+    }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/backend.service.ts

@@ -79,6 +79,10 @@ export class BackendService {
     redirectTo: '',
     testnet: false
   };
+
+  private token = '';
+  isLoggedIn = false;
+
   invoiceUpdate: BehaviorSubject<IInvoice | null>;
   events: EventSource | undefined;
 
@@ -339,8 +343,42 @@ export class BackendService {
   isInvoiceRequested(): boolean {
     return this.invoice?.status === PaymentStatus.REQUESTED;
   }
+
+  getToken(): string {
+    return this.token;
+  }
+
+  login(username: string, password: string): Promise<boolean> {
+    return new Promise<boolean>((resolve, reject) => {
+      this.http.post(`${this.SERVER_URL}/user/login`, {username, password}, {
+        observe: 'body',
+        responseType: 'json'
+      }).toPromise().then((res: any) => {
+        this.token = res.token;
+        this.isLoggedIn = true;
+        resolve(true);
+      }).catch(err => {
+        resolve(false);
+        // reject(err);
+      });
+    });
+  }
+
+  getSummary(): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      this.http.get(`${this.SERVER_URL}/data/summary`).toPromise().then((res: any) => {
+        resolve(res);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+
+
 }
 
+
 interface CustomEvent extends Event {
   data: any;
 }
+

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

src/app/dashboard.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {BackendService} from './backend.service';
+
+export interface IUser {
+  username: string;
+  token: string;
+}
+
+export interface ISearchResponse {
+  status: number;
+  _id: string;
+  selector: string;
+  currency: string;
+  totalPrice: number;
+  createdAt: string;
+  updatedAt: string;
+  paymentMethod: string;
+  receiveAddress: string;
+  transcationHash: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class DashboardService {
+
+  user: IUser | undefined;
+
+  constructor(
+    private http: HttpClient,
+    private backend: BackendService
+  ) {}
+
+  getInvoices(): void {
+    // const headers = new HttpHeaders({ token: this.backend.token });
+    this.http.get('http://localhost:2009/invoice', {
+      observe: 'body',
+      responseType: 'json'
+    }).toPromise().then(res => {
+      console.log('Data:', res);
+    });
+  }
+
+}

src/app/dashboard/chart/chart.component.css

@@ -0,0 +1,27 @@
+.bg {
+    background-color: #26283A;
+    margin: 0;
+    padding: 0;
+    padding: 2rem;
+    padding-right: 2rem;
+    margin: 0 auto;
+    width: 80%;
+    border-radius: 0px 0px 5px 5px;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-template-areas:
+    "a b c d";
+}
+
+.a { grid-area: a; }
+
+.b { grid-area: b; }
+
+.c { grid-area: c; }
+
+.d { grid-area: d; }

src/app/dashboard/chart/chart.component.html

@@ -0,0 +1,10 @@
+<app-summary></app-summary>
+<div class="bg">
+    <div class="grid-container">
+      <div class="a"><dashboard-widget [icon]="money" [title]="'Income'" [content]="this.summary.income + '€'" [subcontent]="'+46.50%'"></dashboard-widget></div>
+      <div class="b"><dashboard-widget [icon]="downn" [title]="'Transactions completed'" [content]="this.summary.transactionsCompleted" [subcontent]="'+4.50%'"></dashboard-widget></div>
+      <div class="c"><dashboard-widget [icon]="failedicon" [title]="'Transactions failed'" [content]="this.summary.transactionsFailed" [subcontent]="'+-0%'"></dashboard-widget></div>
+      <div class="d"><dashboard-widget [icon]="crypto" [title]="'Top currency'" [content]="'Monero'"></dashboard-widget></div>
+    </div>
+      <div echarts [options]="chartOption" class="demo-chart"></div>
+</div>

src/app/dashboard/chart/chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/chart/chart.component.ts

@@ -0,0 +1,52 @@
+import {Component, OnInit} from '@angular/core';
+import {EChartsOption} from 'echarts';
+import {faArrowDown, faCircle, faExclamationCircle, faMoneyBill} from '@fortawesome/free-solid-svg-icons';
+import {BackendService} from '../../backend.service';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.css']
+})
+export class ChartComponent implements OnInit {
+  constructor(
+    private backend: BackendService
+  ) {
+  }
+
+  summary: any = {};
+
+  failedicon = faExclamationCircle;
+  crypto = faCircle;
+  downn = faArrowDown;
+  money = faMoneyBill;
+
+  chartOption: EChartsOption = {
+    color: ['#C61A4E'],
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+
+    tooltip: {
+      trigger: 'item',
+      showDelay: 0,
+      transitionDuration: 0.2
+    },
+
+    yAxis: {
+      type: 'value'
+    },
+    series: [{
+      data: [820, 932, 901, 934, 1290, 1330, 1320, 654, 68, 846, 987, 846, 874],
+      type: 'line',
+      smooth: true
+    }]
+  };
+
+  async ngOnInit(): Promise<void> {
+    this.summary = await this.backend.getSummary();
+  }
+
+
+}

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,13 @@
+.bg {
+    position: fixed;
+    background-color: #1D1D28;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}
+
+.spacer {
+    height: 100px;
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,5 @@
+<dashboard-header></dashboard-header>
+<div class="spacer"></div>
+<router-outlet></router-outlet>
+<div class="bg"></div>
+

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