CP #3 WIP + page configurations, page devices (Routing + WIP) + Upgrade to Angular 8

angular.json

@@ -29,7 +29,8 @@
               "./node_modules/primeicons/primeicons.css",
               "./node_modules/primeng/resources/themes/nova-light/theme.css",
               "./node_modules/primeng/resources/primeng.min.css",
-              "./node_modules/font-awesome/css/font-awesome.css"
+              "./node_modules/font-awesome/css/font-awesome.css",
+              "./node_modules/flag-icon-css/css/flag-icon.min.css"
             ],
             "scripts": []
           },
@@ -91,7 +92,8 @@
               "./node_modules/primeicons/primeicons.css",
               "./node_modules/primeng/resources/themes/nova-light/theme.css",
               "./node_modules/primeng/resources/primeng.min.css",
-              "./node_modules/font-awesome/css/font-awesome.css"
+              "./node_modules/font-awesome/css/font-awesome.css",
+              "./node_modules/flag-icon-css/css/flag-icon.min.css"
             ],
             "scripts": [],
             "assets": [

package.json

@@ -11,42 +11,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-ng-packagr": "^0.13.8",
+    "@angular-devkit/build-ng-packagr": "~0.802.2",
-    "@angular/animations": "^7.1.4",
+    "@angular/animations": "^8.2.2",
-    "@angular/cdk": "^8.0.2",
+    "@angular/cdk": "^8.1.3",
-    "@angular/common": "~7.1.0",
+    "@angular/common": "~8.2.2",
-    "@angular/compiler": "~7.1.0",
+    "@angular/compiler": "~8.2.2",
-    "@angular/core": "~7.1.0",
+    "@angular/core": "^8.2.2",
-    "@angular/forms": "~7.1.0",
+    "@angular/forms": "~8.2.2",
-    "@angular/platform-browser": "~7.1.0",
+    "@angular/material": "^8.1.3",
-    "@angular/platform-browser-dynamic": "~7.1.0",
+    "@angular/platform-browser": "~8.2.2",
-    "@angular/router": "~7.1.0",
+    "@angular/platform-browser-dynamic": "~8.2.2",
+    "@angular/router": "~8.2.2",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "angular-font-awesome": "^3.1.2",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
+    "flag-icon-css": "^3.3.0",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
+    "ng-country-flags": "^1.0.7",
     "ng-swagger-gen": "^1.7.1",
     "ngx-bootstrap": "^3.2.0",
     "popper": "^1.0.1",
     "primeicons": "^1.0.0",
     "primeng": "^8.0.1",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.2",
     "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.8",
+    "@angular-devkit/build-angular": "~0.802.2",
-    "@angular/cli": "~7.1.2",
+    "@angular/cli": "~8.2.2",
-    "@angular/compiler-cli": "~7.1.0",
+    "@angular/compiler-cli": "~8.2.2",
-    "@angular/language-service": "~7.1.0",
+    "@angular/language-service": "~8.2.2",
     "@fortawesome/fontawesome-free": "^5.8.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.1.1",
@@ -57,6 +60,6 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "typescript": "~3.5.3"
   }
 }

src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './control-panel/home/home.component';
-import { ConfigComponent } from './control-panel/profile/config/config.component';
+import { ConfigurationComponent } from './control-panel/profile/configuration/configuration.component';
 import { AuthGuard } from './_helpers/auth.guard';
 import { NotFoundComponent } from './control-panel/not-found/not-found.component';
 import { ProfileComponent } from './control-panel/profile/profile/profile.component';
 import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
+import { EditConfigurationComponent } from './control-panel/profile/configuration/edit-configuration/edit-configuration.component';
+import { DevicesComponent } from './control-panel/profile/devices/devices.component';
 
 const routes: Routes =
 [
@@ -19,7 +21,13 @@ const routes: Routes =
         { path: ':profileId', children: [
             { path: '', component: ProfileComponent},
             { path: 'edit', component: EditProfileComponent},
-            { path: 'config', component: ConfigComponent }
+            { path: 'configurations', children: [
+              { path: '', component: ConfigurationComponent},
+              { path: ':configurationId', component: EditConfigurationComponent}
+            ]},
+            { path: 'devices', children: [
+              { path: '', component: DevicesComponent}
+            ]}
         ]}
     ]
   },

src/app/app.component.css

