add appareil compponent

Author: majid noureddine

src/app/app.component.html

@@ -1,4 +1,16 @@
-<div style="text-align:center">
-  <h1>Welcome to {{ title }}!</h1>
+<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"
+                       [appareilName]="appareil.name"
+                       [appareilStatus]="appareil.status"></app-appareil>
+      </ul>
+      <button class="btn btn-success"
+              [disabled]="!isAuth"
+              (click)="onAllumer()">Tout allumer</button>
+    </div>
+  </div>
 </div>
-<app-mon-premier></app-mon-premier>

src/app/app.component.ts

@@ -6,5 +6,40 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'my first angular project';
+
+  isAuth = false;
+  lastUpdate = new Promise((resolve, reject) => {
+    const date = new Date();
+    setTimeout(
+        () => {
+          resolve(date);
+        }, 2000
+    );
+  });
+  appareils = [
+    {
+      name: 'Machine à laver',
+      status: 'éteint'
+    },
+    {
+      name: 'Frigo',
+      status: 'allumé'
+    },
+    {
+      name: 'Ordinateur',
+      status: 'éteint'
+    }
+  ];
+
+  constructor() {
+    setTimeout(
+        () => {
+          this.isAuth = true;
+        }, 4000
+    );
+  }
+
+  onAllumer() {
+    console.log('On allume tout !');
+  }
 }

src/app/app.module.ts

@@ -1,18 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { MonPremierComponent } from './mon-premier/mon-premier.component';
+import { AppareilComponent } from './appareil/appareil.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent,
-    MonPremierComponent
+    AppareilComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/appareil/appareil.component.html

@@ -0,0 +1,8 @@
+<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">
+</li>

src/app/mon-premier/mon-premier.component.scss renamed to src/app/appareil/appareil.component.scss

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-appareil',
+  templateUrl: './appareil.component.html',
+  styleUrls: ['./appareil.component.scss']
+})
+
+export class AppareilComponent implements OnInit {
+
+  @Input() appareilName: string;
+  @Input() appareilStatus: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  getColor() {
+    if (this.appareilStatus === 'allumé') {
+      return 'green';
+    } else if (this.appareilStatus === 'éteint') {
+      return 'red';
+    }
+  }
+}