Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added and moved breadcrumb data to dashboard

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/dashboard/dashboard.component.html
View file

@ -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">

46
src/app/dashboard/dashboard.component.ts
View file

@ -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,18 +25,28 @@ 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;
}
)
}

4
src/app/dashboard/dashboard.module.ts
View file

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

12
src/app/layouts/full-layout.component.html
View file

@ -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">
<a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: £364.45</a>
<a class="btn btn-secondary" href="#">< &nbsp;Add Transaction</a>
<a class="btn btn-secondary" href="#"> &nbsp;Points Total: 206</a>
</div>
<!-- Currently taking up too much space being here -->
<!-- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn btn-secondary" href="#"> &nbsp;Customers This Month: {{customersThisMonth}}</a>
<a class="btn btn-secondary" [routerLink]="['/dashboard']">&nbsp;Money Spent this Month: {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</a>
<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>

19
src/app/layouts/full-layout.component.ts
View file

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

15
src/app/providers/api-service.ts
View file

@ -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(