From cfb131b800436da99d3cbb4a64eef24debd134e9 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 15:12:49 +0100 Subject: [PATCH] Refactored snippet bar into seperate component --- src/app/app.module.ts | 2 ++ src/app/dashboard/dashboard.component.html | 23 +------------- src/app/dashboard/dashboard.component.ts | 23 ++------------ src/app/dashboard/dashboard.module.ts | 2 ++ src/app/providers/api-service.ts | 13 -------- src/app/providers/org-snippets.service.ts | 21 +++++++++++++ .../snippets/org-snippet-bar.component.html | 22 ++++++++++++++ src/app/snippets/org-snippet-bar.component.ts | 30 +++++++++++++++++++ 8 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 src/app/providers/org-snippets.service.ts create mode 100644 src/app/snippets/org-snippet-bar.component.html create mode 100644 src/app/snippets/org-snippet-bar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c9ab0fc..6b81ab1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,7 @@ import { CustomerGuard } from './_guards/customer.guard'; import { ApiService } from './providers/api-service'; import { OrgGraphsService } from './providers/org-graphs.service'; +import { OrgSnippetsService } from './providers/org-snippets.service'; // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; @@ -63,6 +64,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; CustomerGuard, ApiService, OrgGraphsService, + OrgSnippetsService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 3e10bbc..c85910e 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,26 +1,5 @@
-
-
-
    -
  • -
    Customers This Month
    - {{customersThisMonth}} -
    • -
  • -
    Money Spent This Month
    - {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}} -
    • -
  • -
    Points Total
    - {{pointsTotal}} -
    • -
  • -
    Average Transaction Today
    - {{averageTransactionToday | currency:'GBP':true:'1.2-2'}} -
    • -
-
-
+
{ - console.log(result); - this.customersThisMonth = result.customersthismonth; - this.moneySpentThisMonth = result.moneyspentthismonth; - this.pointsTotal = result.pointstotal; - this.averageTransactionToday = result.averagetransactiontoday; - } - ); + this.shuffle = this.shuffledArray; } // Fisher-Yates shuffle function diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 9ddfae6..0427e81 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -15,6 +15,7 @@ import { FeedbackComponent } from './feedback.component'; import { TransactionLogComponent } from './transaction-log.component'; import { GraphWidget } from '../widgets/graph-widget.component'; +import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.component'; @@ -43,6 +44,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone TransactionResultComponent, FeedbackComponent, GraphWidget, + OrgBarSnippetComponent, ], providers: [ CurrencyPipe diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 1be481f..3ece8ec 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -230,19 +230,6 @@ export class ApiService { ).map( response => response.json() ); } - // Fake Breadcrumb data - - public breadcrumb_data(data) { - return Observable.of( - { - "customersthismonth" : 196, - "moneyspentthismonth" : 156.02, - "pointstotal" : 506, - "averagetransactiontoday" : 3.69 - } - ) - } - // Fake chart data to mimic public graph_data(data) { diff --git a/src/app/providers/org-snippets.service.ts b/src/app/providers/org-snippets.service.ts new file mode 100644 index 0000000..310143d --- /dev/null +++ b/src/app/providers/org-snippets.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; +import { Observable } from 'rxjs/Rx'; + +@Injectable() +export class OrgSnippetsService { + private orgSnippetsUrl = '/v1/organisation/snippets'; + + constructor(private api: ApiService) { } + + public getData(): Observable { + return Observable.of( + { + 'customersthismonth' : 196, + 'moneyspentthismonth' : 156.02, + 'pointstotal' : 506, + 'averagetransactiontoday' : 3.69 + } + ); + } +} diff --git a/src/app/snippets/org-snippet-bar.component.html b/src/app/snippets/org-snippet-bar.component.html new file mode 100644 index 0000000..92c6f9a --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.html @@ -0,0 +1,22 @@ +
+
+
    +
  • +
    Customers This Month
    + {{customersThisMonth}} +
    • +
  • +
    Money Spent This Month
    + {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}} +
    • +
  • +
    Points Total
    + {{pointsTotal}} +
    • +
  • +
    Average Transaction Today
    + {{averageTransactionToday | currency:'GBP':true:'1.2-2'}} +
    • +
+
+
diff --git a/src/app/snippets/org-snippet-bar.component.ts b/src/app/snippets/org-snippet-bar.component.ts new file mode 100644 index 0000000..eed36b8 --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit } from '@angular/core'; +import { OrgSnippetsService } from '../providers/org-snippets.service'; + +@Component({ + selector: 'snippet-bar-org', + templateUrl: 'org-snippet-bar.component.html', +}) +export class OrgBarSnippetComponent implements OnInit { + + public customersThisMonth: number; + public moneySpentThisMonth: number; + public pointsTotal: number; + public averageTransactionToday: number; + + constructor( + private snippetsService: OrgSnippetsService, + ) { } + + public ngOnInit(): void { + this.snippetsService.getData() + .subscribe( + result => { + this.customersThisMonth = result.customersthismonth; + this.moneySpentThisMonth = result.moneyspentthismonth; + this.pointsTotal = result.pointstotal; + this.averageTransactionToday = result.averagetransactiontoday; + } + ); + } +}