Merge pull request #3 from masteropen/angular_routing

finalize routing chapter

Author: masteropen

package-lock.json

@@ -21,6 +21,7 @@
     "@angular/router": "~9.1.6",
     "bootstrap": "^3.3.7",
     "rxjs": "~6.5.4",
+    "rxjs-compat": "^6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },

package.json

@@ -1,20 +1,17 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
+        <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
 <div class="container">
   <div class="row">
     <div class="col-xs-12">
-      <h2>Mes appareils</h2>
-      <p>Mis à jour le : {{ lastUpdate | async | date: 'd MMMM y' | uppercase }}</p>
-      <ul class="list-group">
-        <app-appareil  *ngFor="let appareil of appareils; let i = index"
-                       [appareilName]="appareil.name"
-                       [appareilStatus]="appareil.status"
-                       [index]="i"></app-appareil>
-      </ul>
-      <button class="btn btn-success"
-              [disabled]="!isAuth"
-              (click)="onAllumer()">Tout allumer</button>
-      <button class="btn btn-danger"
-              [disabled]="!isAuth"
-              (click)="onEteindre()">Tout éteindre</button>
+      <router-outlet></router-outlet>
     </div>
   </div>
 </div>

src/app/app.component.html

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import { AppareilService } from './services/appareil.service';
 
 @Component({
   selector: 'app-root',
@@ -8,38 +7,9 @@ import { AppareilService } from './services/appareil.service';
 })
 export class AppComponent implements OnInit {
 
-  isAuth = false;
-  lastUpdate = new Promise((resolve, reject) => {
-    const date = new Date();
-    setTimeout(
-        () => {
-          resolve(date);
-        }, 2000
-    );
-  });
-  appareils: any[];
-
-  constructor(private appareilService: AppareilService) {
-    setTimeout(
-        () => {
-          this.isAuth = true;
-        }, 4000
-    );
-  }
-
-  ngOnInit() {
-    this.appareils = this.appareilService.appareils;
-  }
-
-  onAllumer() {
-    this.appareilService.switchOnAll();
-  }
+    constructor() {
+    }
 
-  onEteindre() {
-    if (confirm('Etes-vous sûr de vouloir éteindre tous vos appareils ?')) {
-      this.appareilService.switchOffAll();
-    } else {
-      return null;
+    ngOnInit() {
     }
-  }
 }

src/app/app.component.ts

@@ -4,18 +4,41 @@ import { AppComponent } from './app.component';
 import { AppareilComponent } from './appareil/appareil.component';
 import { FormsModule } from '@angular/forms';
 import { AppareilService } from './services/appareil.service';
+import { AuthComponent } from './auth/auth.component';
+import { AppareilViewComponent } from './appareil-view/appareil-view.component';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthService } from './services/auth.service';
+import { SingleAppareilComponent } from './single-appareil/single-appareil.component';
+import { FourOhFourComponent } from './four-oh-four/four-oh-four.component';
+import { AuthGuard } from './services/auth-guard.service';
+
+const appRoutes: Routes = [
+    { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
+    { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent },
+    { path: 'auth', component: AuthComponent },
+    { path: '', component: AuthComponent },
+    { path: 'not-found', component: FourOhFourComponent },
+    { path: '**', redirectTo: 'not-found' }
+];
 
 @NgModule({
   declarations: [
     AppComponent,
-    AppareilComponent
+    AppareilComponent,
+    AuthComponent,
+    AppareilViewComponent,
+    SingleAppareilComponent,
+    FourOhFourComponent
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    RouterModule.forRoot(appRoutes)
   ],
   providers: [
-      AppareilService
+      AppareilService,
+      AuthService,
+      AuthGuard
   ],
   bootstrap: [AppComponent]
 })

src/app/app.module.ts

@@ -0,0 +1,19 @@
+<div class="container">
+    <div class="row">
+        <div class="col-xs-12">
+            <h2>Mes appareils</h2>
+            <p>Mis à jour le : {{ lastUpdate | async | date: 'd MMMM y' | uppercase }}</p>
+            <ul class="list-group">
+                <app-appareil  *ngFor="let appareil of appareils; let i = index"
+                               [appareilName]="appareil.name"
+                               [appareilStatus]="appareil.status"
+                               [index]="i"
+                               [id]="appareil.id"></app-appareil>
+            </ul>
+            <button class="btn btn-success"
+                    (click)="onAllumer()">Tout allumer</button>
+            <button class="btn btn-danger"
+                    (click)="onEteindre()">Tout éteindre</button>
+        </div>
+    </div>
+</div>

src/app/appareil-view/appareil-view.component.html

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { AppareilService } from '../services/appareil.service';
+
+@Component({
+  selector: 'app-appareil-view',
+  templateUrl: './appareil-view.component.html',
+  styleUrls: ['./appareil-view.component.scss']
+})
+export class AppareilViewComponent implements OnInit {
+
+  isAuth = false;
+  appareils: any[];
+
+  lastUpdate = new Promise((resolve, reject) => {
+    const date = new Date();
+    setTimeout(
+        () => {
+          resolve(date);
+        }, 2000
+    );
+  });
+
+  constructor(private appareilService: AppareilService) {
+    setTimeout(() => {
+      this.isAuth = true;
+    }, 3000);
+  }
+
+  ngOnInit() {
+    this.appareils = this.appareilService.appareils;
+  }
+
+  onAllumer() {
+    this.appareilService.switchOnAll();
+  }
+
+  onEteindre() {
+    if (confirm('Etes-vous sûr de vouloir éteindre tous vos appareils ?')) {
+      this.appareilService.switchOffAll();
+    } else {
+      return null;
+    }
+  }
+
+}

src/app/appareil-view/appareil-view.component.scss

@@ -3,6 +3,7 @@
                 'list-group-item-danger': appareilStatus === 'éteint'}">
 
     <h4 [ngStyle]="{color: getColor()}">Appareil : {{ appareilName }} -- Statut : {{ appareilStatus }}</h4>
