achievements now configureable

src/main/resources/META-INF/achievements_config.json

-{
-  "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

@@ -3,73 +3,72 @@
 <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="narrow">More than {{config.views[2]}} views</div>
             <div id="wide">
-                <ngb-progressbar type="success" [value]="statistics?.views / 500 * 100" [striped]="true"
-                    *ngIf="statistics?.views <= 500">
+                <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 > 500" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.views > config.views[2]" 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="narrow">More than {{config.views[1]}} views</div>
             <div id="wide">
-                <ngb-progressbar type="success" [value]="statistics?.views / 100 * 100" [striped]="true"
-                    *ngIf="statistics?.views <= 100">
+                <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 > 100" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.views > config.views[1]" 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="narrow">More than {{config.views[0]}} views</div>
             <div id="wide">
-                <ngb-progressbar *ngIf="statistics?.views <= 10" type="success" [value]="statistics?.views / 10 * 100" [striped]="true">
+                <ngb-progressbar *ngIf="statistics?.views <= config.views[0]" type="success" [value]="statistics?.views / config.views[0] * 100" [striped]="true">
                 </ngb-progressbar>
-                <fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.views > config.views[0]" 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="narrow">More than {{config.downloads[2]}} downloads</div>
             <div id="wide">
-                <ngb-progressbar type="success" [value]="statistics?.downloads / 500 * 100" [striped]="true"
-                    *ngIf="statistics?.downloads <= 500">
+                <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 > 500" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[2]" 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="narrow">More than {{config.downloads[1]}} downloads</div>
             <div id="wide">
-                <ngb-progressbar type="success" [value]="statistics?.downloads / 100 * 100" [striped]="true"
-                    *ngIf="statistics?.downloads <= 100">
+                <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 > 100" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[1]" 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="narrow">More than {{config.downloads[0]}}downloads</div>
             <div id="wide">
-                <ngb-progressbar type="success" [value]="statistics?.downloads / 10 * 100" [striped]="true"
-                    *ngIf="statistics?.downloads <= 10">
+                <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 > 10" class="greeniconcolor"></fa-icon>
+                <fa-icon icon="check" *ngIf="statistics?.downloads > config.downloads[0]" class="greeniconcolor"></fa-icon>
             </div>
         </div>
     </li>
 </ul>
 
-<!-- <button (click) = "getTotalNumberOfViews()" class="btn btn-primary"> Get number of views </button> -->
-
+<!-- <button (click) = "buildAchievements()" 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">

src/main/webapp/app/account/achievements.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Injectable } from '@angular/core';
 import { SearchService } from 'app/search/service/search-service';
+import { HttpClient } from '@angular/common/http';
 
 import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/user/account.model';
@@ -15,8 +16,8 @@ import { Statistics } from 'app/shared/model/statistics.model';
 export class AchievementsComponent implements OnInit {
   account!: Account;
   statistics!: Statistics;
-
-  constructor(private accountService: AccountService, protected searchService: SearchService) {}
+  config = require('./achievements_config.json');
+  constructor(private accountService: AccountService, protected searchService: SearchService, private httpClient: HttpClient) {}
 
   public getTotalNumberOfViews(): void {
     // eslint-disable-next-line no-console
@@ -35,7 +36,8 @@ export class AchievementsComponent implements OnInit {
               ' for account ' +
               this.account.firstName +
               ' ' +
-              this.account.lastName
+              this.account.lastName +
+              this.config.views[0]
           );
         }
       },

src/main/webapp/app/account/achievements_config.json

+{
+  "views": [10, 100, 500],
+  "downloads": [10, 100, 500]
+}

tsconfig.json

@@ -7,5 +7,10 @@
     {
       "path": "./tsconfig.e2e.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "module": "commonjs",
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  }
 }