Appareil service

src/app/app.component.html

@@ -4,13 +4,17 @@
       <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"
+        <app-appareil  *ngFor="let appareil of appareils; let i = index"
                        [appareilName]="appareil.name"
-                       [appareilStatus]="appareil.status"></app-appareil>
+                       [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>
     </div>
   </div>
 </div>

src/app/app.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import { AppareilService } from './services/appareil.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   isAuth = false;
   lastUpdate = new Promise((resolve, reject) => {
@@ -16,30 +17,29 @@ export class AppComponent {
         }, 2000
     );
   });
-  appareils = [
-    {
-      name: 'Machine à laver',
-      status: 'éteint'
-    },
-    {
-      name: 'Frigo',
-      status: 'allumé'
-    },
-    {
-      name: 'Ordinateur',
-      status: 'éteint'
-    }
-  ];
+  appareils: any[];
 
-  constructor() {
+  constructor(private appareilService: AppareilService) {
     setTimeout(
         () => {
           this.isAuth = true;
         }, 4000
     );
   }
 
+  ngOnInit() {
+    this.appareils = this.appareilService.appareils;
+  }
+
   onAllumer() {
-    console.log('On allume tout !');
+    this.appareilService.switchOnAll();
+  }
+
+  onEteindre() {
+    if (confirm('Etes-vous sûr de vouloir éteindre tous vos appareils ?')) {
+      this.appareilService.switchOffAll();
+    } else {
+      return null;
+    }
   }
 }

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AppareilComponent } from './appareil/appareil.component';
 import { FormsModule } from '@angular/forms';
+import { AppareilService } from './services/appareil.service';
 
 @NgModule({
   declarations: [
@@ -13,7 +14,9 @@ import { FormsModule } from '@angular/forms';
     BrowserModule,
     FormsModule
   ],
-  providers: [],
+  providers: [
+      AppareilService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/appareil/appareil.component.html

@@ -1,8 +1,15 @@
 <li [ngClass]="{'list-group-item': true,
                 'list-group-item-success': appareilStatus === 'allumé',
                 'list-group-item-danger': appareilStatus === 'éteint'}">
-    <div style="width:20px;height:20px;background-color:red;"
-         *ngIf="appareilStatus === 'éteint'"></div>
+
     <h4 [ngStyle]="{color: getColor()}">Appareil : {{ appareilName }} -- Statut : {{ appareilStatus }}</h4>
     <input type="text" class="form-control" [(ngModel)]="appareilName">
+
+    <button class="btn btn-sm btn-success"
+            *ngIf="appareilStatus === 'éteint'"
+            (click)="onSwitch()">Allumer</button>
+    <button class="btn btn-sm btn-danger"
+            *ngIf="appareilStatus === 'allumé'"
+            (click)="onSwitch()">Eteindre</button>
+
 </li>

src/app/appareil/appareil.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { AppareilService } from '../services/appareil.service';
 
 @Component({
   selector: 'app-appareil',
@@ -10,8 +11,10 @@ export class AppareilComponent implements OnInit {
 
   @Input() appareilName: string;
   @Input() appareilStatus: string;
+  @Input() index: number;
 
-  constructor() { }
+  constructor(private appareilService: AppareilService) {
+  }
 
   ngOnInit() {
   }
@@ -23,4 +26,12 @@ export class AppareilComponent implements OnInit {
       return 'red';
     }
   }
+
+  onSwitch() {
+    if (this.appareilStatus === 'allumé') {
+      this.appareilService.switchOffOne(this.index);
+    } else if (this.appareilStatus === 'éteint') {
+      this.appareilService.switchOnOne(this.index);
+    }
+  }
 }

src/app/services/appareil.service.ts

@@ -0,0 +1,36 @@
+export class AppareilService {
+    appareils = [
+        {
+            name: 'Machine à laver',
+            status: 'éteint'
+        },
+        {
+            name: 'Frigo',
+            status: 'allumé'
+        },
+        {
+            name: 'Ordinateur',
+            status: 'éteint'
+        }
+    ];
+
+    switchOnAll() {
+        for (let appareil of this.appareils) {
+            appareil.status = 'allumé';
+        }
+    }
+
+    switchOffAll() {
+        for (let appareil of this.appareils) {
+            appareil.status = 'éteint';
+        }
+    }
+
+    switchOnOne(i: number) {
+        this.appareils[i].status = 'allumé';
+    }
+
+    switchOffOne(i: number) {
+        this.appareils[i].status = 'éteint';
+    }
+}