Merge pull request #70 from riot-appstore/pr/update_angular

Update to Angular 6

rapstore-frontend/package.json

@@ -12,46 +12,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
+    "@angular/animations": "^6.0.9",
+    "@angular/common": "^6.0.9",
+    "@angular/compiler": "^6.0.9",
+    "@angular/core": "^6.0.9",
+    "@angular/forms": "^6.0.9",
+    "@angular/http": "^6.0.9",
+    "@angular/platform-browser": "^6.0.9",
+    "@angular/platform-browser-dynamic": "^6.0.9",
+    "@angular/router": "^6.0.9",
     "@herbis/ngx-modal": "^0.1.0",
     "@types/file-saver": "^1.3.0",
     "angular-font-awesome": "^3.1.2",
     "angular2-notifications": "^1.0.2",
     "core-js": "^2.4.1",
     "file-saver": "^1.3.8",
     "font-awesome": "^4.7.0",
-    "ng-letter-avatar": "^0.2.0",
-    "ngu-utility": "^1.0.5",
-    "rxjs": "^5.5.6",
+    "ngx-avatar": "^2.9.0",
+    "rxjs": "^6.2.2",
+    "rxjs-compat": "^6.2.2",
     "zone.js": "^0.8.19"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.6.8",
     "@angular/cli": "^6.0.8",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
+    "@angular/compiler-cli": "^6.0.9",
+    "@angular/language-service": "^6.0.9",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
+    "@types/node": "^6.0.114",
+    "codelyzer": "^4.4.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.0",
+    "karma": "^2.0.4",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^5.3.2",
+    "protractor": "^5.4.0",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
+    "typescript": "~2.7.2",
+    "webpack-cli": "^3.1.0"
   }
 }

rapstore-frontend/src/app/app-browser/app-browser.component.html

@@ -11,8 +11,7 @@
                 <ng-template #app_is_external>
                   <div class="ribbon ribbon-external"><span>EXTERNAL</span></div>
                 </ng-template>
-                <ngu-letter-avatar avatar-font-size="90" avatar-width="170px" avatar-height="170px"
-                                   avatar-data='{{application?.name}}'></ngu-letter-avatar>
+                <ngx-avatar name="{{application?.name}}" [round]="false" borderCorner=0 size="170" textSizeRatio=3></ngx-avatar>
               </div>
               <div id="app-info-section">
                 <p class="float-left"><i class="fa fa-download"></i>

rapstore-frontend/src/app/app-detail/app-detail.component.html

@@ -23,8 +23,7 @@
           <ng-template #app_is_external>
             <div class="ribbon ribbon-external"><span>EXTERNAL</span></div>
           </ng-template>
-          <ngu-letter-avatar *ngIf="show_avatar" avatar-font-size="90" avatar-width="170px" avatar-height="170px"
-                             avatar-data='{{application?.name}}'></ngu-letter-avatar>
+          <ngx-avatar *ngIf="show_avatar" name="{{application?.name}}" [round]="false" borderCorner=0 size="170" textSizeRatio=3></ngx-avatar>
         </div>
       </div>
       <div class="app-detail-headline">

rapstore-frontend/src/app/app-detail/app-detail.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit, Input} from '@angular/core';
 import {Application} from '../models';
 import {AppService} from '../appservice.service';
 import {ActivatedRoute, Router} from '@angular/router';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {AuthService} from '../auth.service';
 import {UserService} from '../user.service';
 import {User} from '../models';

rapstore-frontend/src/app/app-uploader/app-uploader.component.ts

@@ -1,3 +1,5 @@
+
+import {map} from 'rxjs/operators';
 import {Component, OnInit} from '@angular/core';
 import {Http, RequestOptions, Headers} from '@angular/http';
 import {AuthService} from '../auth.service';
