From 750774ec5cb7d88825eb59cb0edf0fe33f84a6e7 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 22 Jun 2017 16:30:35 +0100 Subject: [PATCH] Added and moved breadcrumb data to dashboard --- src/app/dashboard/dashboard.component.html | 22 ++++++++++ src/app/dashboard/dashboard.component.ts | 48 ++++++++++++++-------- src/app/dashboard/dashboard.module.ts | 4 +- src/app/layouts/full-layout.component.html | 12 +++--- src/app/layouts/full-layout.component.ts | 19 ++++++++- src/app/providers/api-service.ts | 15 ++++++- 6 files changed, 95 insertions(+), 25 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 2b13ab5..1e97ae8 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,4 +1,26 @@
+
+
+
    +
  • +
    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/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index b6352df..64f51c2 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -7,10 +7,14 @@ import { Router } from '@angular/router'; templateUrl: 'dashboard.component.html' }) export class DashboardComponent implements OnInit { - thisweekcustomerno: any; - lastweekcustomerno: any; - thisweekpoints: any; - lastweekpoints: any; + customersThisWeek: any; + customersLastWeek: any; + pointsThisWeek: any; + pointsLastWeek: any; + customersThisMonth: any; + moneySpentThisMonth: any; + pointsTotal: any; + averageTransactionToday: any; constructor( private http: Http, @@ -21,20 +25,30 @@ export class DashboardComponent implements OnInit { .subscribe( result => { console.log(result); - this.thisweekcustomerno = result.customersthisweek; - this.lineChart1Data[0].data = this.thisweekcustomerno.customerno; - this.lineChart1Labels = this.thisweekcustomerno.day; - this.lastweekcustomerno = result.customerslastweek; - this.lineChart2Data[0].data = this.lastweekcustomerno.customerno; - this.lineChart2Labels = this.lastweekcustomerno.day; - this.thisweekpoints = result.pointsthisweek; - this.lineChart3Data[0].data = this.thisweekpoints.points; - this.lineChart3Labels = this.thisweekpoints.day; - this.lastweekpoints = result.pointslastweek; - this.barChart1Data[0].data = this.lastweekpoints.points; - this.barChart1Labels = this.lastweekpoints.day; + this.customersThisWeek = result.customersthisweek; + this.lineChart1Data[0].data = this.customersThisWeek.customerno; + this.lineChart1Labels = this.customersThisWeek.day; + this.customersLastWeek = result.customerslastweek; + this.lineChart2Data[0].data = this.customersLastWeek.customerno; + this.lineChart2Labels = this.customersLastWeek.day; + this.pointsThisWeek = result.pointsthisweek; + this.lineChart3Data[0].data = this.pointsThisWeek.points; + this.lineChart3Labels = this.pointsThisWeek.day; + this.pointsLastWeek = result.pointslastweek; + this.barChart1Data[0].data = this.pointsLastWeek.points; + this.barChart1Labels = this.pointsLastWeek.day; } - ) + ), + this.api.breadcrumb_data(undefined) + .subscribe( + result => { + console.log(result); + this.customersThisMonth = result.customersthismonth; + this.moneySpentThisMonth = result.moneyspentthismonth; + this.pointsTotal = result.pointstotal; + this.averageTransactionToday = result.averagetransactiontoday; + } + ) } public brandPrimary = '#20a8d8'; diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 6f34806..28b2ea7 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -4,12 +4,14 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { DashboardComponent } from './dashboard.component'; import { DashboardRoutingModule } from './dashboard-routing.module'; +import { CommonModule } from '@angular/common'; @NgModule({ imports: [ DashboardRoutingModule, ChartsModule, - BsDropdownModule + BsDropdownModule, + CommonModule ], declarations: [ DashboardComponent ] }) diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 960d508..15f9be9 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -140,11 +140,13 @@
  • -
    -  Money Spent this Month: £364.45 - <  Add Transaction -  Points Total: 206 -
    + +
    • diff --git a/src/app/layouts/full-layout.component.ts b/src/app/layouts/full-layout.component.ts index f5791e7..7334954 100644 --- a/src/app/layouts/full-layout.component.ts +++ b/src/app/layouts/full-layout.component.ts @@ -8,10 +8,27 @@ import { Router } from '@angular/router'; providers: [ApiService] }) export class FullLayoutComponent implements OnInit { + customersThisMonth: any; + moneySpentThisMonth: any; + pointsTotal: any; + averageTransactionToday: any; + constructor( private api: ApiService, private router: Router, - ) {} + ) { + /* this.api.breadcrumb_data(undefined) + .subscribe( + result => { + console.log(result); + this.customersThisMonth = result.customersthismonth; + this.moneySpentThisMonth = result.moneyspentthismonth; + this.pointsTotal = result.pointstotal; + this.averageTransactionToday = result.averagetransactiontoday; + } + ) */ + } + public disabled = false; public status: {isopen: boolean} = {isopen: false}; diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index bcd6f19..11091e3 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -84,7 +84,20 @@ export class ApiService { ).map( response => response.json() ); } - // Fake data to mimic + // 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) { return Observable.of(