Lots of refactor with auth guards and functional customer routing
This commit is contained in:
piratefinn
parent
52fbda7157
commit
24037e0454
13 changed files with 143 additions and 1017 deletions
21
src/app/_guards/customer.guard.ts
Normal file
21
src/app/_guards/customer.guard.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class CustomerGuard implements CanActivate {
|
||||||
|
|
||||||
|
constructor(private router: Router) { }
|
||||||
|
|
||||||
|
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
|
||||||
|
if (localStorage.getItem('usertype') == 'customer') {
|
||||||
|
console.log('Customer logged in')
|
||||||
|
// customer logged in so return true
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// customer not logged in so redirect to org dashboard
|
||||||
|
console.log('not an customer')
|
||||||
|
this.router.navigate(['/dashboard']);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/_guards/org.guard.ts
Normal file
21
src/app/_guards/org.guard.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class OrgGuard implements CanActivate {
|
||||||
|
|
||||||
|
constructor(private router: Router) { }
|
||||||
|
|
||||||
|
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
|
||||||
|
if (localStorage.getItem('usertype') == 'organisation') {
|
||||||
|
console.log('Organisation logged in')
|
||||||
|
// org logged in so return true
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// org not logged in so redirect to customer dashboard
|
||||||
|
console.log('not an organisation')
|
||||||
|
this.router.navigate(['/dashboard-customer']);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -15,6 +15,8 @@ import { BreadcrumbsComponent } from './shared/breadcrumb.component';
|
||||||
// Routing & Guard Module
|
// Routing & Guard Module
|
||||||
import { AppRoutingModule } from './app.routing';
|
import { AppRoutingModule } from './app.routing';
|
||||||
import { AuthGuard } from './_guards/auth.guard';
|
import { AuthGuard } from './_guards/auth.guard';
|
||||||
|
import { OrgGuard } from './_guards/org.guard';
|
||||||
|
import { CustomerGuard } from './_guards/customer.guard';
|
||||||
import { ApiService } from './providers/api-service';
|
import { ApiService } from './providers/api-service';
|
||||||
|
|
||||||
import { OrgGraphsService } from './providers/org-graphs.service';
|
import { OrgGraphsService } from './providers/org-graphs.service';
|
||||||
|
|
@ -55,6 +57,8 @@ import { DashboardModule } from './dashboard/dashboard.module';
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
AuthGuard,
|
AuthGuard,
|
||||||
|
OrgGuard,
|
||||||
|
CustomerGuard,
|
||||||
ApiService,
|
ApiService,
|
||||||
OrgGraphsService,
|
OrgGraphsService,
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ export class AccountEditComponent implements OnInit {
|
||||||
full_name : ['', [Validators.required]],
|
full_name : ['', [Validators.required]],
|
||||||
display_name : ['', [Validators.required]],
|
display_name : ['', [Validators.required]],
|
||||||
});
|
});
|
||||||
|
this.accountType = localStorage.getItem('usertype');
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
@ -59,7 +60,6 @@ export class AccountEditComponent implements OnInit {
|
||||||
display_name: result.display_name,
|
display_name: result.display_name,
|
||||||
});
|
});
|
||||||
this.api.setUserInfo( result.email, result.display_name );
|
this.api.setUserInfo( result.email, result.display_name );
|
||||||
this.accountType = ( result.name == null ? 'customer' : 'organisation' );
|
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log( error._body );
|
console.log( error._body );
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
<button type="submit" (click)="postTransaction()" [disabled]="TransactionFormInvalid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
<button type="submit" (click)="postTransaction()" [disabled]="TransactionFormInvalid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div *ngIf="accountType == 'organisation'" class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<strong>Profile & Payroll Data</strong>
|
<strong>Profile & Payroll Data</strong>
|
||||||
<small>Required Data marked in <strong>bold</strong>.</small>
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
||||||
|
|
@ -178,7 +178,7 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div *ngIf="accountType == 'organisation'" class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<strong>Individual Supplier Data</strong>
|
<strong>Individual Supplier Data</strong>
|
||||||
<small>Optional but recommended.</small>
|
<small>Optional but recommended.</small>
|
||||||
|
|
@ -234,7 +234,7 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div *ngIf="accountType == 'organisation'" class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<strong>Individual Employee Data</strong>
|
<strong>Individual Employee Data</strong>
|
||||||
<small>Optional but recommended.</small>
|
<small>Optional but recommended.</small>
|
||||||
|
|
|
||||||
|
|
@ -16,11 +16,11 @@ export class AddDataComponent {
|
||||||
employeeForm: FormGroup;
|
employeeForm: FormGroup;
|
||||||
transactionForm: FormGroup;
|
transactionForm: FormGroup;
|
||||||
payrollFormStatus: any;
|
payrollFormStatus: any;
|
||||||
suppliersFormStatus: any;
|
|
||||||
singleSupplierFormStatus: any;
|
singleSupplierFormStatus: any;
|
||||||
employeeFormStatus: any;
|
employeeFormStatus: any;
|
||||||
transactionFormStatus: any;
|
transactionFormStatus: any;
|
||||||
transactionFormStatusError: string = 'Error received, please try again.';
|
transactionFormStatusError: string = 'Error received, please try again.';
|
||||||
|
accountType: any;
|
||||||
|
|
||||||
submitOrg = {
|
submitOrg = {
|
||||||
name: '',
|
name: '',
|
||||||
|
|
@ -77,6 +77,7 @@ export class AddDataComponent {
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.getMinDate();
|
this.getMinDate();
|
||||||
|
this.accountType = localStorage.getItem('usertype');
|
||||||
}
|
}
|
||||||
|
|
||||||
getMinDate(){
|
getMinDate(){
|
||||||
|
|
|
||||||
|
|
@ -2,36 +2,30 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<ul>
|
<ul>
|
||||||
<li *ngIf="showSnippet.customersthismonth" class="hidden-sm-down">
|
<li class="hidden-sm-down">
|
||||||
<div class="text-muted">Customers This Month</div>
|
<div class="text-muted">My Points</div>
|
||||||
<strong>{{customersThisMonth}}</strong>
|
<strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="showSnippet.moneyspentthismonth" class="hidden-sm-down">
|
<li class="hidden-sm-down">
|
||||||
<div class="text-muted">Money Spent This Month</div>
|
<div class="text-muted">My Rank</div>
|
||||||
<strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
|
<div *ngIf="basicStats.user_position == 0" class="statuscontent">
|
||||||
|
<strong>Unranked</strong>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="basicStats.user_position != 0" class="statuscontent">
|
||||||
|
<strong>{{ basicStats.user_position }}</strong>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="showSnippet.pointstotal" class="hidden-sm-down">
|
<li class="hidden-sm-down">
|
||||||
<div class="text-muted">Points Total</div>
|
<div class="text-muted">My Total Spend</div>
|
||||||
<strong>{{pointsTotal}}</strong>
|
<strong>{{ basicStats.user_sum | currency:'GBP':true:'1.2-2' }}</strong>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="showSnippet.averagetransactiontoday" class="hidden-sm-down">
|
<li class="hidden-sm-down">
|
||||||
<div class="text-muted">Average Transaction Today</div>
|
<div class="text-muted">Value to Local Economy</div>
|
||||||
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
|
<strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':true:'1.2-2' }}</strong>
|
||||||
</li>
|
|
||||||
<li *ngIf="showSnippet.percentownlocalsupplier" class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Local Suppliers</div>
|
|
||||||
<strong>{{percentOfLocalSuppliers}}%</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
<div class="progress progress-xs mt-2">
|
||||||
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="showSnippet.percentsinglecompetitorlocalsupplier" class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Competitor Local Suppliers</div>
|
|
||||||
<strong>{{percentOfSingleCompetitorLocalSuppliers}}%</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -39,273 +33,5 @@
|
||||||
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
|
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
|
||||||
<widget-graph *ngIf="widget.type == 'graph'" [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon"></widget-graph>
|
<widget-graph *ngIf="widget.type == 'graph'" [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon"></widget-graph>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="showGraph.noofcustomerssector" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 mb-0">{{noOfCustomersSector}}</div>
|
|
||||||
<div>No. of Customers in your Sector</div>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.percentofcustomerssector" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="h4 mb-0">{{percentOfCustomersSector}}%</div>
|
|
||||||
<div>Customers in your Sector</div>
|
|
||||||
<div class="progress progress-white progress-xs mt-3">
|
|
||||||
<div class="progress-bar" role="progressbar" [style.width]="percentOfCustomersSector + '%'" attr.aria-valuenow="{{percentOfCustomersSector}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.customerslastyear" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</button>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Customers last year</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart4Data"
|
|
||||||
[labels]="lineChart4Labels"
|
|
||||||
[options]="lineChart4Options"
|
|
||||||
[colors]="lineChart4Colours"
|
|
||||||
[legend]="lineChart4Legend"
|
|
||||||
[chartType]="lineChart4Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.returningcustomerslastweek" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</button>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Returning Customers last week</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart6Data"
|
|
||||||
[labels]="lineChart6Labels"
|
|
||||||
[options]="lineChart6Options"
|
|
||||||
[colors]="lineChart6Colours"
|
|
||||||
[legend]="lineChart6Legend"
|
|
||||||
[chartType]="lineChart6Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.returningcustomerslastmonth" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</button>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Returning Customers last month</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart7Data"
|
|
||||||
[labels]="lineChart7Labels"
|
|
||||||
[options]="lineChart7Options"
|
|
||||||
[colors]="lineChart7Colours"
|
|
||||||
[legend]="lineChart7Legend"
|
|
||||||
[chartType]="lineChart7Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.returningcustomerslastyear" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-info">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<button type="button" class="btn btn-transparent p-0 float-right">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</button>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Returning Customers last year</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart8Data"
|
|
||||||
[labels]="lineChart8Labels"
|
|
||||||
[options]="lineChart8Options"
|
|
||||||
[colors]="lineChart8Colours"
|
|
||||||
[legend]="lineChart8Legend"
|
|
||||||
[chartType]="lineChart8Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.pointsthisweek" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-warning">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<div class="btn-group float-right">
|
|
||||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Points earned this week</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="lineChart5Data"
|
|
||||||
[labels]="lineChart5Labels"
|
|
||||||
[options]="lineChart5Options"
|
|
||||||
[colors]="lineChart5Colours"
|
|
||||||
[legend]="lineChart5Legend"
|
|
||||||
[chartType]="lineChart5Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.pointslastweek" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-danger">
|
|
||||||
<div class="card-block pb-0">
|
|
||||||
<div class="btn-group float-right" dropdown>
|
|
||||||
<button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h4 class="mb-0">9.823</h4>
|
|
||||||
<p>Points earned last week</p>
|
|
||||||
</div>
|
|
||||||
<div class="chart-wrapper px-3" style="height:70px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChart1Data"
|
|
||||||
[labels]="barChart1Labels"
|
|
||||||
[options]="barChart1Options"
|
|
||||||
[colors]="barChart1Colours"
|
|
||||||
[legend]="barChart1Legend"
|
|
||||||
[chartType]="barChart1Type"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div *ngIf="showGraph.percentlocalsuppliersvscompetitor" class="col-sm-6 col-lg-3">
|
|
||||||
<div class="card card-inverse card-primary">
|
|
||||||
<div class="card-block">
|
|
||||||
<div>Your suppliers that are local vs a local competitor</div>
|
|
||||||
<ul class="horizontal-bars type-3">
|
|
||||||
<li>
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
<span class="title">Yours</span>
|
|
||||||
<span class="value">{{percentOfLocalSuppliers}}%</span>
|
|
||||||
<div class="bars">
|
|
||||||
<div class="progress progress-xs">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<i class="icon-pie-chart"></i>
|
|
||||||
<span class="title">A competitor</span>
|
|
||||||
<span class="value">{{percentOfSingleCompetitorLocalSuppliers}}%</span>
|
|
||||||
<div class="bars">
|
|
||||||
<div class="progress progress-xs">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-5">
|
|
||||||
<h4 class="card-title mb-0">Customers</h4>
|
|
||||||
<div class="small text-muted">November 2015</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
<div class="col-sm-7 hidden-sm-down">
|
|
||||||
<button type="button" class="btn btn-primary float-right"><i class="icon-cloud-download"></i></button>
|
|
||||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
|
||||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
|
||||||
<label class="btn btn-outline-secondary">
|
|
||||||
<input type="radio" name="options" id="option1"> Day
|
|
||||||
</label>
|
|
||||||
<label class="btn btn-outline-secondary active">
|
|
||||||
<input type="radio" name="options" id="option2" checked> Month
|
|
||||||
</label>
|
|
||||||
<label class="btn btn-outline-secondary">
|
|
||||||
<input type="radio" name="options" id="option3"> Year
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="mainChartData"
|
|
||||||
[labels]="mainChartLabels"
|
|
||||||
[options]="mainChartOptions"
|
|
||||||
[colors]="mainChartColours"
|
|
||||||
[legend]="mainChartLegend"
|
|
||||||
[chartType]="mainChartType"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer">
|
|
||||||
<ul>
|
|
||||||
<li class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Customers</div>
|
|
||||||
<strong>24.093 Users (20%)</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="text-muted">Pageviews</div>
|
|
||||||
<strong>78.706 Views (60%)</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="hidden-sm-down">
|
|
||||||
<div class="text-muted">New Users</div>
|
|
||||||
<strong>22.123 Users (80%)</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Bounce Rate</div>
|
|
||||||
<strong>40.15%</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,26 +5,36 @@ import { Router } from '@angular/router';
|
||||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
templateUrl: 'dashboard.component.html'
|
templateUrl: 'dashboard-customer.component.html'
|
||||||
})
|
})
|
||||||
export class DashboardComponent implements OnInit {
|
export class DashboardCustomerComponent implements OnInit {
|
||||||
shuffledArray: any;
|
|
||||||
showGraph: any;
|
|
||||||
showSnippet: any;
|
showSnippet: any;
|
||||||
customersThisMonth: any;
|
customersThisMonth: any;
|
||||||
moneySpentThisMonth: any;
|
moneySpentThisMonth: any;
|
||||||
pointsTotal: any;
|
pointsTotal: any;
|
||||||
averageTransactionToday: any;
|
averageTransactionToday: any;
|
||||||
customersThisWeek: any;
|
|
||||||
customersLastWeek: any;
|
/* Setting up dashboard's main variables*/
|
||||||
customersLastMonth: any;
|
name: any;
|
||||||
customersLastYear: any;
|
email:any;
|
||||||
pointsThisWeek: any;
|
myPearPoints: any;
|
||||||
pointsLastWeek: any;
|
trends: any;
|
||||||
percentOfCustomersSector: any;
|
myRank: any;
|
||||||
noOfCustomersSector: any;
|
username: any;
|
||||||
percentOfLocalSuppliers: any;
|
|
||||||
percentOfSingleCompetitorLocalSuppliers: any;
|
basicStats = {
|
||||||
|
today_sum: 0,
|
||||||
|
today_count: 0,
|
||||||
|
week_sum: 0,
|
||||||
|
week_count: 0,
|
||||||
|
month_sum: 0,
|
||||||
|
month_count: 0,
|
||||||
|
user_sum: 0,
|
||||||
|
user_count: 0,
|
||||||
|
global_sum: 0,
|
||||||
|
global_count: 0,
|
||||||
|
user_position: 0,
|
||||||
|
};
|
||||||
|
|
||||||
public widgetList = [
|
public widgetList = [
|
||||||
{
|
{
|
||||||
|
|
@ -45,688 +55,17 @@ export class DashboardComponent implements OnInit {
|
||||||
private http: Http,
|
private http: Http,
|
||||||
private api: ApiService,
|
private api: ApiService,
|
||||||
) {
|
) {
|
||||||
this.shuffle = this.shuffledArray;
|
this.api.basicStats().subscribe(
|
||||||
this.api.graph_data(undefined)
|
|
||||||
.subscribe(
|
|
||||||
result => {
|
result => {
|
||||||
console.log(result);
|
this.basicStats = result;
|
||||||
// Return what data to show 4 of
|
},
|
||||||
this.showGraph = result.elementstoshow.graphs;
|
error => {
|
||||||
this.showSnippet = result.elementstoshow.snippets;
|
console.log('Retrieval Error');
|
||||||
// Percentage Chart
|
console.log( error._body );
|
||||||
this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal;
|
|
||||||
this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal;
|
|
||||||
// Percentage Chart 2
|
|
||||||
this.percentOfCustomersSector = result.data.customersinsector.percent;
|
|
||||||
this.noOfCustomersSector = result.data.customersinsector.customerno;
|
|
||||||
// Chart 1
|
|
||||||
this.customersThisWeek = result.data.customersthisweek;
|
|
||||||
this.lineChart1Data[0].data = this.customersThisWeek.customerno;
|
|
||||||
this.lineChart1Labels = this.customersThisWeek.day;
|
|
||||||
// Chart 4
|
|
||||||
this.customersLastYear = result.data.customerslastyear;
|
|
||||||
this.lineChart4Data[0].data = this.customersLastYear.customerno;
|
|
||||||
this.lineChart4Labels = this.customersLastYear.month;
|
|
||||||
// Chart 5
|
|
||||||
this.pointsThisWeek = result.data.pointsthisweek;
|
|
||||||
this.lineChart5Data[0].data = this.pointsThisWeek.points;
|
|
||||||
this.lineChart5Labels = this.pointsThisWeek.day;
|
|
||||||
// Chart 6
|
|
||||||
this.pointsLastWeek = result.data.pointslastweek;
|
|
||||||
this.barChart1Data[0].data = this.pointsLastWeek.points;
|
|
||||||
this.barChart1Labels = this.pointsLastWeek.day;
|
|
||||||
// Chart 7
|
|
||||||
this.customersLastWeek = result.data.customerslastweek;
|
|
||||||
this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno;
|
|
||||||
this.lineChart6Labels = this.customersLastWeek.day;
|
|
||||||
// Chart 8
|
|
||||||
this.customersLastMonth = result.data.customerslastmonth;
|
|
||||||
this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno;
|
|
||||||
this.lineChart7Labels = this.customersLastMonth.day;
|
|
||||||
// Chart 9
|
|
||||||
this.customersLastYear = result.data.customerslastyear;
|
|
||||||
this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno;
|
|
||||||
this.lineChart8Labels = this.customersLastYear.month;
|
|
||||||
}
|
|
||||||
),
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fisher-Yates shuffle function
|
|
||||||
public shuffle(array) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
let counter = array.length;
|
|
||||||
|
|
||||||
// While there are elements in the array
|
|
||||||
while (counter > 0) {
|
|
||||||
// Pick a random index
|
|
||||||
const index = Math.floor(Math.random() * counter);
|
|
||||||
|
|
||||||
// Decrease counter by 1
|
|
||||||
counter--;
|
|
||||||
|
|
||||||
// And swap the last element with it
|
|
||||||
const temp = array[counter];
|
|
||||||
array[counter] = array[index];
|
|
||||||
array[index] = temp;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.shuffledArray = array;
|
|
||||||
resolve(true);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public brandPrimary = '#20a8d8';
|
|
||||||
public brandSuccess = '#4dbd74';
|
|
||||||
public brandInfo = '#63c2de';
|
|
||||||
public brandWarning = '#f8cb00';
|
|
||||||
public brandDanger = '#f86c6b';
|
|
||||||
|
|
||||||
// dropdown buttons
|
|
||||||
public status: { isopen } = { isopen: false };
|
|
||||||
public toggleDropdown($event: MouseEvent): void {
|
|
||||||
$event.preventDefault();
|
|
||||||
$event.stopPropagation();
|
|
||||||
this.status.isopen = !this.status.isopen;
|
|
||||||
}
|
|
||||||
|
|
||||||
// convert Hex to RGBA
|
|
||||||
public convertHex(hex: string, opacity: number) {
|
|
||||||
hex = hex.replace('#', '');
|
|
||||||
const r = parseInt(hex.substring(0, 2), 16);
|
|
||||||
const g = parseInt(hex.substring(2, 4), 16);
|
|
||||||
const b = parseInt(hex.substring(4, 6), 16);
|
|
||||||
|
|
||||||
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
|
|
||||||
return rgba;
|
|
||||||
}
|
|
||||||
|
|
||||||
// events
|
|
||||||
public chartClicked(e: any): void {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
public chartHovered(e: any): void {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
// lineChart1
|
|
||||||
public lineChart1Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart1Labels: Array<any> = [];
|
|
||||||
public lineChart1Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart1Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandPrimary,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart1Legend = false;
|
|
||||||
public lineChart1Type = 'line';
|
|
||||||
|
|
||||||
// lineChart4
|
|
||||||
public lineChart4Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series B'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart4Labels: Array<any> = [];
|
|
||||||
public lineChart4Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0.00001,
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart4Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandInfo,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart4Legend = false;
|
|
||||||
public lineChart4Type = 'line';
|
|
||||||
|
|
||||||
// lineChart6
|
|
||||||
public lineChart6Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series B'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart6Labels: Array<any> = [];
|
|
||||||
public lineChart6Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0.00001,
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart6Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandInfo,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart6Legend = false;
|
|
||||||
public lineChart6Type = 'line';
|
|
||||||
|
|
||||||
// lineChart7
|
|
||||||
public lineChart7Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series B'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart7Labels: Array<any> = [];
|
|
||||||
public lineChart7Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 2,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart7Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandInfo,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart7Legend = false;
|
|
||||||
public lineChart7Type = 'line';
|
|
||||||
|
|
||||||
// lineChart8
|
|
||||||
public lineChart8Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series B'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart8Labels: Array<any> = [];
|
|
||||||
public lineChart8Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent',
|
|
||||||
}
|
|
||||||
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
tension: 0.00001,
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart8Colours: Array<any> = [
|
|
||||||
{ // grey
|
|
||||||
backgroundColor: this.brandInfo,
|
|
||||||
borderColor: 'rgba(255,255,255,.55)'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart8Legend = false;
|
|
||||||
public lineChart8Type = 'line';
|
|
||||||
|
|
||||||
// lineChart5
|
|
||||||
public lineChart5Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Labels: Array<any> = [];
|
|
||||||
public lineChart5Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public lineChart5Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(255,255,255,.2)',
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public lineChart5Legend = false;
|
|
||||||
public lineChart5Type = 'line';
|
|
||||||
|
|
||||||
|
|
||||||
// barChart1
|
|
||||||
public barChart1Data: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [],
|
|
||||||
label: 'Series A'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart1Labels: Array<any> = [];
|
|
||||||
public barChart1Options: any = {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
barPercentage: 0.6,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public barChart1Colours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(255,255,255,.3)',
|
|
||||||
borderWidth: 0
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public barChart1Legend = false;
|
|
||||||
public barChart1Type = 'bar';
|
|
||||||
|
|
||||||
// mainChart
|
|
||||||
|
|
||||||
public random(min: number, max: number) {
|
|
||||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
||||||
}
|
|
||||||
|
|
||||||
public mainChartElements = 27;
|
|
||||||
public mainChartData1: Array<number> = [];
|
|
||||||
public mainChartData2: Array<number> = [];
|
|
||||||
public mainChartData3: Array<number> = [];
|
|
||||||
|
|
||||||
public mainChartData: Array<any> = [
|
|
||||||
{
|
|
||||||
data: this.mainChartData1,
|
|
||||||
label: 'Current'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: this.mainChartData2,
|
|
||||||
label: 'Previous'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: this.mainChartData3,
|
|
||||||
label: 'BEP'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
/* tslint:disable:max-line-length */
|
|
||||||
public mainChartLabels: Array<any> = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
||||||
/* tslint:enable:max-line-length */
|
|
||||||
public mainChartOptions: any = {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
drawOnChartArea: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
callback: function(value: any) {
|
|
||||||
return value.charAt(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true,
|
|
||||||
maxTicksLimit: 5,
|
|
||||||
stepSize: Math.ceil(250 / 5),
|
|
||||||
max: 250
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
hoverBorderWidth: 3,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public mainChartColours: Array<any> = [
|
|
||||||
{ // brandInfo
|
|
||||||
backgroundColor: this.convertHex(this.brandInfo, 10),
|
|
||||||
borderColor: this.brandInfo,
|
|
||||||
pointHoverBackgroundColor: '#fff'
|
|
||||||
},
|
|
||||||
{ // brandSuccess
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandSuccess,
|
|
||||||
pointHoverBackgroundColor: '#fff'
|
|
||||||
},
|
|
||||||
{ // brandDanger
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandDanger,
|
|
||||||
pointHoverBackgroundColor: '#fff',
|
|
||||||
borderWidth: 1,
|
|
||||||
borderDash: [8, 5]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public mainChartLegend = false;
|
|
||||||
public mainChartType = 'line';
|
|
||||||
|
|
||||||
// social box charts
|
|
||||||
|
|
||||||
public socialChartData1: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [65, 59, 84, 84, 51, 55, 40],
|
|
||||||
label: 'Facebook'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public socialChartData2: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [1, 13, 9, 17, 34, 41, 38],
|
|
||||||
label: 'Twitter'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public socialChartData3: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [78, 81, 80, 45, 34, 12, 40],
|
|
||||||
label: 'LinkedIn'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public socialChartData4: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [35, 23, 56, 22, 97, 23, 64],
|
|
||||||
label: 'Google+'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
public socialChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public socialChartOptions: any = {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
hoverBorderWidth: 3,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public socialChartColours: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'rgba(255,255,255,.1)',
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
pointHoverBackgroundColor: '#fff'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public socialChartLegend = false;
|
|
||||||
public socialChartType = 'line';
|
|
||||||
|
|
||||||
// sparkline charts
|
|
||||||
|
|
||||||
public sparklineChartData1: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [35, 23, 56, 22, 97, 23, 64],
|
|
||||||
label: 'Clients'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartData2: Array<any> = [
|
|
||||||
{
|
|
||||||
data: [65, 59, 84, 84, 51, 55, 40],
|
|
||||||
label: 'Clients'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
public sparklineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
||||||
public sparklineChartOptions: any = {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false,
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
hoverBorderWidth: 3,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public sparklineChartDefault: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: '#d1d4d7',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartPrimary: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandPrimary,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartInfo: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandInfo,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartDanger: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandDanger,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartWarning: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandWarning,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
public sparklineChartSuccess: Array<any> = [
|
|
||||||
{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: this.brandSuccess,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
public sparklineChartLegend = false;
|
|
||||||
public sparklineChartType = 'line';
|
|
||||||
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// generate random values for mainChart
|
|
||||||
for (let i = 0; i <= this.mainChartElements; i++) {
|
|
||||||
this.mainChartData1.push(this.random(50, 200));
|
|
||||||
this.mainChartData2.push(this.random(80, 100));
|
|
||||||
this.mainChartData3.push(this.random(50, 200));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,20 +18,6 @@
|
||||||
<div class="text-muted">Average Transaction Today</div>
|
<div class="text-muted">Average Transaction Today</div>
|
||||||
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
|
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="showSnippet.percentownlocalsupplier" class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Local Suppliers</div>
|
|
||||||
<strong>{{percentOfLocalSuppliers}}%</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li *ngIf="showSnippet.percentsinglecompetitorlocalsupplier" class="hidden-sm-down">
|
|
||||||
<div class="text-muted">Competitor Local Suppliers</div>
|
|
||||||
<strong>{{percentOfSingleCompetitorLocalSuppliers}}%</strong>
|
|
||||||
<div class="progress progress-xs mt-2">
|
|
||||||
<div class="progress-bar bg-info" role="progressbar" [style.width]="percentOfSingleCompetitorLocalSuppliers + '%'" attr.aria-valuenow="{{percentOfSingleCompetitorLocalSuppliers}}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||||
|
|
||||||
import { DashboardComponent } from './dashboard.component';
|
import { DashboardComponent } from './dashboard.component';
|
||||||
|
import { DashboardCustomerComponent } from './dashboard-customer.component';
|
||||||
import { AccountEditComponent } from './account-edit.component';
|
import { AccountEditComponent } from './account-edit.component';
|
||||||
import { AddDataComponent } from './add-data.component';
|
import { AddDataComponent } from './add-data.component';
|
||||||
|
|
||||||
|
|
@ -26,6 +27,7 @@ import { OrgTableComponent } from '../shared/org-table.component';
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
DashboardComponent,
|
DashboardComponent,
|
||||||
|
DashboardCustomerComponent,
|
||||||
AccountEditComponent,
|
AccountEditComponent,
|
||||||
AddDataComponent,
|
AddDataComponent,
|
||||||
OrgResultComponent,
|
OrgResultComponent,
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,11 @@ import { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { AuthGuard } from '../_guards/auth.guard';
|
import { AuthGuard } from '../_guards/auth.guard';
|
||||||
|
import { OrgGuard } from '../_guards/org.guard';
|
||||||
|
import { CustomerGuard } from '../_guards/customer.guard';
|
||||||
|
|
||||||
import { DashboardComponent } from './dashboard.component';
|
import { DashboardComponent } from './dashboard.component';
|
||||||
|
import { DashboardCustomerComponent } from './dashboard-customer.component';
|
||||||
import { FullLayoutComponent } from '../layouts/full-layout.component';
|
import { FullLayoutComponent } from '../layouts/full-layout.component';
|
||||||
import { AccountEditComponent } from './account-edit.component';
|
import { AccountEditComponent } from './account-edit.component';
|
||||||
import { AddDataComponent } from './add-data.component';
|
import { AddDataComponent } from './add-data.component';
|
||||||
|
|
@ -20,6 +23,13 @@ const routes: Routes = [
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
component: DashboardComponent,
|
component: DashboardComponent,
|
||||||
data: { title: 'Dashboard' },
|
data: { title: 'Dashboard' },
|
||||||
|
canActivate: [OrgGuard],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'dashboard-customer',
|
||||||
|
component: DashboardCustomerComponent,
|
||||||
|
data: { title: 'Customer Dashboard' },
|
||||||
|
canActivate: [CustomerGuard],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'account-edit',
|
path: 'account-edit',
|
||||||
|
|
|
||||||
|
|
@ -30,11 +30,6 @@
|
||||||
<i class="icon-speedometer"></i> Dashboard
|
<i class="icon-speedometer"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboards']">
|
|
||||||
<i class="icon-trophy"></i> Leaderboards
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
|
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
|
||||||
<i class="icon-list"></i> Add Transaction
|
<i class="icon-list"></i> Add Transaction
|
||||||
|
|
|
||||||
|
|
@ -63,9 +63,10 @@ export class ApiService {
|
||||||
result => {
|
result => {
|
||||||
this.setSessionKey(result.session_key);
|
this.setSessionKey(result.session_key);
|
||||||
this.setUserInfo(
|
this.setUserInfo(
|
||||||
data.email,
|
result.email,
|
||||||
result.display_name,
|
result.display_name
|
||||||
);
|
);
|
||||||
|
this.setUserType(result.user_type)
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
return login_event;
|
return login_event;
|
||||||
|
|
@ -73,10 +74,11 @@ export class ApiService {
|
||||||
|
|
||||||
public logout() {
|
public logout() {
|
||||||
console.log(this.sessionKey);
|
console.log(this.sessionKey);
|
||||||
|
let key = this.sessionKey;
|
||||||
return this.http.post(
|
return this.http.post(
|
||||||
this.apiUrl + '/logout',
|
this.apiUrl + '/logout',
|
||||||
{
|
{
|
||||||
session_key : this.sessionKey,
|
session_key : key,
|
||||||
}
|
}
|
||||||
).map( response => { this.removeSessionKey(); return response.json() } );
|
).map( response => { this.removeSessionKey(); return response.json() } );
|
||||||
}
|
}
|
||||||
|
|
@ -119,6 +121,13 @@ export class ApiService {
|
||||||
localStorage.setItem('displayname',display_name);
|
localStorage.setItem('displayname',display_name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Sets usertype
|
||||||
|
|
||||||
|
public setUserType(user_type: string) {
|
||||||
|
console.log("set UserType");
|
||||||
|
localStorage.setItem('usertype',user_type);
|
||||||
|
}
|
||||||
|
|
||||||
// Used for getting account details and updating
|
// Used for getting account details and updating
|
||||||
|
|
||||||
public accountFullLoad() {
|
public accountFullLoad() {
|
||||||
|
|
@ -173,15 +182,27 @@ export class ApiService {
|
||||||
// Leaderboard Api
|
// Leaderboard Api
|
||||||
|
|
||||||
public leaderboard_fetch(data) {
|
public leaderboard_fetch(data) {
|
||||||
|
let key = this.sessionKey;
|
||||||
return this.http.post(
|
return this.http.post(
|
||||||
this.apiUrl + '/stats/leaderboard',
|
this.apiUrl + '/stats/leaderboard',
|
||||||
{
|
{
|
||||||
session_key : this.sessionKey,
|
session_key : key,
|
||||||
type : data
|
type : data
|
||||||
}
|
}
|
||||||
).map( response => response.json() );
|
).map( response => response.json() );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Basic Customer User stats API
|
||||||
|
public basicStats() {
|
||||||
|
let key = this.sessionKey;
|
||||||
|
return this.http.post(
|
||||||
|
this.apiUrl + '/stats',
|
||||||
|
{
|
||||||
|
session_key : key,
|
||||||
|
}
|
||||||
|
).map( response => response.json() );
|
||||||
|
}
|
||||||
|
|
||||||
// Fake Breadcrumb data
|
// Fake Breadcrumb data
|
||||||
|
|
||||||
public breadcrumb_data(data) {
|
public breadcrumb_data(data) {
|
||||||
|
|
@ -219,12 +240,12 @@ export class ApiService {
|
||||||
},
|
},
|
||||||
"snippets" :
|
"snippets" :
|
||||||
{
|
{
|
||||||
customersthismonth: false,
|
customersthismonth: true,
|
||||||
moneyspentthismonth: true,
|
moneyspentthismonth: true,
|
||||||
pointstotal: true,
|
pointstotal: true,
|
||||||
averagetransactiontoday: false,
|
averagetransactiontoday: true,
|
||||||
percentownlocalsupplier : true,
|
percentownlocalsupplier : false,
|
||||||
percentsinglecompetitorlocalsupplier : true,
|
percentsinglecompetitorlocalsupplier : false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"data" :
|
"data" :
|
||||||
|
|
|
||||||
Reference in a new issue