@@ -60,8 +62,8 @@ export class AppUploaderComponent implements OnInit {
       headers.append('Authorization', 'Token ' + this.AuthService.get_token());
       headers.append('Accept', 'application/json');
       let options = new RequestOptions({headers: headers});
-      this.http.post(`${this.baseurl}/api/app/`, formData, options)
-        .map(res => res.json())
+      this.http.post(`${this.baseurl}/api/app/`, formData, options).pipe(
+        map(res => res.json()))
         .subscribe(
           data => this.message = `Successfully uploaded your app "${this.form.value.name}" ! The app will be under a review process in order to make it public.`,
           err => {

rapstore-frontend/src/app/app.component.ts

@@ -1,14 +1,14 @@
 import {Component, OnDestroy, OnInit, HostListener} from '@angular/core';
 import {BrowserIntegrationService} from './browser-integration.service';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {AuthService} from './auth.service';
 import {UserService} from './user.service';
 import {FeedbackService} from './feedback.service';
 import {Router} from '@angular/router';
 import {User} from './models';
 import {AppService} from './appservice.service';
 import {environment} from '../environments/environment';
-import 'rxjs/add/operator/take';
+
 
 @Component({
   selector: 'app-root',

rapstore-frontend/src/app/app.module.ts

@@ -3,9 +3,9 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
-import {NguUtilityModule} from 'ngu-utility/dist';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ReactiveFormsModule } from '@angular/forms';
+import { AvatarModule } from 'ngx-avatar';
 
 
 import {AppComponent} from './app.component';
@@ -62,11 +62,11 @@ import { FormElementComponent } from './form-element/form-element.component';
     FeedbackComponent,
   ],
   imports: [
+    AvatarModule,
     CommonModule,
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
-    NguUtilityModule,
     AppRoutingModule,
     HttpModule,
     BrowserAnimationsModule,

rapstore-frontend/src/app/appservice.service.ts

@@ -1,9 +1,11 @@
+
+import {map} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
 import {Application} from './models';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {AuthService} from './auth.service';
 import {Http, RequestOptions, Headers, ResponseContentType} from '@angular/http';
-import 'rxjs/add/operator/map';
+
 import {environment} from '../environments/environment';
 
 @Injectable()
@@ -20,14 +22,14 @@ export class AppService {
     let headers = new Headers({'Content-Type': 'application/json'});
     let options = new RequestOptions({headers: headers});
 
-    return this.http.get(`${this.baseUrl}/api/app/`).map(res => res.json());
+    return this.http.get(`${this.baseUrl}/api/app/`).pipe(map(res => res.json()));
   }
 
   get(id: number): Observable<Application> {
     let headers = new Headers({'Content-Type': 'application/json'});
     let options = new RequestOptions({headers: headers});
 
-    return this.http.get(`${this.baseUrl}/api/app/${id}/`).map(res => res.json());
+    return this.http.get(`${this.baseUrl}/api/app/${id}/`).pipe(map(res => res.json()));
   }
 
   getAuthHeaders(): Headers {
@@ -41,7 +43,7 @@ export class AppService {
     let headers = this.getAuthHeaders();
     headers.append('Content-Type', 'application/json');
 
-    let request = this.http.get(`${this.baseUrl}/api/app/${id}/build/?board=${board}&type=${type}`, new RequestOptions({headers: headers})).map(res => res.json());
+    let request = this.http.get(`${this.baseUrl}/api/app/${id}/build/?board=${board}&type=${type}`, new RequestOptions({headers: headers})).pipe(map(res => res.json()));
     let task_id, poll_id;
     request.subscribe(
       res => {
@@ -72,7 +74,7 @@ export class AppService {
     let headers = this.getAuthHeaders();
     headers.append('Content-Type', 'application/json');
 
-    return this.http.get(`${this.baseUrl}/api/buildmanager/${task_id}/status/`, new RequestOptions({headers: headers})).map(res => res.json());
+    return this.http.get(`${this.baseUrl}/api/buildmanager/${task_id}/status/`, new RequestOptions({headers: headers})).pipe(map(res => res.json()));
   }
 
   fetch_file(task_id) {

rapstore-frontend/src/app/auth.service.ts

@@ -1,7 +1,8 @@
+
+import {map} from 'rxjs/operators';
 import {Injectable, Output, EventEmitter} from '@angular/core';
 import {Http, Response, RequestOptions, Headers} from '@angular/http';
-import {Observable} from 'rxjs/Observable';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {Observable, BehaviorSubject} from 'rxjs';
 import {UserService} from './user.service';
 import {User} from './models';
 import {environment} from '../environments/environment';
@@ -23,8 +24,8 @@ export class AuthService {
 
   login(username: string, password: string): Observable<boolean> {
     const url = `${this.base_url}/auth/`;
-    return this.http.post(url, JSON.stringify({username: username, password: password}), {headers: this.headers})
-      .map((response: Response) => {
+    return this.http.post(url, JSON.stringify({username: username, password: password}), {headers: this.headers}).pipe(
+      map((response: Response) => {
         const data = response.json();
         const token = data && data.token;
         if (token) {
@@ -35,7 +36,7 @@ export class AuthService {
           this.refresh(false);
           return false;
         }
-      });
+      }));
   }
 
   perform_login(username: string, token: boolean) {
@@ -61,14 +62,14 @@ export class AuthService {
 
   get_github_url() {
     const url = `${this.base_url}/social/url/github/`;
-    return this.http.get(url, {headers: this.headers, withCredentials: true}).map(res => res.json());
+    return this.http.get(url, {headers: this.headers, withCredentials: true}).pipe(map(res => res.json()));
   }
   get_social_token(code: string, state: string) {
     const url = `${this.base_url}/social/login/github/`;
-    return this.http.post(url, JSON.stringify({code: code, state: state}), {headers: this.headers, withCredentials: true}).map((response: Response) => {
+    return this.http.post(url, JSON.stringify({code: code, state: state}), {headers: this.headers, withCredentials: true}).pipe(map((response: Response) => {
       let res = response.json();
       this.perform_login(res.username, res.token);
       return true;
-    });
+    }));
   }
 }

rapstore-frontend/src/app/board.service.ts

@@ -1,7 +1,9 @@
+
+import {map} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
 import {Http, Response, RequestOptions, Headers} from '@angular/http';
 import {Board} from './models';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {environment} from '../environments/environment';
 import {AuthService} from './auth.service';
 
@@ -16,7 +18,7 @@ export class BoardService {
   getAll(): Observable<Board[]> {
     let headers = new Headers({'Content-Type': 'application/json'});
     let options = new RequestOptions({headers: headers});
-    return this.http.get(`${this.baseUrl}/api/board/`).map(res => res.json());
+    return this.http.get(`${this.baseUrl}/api/board/`).pipe(map(res => res.json()));
   }
 
   getAuthOptions(): RequestOptions {
@@ -27,7 +29,7 @@ export class BoardService {
   }
   getSupported(app_id: number): Observable<Board[]> {
     let options = this.getAuthOptions();
-    return this.http.get(`${this.baseUrl}/api/app/${app_id}/supported_boards/`, options).map(res => res.json());
+    return this.http.get(`${this.baseUrl}/api/app/${app_id}/supported_boards/`, options).pipe(map(res => res.json()));
   }
 
 }

rapstore-frontend/src/app/browser-integration.service.ts

@@ -1,6 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
+import {Observable, Subject} from 'rxjs';
 
 @Injectable()
 export class BrowserIntegrationService {

rapstore-frontend/src/app/feedback.service.ts

@@ -1,3 +1,5 @@
+
+import {map} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
 import {Http, Response, RequestOptions, Headers} from '@angular/http';
 import {Feedback} from './models';
@@ -13,7 +15,7 @@ export class FeedbackService {
 
   sendFeedback(feedback: Feedback) {
     const authHeaders = new Headers(this.contentType);
-    return this.http.post(`${this.baseUrl}/api/feedback/`, feedback, new RequestOptions({headers: authHeaders})).map(res => res.json());
+    return this.http.post(`${this.baseUrl}/api/feedback/`, feedback, new RequestOptions({headers: authHeaders})).pipe(map(res => res.json()));
   }
 
 }

rapstore-frontend/src/app/login/login.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {AuthService} from '../auth.service';
 import {Router, ActivatedRoute, Params} from '@angular/router';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {UserService} from '../user.service';
 import {User} from '../models';
 

rapstore-frontend/src/app/logout/logout.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
 import {AuthService} from '../auth.service';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {AppService} from '../appservice.service';
 
 @Component({

rapstore-frontend/src/app/missing-components-label-section/missing-components-label-section.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {BrowserIntegrationService} from '../browser-integration.service';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-missing-components-label-section',

rapstore-frontend/src/app/signup/signup.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {Router, ActivatedRoute} from '@angular/router';
 import {UserService} from '../user.service';
 import {AuthService} from '../auth.service';

rapstore-frontend/src/app/user.service.ts

@@ -1,3 +1,5 @@
+
+import {map} from 'rxjs/operators';
 import {Injectable, Output, EventEmitter} from '@angular/core';
 import {Http, Response, RequestOptions, Headers} from '@angular/http';
 import {AuthService} from './auth.service';
@@ -13,11 +15,11 @@ export class UserService {
   }
 
   get() {
-    return this.http.get(this.url, this.getAuthOptions()).map(res => res.json());
+    return this.http.get(this.url, this.getAuthOptions()).pipe(map(res => res.json()));
   }
 
   update(user: User) {
-    return this.http.put(`${this.url}update/`, user, this.getAuthOptions()).map(res => res.json());
+    return this.http.put(`${this.url}update/`, user, this.getAuthOptions()).pipe(map(res => res.json()));
   }
 
   getAuthOptions(): RequestOptions {
@@ -28,7 +30,7 @@ export class UserService {
 
   register(signup: Signup) {
     const authHeaders = new Headers(this.contentType);
-    return this.http.post(`${this.url}register/`, signup, new RequestOptions({headers: authHeaders})).map(res => res.json());
+    return this.http.post(`${this.url}register/`, signup, new RequestOptions({headers: authHeaders})).pipe(map(res => res.json()));
   }
 
 }