Added and moved breadcrumb data to dashboard
This commit is contained in:
parent
a36e8959fa
commit
750774ec5c
6 changed files with 95 additions and 25 deletions
|
@ -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">
|
||||||
|
|
|
@ -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,18 +25,28 @@ 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;
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 ]
|
||||||
})
|
})
|
||||||
|
|
|
@ -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']"> 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="#">< Add Transaction</a>
|
<a class="btn btn-secondary" href="#"> Customers This Month: {{customersThisMonth}}</a>
|
||||||
<a class="btn btn-secondary" href="#"> Points Total: 206</a>
|
<a class="btn btn-secondary" [routerLink]="['/dashboard']"> Money Spent this Month: {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</a>
|
||||||
</div>
|
<a class="btn btn-secondary" href="#"> Points Total: {{pointsTotal}}</a>
|
||||||
|
<a class="btn btn-secondary" [routerLink]="['/dashboard']"> Average Transaction Today: {{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</a>
|
||||||
|
</div> -->
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
|
|
|
@ -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};
|
||||||
|
|
||||||
|
|
|
@ -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(
|
||||||
|
|
Reference in a new issue