Added and moved breadcrumb data to dashboard

This commit is contained in:
piratefinn 2017-06-22 16:30:35 +01:00
parent a36e8959fa
commit 750774ec5c
6 changed files with 95 additions and 25 deletions

View file

@ -1,4 +1,26 @@
<div class="animated fadeIn"> <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="row">
<div class="col-sm-6 col-lg-3"> <div class="col-sm-6 col-lg-3">
<div class="card card-inverse card-primary"> <div class="card card-inverse card-primary">

View file

@ -7,10 +7,14 @@ import { Router } from '@angular/router';
templateUrl: 'dashboard.component.html' templateUrl: 'dashboard.component.html'
}) })
export class DashboardComponent implements OnInit { 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( constructor(
private http: Http, private http: Http,
@ -21,20 +25,30 @@ export class DashboardComponent implements OnInit {
.subscribe( .subscribe(
result => { result => {
console.log(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'; public brandPrimary = '#20a8d8';

View file

@ -4,12 +4,14 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DashboardComponent } from './dashboard.component'; import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module'; import { DashboardRoutingModule } from './dashboard-routing.module';
import { CommonModule } from '@angular/common';
@NgModule({ @NgModule({
imports: [ imports: [
DashboardRoutingModule, DashboardRoutingModule,
ChartsModule, ChartsModule,
BsDropdownModule BsDropdownModule,
CommonModule
], ],
declarations: [ DashboardComponent ] declarations: [ DashboardComponent ]
}) })

View file

@ -140,11 +140,13 @@
<app-breadcrumbs></app-breadcrumbs> <app-breadcrumbs></app-breadcrumbs>
<!-- Breadcrumb Menu--> <!-- Breadcrumb Menu-->
<li class="breadcrumb-menu d-md-down-none"> <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> </li>
</ol> </ol>

View file

@ -8,10 +8,27 @@ import { Router } from '@angular/router';
providers: [ApiService] providers: [ApiService]
}) })
export class FullLayoutComponent implements OnInit { export class FullLayoutComponent implements OnInit {
customersThisMonth: any;
moneySpentThisMonth: any;
pointsTotal: any;
averageTransactionToday: any;
constructor( constructor(
private api: ApiService, private api: ApiService,
private router: Router, 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 disabled = false;
public status: {isopen: boolean} = {isopen: false}; public status: {isopen: boolean} = {isopen: false};

View file

@ -84,7 +84,20 @@ export class ApiService {
).map( response => response.json() ); ).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) { public graph_data(data) {
return Observable.of( return Observable.of(