+    <a [routerLink]="[id]">Détail</a>
     <input type="text" class="form-control" [(ngModel)]="appareilName">
 
     <button class="btn btn-sm btn-success"

src/app/appareil-view/appareil-view.component.ts

@@ -12,6 +12,7 @@ export class AppareilComponent implements OnInit {
   @Input() appareilName: string;
   @Input() appareilStatus: string;
   @Input() index: number;
+  @Input() id: number;
 
   constructor(private appareilService: AppareilService) {
   }

src/app/appareil/appareil.component.html

@@ -0,0 +1,3 @@
+<h2>Authentification</h2>
+<button class="btn btn-success" *ngIf="!authStatus" (click)="onSignIn()">Se connecter</button>
+<button class="btn btn-danger" *ngIf="authStatus" (click)="onSignOut()">Se déconnecter</button>

src/app/appareil/appareil.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.scss']
+})
+export class AuthComponent implements OnInit {
+
+  authStatus: boolean;
+
+  constructor(private authService: AuthService, private router: Router) { }
+
+  ngOnInit() {
+    this.authStatus = this.authService.isAuth;
+  }
+
+  onSignIn() {
+    this.authService.signIn().then(
+        () => {
+          console.log('Sign in successful!');
+          this.authStatus = this.authService.isAuth;
+          this.router.navigate(['appareils']);
+        }
+    );
+  }
+
+  onSignOut() {
+    this.authService.signOut();
+    this.authStatus = this.authService.isAuth;
+  }
+
+}

src/app/auth/auth.component.html

@@ -0,0 +1 @@
+<p>four-oh-four works!</p>

src/app/auth/auth.component.scss

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

src/app/auth/auth.component.ts

@@ -1,14 +1,17 @@
 export class AppareilService {
     appareils = [
         {
+            id: 1,
             name: 'Machine à laver',
             status: 'éteint'
         },
         {
+            id: 2,
             name: 'Frigo',
             status: 'allumé'
         },
         {
+            id: 3,
             name: 'Ordinateur',
             status: 'éteint'
         }
@@ -33,4 +36,12 @@ export class AppareilService {
     switchOffOne(i: number) {
         this.appareils[i].status = 'éteint';
     }
+
+    getAppareilById(id: number) {
+        return this.appareils.find(
+            (s) => {
+                return s.id === id;
+            }
+        );
+    }
 }

src/app/four-oh-four/four-oh-four.component.html

@@ -0,0 +1,21 @@
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { AuthService } from './auth.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+
+    constructor(private authService: AuthService,
+                private router: Router) { }
+
+    canActivate(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+        if (this.authService.isAuth) {
+            return true;
+        } else {
+            this.router.navigate(['/auth']);
+        }
+    }
+}

src/app/four-oh-four/four-oh-four.component.scss

@@ -0,0 +1,20 @@
+export class AuthService {
+    isAuth = false;
+
+    signIn() {
+        return new Promise(
+            (resolve, reject) => {
+                setTimeout(
+                    () => {
+                        this.isAuth = true;
+                        resolve(true);
+                    }, 2000
+                );
+            }
+        );
+    }
+
+    signOut() {
+        this.isAuth = false;
+    }
+}

src/app/four-oh-four/four-oh-four.component.ts

@@ -0,0 +1,3 @@
+<h2>{{ name }}</h2>
+<p>Statut : {{ status }}</p>
+<a routerLink="/appareils">Retour à la liste</a>

src/app/services/appareil.service.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { AppareilService } from '../services/appareil.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-single-appareil',
+  templateUrl: './single-appareil.component.html',
+  styleUrls: ['./single-appareil.component.scss']
+})
+export class SingleAppareilComponent implements OnInit {
+
+  name = 'Appareil';
+  status = 'Statut';
+
+  constructor(private appareilService: AppareilService, private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    const id = this.route.snapshot.params['id'];
+    this.name = this.appareilService.getAppareilById(+id).name;
+    this.status = this.appareilService.getAppareilById(+id).status;
+  }
+
+}