switch on or off one appareill

Author: majid noureddine

src/app/app.component.html

@@ -4,9 +4,10 @@
       <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"

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

@@ -25,4 +25,12 @@ export class AppareilService {
             appareil.status = 'éteint';
         }
     }
+
+    switchOnOne(i: number) {
+        this.appareils[i].status = 'allumé';
+    }
+
+    switchOffOne(i: number) {
+        this.appareils[i].status = 'éteint';
+    }
 }