@@ -6,8 +6,6 @@ p-toolbar img{
     padding-left: 50px;
 }
 
-
-
 .ui-inputgroup{
     padding-top: 10px;
     padding-bottom: 10px
@@ -29,6 +27,12 @@ p-toolbar .ui-button {
     border: none;
 }
 
+p-dropdown {
+    background-color: lightgrey;
+    opacity: 0.7;
+    border:none; 
+}
+
 p-dialog div > * {
     margin: auto !important;
 }

src/app/app.component.html

@@ -6,12 +6,14 @@
     </div>
     
     <div class="ui-toolbar-group-right">
-        <button pButton type="button" [label]="LabelHeaderAbout"></button>
+        <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderAbout"></button>
-        <button pButton type="button" [label]="LabelHeaderTeam" ></button>
+        <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderTeam" ></button>
-        <button pButton type="button" [label]="LabelHeaderContact" ></button>
+        <button *ngIf="!Connected" pButton type="button" [label]="LabelHeaderContact" ></button>
+        <button *ngIf="Connected" pButton type="button" label="MY DEVICES" (click)="GoToDevices()"></button>
+        <button *ngIf="Connected" pButton type="button" label="MY CONFIGURATIONS" (click)="GoToConfiguration()"></button>
         <button *ngIf="!Connected" pButton type="button" label="{{LabelHeaderSignIn}}" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>
         <button *ngIf="!Connected" pButton type="button" label="{{LabelHeaderLogIn}}" icon="pi pi-sign-in" iconPos="right" (click)="DisplayLoginModal = true"></button>
-        <p-splitButton *ngIf="Connected" type="button" [label]="ConnectedUser.firstName" [model]="itemsUserDropDown"></p-splitButton>
+        <p-splitButton *ngIf="Connected" type="button" [label]="ConnectedUser.firstName" [model]="ItemsUserDropDown" (onClick)="GoToProfile()"></p-splitButton>
     </div>
     
 </p-toolbar>

src/app/app.component.ts

@@ -1,13 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
+import { MenuItem, SelectItem } from 'primeng/api';
 import { AppService } from './_services/app.service';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from './_services/authentication.service';
 import { Router } from '@angular/router';
-import { first, catchError } from 'rxjs/operators';
+import { first } from 'rxjs/operators';
 import { UserInfo } from './_api/models';
 import { UserService } from './_api/services';
-import { throwError } from 'rxjs';
 
 
 @Component({
@@ -16,9 +15,9 @@ import { throwError } from 'rxjs';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  title = 'MyControlPanel';
+  title = 'My Control Panel';
 
-  itemsUserDropDown: MenuItem[];
+  ItemsUserDropDown: MenuItem[];
 
   public ConnectedUser: UserInfo;
 
@@ -72,8 +71,25 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
 
-    // To Include in a fonction of a dropdown language chose
+    const currentUser = this._authService.currentUserValue;
-    this._translateService.setDefaultLang('en');
+    console.log('currentUser', currentUser);
+
+    if (currentUser && currentUser.token) {
+      this.ConnectedUser = currentUser;
+      this.Connected = true;
+      this.DisplayLoginModal = false;
+      this.Email = null;
+      this.Password = null;
+      this._authService.IsLoggedIn = true;
+      console.log(this.ConnectedUser.language);
+      if (this.ConnectedUser.language === 'gb') {
+        this._translateService.setDefaultLang('en');
+      } else {
+        this._translateService.setDefaultLang(this.ConnectedUser.language);
+      }
+    } else {
+      this._translateService.setDefaultLang('en');
+    }
 
     this.InitLabels();
 
@@ -85,32 +101,19 @@ export class AppComponent implements OnInit {
       }
     );
 
-    // To test
     this._translateService.get('App.Home.UserDropDown.ModifyUser').subscribe(modifyLabel => {
       this._translateService.get('App.Home.UserDropDown.Logout').subscribe(logoutLabel => {
-        this.itemsUserDropDown = [
+        this.ItemsUserDropDown = [
           {label: modifyLabel, icon: 'fa fa-edit', command: () => {
-            // route get param => navigate vers profile
             this._router.navigate(['/profile/' + this.ConnectedUser.id + '/edit']);
           }},
           {label: logoutLabel, icon: 'fa fa-sign-out', command: () => {
-              this.Logout();
+            this.Logout();
           }}
         ];
       });
     });
 
-    const currentUser = this._authService.currentUserValue;
-    console.log('currentUser', currentUser);
-
-    if (currentUser && currentUser.token) {
-      this.ConnectedUser = currentUser;
-      this.Connected = true;
-      this.DisplayLoginModal = false;
-      this.Email = null;
-      this.Password = null;
-      this._authService.IsLoggedIn = true;
-    }
   }
 
 
@@ -136,8 +139,6 @@ export class AppComponent implements OnInit {
                     this.ErrorTextLogin = loginErrorText;
                   });
                 });
