This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit 12486c7b authored by Eduard Frankford's avatar Eduard Frankford
Browse files

achievements now with progress bars

parent aad50efe
2 merge requests!62created achievementService and separated some functionality out of...,!45Achievements
Hide whitespace changes
Inline Side-by-side
src/main/resources/META-INF/achievements_config.json 0 → 100644
+ 12
− 0
View file @ 12486c7b
{
"views": {
"More than 10 views": 10,
"More than 100 views": 100,
"More than 500 views": 500
},
"downloads": {
"More than 10 downloads": 10,
"More than 100 downloads": 100,
"More than 500 downloads": 500
}
}
src/main/webapp/app/account/achievements.component.html
+ 104
− 34
View file @ 12486c7b
<h2>Achievements</h2>
<h2>Achievements</h2>
<ul class="list-group" *ngIf="statistics">
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 500 views</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.views / 500 * 100" [striped]="true"
*ngIf="statistics?.views <= 500">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 100 views</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.views / 100 * 100" [striped]="true"
*ngIf="statistics?.views <= 100">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 10 views</div>
<div id="wide">
<ngb-progressbar *ngIf="statistics?.views <= 10" type="success" [value]="statistics?.views / 10 * 100" [striped]="true">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 500 downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / 500 * 100" [striped]="true"
*ngIf="statistics?.downloads <= 500">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 100 downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / 100 * 100" [striped]="true"
*ngIf="statistics?.downloads <= 100">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
<li class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">More than 10 downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / 10 * 100" [striped]="true"
*ngIf="statistics?.downloads <= 10">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
</div>
</div>
</li>
</ul>
<ul class="list-group" *ngIf="statistics">
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 500 views
<span *ngIf="statistics?.views <= 500" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 100 views
<span *ngIf="statistics?.views <= 100" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 10 views
<span *ngIf="statistics?.views <= 10" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 500 downloads
<span *ngIf="statistics?.downloads <= 500" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 100 downloads
<span *ngIf="statistics?.downloads <= 100" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 10 downloads
<span *ngIf="statistics?.downloads <= 10" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
</li>
</ul>
<!-- <button (click) = "getTotalNumberOfViews()" class="btn btn-primary"> Get number of views </button> -->
<!-- <button (click) = "getTotalNumberOfViews()" class="btn btn-primary"> Get number of views </button> -->
<!-- <ul class="list-group" *ngIf="statistics">
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 500 views
<span *ngIf="statistics?.views <= 500" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 100 views
<span *ngIf="statistics?.views <= 100" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 10 views
<span *ngIf="statistics?.views <= 10" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
<fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 500 downloads
<span *ngIf="statistics?.downloads <= 500"
class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 100 downloads
<span *ngIf="statistics?.downloads <= 100"
class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
More than 10 downloads
<span *ngIf="statistics?.downloads <= 10"
class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
<fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
</li>
</ul> -->
\ No newline at end of file
src/main/webapp/app/account/achievements.component.scss
+ 11
− 0
View file @ 12486c7b
......@@ -5,3 +5,14 @@
.rediconcolor {
color: darkred;
}
#parent {
display: flex;
}
#narrow {
width: 200px;
}
#wide {
flex: 1;
/* Grow to rest of container */
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment