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

Removed redundant code and started abiliyt for customer entry

Browse source
This commit is contained in:
piratefinn 2017-08-31 16:06:47 +01:00
parent ccb743ec43
commit 52fbda7157
8 changed files with 1044 additions and 509 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/app/dashboard/add-data.component.html
View file

@ -3,7 +3,7 @@
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Submit Supplier Transaction</strong>
<strong>Submit Transaction</strong>
<small>Required Data marked in <strong>bold</strong>.</small>
</div>
<div class="card-block">
@ -178,62 +178,6 @@
</div>
</form>
</div>
<div class="card">
<div class="card-header">
<strong>Total Suppliers Data</strong>
<small>Required Data marked in <strong>bold</strong>.</small>
</div>
<form class="form-horizontal" [formGroup]="suppliersForm" (ngSubmit)="onSubmitSuppliers()">
<div class="card-block">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
<div class="col-md-9">
<input type="month" class="form-control" formControlName="entryperiod">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Spend</strong></label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="grossspend" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Suppliers</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="suppliersamount" placeholder="0">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Suppliers</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="localsuppliersamount" placeholder="0">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-9">
<div [ngSwitch]="suppliersFormStatus">
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
Submit Succeeded.
</div>
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
Error received, please try again.
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" [disabled]="!suppliersForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
</div>
</form>
</div>
<div class="card">
<div class="card-header">
<strong>Individual Supplier Data</strong>

26
src/app/dashboard/add-data.component.ts
View file

@ -12,7 +12,6 @@ import 'rxjs/add/operator/map';
})
export class AddDataComponent {
payrollForm: FormGroup;
suppliersForm: FormGroup;
singleSupplierForm: FormGroup;
employeeForm: FormGroup;
transactionForm: FormGroup;
@ -57,12 +56,6 @@ export class AddDataComponent {
payrolltotalpension: [''],
payrollotherbenefit: [''],
});
this.suppliersForm = this.formBuilder.group({
entryperiod: ['', [Validators.required]],
grossspend: ['', [Validators.required]],
suppliersamount: ['', [Validators.required]],
localsuppliersamount: ['', [Validators.required]],
});
this.singleSupplierForm = this.formBuilder.group({
entryperiod: ['', [Validators.required]],
supplierbusinessname: [''],
@ -273,25 +266,6 @@ export class AddDataComponent {
);
}
onSubmitSuppliers() {
console.log(this.suppliersForm.value);
this.api
.login(this.suppliersForm.value)
.subscribe(
result => {
console.log('data submitted!');
this.suppliersFormStatus = "success";
console.log(this.suppliersFormStatus);
},
error => {
console.log( error._body );
this.suppliersFormStatus = "send_failed";
console.log(this.suppliersFormStatus);
}
);
}
onSubmitSingleSupplier() {
console.log(this.singleSupplierForm.value);

311
src/app/dashboard/dashboard-customer.component.html Normal file
View file

@ -0,0 +1,311 @@
<div class="animated fadeIn">
<div class="card">
<div class="card-footer">
<ul>
<li *ngIf="showSnippet.customersthismonth" class="hidden-sm-down">
<div class="text-muted">Customers This Month</div>
<strong>{{customersThisMonth}}</strong>
</li>
<li *ngIf="showSnippet.moneyspentthismonth" class="hidden-sm-down">
<div class="text-muted">Money Spent This Month</div>
<strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
</li>
<li *ngIf="showSnippet.pointstotal" class="hidden-sm-down">
<div class="text-muted">Points Total</div>
<strong>{{pointsTotal}}</strong>
</li>
<li *ngIf="showSnippet.averagetransactiontoday" class="hidden-sm-down">
<div class="text-muted">Average Transaction Today</div>
<strong>{{averageTransactionToday | 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-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>
</div>
</div>
<div class="row">
<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>
</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 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>

732
src/app/dashboard/dashboard-customer.component.ts Normal file
View file

@ -0,0 +1,732 @@
import { Directive, Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router';
import { GraphWidget } from '../widgets/graph-widget.component';
@Component({
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {
shuffledArray: any;
showGraph: any;
showSnippet: any;
customersThisMonth: any;
moneySpentThisMonth: any;
pointsTotal: any;
averageTransactionToday: any;
customersThisWeek: any;
customersLastWeek: any;
customersLastMonth: any;
customersLastYear: any;
pointsThisWeek: any;
pointsLastWeek: any;
percentOfCustomersSector: any;
noOfCustomersSector: any;
percentOfLocalSuppliers: any;
percentOfSingleCompetitorLocalSuppliers: any;
public widgetList = [
{
type: 'graph',
name: 'customers_last_7_days',
icon: 'icon-people',
title: 'Customers Last 7 Days',
},
{
type: 'graph',
name: 'customers_last_30_days',
icon: 'icon-people',
title: 'Customers Last 30 Days',
},
];
constructor(
private http: Http,
private api: ApiService,
) {
this.shuffle = this.shuffledArray;
this.api.graph_data(undefined)
.subscribe(
result => {
console.log(result);
// Return what data to show 4 of
this.showGraph = result.elementstoshow.graphs;
this.showSnippet = result.elementstoshow.snippets;
// Percentage Chart
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 {
// 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));
}
}
}

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

@ -5,7 +5,6 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DashboardComponent } from './dashboard.component';
import { LeaderboardsComponent } from './leaderboards.component';
import { AccountEditComponent } from './account-edit.component';
import { AddDataComponent } from './add-data.component';
@ -27,7 +26,6 @@ import { OrgTableComponent } from '../shared/org-table.component';
],
declarations: [
DashboardComponent,
LeaderboardsComponent,
AccountEditComponent,
AddDataComponent,
OrgResultComponent,

6
src/app/dashboard/dashboard.routing.ts
View file

@ -4,7 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '../_guards/auth.guard';
import { DashboardComponent } from './dashboard.component';
import { LeaderboardsComponent } from './leaderboards.component';
import { FullLayoutComponent } from '../layouts/full-layout.component';
import { AccountEditComponent } from './account-edit.component';
import { AddDataComponent } from './add-data.component';
@ -22,11 +21,6 @@ const routes: Routes = [
component: DashboardComponent,
data: { title: 'Dashboard' },
},
{
path: 'leaderboards',
component: LeaderboardsComponent,
data: { title: 'Leaderboards' },
},
{
path: 'account-edit',
component: AccountEditComponent,

373
src/app/dashboard/leaderboards.component.html
View file

@ -1,373 +0,0 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Simple Table
</div>
<div class="card-block">
<table class="table">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samppa Nori</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<td>Estavan Lykos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
</td>
</tr>
<tr>
<td>Chetan Mohamed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-default">Inactive</span>
</td>
</tr>
<tr>
<td>Derick Maximinus</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
<tr>
<td>Friderik Dávid</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<!--/.col-->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Striped Table
</div>
<div class="card-block">
<table class="table table-striped">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yiorgos Avraamu</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<td>Avram Tarasios</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
</td>
</tr>
<tr>
<td>Quintin Ed</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-default">Inactive</span>
</td>
</tr>
<tr>
<td>Enéas Kwadwo</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
<tr>
<td>Agapetus Tadeáš</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Condensed Table
</div>
<div class="card-block">
<table class="table table-sm">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carwyn Fachtna</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<td>Nehemiah Tatius</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
</td>
</tr>
<tr>
<td>Ebbe Gemariah</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-default">Inactive</span>
</td>
</tr>
<tr>
<td>Eustorgios Amulius</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
<tr>
<td>Leopold Gáspár</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<!--/.col-->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Bordered Table
</div>
<div class="card-block">
<table class="table table-bordered">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pompeius René</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<td>Paĉjo Jadon</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
</td>
</tr>
<tr>
<td>Micheal Mercurius</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-default">Inactive</span>
</td>
</tr>
<tr>
<td>Ganesha Dubhghall</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
<tr>
<td>Hiroto Šimun</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Combined All Table
</div>
<div class="card-block">
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishnu Serghei</td>
<td>2012/01/01</td>
<td>Member</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
<tr>
<td>Zbyněk Phoibos</td>
<td>2012/02/01</td>
<td>Staff</td>
<td>
<span class="badge badge-danger">Banned</span>
</td>
</tr>
<tr>
<td>Einar Randall</td>
<td>2012/02/01</td>
<td>Admin</td>
<td>
<span class="badge badge-default">Inactive</span>
</td>
</tr>
<tr>
<td>Félix Troels</td>
<td>2012/03/01</td>
<td>Member</td>
<td>
<span class="badge badge-warning">Pending</span>
</td>
</tr>
<tr>
<td>Aulus Agmundr</td>
<td>2012/01/21</td>
<td>Staff</td>
<td>
<span class="badge badge-success">Active</span>
</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
</div>

45
src/app/dashboard/leaderboards.component.ts
View file

@ -1,45 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'leaderboards.component.html',
providers: [ApiService]
})
export class LeaderboardsComponent {
constructor(
private http: Http,
private api: ApiService,
) {
}
ngOnInit() {
this.api
// get daily total
.leaderboard_fetch('daily_total')
.subscribe(
result => {
console.log('got daily weekly leaderboard!');
console.log(result);
},
error => {
console.log( error._body );
}
);
this.api
// get daily count
.leaderboard_fetch('daily_count')
.subscribe(
result => {
console.log('got daily count leaderboard!');
console.log(result);
},
error => {
console.log( error._body );
}
);
}
}