-
-    // change route -> /config view
   }
 
   public Logout() {
@@ -157,6 +158,18 @@ export class AppComponent implements OnInit {
     this._router.navigate(['/home']);
   }
 
+  public GoToProfile() {
+    this._router.navigate(['/profile/' + this.ConnectedUser.id]);
+  }
+
+  public GoToConfiguration() {
+    this._router.navigate(['/profile/' + this.ConnectedUser.id + '/configurations']);
+  }
+
+  public GoToDevices() {
+    this._router.navigate(['/profile/' + this.ConnectedUser.id + '/devices']);
+  }
+
   public CreateProfile() {
     if (this.CorrectForm()) {
       this.CreateUser.deviceIds = [];

src/app/app.module.ts

@@ -27,7 +27,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AuthenticationService } from './_services/authentication.service';
-import { ConfigComponent } from './control-panel/profile/config/config.component';
+import { ConfigurationComponent } from './control-panel/profile/configuration/configuration.component';
 import { NotFoundComponent } from './control-panel/not-found/not-found.component';
 import { ProfileComponent } from './control-panel/profile/profile/profile.component';
 import { EditProfileComponent } from './control-panel/profile/edit-profile/edit-profile.component';
@@ -35,6 +35,9 @@ import { JwtInterceptor } from './_helpers/jwt.interceptor';
 import { ErrorInterceptor } from './_helpers/error.interceptor';
 import { NotificationsService } from './_services/notifications.service';
 import { ToastModule } from 'primeng/toast';
+import { DropdownModule } from 'primeng/dropdown';
+import { EditConfigurationComponent } from './control-panel/profile/configuration/edit-configuration/edit-configuration.component';
+import { DevicesComponent } from './control-panel/profile/devices/devices.component';
 
 
 
@@ -63,10 +66,12 @@ export function HttpLoaderFactory(http: HttpClient) {
     AppComponent,
     HomeComponent,
     BorderCardDirective,
-    ConfigComponent,
+    ConfigurationComponent,
     NotFoundComponent,
     ProfileComponent,
-    EditProfileComponent
+    EditProfileComponent,
+    EditConfigurationComponent,
+    DevicesComponent
   ],
   imports: [
     BrowserModule,
@@ -86,6 +91,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     CalendarModule,
     ConfirmDialogModule,
     ToastModule,
+    DropdownModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,

src/app/control-panel/home/home.component.html

@@ -87,7 +87,7 @@
 <div class="container">
   <div class="row justify-content-around">
     <div class="col-3 ">
-      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
         <div class="card-body">
           <h5 class="card-title">HUBERT</h5>
           <img class="card-img" src="../../assets/images/home-page/Hubert.jpg" style="margin-bottom: 2em">
@@ -102,7 +102,7 @@
       </div>
     </div>
     <div class="col-3">
-      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
         <div class="card-body">
           <h5 class="card-title">FRANSOLET</h5>
           <img class="card-img" src="../../assets/images/home-page/Thomas.jpg" style="margin-bottom: 2em">
@@ -117,7 +117,7 @@
       </div>
     </div>
     <div class="col-3" > 
-      <div class="card" style="border: solid 4px #f5f5f5;" appBorderCard>
+      <div class="card" style="border: solid 2px #f5f5f5;" appBorderCard>
         <div class="card-body">
           <h5 class="card-title">MICHEL</h5>
           <img class="card-img" src="../../assets/images/home-page/Michel2.jpg" style="margin-bottom: 2em">

src/app/control-panel/profile/config/config.component.html

@@ -1,3 +0,0 @@
-<p>
-  This is the config page. => Existing one. 
-</p>

src/app/control-panel/profile/config/config.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-config',
-  templateUrl: './config.component.html',
-  styleUrls: ['./config.component.css']
-})
-export class ConfigComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/control-panel/profile/configuration/configuration.component.html

@@ -0,0 +1,15 @@
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
+<div class="blankSpace">
+  <br>
+  <br>
+  <br>
+</div>
+
+<p>
+  This is the config page. => You will find list of all configuration and link to create new one. 
+</p>
+
+
+<button type="button" class="btn btn-primary btn-primary" (click)="OpenSelectedConfig()">
+  Open a config
+</button>

src/app/control-panel/profile/configuration/configuration.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationComponent } from './configuration.component';
+
+describe('ConfigurationComponent', () => {
+  let component: ConfigurationComponent;
+  let fixture: ComponentFixture<ConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfigurationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/control-panel/profile/configuration/configuration.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ConfirmationService } from 'primeng/api';
+import { NotificationsService } from '../../../_services/notifications.service';
+import { UserInfo } from '../../../_api/models';
+
+@Component({
+  selector: 'app-configuration',
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.css']
+})
+export class ConfigurationComponent implements OnInit {
+
+  public ConnectedUser: UserInfo;
+
+  public SelectedConfig = 'hkgskjhdskj15';
+
+  constructor(
+    private _notifications: NotificationsService,
+    private _confirmationService: ConfirmationService,
+    private _route: ActivatedRoute,
+    private _router: Router
+  ) { }
+
+  ngOnInit() {
+    this.Test();
+  }
+
+  Test() {
+    this._route.paramMap.subscribe(params => {
+      console.log(params.get('configId'));
+    });
+  }
+
+  public OpenSelectedConfig() {
+    this._router.navigate([this._router.url, this.SelectedConfig]);
+  }
+
+}

src/app/control-panel/profile/configuration/edit-configuration/edit-configuration.component.html

@@ -0,0 +1,9 @@
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
+<div class="blankSpace">
+    <br>
+    <br>
+    <br>
+</div>
+<p>
+    This is the edit config page. => (Existing one from MyMirror 1.0) => You will have the chance to personnalize your screen configuration 
+</p>

src/app/control-panel/profile/configuration/edit-configuration/edit-configuration.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditConfigurationComponent } from './edit-configuration.component';
+
+describe('EditConfigurationComponent', () => {
+  let component: EditConfigurationComponent;
+  let fixture: ComponentFixture<EditConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditConfigurationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/control-panel/profile/configuration/edit-configuration/edit-configuration.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ConfirmationService } from 'primeng/api';
+import { NotificationsService } from '../../../../_services/notifications.service';
+
+@Component({
+  selector: 'app-edit-configuration',
+  templateUrl: './edit-configuration.component.html',
+  styleUrls: ['./edit-configuration.component.css']
+})
+export class EditConfigurationComponent implements OnInit {
+
+  constructor(
+    private _notifications: NotificationsService,
+    private _confirmationService: ConfirmationService,
+    private _route: ActivatedRoute,
+    private _router: Router
+  ) { }
+
+  ngOnInit() {
+
+    this.Test();
+  }
+
+  Test() {
+    this._route.paramMap.subscribe(params => {
+      console.log(params.get('configId'));
+    });
+  }
+
+}

src/app/control-panel/profile/devices/devices.component.html

@@ -0,0 +1,21 @@
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
+<div class="blankSpace">
+    <br>
+    <br>
+    <br>
+</div>
+<p>
+    This is the devices page. => You will have the possibility to change parameters for all your screen devices => 
+</p>
+
+<h4>Actions</h4>
+<p>
+    - Changer parametres
+    - Changer position
+    - Changer Nom
+    - Changer les owners
+    - Supprimer du profil
+    - Voir l'état de connexion
+    - Assigner une configuration (?) 
+</p>
+    

src/app/control-panel/profile/devices/devices.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ConfigComponent } from './config.component';
+import { DevicesComponent } from './devices.component';
 
