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

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

progress bar dispalys numbers now, trophy beside progress bar to see what kind...

progress bar dispalys numbers now, trophy beside progress bar to see what kind of challenge the user is doing, reordered tropies, added disclaimer if no trophy has been achieved or if all trophies have been achieved, improved sql query to get both results at once, improved layout
parent 252812dc
2 merge requests!188Merging Peer Reviewing et. al to Master,!164211 peer reviewing functionality
......@@ -50,23 +50,26 @@ public class AchievementService {
}
StatisticsDTO toReturn = new StatisticsDTO();
Optional<Integer> totalAmountOfDownloads = statisticsRepository.findNumberOfDownloadsByExerciseIDs(query);
Optional<Integer> totalAmountOfViews = statisticsRepository.findNumberOfViewsByExerciseIDs(query);
// Optional<Integer> totalAmountOfDownloads = statisticsRepository.findNumberOfDownloadsByExerciseIDs(query);
// Optional<Integer> totalAmountOfViews = statisticsRepository.findNumberOfViewsByExerciseIDs(query);
if(totalAmountOfDownloads.isPresent()){
toReturn.setDownloads(totalAmountOfDownloads.get());
List<Integer[]> data = statisticsRepository.findNumberOfDownloadsAndViewsByExerciseIDs(query);
if(data.get(0)[0] != null){
toReturn.setDownloads(data.get(0)[0]);
}else {
toReturn.setDownloads(0);
}
if(totalAmountOfViews.isPresent()){
toReturn.setViews(totalAmountOfViews.get());
if(data.get(0)[1] != null){
toReturn.setViews(data.get(0)[1]);
}else {
toReturn.setViews(0);
}
log.info("Returning " + toReturn.getViews() + " views and " + toReturn.getDownloads() + " downloads");
log.info("Returning " + data.get(0)[1] + " views and " + data.get(0)[0] + " downloads");
return toReturn;
......
......@@ -6,83 +6,143 @@
<ul class="list-group" *ngIf="statistics">
<li *ngIf="statistics?.views > config.views[1] && statistics?.views <= config.views[2]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{ 'achievements.views' |
translate}}</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.views / config.views[2] * 100" [striped]="true"
*ngIf="statistics?.views <= config.views[2]">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.views > config.views[2]" class="greeniconcolor"></fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{
'achievements.views' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success" [value]="statistics?.views / config.views[2] * 100"
[striped]="true">{{statistics?.views}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="goldiconcolor"></fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
<li *ngIf="statistics?.views > config.views[0] && statistics?.views <= config.views[1]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.views[1]}} {{ 'achievements.views' |
translate}}</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.views / config.views[1] * 100" [striped]="true"
*ngIf="statistics?.views <= config.views[1]">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.views > config.views[1]" class="greeniconcolor"></fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[1]}} {{
'achievements.views' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success" [value]="statistics?.views / config.views[1] * 100"
[striped]="true">{{statistics?.views}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="silvericoncolor"></fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
<li *ngIf="statistics?.views <= config.views[0]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{ 'achievements.views' |
translate}} </div>
<div id="wide">
<ngb-progressbar *ngIf="statistics?.views <= config.views[0]" type="success"
[value]="statistics?.views / config.views[0] * 100" [striped]="true">
</ngb-progressbar>
<fa-icon *ngIf="statistics?.views > config.views[0]" icon="check" class="greeniconcolor"></fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{
'achievements.views' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success" [value]="statistics?.views / config.views[0] * 100"
[striped]="true">{{statistics?.views}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="bronzeiconcolor"></fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
<li *ngIf="statistics?.downloads > config.downloads[1] && statistics?.downloads <= config.views[2]"
<li *ngIf="statistics?.downloads > config.downloads[1] && statistics?.downloads <= config.downloads[2]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[2] * 100"
[striped]="true" *ngIf="statistics?.downloads <= config.downloads[2]">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[2]" class="greeniconcolor">
</fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} {{
'achievements.downloads' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success"
[value]="statistics?.downloads / config.downloads[2] * 100" [striped]="true">
{{statistics?.downloads}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="goldiconcolor"></fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
<li *ngIf="statistics?.downloads > config.downloads[0] && statistics?.downloads <= config.views[1]"
<li *ngIf="statistics?.downloads > config.downloads[0] && statistics?.downloads <= config.downloads[1]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.downloads[1]}} downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[1] * 100"
[striped]="true" *ngIf="statistics?.downloads <= config.downloads[1]">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[1]" class="greeniconcolor">
</fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[1]}} {{
'achievements.downloads' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success"
[value]="statistics?.downloads / config.downloads[1] * 100" [striped]="true">
{{statistics?.downloads}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="silvericoncolor">
</fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
<li *ngIf="statistics?.downloads <= config.downloads[0]"
class="list-group-item justify-content-between align-items-center">
<div id="parent">
<div id="narrow">{{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} downloads</div>
<div id="wide">
<ngb-progressbar type="success" [value]="statistics?.downloads / config.downloads[0] * 100"
[striped]="true" *ngIf="statistics?.downloads <= config.downloads[0]">
</ngb-progressbar>
<fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[0]" class="greeniconcolor">
</fa-icon>
<div class="container">
<div class="row">
<div class="col-3">{{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} {{
'achievements.downloads' |
translate}}</div>
<div class="col-9">
<div class="row">
<div class="col-11">
<ngb-progressbar type="success"
[value]="statistics?.downloads / config.downloads[0] * 100" [striped]="true">
{{statistics?.downloads}}
</ngb-progressbar>
</div>
<div class="col-1">
<fa-icon icon="trophy" class="bronzeiconcolor">
</fa-icon>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div *ngIf="statistics?.downloads > config.downloads[2] && statistics?.views > config.views[2]" > {{ 'achievements.finished' | translate}} </div>
<!-- <button (click) = "buildAchievements()" class="btn btn-primary"> Get number of views </button> -->
......@@ -126,34 +186,37 @@
<h3>{{ 'achievements.completed' | translate}}</h3>
<p></p>
<div class="grid-container" *ngIf="statistics">
<div class=" justify-content-between align-items-center">
<fa-icon *ngIf="statistics?.views > config.views[2] || statistics?.downloads > config.downloads[2]" [ngbTooltip]="helpViewsGold" icon="trophy" class="goldiconcolor big-icon"></fa-icon>
<fa-icon *ngIf="statistics?.views > config.views[0] || statistics?.downloads > config.downloads[0]"
[ngbTooltip]="helpViewsBronze" icon="trophy" class="bronzeiconcolor big-icon"></fa-icon>
<ng-template #helpViewsGold> Gold Achievements</ng-template>
<div class="justify-content-between align-items-center">
<ng-template #helpViewsBronze> Bronce achievements </ng-template>
<div class="justify-content-between align-items-center">
<div class="badge" *ngIf="statistics?.views > config.views[2]">
{{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{ 'achievements.views' |
<div class="badge" *ngIf="statistics?.views > config.views[0]">
{{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{ 'achievements.views' |
translate}}
</div>
<br>
<div class="badge" *ngIf="statistics?.downloads > config.downloads[2]">
{{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} {{ 'achievements.downloads' |
<div class="badge" *ngIf="statistics?.downloads > config.downloads[0]">
{{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} {{ 'achievements.downloads' |
translate}}
</div>
</div>
</div>
</div>
<div class="justify-content-between align-items-center">
<fa-icon *ngIf="statistics?.views > config.views[1] || statistics?.downloads > config.downloads[1]" [ngbTooltip]="helpViewsSilver" icon="trophy" class="silvericoncolor big-icon"></fa-icon>
<fa-icon *ngIf="statistics?.views > config.views[1] || statistics?.downloads > config.downloads[1]"
[ngbTooltip]="helpViewsSilver" icon="trophy" class="silvericoncolor big-icon"></fa-icon>
<ng-template #helpViewsSilver> Silver Achievements </ng-template>
......@@ -176,31 +239,32 @@
</div>
<div class=" justify-content-between align-items-center">
<fa-icon *ngIf="statistics?.views > config.views[0] || statistics?.downloads > config.downloads[0]" [ngbTooltip]="helpViewsBronze" icon="trophy" class="bronzeiconcolor big-icon"></fa-icon>
<div class=" justify-content-between align-items-center">
<ng-template #helpViewsBronze> Bronce achievements </ng-template>
<fa-icon *ngIf="statistics?.views > config.views[2] || statistics?.downloads > config.downloads[2]"
[ngbTooltip]="helpViewsGold" icon="trophy" class="goldiconcolor big-icon"></fa-icon>
<ng-template #helpViewsGold> Gold Achievements</ng-template>
<div class="justify-content-between align-items-center">
<div class="badge" *ngIf="statistics?.views > config.views[0]">
{{ 'achievements.moreThan' | translate}} {{config.views[0]}} {{ 'achievements.views' |
<div class="badge" *ngIf="statistics?.views > config.views[2]">
{{ 'achievements.moreThan' | translate}} {{config.views[2]}} {{ 'achievements.views' |
translate}}
</div>
<br>
<div class="badge" *ngIf="statistics?.downloads > config.downloads[0]">
{{ 'achievements.moreThan' | translate}} {{config.downloads[0]}} {{ 'achievements.downloads' |
<div class="badge" *ngIf="statistics?.downloads > config.downloads[2]">
{{ 'achievements.moreThan' | translate}} {{config.downloads[2]}} {{ 'achievements.downloads' |
translate}}
</div>
</div>
</div>
</div>
<div *ngIf="statistics?.downloads < config.downloads[0] && statistics?.views < config.views[0]" > {{ 'achievements.none' | translate}} </div>
</div>
\ No newline at end of file
{
"views": [10, 500, 2000],
"downloads": [10, 100, 500]
"views": [100, 500, 2000],
"downloads": [10, 50, 100]
}
......@@ -5,6 +5,8 @@
"views": "Ansichten",
"toComplete": "Nächste Erfolge",
"completed": "Erreichte Erfolge",
"downloads": "heruntergeladen"
"downloads": "heruntergeladen",
"finished": "Herzlichen Glückwunsch Sie haben bereits alle Erfolge erreicht!",
"none": "Im Moment haben Sie noch keine Erfolge abgeschlossen."
}
}
......@@ -5,6 +5,8 @@
"views": "views",
"toComplete": "In progress",
"completed": "Completed",
"downloads": "downloads"
"downloads": "downloads",
"finished": "Congratulations, you passed all the achievements!",
"none": "At the moment you have earned no achievements yet."
}
}
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