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

Merge pull request #51 from Pear-Trading/finn/loopdashboard

Browse source 
Added loops to customer dashboard
This commit is contained in:
Finn 2017-12-20 13:25:33 +00:00 committed by GitHub
commit 60cbb57a9c
4 changed files with 63 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
src/app/dashboard/dashboard-customer.component.html
View file

@ -19,85 +19,52 @@
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title float-left mb-0">Purchases Per Week</h4> <h4 class="card-title float-left mb-0">Purchases by Week</h4>
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
<ul class="horizontal-bars type-2"> <ul class="horizontal-bars type-2">
<li> <li>
<span class="title">This Week</span> <span class="title">This Week</span>
<span class="value">{{ (weekPurchaseList.week_0 || 0 ) }} <span <span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
class="text-muted small">({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span> ({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div> [style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<span class="title">Last Week</span> <span class="title">Last Week</span>
<span class="value">{{ weekPurchaseList.week_1 || 0 }} <span <span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
class="text-muted small">({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span> ({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div> [style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<span class="title">2 Weeks Ago</span> <span class="title">Week Maximum</span>
<span class="value">{{ weekPurchaseList.week_2 || 0 }} <span <span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
class="text-muted small">({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span> (100%)</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div> style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<span class="title">3 Weeks Ago</span> <span class="title">Weekly Average</span>
<span class="value">{{ weekPurchaseList.week_3 || 0 }} <span <span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} <span class="text-muted small">
class="text-muted small">({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span> ({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars"> <div class="bars">
<div class="progress" style="height: 6px;"> <div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" <div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div> [style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">4 Weeks Ago</span>
<span class="value">{{ weekPurchaseList.week_4 || 0 }} <span
class="text-muted small">({{ (weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">5 Weeks Ago</span>
<span class="value">{{ weekPurchaseList.week_5 || 0 }} <span
class="text-muted small">({{ (weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">6 Weeks Ago</span>
<span class="value">{{ weekPurchaseList.week_6 || 0 }} <span
class="text-muted small">({{ (weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</li> </li>
@ -116,82 +83,19 @@
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
<ul class="icons-list"> <ul class="icons-list">
<li> <!-- New loop -->
<i [ngClass]="sectorIcons [sectorLetters[0]] || 'icon-question'" class="bg-primary"></i> <li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; let i=index">
<i [ngClass]="sectorIcons [sector] || 'icon-question'" class="bg-primary"></i>
<div class="desc"> <div class="desc">
<div class="title">Sector {{ sectorLetters[0] || 'N/A' }}</div> <div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
<div><small>{{ sectorNames [sectorLetters[0]] }}</small></div>
</div> </div>
<div class="value"> <div class="value">
<div class="small text-muted">Bought from Sector</div> <div class="small text-muted">Bought</div>
<strong>{{ sectorPurchases[0] || 'N/A' }}</strong> <strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
</div> </div>
</li> </li>
<li> <li *ngIf="sectorLetters.length > 10 && disableSectorButton == false" class="divider text-center">
<i [ngClass]="sectorIcons [sectorLetters[1]] || 'icon-question'" class="bg-info"></i> <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
<div class="desc">
<div class="title">Sector {{ sectorLetters[1] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[1]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[1] || 'N/A' }}</strong>
</div>
</li>
<li>
<i [ngClass]="sectorIcons [sectorLetters[2]] || 'icon-question'" class="bg-warning"></i>
<div class="desc">
<div class="title">Sector {{ sectorLetters[2] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[2]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[2] || 'N/A' }}</strong>
</div>
</li>
<li>
<i [ngClass]="sectorIcons [sectorLetters[3]] || 'icon-question'" class="bg-danger"></i>
<div class="desc">
<div class="title">Sector {{ sectorLetters[3] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[3]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[3] || 'N/A' }}</strong>
</div>
</li>
<li>
<i [ngClass]="sectorIcons [sectorLetters[4]] || 'icon-question'" class="bg-success"></i>
<div class="desc">
<div class="title">Sector {{ sectorLetters[4] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[4]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[4] || 'N/A' }}</strong>
</div>
</li>
<li>
<i [ngClass]="sectorIcons [sectorLetters[5]] || 'icon-question'" class="bg-danger"></i>
<div class="desc">
<div class="title">Sector {{ sectorLetters[5] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[5]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[5] || 'N/A' }}</strong>
</div>
</li>
<li>
<i [ngClass]="sectorIcons [sectorLetters[6]] || 'icon-question'" class="bg-warning"></i>
<div class="desc">
<div class="title">Sector {{ sectorLetters[6] || 'N/A' }}</div>
<small>{{ sectorNames [sectorLetters[6]] || 'N/A' }}</small>
</div>
<div class="value">
<div class="small text-muted">Bought from Sector</div>
<strong>{{ sectorPurchases[6] || 'N/A' }}</strong>
</div>
</li> </li>
</ul> </ul>
</div> </div>

39
src/app/dashboard/dashboard-customer.component.ts
View file

@ -20,14 +20,14 @@ export class DashboardCustomerComponent implements OnInit {
username: any; username: any;
maxPurchase: number = 0; maxPurchase: number = 0;
disableSectorButton: boolean = false;
weekPurchaseList = { weekPurchaseList = {
week_0: 0, first: 0,
week_1: 0, second: 0,
week_2: 0, max: 0,
week_3: 0, sum: 0,
week_4: 0, count: 0,
week_5: 0,
week_6: 0,
}; };
sectorNames = { sectorNames = {
@ -75,11 +75,12 @@ export class DashboardCustomerComponent implements OnInit {
R: 'icon-film', R: 'icon-film',
S: 'icon-calendar', S: 'icon-calendar',
T: 'icon-home', T: 'icon-home',
U: 'cion-globe', U: 'icon-globe',
} }
sectorLetters: string[] = []; sectorLetters: string[] = [];
sectorPurchases: number[] = []; sectorPurchases: number[] = [];
sectorLimit: number = 10;
sectorList: any; sectorList: any;
@ -130,19 +131,12 @@ export class DashboardCustomerComponent implements OnInit {
public setWeekPurchaseList (data: any) { public setWeekPurchaseList (data: any) {
this.weekPurchaseList = { this.weekPurchaseList = {
week_0: data.purchases[0], first: data.first,
week_1: data.purchases[1], second: data.second,
week_2: data.purchases[2], max: data.max,
week_3: data.purchases[3], sum: data.sum,
week_4: data.purchases[4], count: data.count,
week_5: data.purchases[5],
week_6: data.purchases[6],
}; };
this.maxPurchase = Object.keys(this.weekPurchaseList).map(key => this.weekPurchaseList[key]).reduce((a,b) => {
if (! a) { a = 0 }
if (! b) { b = 0 }
return Math.max(a,b);
});
} }
public setSectorList (data: any) { public setSectorList (data: any) {
@ -150,6 +144,11 @@ export class DashboardCustomerComponent implements OnInit {
this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]); this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
} }
public loadMore () {
this.disableSectorButton = true;
this.sectorLimit = 22;
}
ngOnInit(): void { ngOnInit(): void {
} }
} }

18
src/app/snippets/cust-snippet-bar.component.html
View file

@ -2,25 +2,25 @@
<div class="card-footer"> <div class="card-footer">
<ul> <ul>
<li class="hidden-sm-down"> <li class="hidden-sm-down">
<div class="text-muted">My Points</div> <div>My Points</div>
<strong>{{ userSum / 10 | number:'1.0-0' }}</strong> <div class="number-circle mx-auto"><strong>{{ userSum / 10 | number:'1.0-0' }}</strong></div>
</li> </li>
<li class="hidden-sm-down"> <li class="hidden-sm-down">
<div class="text-muted">My Rank</div> <div class="">My Rank</div>
<div *ngIf="userPosition == 0" class="statuscontent"> <div *ngIf="userPosition == 0" class="statuscontent">
<strong>Unranked</strong> <div class="number-circle mx-auto"><strong>Unranked</strong></div>
</div> </div>
<div *ngIf="userPosition != 0" class="statuscontent"> <div *ngIf="userPosition != 0" class="statuscontent">
<strong>{{ userPosition }}</strong> <div class="number-circle mx-auto"><strong>{{ userPosition }}</strong></div>
</div> </div>
</li> </li>
<li class="hidden-sm-down"> <li class="hidden-sm-down">
<div class="text-muted">My Total Spend</div> <div class="">My Total Spend</div>
<strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong> <div class="number-circle mx-auto"><strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
</li> </li>
<li class="hidden-sm-down"> <li class="hidden-sm-down">
<div class="text-muted">Value to Local Economy</div> <div class="">Value to Local Economy</div>
<strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong> <div class="number-circle mx-auto"><strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong></div>
</li> </li>
</ul> </ul>
</div> </div>

12
src/scss/_custom.scss
View file

@ -24,6 +24,18 @@ agm-map {
width: 15%; width: 15%;
} }
// circle for text
// TODO: Make these resize based on inside content
.number-circle {
width:24%;
border-radius:50%;
text-align:center;
padding:12% 0;
line-height:0;
position:relative;
background: #20a8d8;
color: white;
}
// white title font variant on type-2 as defined in _widgets.css // white title font variant on type-2 as defined in _widgets.css
.horizontal-bars { .horizontal-bars {
padding: 0; padding: 0;