-describe('ConfigComponent', () => {
+describe('DevicesComponent', () => {
-  let component: ConfigComponent;
+  let component: DevicesComponent;
-  let fixture: ComponentFixture<ConfigComponent>;
+  let fixture: ComponentFixture<DevicesComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConfigComponent ]
+      declarations: [ DevicesComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ConfigComponent);
+    fixture = TestBed.createComponent(DevicesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/control-panel/profile/devices/devices.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-devices',
+  templateUrl: './devices.component.html',
+  styleUrls: ['./devices.component.css']
+})
+export class DevicesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/control-panel/profile/edit-profile/edit-profile.component.html

@@ -78,10 +78,29 @@
       <input type="password" [(ngModel)]="ConfirmPassword" pInputText [placeholder]="LabelFormConfirmPassword">    
     </div>
   </div>
-  <div style="text-align: center">
+  <div class="ui-g-12 middleOfPage">
-    <label *ngIf="ErrorTextForm.trim() != ''" style="color: red">{{ErrorTextForm}}</label>
+    <div class="ui-inputgroup" style="justify-content: center">
+      <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+      <p-dropdown [options]="Languages" [(ngModel)]="SelectedLanguage" [style]="{'width':'200px'}">
+          <ng-template let-item pTemplate="selectedItem">
+              <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
+              <span [ngClass]="'flag-icon-'+item.value" class="flag-icon"></span>
+              <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
+              </div>
+          </ng-template>
+          <ng-template let-language pTemplate="item">
+              <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
+                  <span [ngClass]="'flag-icon-'+language.value" class="flag-icon"></span>  
+                  <div style="font-size:14px;float:right;margin-top:4px">{{language.label}}</div>
+              </div>
+          </ng-template>
+      </p-dropdown> 
+    </div>
   </div>
 </div>
+<div style="text-align: center">
+  <label *ngIf="ErrorTextForm.trim() != ''" style="color: red">{{ErrorTextForm}}</label>
+</div>
 
 <div class="buttons pull-right">
   <button type="button" class="btn btn-secondary" (click)="CancelChange()" style="margin-right:5px">
@@ -94,6 +113,10 @@
   </button>
 </div>
 
+
+
+
+
 <button type="button" class="btn btn-sm btn-danger" (click)="DeleteProfil()" style="margin-left:5px">
   Delete Profile
   <i class="fa fa-trash-o"></i>

src/app/control-panel/profile/edit-profile/edit-profile.component.ts

@@ -5,7 +5,7 @@ import { AuthenticationService } from '../../../_services/authentication.service
 import { UserService } from '../../../_api/services';
 import { Router } from '@angular/router';
 import { UserInfo } from '../../../_api/models';
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService, SelectItem } from 'primeng/api';
 import { NotificationsService } from '../../../_services/notifications.service';
 
 @Component({
@@ -19,6 +19,15 @@ export class EditProfileComponent implements OnInit {
   public ErrorTextForm = '';
   public ConfirmPassword = '';
 
+  Languages: SelectItem[] = [
+    {label: 'English', value: 'gb'},
+    {label: 'French', value: 'fr'},
+    {label: 'German', value: 'de'},
+    {label: 'Italian', value: 'it'}
+  ];
+
+  SelectedLanguage: string;
+
   // Form Label
   public LabelFormLastName: string;
   public LabelFormFirstName: string;
@@ -44,6 +53,7 @@ export class EditProfileComponent implements OnInit {
   public SubmitChange() {
     if (this.CorrectForm()) {
       this.CurrentUser.deviceIds = [];
+      this.CurrentUser.language = this.SelectedLanguage;
       this._userService.UpdateUser(this.CurrentUser)
       .subscribe(
           data => {
@@ -132,7 +142,7 @@ export class EditProfileComponent implements OnInit {
           this.CurrentUser = data;
           const newDate = new Date(this.CurrentUser.birthday);
           this.CurrentUser.birthday = this._appService.FormatDate(newDate);
-
+          this.SelectedLanguage = this.CurrentUser.language;
           if (cancelChange) {
             this._translateService.get('App.Common.Notifications.Update').subscribe(message => {
               this._translateService.get('App.Profile.Edit.Notifications.CancelModification').subscribe(detail => {

src/app/control-panel/profile/profile/profile.component.html

@@ -1,3 +1,14 @@
+<!-- THIS NEED TO BE UPDATED PROPERLY -->
+<div class="blankSpace">
+    <br>
+    <br>
+    <br>
+</div>
+
 <p>
   This is your profile view => You can see all your devices (the availability, params?), all your playlists, and links to create new configuration
 </p>
+
+<p>
+  Connect new device button => Scanner (?) with wizard ? 
+</p>

src/polyfills.ts

@@ -18,57 +18,40 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */

tsconfig.json

@@ -1,17 +1,18 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "downlevelIteration": true,
     "paths": { "*": ["types/*"] },
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -118,12 +118,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true