Add levels are loaded from the backend now

src/app/components/about/about.component.html

@@ -20,7 +20,7 @@
     <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
       <ng-container matColumnDef="level">
         <th mat-header-cell *matHeaderCellDef> level</th>
-        <td mat-cell *matCellDef="let level"> {{level.level}} </td>
+        <td mat-cell *matCellDef="let level"> {{level.levelNumber}} </td>
       </ng-container>
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> level name</th>

src/app/components/about/about.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {Activitylist} from 'src/app/models/activity';
-import {Levellist} from 'src/app/models/levellist';
+import {LevelList} from 'src/app/models/levellist';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
 import {ActivityService} from 'src/app/services/activity/activity.service';
@@ -12,12 +12,12 @@ import {ActivityService} from 'src/app/services/activity/activity.service';
 })
 export class AboutComponent implements OnInit {
   actionlist: Activitylist = new Activitylist();
-  levellist: Levellist = new Levellist();
+  levellist: LevelList = new LevelList();
 
   displayedColumns = ['points', 'name', 'description'];
   dataSource = new MatTableDataSource(this.actionlist.Actions);
   displayedLevelColumns = ['level', 'name'];
-  levelSource = this.levellist.levels;
+  levelSource = new MatTableDataSource(this.levellist.levels);
 
   constructor(private activityService: ActivityService) {
   }
@@ -31,6 +31,12 @@ export class AboutComponent implements OnInit {
       this.dataSource = new MatTableDataSource(this.actionlist.Actions);
       this.dataSource.sort = this.sort;
     });
+    this.activityService.getLevels();
+    this.activityService.levelList.subscribe(response => {
+      this.levellist = response;
+      this.levelSource = new MatTableDataSource(this.levellist.levels);
+      this.levelSource.sort = this.sort;
+    });
   }
 
 }

src/app/components/main-navigation/main-navigation.component.ts

@@ -4,7 +4,6 @@ import {DatasharingService} from '../../services/datasharing.service';
 import {RequestService} from '../../services/request/request.service';
 import {SettingsService} from '../../services/settings/settings.service';
 import {environment} from 'src/environments/environment';
-import {Levellist} from 'src/app/models/levellist';
 import {Router} from '@angular/router';
 import {User} from 'src/app/models/user';
 import {OverlayContainer} from '@angular/cdk/overlay';
@@ -33,7 +32,6 @@ export class MainNavigationComponent implements OnInit {
   userId: number;
   username: string;
   user: User;
-  levellist: Levellist = new Levellist();
   level: string;
   points: number;
   profileUrl = '/profile/1';

src/app/components/profile/profile.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {User} from 'src/app/models/user';
-import {Levellist} from 'src/app/models/levellist';
+import {LevelList} from 'src/app/models/levellist';
 import {RequestService} from 'src/app/services/request/request.service';
 import {DatasharingService} from '../../services/datasharing.service';
 import {ProfileService} from 'src/app/services/profile/profile.service';
@@ -18,7 +18,7 @@ import {Lightbox} from 'ngx-lightbox';
   styleUrls: ['./profile.component.sass']
 })
 export class ProfileComponent implements OnInit {
-  levellist: Levellist = new Levellist();
+  levellist: LevelList = new LevelList();
   ownProfile = false;
   userProfile: User = new User();
   self: User;

src/app/models/friendinfo.ts

@@ -1,5 +1,3 @@
-import {Levellist} from 'src/app/models/levellist';
-
 export class FriendInfo {
   id: number;
   name: string;

src/app/models/levellist.ts

@@ -1,23 +1,27 @@
-export class Levellist {
-  levels: { level: number, name: string, points: number }[] = [
-    {level: 0, name: 'Green Horn', points: 0},
-    {level: 1, name: 'Good Willed', points: 100},
-    {level: 2, name: 'Helper', points: 200},
-    {level: 3, name: 'World Saver', points: 300},
-    {level: 4, name: 'Hero of the Green Country', points: 400},
-    {level: 5, name: 'Champion of the Earth', points: 500},
-    {level: 6, name: 'Intergallactic Superhero', points: 600},
-  ];
+export class Level {
+  id: number;
+  name: string;
+  levelNumber: number;
+  points: number;
 
-  getLevelName(level: number): any {
-    let name = 'not defined';
+  constructor(id: number, name: string, levelNumber: number, points: number) {
+    this.id = id;
+    this.name = name;
+    this.levelNumber = levelNumber;
+    this.points = points;
+  }
+}
 
+export class LevelList {
+  levels: Level[] = [];
+
+  getLevelName(level: number): string {
+    let name = 'not defined';
     for (const rank of this.levels) {
-      if (level === rank.level) {
+      if (level === rank.levelNumber) {
         name = rank.name;
       }
     }
     return name;
   }
-
 }

src/app/services/activity/activity.service.ts

@@ -1,18 +1,40 @@
 import {Injectable} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import {Activity, Activitylist} from 'src/app/models/activity';
+import {Level, LevelList} from 'src/app/models/levellist';
 import {environment} from 'src/environments/environment';
-import {Http} from '@angular/http';
+import {HttpClient, HttpErrorResponse} from '@angular/common/http';
+import {BaseService} from '../base.service';
 
 
 @Injectable({
   providedIn: 'root'
 })
-export class ActivityService {
+export class ActivityService extends BaseService {
 
   public activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
+  public levelList = new BehaviorSubject<LevelList>(new LevelList());
 
-  constructor(private http: Http) {
+  constructor(http: HttpClient) {
+    super(http);
+  }
+
+  private static buildGetActivityBody(): any {
+    const body = {
+      query: `query{getActivities{
+      id name description points
+    }}`, variables: {}
+    };
+    return body;
+  }
+
+  private static buildGetLevelsBody(): any {
+    const body = {
+      query: `query{getLevels{
+      id name levelNumber points
+    }}`, variables: {}
+    };
+    return body;
   }
 
   changeUserInfo(pActivitylist: Activitylist) {
@@ -21,22 +43,24 @@ export class ActivityService {
 
   public getActivities() {
     if (this.activitylist.getValue().Actions.length < 1) {
-      const headers = new Headers();
-      headers.set('Content-Type', 'application/json');
-      this.http.post(environment.graphQLUrl, this.buildJson()).subscribe(result => {
+      this.http.post(environment.graphQLUrl, ActivityService.buildGetActivityBody(), {headers: this.headers})
+      .pipe(this.retryRated())
+      .subscribe(result => {
         // push onto subject
-        this.activitylist.next(this.renderActivity(result.json()));
+        this.activitylist.next(this.renderActivity(result));
       });
     }
   }
 
-  public buildJson(): any {
-    const body = {
-      query: `query{getActivities{
-      id name description points
-    }}`, variables: {}
-    };
-    return body;
+  public getLevels() {
+    if (this.activitylist.getValue().Actions.length < 1) {
+      this.http.post(environment.graphQLUrl, ActivityService.buildGetLevelsBody(), {headers: this.headers})
+      .pipe(this.retryRated())
+      .subscribe(result => {
+        // push onto subject
+        this.levelList.next(this.renderLevels(result));
+      });
+    }
   }
 
   public renderActivity(response: any): Activitylist {
@@ -50,5 +74,17 @@ export class ActivityService {
     }
     return activitylist;
   }
+
+  public renderLevels(response: any): LevelList {
+    const levelList = new LevelList();
+    for (const level of response.data.getLevels) {
+      levelList.levels.push(new Level(
+        level.id,
+        level.name,
+        level.levelNumber,
+        level.points));
+    }
+    return levelList;
+  }
 }