Added and moved breadcrumb data to dashboard

src/app/dashboard/dashboard.component.html

@@ -1,4 +1,26 @@
 <div class="animated fadeIn">
+  <div class="card">
+    <div class="card-footer">
+      <ul>
+        <li class="hidden-sm-down">
+          <div class="text-muted">Customers This Month</div>
+          <strong>{{customersThisMonth}}</strong>
+        </li>
+        <li>
+          <div class="text-muted">Money Spent This Month</div>
+          <strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
+        </li>
+        <li class="hidden-sm-down">
+          <div class="text-muted">Points Total</div>
+          <strong>{{pointsTotal}}</strong>
+        </li>
+        <li class="hidden-sm-down">
+          <div class="text-muted">Average Transaction Today</div>
+          <strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
+        </li>
+      </ul>
+    </div>
+  </div>
   <div class="row">
     <div class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-primary">

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;
+  customersThisWeek: any;
-  lastweekcustomerno: any;
+  customersLastWeek: any;
-  thisweekpoints: any;
+  pointsThisWeek: any;
-  lastweekpoints: 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.customersThisWeek = result.customersthisweek;
-        this.lineChart1Data[0].data = this.thisweekcustomerno.customerno;
+        this.lineChart1Data[0].data = this.customersThisWeek.customerno;
-        this.lineChart1Labels = this.thisweekcustomerno.day;
+        this.lineChart1Labels = this.customersThisWeek.day;
-        this.lastweekcustomerno = result.customerslastweek;
+        this.customersLastWeek = result.customerslastweek;
-        this.lineChart2Data[0].data = this.lastweekcustomerno.customerno;
+        this.lineChart2Data[0].data = this.customersLastWeek.customerno;
-        this.lineChart2Labels = this.lastweekcustomerno.day;
+        this.lineChart2Labels = this.customersLastWeek.day;
-        this.thisweekpoints = result.pointsthisweek;
+        this.pointsThisWeek = result.pointsthisweek;
-        this.lineChart3Data[0].data = this.thisweekpoints.points;
+        this.lineChart3Data[0].data = this.pointsThisWeek.points;
-        this.lineChart3Labels = this.thisweekpoints.day;
+        this.lineChart3Labels = this.pointsThisWeek.day;
-        this.lastweekpoints = result.pointslastweek;
+        this.pointsLastWeek = result.pointslastweek;
-        this.barChart1Data[0].data = this.lastweekpoints.points;
+        this.barChart1Data[0].data = this.pointsLastWeek.points;
-        this.barChart1Labels = this.lastweekpoints.day;
+        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';

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 ]
 })

src/app/layouts/full-layout.component.html

@@ -140,11 +140,13 @@
       <app-breadcrumbs></app-breadcrumbs>
       <!-- Breadcrumb Menu-->
       <li class="breadcrumb-menu d-md-down-none">
-        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+        <!-- Currently taking up too much space being here -->
-          <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: £364.45</a>
+        <!-- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-          <a class="btn btn-secondary" href="#">< &nbsp;Add Transaction</a>
+          <a class="btn btn-secondary" href="#"> &nbsp;Customers This Month: {{customersThisMonth}}</a>
-          <a class="btn btn-secondary" href="#"> &nbsp;Points Total: 206</a>
+          <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</a>
-        </div>
+          <a class="btn btn-secondary" href="#"> &nbsp;Points Total: {{pointsTotal}}</a>
+          <a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Average Transaction Today: {{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</a>
+        </div> -->
       </li>
     </ol>
 

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};
 

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(