From efcb2d045dd8b8071085594261b5788346883618 Mon Sep 17 00:00:00 2001
From: ucozlab <la-3111@mail.ru>
Date: Sun, 19 Feb 2017 11:59:06 +0200
Subject: [PATCH 1/3] routing done

---
 .../homework_angular2/package.json            |  11 +-
 .../homework_angular2/src/app/index.html      |   1 +
 .../src/app/scripts/app.component.ts          | 108 +++---------------
 .../src/app/scripts/app.module.ts             |  26 ++++-
 .../src/app/scripts/app.routing.module.ts     |  17 +++
 .../src/app/scripts/dashboard.component.html  |   6 +
 .../src/app/scripts/dashboard.component.ts    |  22 ++++
 .../app/scripts/hero-detail.component.html    |  20 ++++
 .../src/app/scripts/hero-detail.component.ts  |  47 ++++----
 .../src/app/scripts/hero.service.ts           |   4 +
 .../src/app/scripts/heroes.component.ts       |  59 ++++++++++
 .../src/app/scripts/in-memory-data.service.ts |   3 +
 .../homework_angular2/src/style.scss          |   8 --
 .../src/styles/app.component.scss             |  28 +++++
 .../src/styles/dashboard.component.scss       |  61 ++++++++++
 .../src/styles/heroes.component.scss          |  50 ++++++++
 .../homework_angular2/src/styles/style.scss   |  29 +++++
 .../homework_angular2/src/vendor/main.ts      |   6 +-
 18 files changed, 371 insertions(+), 135 deletions(-)
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.routing.module.ts
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.ts
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
 delete mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/style.scss
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss

diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
index edb6e3f0..bbc666ac 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
@@ -11,11 +11,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@angular/common": "^2.4.6",
+    "@angular/common": "^2.4.7",
     "@angular/compiler": "^2.4.6",
-    "@angular/core": "^2.4.6",
-    "@angular/platform-browser": "^2.4.6",
+    "@angular/core": "^2.4.7",
+    "@angular/forms": "^2.4.6",
+    "@angular/http": "^2.4.8",
+    "@angular/platform-browser": "^2.4.7",
     "@angular/platform-browser-dynamic": "^2.4.6",
+    "@angular/router": "^3.4.7",
     "bootstrap": "^4.0.0-alpha.6",
     "bootstrap-v4-webpack": "^1.0.1",
     "es6-shim": "^0.35.3",
@@ -24,7 +27,6 @@
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/forms": "^2.4.6",
     "angular2-template-loader": "^0.6.1",
     "awesome-typescript-loader": "^3.0.0-beta.20",
     "css-loader": "^0.26.1",
@@ -34,6 +36,7 @@
     "raw-loader": "^0.5.1",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
+    "to-string-loader": "^1.1.5",
     "ts-loader": "^2.0.0",
     "tslint": "^4.4.2",
     "tslint-loader": "^3.3.0",
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/index.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/index.html
index 23ea7188..e89f3823 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/index.html
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.component.ts
index d78a74f5..aa4735d2 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.component.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.component.ts
@@ -1,98 +1,18 @@
-import { Component, OnInit } from "@angular/core";
-import { Hero } from "./hero";
-import { HeroService } from "./hero.service";
+import { Component } from "@angular/core";
 
 @Component({
-    selector: "my-app",
-    template:`
-        <main class="row">
-            <div class="col-4">
-                <h2>My Heroes</h2>
-                <ul class="heroes">
-                    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
-                        <span class="badge">{{hero.id}}</span> {{hero.name}}
-                    </li>
-                </ul>
-            </div>
-            <div class="col-8">
-                <my-hero-detail [hero]="selectedHero"></my-hero-detail>
-            </div>
-        </main>
-        `,
-    styles: [`
-      main {
-        width: 100%;
-        max-width: 991px;
-        margin: 30px auto;
-      }
-      .selected {
-        background-color: #CFD8DC !important;
-        color: white;
-      }
-      .heroes {
-        margin: 0 0 2em 0;
-        list-style-type: none;
-        padding: 0;
-        width: 15em;
-      }
-      .heroes li {
-        cursor: pointer;
-        position: relative;
-        left: 0;
-        background-color: #EEE;
-        margin: .5em;
-        padding: .3em 0 .3em 3em;
-        border-radius: 4px;
-      }
-      .heroes li.selected:hover {
-        background-color: #BBD8DC !important;
-        color: white;
-      }
-      .heroes li:hover {
-        color: #607D8B;
-        background-color: #DDD;
-        left: .1em;
-      }
-      .heroes .text {
-        position: relative;
-        top: -3px;
-      }
-      .heroes .badge {
-        display: inline-block;
-        font-size: small;
-        color: white;
-        padding: 0.8em 0.7em 0 0.7em;
-        background-color: #607D8B;
-        line-height: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        border-radius: 4px 0 0 4px;
-      }
-    `],
-    providers: [HeroService]
+    selector: 'my-app',
+    template: `
+       <h1>{{title}}</h1>
+       <nav>
+            <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+            <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+       </nav>
+       <main>
+            <router-outlet></router-outlet>
+       </main>
+  `
 })
-
-export class AppComponent implements OnInit {
-    title = "Tour of Heroes";
-    selectedHero: Hero;
-    heroes: Hero[];
-
-    constructor (private heroService: HeroService) {}
-
-    ngOnInit(): void {
-        this.getHeroes();
-    }
-
-    getHeroes(): void {
-        this.heroService.getHeroes()
-            .then((heroes) => {
-                this.heroes = heroes;
-            });
-    }
-
-    onSelect = (hero:Hero) => {
-        this.selectedHero = hero;
-    }
+export class AppComponent {
+    title = 'Tour of Heroes';
 }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
index e02ce3b7..46a1b597 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
@@ -1,14 +1,32 @@
 import { NgModule }      from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule }   from "@angular/forms";
-import { AppComponent }  from "./app.component";
+import { HttpModule }    from '@angular/http';
+
+import { HeroesComponent }  from "./heroes.component";
+import { AppComponent } from "./app.component";
+import { DashboardComponent } from "./dashboard.component";
 import { HeroDetailComponent } from "./hero-detail.component";
 import { HeroEditComponent } from "./hero-edit.component";
+import { HeroService } from './hero.service';
+import { AppRoutingModule }     from './app.routing.module';
 
 @NgModule({
-    imports:      [ BrowserModule, FormsModule ],
-    declarations: [ AppComponent, HeroDetailComponent, HeroEditComponent ],
+    imports:      [
+        BrowserModule,
+        FormsModule,
+        AppRoutingModule,
+        HttpModule
+    ],
+    declarations: [
+        AppComponent,
+        HeroesComponent,
+        DashboardComponent,
+        HeroDetailComponent,
+        HeroEditComponent
+    ],
+    providers: [ HeroService ],
     bootstrap:    [ AppComponent ]
 })
 
-export default class AppModule { }
+export default class AppModule { }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.routing.module.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.routing.module.ts
new file mode 100644
index 00000000..095054d5
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const routes: Routes = [
+    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+    { path: 'dashboard',  component: DashboardComponent },
+    { path: 'detail/:id', component: HeroDetailComponent },
+    { path: 'heroes',     component: HeroesComponent }
+];
+@NgModule({
+    imports: [ RouterModule.forRoot(routes) ],
+    exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
new file mode 100644
index 00000000..8276a492
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
@@ -0,0 +1,6 @@
+<h3>Top Heroes</h3>
+<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+    <div class="module hero">
+        <h4>{{hero.name}}</h4>
+    </div>
+</a>
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.ts
new file mode 100644
index 00000000..e1af4280
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+    // moduleId: module.id,
+    selector: 'my-dashboard',
+    templateUrl: './dashboard.component.html',
+})
+
+export class DashboardComponent implements OnInit {
+
+    heroes: Hero[] = [];
+
+    constructor(private heroService: HeroService) { }
+
+    ngOnInit(): void {
+        this.heroService.getHeroes()
+            .then(heroes => this.heroes = heroes.slice(1, 5));
+    }
+}
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
new file mode 100644
index 00000000..94d7725e
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
@@ -0,0 +1,20 @@
+<div *ngIf="hero" class="row">
+    <div class="col-6">
+        <h2>Hero details</h2>
+        <p>
+            <img [src]="hero.image" alt="{{hero.name}}">
+        </p>
+        <div><label>id: </label> {{hero.id}}</div>
+        <div><label>name: </label> {{hero.name}}</div>
+        <div><label>age: </label> {{hero.age}}</div>
+        <div><label>skill: </label> {{hero.skill}}</div>
+        <div>
+            <button type="button" (click)="allowEdit(true)" class="btn btn-info">Edit</button>
+        </div>
+    </div>
+    <div class="col-6">
+        <my-hero-edit [hero]="hero" [canEdit]="canEdit" (allowEdit)="allowEdit($event)"></my-hero-edit>
+    </div>
+</div>
+<br/>
+<button class="btn btn-info" (click)="goBack()">Back</button>
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.ts
index 05866adc..f2ca7428 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.ts
@@ -1,31 +1,30 @@
-import { Component, Input, OnChanges } from "@angular/core";
+import { Component, Input, OnInit, OnChanges } from "@angular/core";
 import { Hero } from "./hero";
+import { ActivatedRoute, Params }   from '@angular/router';
+import { Location }                 from '@angular/common';
+import { HeroService } from './hero.service';
+import 'rxjs/add/operator/switchMap';
 
 @Component({
+    // moduleId: module.id,
     selector: "my-hero-detail",
-    template: `
-        <div *ngIf="hero" class="row">
-            <div class="col-6">
-                <h2>Hero details</h2>
-                <p>
-                    <img [src]="hero.image" alt="{{hero.name}}">
-                </p>
-                <div><label>id: </label> {{hero.id}}</div>
-                <div><label>name: </label> {{hero.name}}</div>
-                <div><label>age: </label> {{hero.age}}</div>
-                <div><label>skill: </label> {{hero.skill}}</div>
-                <div>
-                    <button type="button" (click)="allowEdit(true)" class="btn btn-info">Edit</button>
-                </div>
-            </div>
-            <div class="col-6">
-                <my-hero-edit [hero]="hero" [canEdit]="canEdit" (allowEdit)="allowEdit($event)"></my-hero-edit>
-            </div>
-        </div>
-        `
+    templateUrl: "./hero-detail.component.html"
 })
 
-export class HeroDetailComponent {
+export class HeroDetailComponent implements OnInit {
+
+    constructor(
+        private heroService: HeroService,
+        private route: ActivatedRoute,
+        private location: Location
+    ) {}
+
+    ngOnInit(): void {
+        this.route.params
+            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+            .subscribe(hero => this.hero = hero);
+    }
+
     @Input()
     hero: Hero;
     canEdit: boolean = false;
@@ -38,4 +37,8 @@ export class HeroDetailComponent {
         this.canEdit = condition;
     }
 
+    goBack(): void {
+        this.location.back();
+    }
+
 }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
index 05bc7846..9289b67f 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
@@ -7,4 +7,8 @@ export class HeroService {
     getHeroes(): Promise<Hero[]> {
         return Promise.resolve(HEROES);
     }
+    getHero(id: number): Promise<Hero> {
+        return this.getHeroes()
+            .then(heroes => heroes.find(hero => hero.id === id));
+    }
 }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
new file mode 100644
index 00000000..0d753552
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from '@angular/router';
+import { Hero } from "./hero";
+import { HeroService } from "./hero.service";
+
+@Component({
+    selector: "my-heroes",
+    template:`
+        <div class="row">
+            <div class="col-4">
+                <h2>My Heroes</h2>
+                <ul class="heroes">
+                    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+                        <span class="badge">{{hero.id}}</span> {{hero.name}}
+                    </li>
+                </ul>
+            </div>
+            <div class="col-8">
+                <div *ngIf="selectedHero">
+                    <h2>
+                        {{selectedHero.name | uppercase}} is my hero
+                    </h2>
+                    <button class="btn" (click)="gotoDetail()">View Details</button>
+                </div>
+            </div>
+        </div>
+        `
+})
+
+export class HeroesComponent implements OnInit {
+    title = "Tour of Heroes";
+    selectedHero: Hero;
+    heroes: Hero[];
+
+    constructor (
+        private router: Router,
+        private heroService: HeroService
+    ) {}
+
+    ngOnInit(): void {
+        this.getHeroes();
+    }
+
+    getHeroes(): void {
+        this.heroService.getHeroes()
+            .then((heroes) => {
+                this.heroes = heroes;
+            });
+    }
+
+    onSelect = (hero:Hero) => {
+        this.selectedHero = hero;
+    }
+
+    gotoDetail(): void {
+        this.router.navigate(['/detail', this.selectedHero.id]);
+    }
+
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
new file mode 100644
index 00000000..be359037
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
@@ -0,0 +1,3 @@
+/**
+ * Created by artem on 2/19/17.
+ */
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/style.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/style.scss
deleted file mode 100644
index ea66a750..00000000
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import '~bootstrap/scss/bootstrap.scss';
-
-button {
-  cursor: pointer;
-}
-label {
-  min-width: 50px;
-}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss
new file mode 100644
index 00000000..984e4c10
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss
@@ -0,0 +1,28 @@
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss
new file mode 100644
index 00000000..4c023194
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss
@@ -0,0 +1,61 @@
+[class*='col-'] {
+  float: left;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+a {
+  text-decoration: none;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+h4 {
+  position: relative;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss
new file mode 100644
index 00000000..8283ae12
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss
@@ -0,0 +1,50 @@
+main {
+  width: 100%;
+  max-width: 991px;
+  margin: 30px auto;
+}
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0 .3em 3em;
+  border-radius: 4px;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 4px 0 0 4px;
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss
new file mode 100644
index 00000000..fb7bd1cd
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss
@@ -0,0 +1,29 @@
+@import '~bootstrap/scss/bootstrap.scss';
+@import "app.component";
+@import "dashboard.component";
+@import "heroes.component";
+
+button {
+  cursor: pointer;
+}
+label {
+  min-width: 50px;
+}
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
index f5092992..2dc37f61 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
@@ -5,14 +5,14 @@ import "@angular/platform-browser";
 import "@angular/platform-browser-dynamic";
 import "@angular/core";
 import "@angular/common";
-// import "@angular/http";
-// import "@angular/router";
+import "@angular/http";
+import "@angular/router";
 // import "@angularclass/hmr";
 
 import "rxjs";
 import "zone.js";
 
-import "../style.scss";
+import "../styles/style.scss";
 
 // Other vendors for example jQuery, Lodash or Bootstrap
 // You can import js, ts, css, sass, ...

From 0154b8a02a5fc77cb36f5dfd57895890c09d09d5 Mon Sep 17 00:00:00 2001
From: ucozlab <la-3111@mail.ru>
Date: Sun, 19 Feb 2017 12:47:52 +0200
Subject: [PATCH 2/3] http requests & search done

---
 .../homework_angular2/package.json            |  1 +
 .../src/app/mock-data/mock-heroes.ts          | 14 -----
 .../src/app/scripts/app.module.ts             | 11 +++-
 .../src/app/scripts/dashboard.component.html  | 15 +++--
 .../app/scripts/hero-detail.component.html    | 10 +++-
 .../src/app/scripts/hero-edit.component.ts    | 13 ++++
 .../src/app/scripts/hero-search.component.ts  | 59 +++++++++++++++++++
 .../src/app/scripts/hero-search.service.ts    | 15 +++++
 .../src/app/scripts/hero.service.ts           | 59 +++++++++++++++++--
 .../src/app/scripts/heroes.component.ts       | 25 ++++++++
 .../src/app/scripts/in-memory-data.service.ts | 21 ++++++-
 .../src/{ => app}/styles/app.component.scss   |  0
 .../{ => app}/styles/dashboard.component.scss |  0
 .../src/app/styles/hero-search.component.scss | 13 ++++
 .../{ => app}/styles/heroes.component.scss    |  0
 .../src/{ => app}/styles/style.scss           |  1 +
 .../homework_angular2/src/vendor/main.ts      |  2 +-
 17 files changed, 226 insertions(+), 33 deletions(-)
 delete mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/mock-data/mock-heroes.ts
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.component.ts
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.service.ts
 rename homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/{ => app}/styles/app.component.scss (100%)
 rename homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/{ => app}/styles/dashboard.component.scss (100%)
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/hero-search.component.scss
 rename homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/{ => app}/styles/heroes.component.scss (100%)
 rename homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/{ => app}/styles/style.scss (93%)

diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
index bbc666ac..05160de1 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json
@@ -27,6 +27,7 @@
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
+    "angular-in-memory-web-api": "^0.2.4",
     "angular2-template-loader": "^0.6.1",
     "awesome-typescript-loader": "^3.0.0-beta.20",
     "css-loader": "^0.26.1",
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/mock-data/mock-heroes.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/mock-data/mock-heroes.ts
deleted file mode 100644
index 7e1501a0..00000000
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/mock-data/mock-heroes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Hero } from '../scripts/hero';
-
-export const HEROES: Hero[] = [
-    {id: 11, name: 'Mr. Nice', age: 25, skill: "Dark Magic", image: "./public/hero-images/DestructiveMagic_DemonicFlame.gif"},
-    {id: 12, name: 'Narco', age: 28, skill: "Destructive Magic", image: "./public/hero-images/Offence_Frenzy.gif"},
-    {id: 13, name: 'Bombasto', age: 45, skill: "Logistics", image: "./public/hero-images/DestructiveMagic_MasterOfLightnings.gif"},
-    {id: 14, name: 'Celeritas', age: 125, skill: "Enlightenment", image: "./public/hero-images/Gating_AbsoluteGating.gif"},
-    {id: 15, name: 'Magneta', age: 34, skill: "Sorcery", image: "./public/hero-images/Learning_DarkRevelation.gif"},
-    {id: 16, name: 'RubberMan', age: 17, skill: "Summoning Magic", image: "./public/hero-images/Learning_EagleEye.gif"},
-    {id: 17, name: 'Dynama', age: 325, skill: "War Machines", image: "./public/hero-images/Learning_Intelligence.gif"},
-    {id: 18, name: 'Dr IQ', age: 26, skill: "Leadership", image: "./public/hero-images/LightMagic_MasterOfAbjuration.gif"},
-    {id: 19, name: 'Magma', age: 28, skill: "Attack", image: "./public/hero-images/Logistics_TeleportAssault.gif"},
-    {id: 20, name: 'Tornado', age: 21, skill: "Defence", image: "./public/hero-images/DestructiveMagic_MasterOfIce.gif"}
-];
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
index 46a1b597..b4721211 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
@@ -8,22 +8,29 @@ import { AppComponent } from "./app.component";
 import { DashboardComponent } from "./dashboard.component";
 import { HeroDetailComponent } from "./hero-detail.component";
 import { HeroEditComponent } from "./hero-edit.component";
+import { HeroSearchComponent } from "./hero-search.component";
 import { HeroService } from './hero.service';
 import { AppRoutingModule }     from './app.routing.module';
 
+// Imports for loading & configuring the in-memory web api
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+
 @NgModule({
     imports:      [
         BrowserModule,
         FormsModule,
         AppRoutingModule,
-        HttpModule
+        HttpModule,
+        InMemoryWebApiModule.forRoot(InMemoryDataService),
     ],
     declarations: [
         AppComponent,
         HeroesComponent,
         DashboardComponent,
         HeroDetailComponent,
-        HeroEditComponent
+        HeroEditComponent,
+        HeroSearchComponent
     ],
     providers: [ HeroService ],
     bootstrap:    [ AppComponent ]
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
index 8276a492..db952490 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html
@@ -1,6 +1,13 @@
 <h3>Top Heroes</h3>
-<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
-    <div class="module hero">
-        <h4>{{hero.name}}</h4>
+<div class="row">
+    <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+        <div class="module hero">
+            <h4>{{hero.name}}</h4>
+        </div>
+    </a>
+</div>
+<div class="row">
+    <div class="col-12">
+        <hero-search></hero-search>
     </div>
-</a>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
index 94d7725e..bdff465e 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="hero" class="row">
-    <div class="col-6">
+    <div class="col-4">
         <h2>Hero details</h2>
         <p>
             <img [src]="hero.image" alt="{{hero.name}}">
@@ -11,9 +11,13 @@ <h2>Hero details</h2>
         <div>
             <button type="button" (click)="allowEdit(true)" class="btn btn-info">Edit</button>
         </div>
+        <div>
+            <button type="button" (click)="delete(hero); $event.stopPropagation()" class="btn btn-danger">X</button>
+        </div>
+
     </div>
-    <div class="col-6">
-        <my-hero-edit [hero]="hero" [canEdit]="canEdit" (allowEdit)="allowEdit($event)"></my-hero-edit>
+    <div class="col-4">
+        <my-hero-edit [hero]="hero" [canEdit]="canEdit" (goBack)="goBack()" (allowEdit)="allowEdit($event)"></my-hero-edit>
     </div>
 </div>
 <br/>
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
index 752b6822..f4793a8d 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { Hero } from "./hero";
+import { HeroService } from './hero.service';
 
 @Component({
     selector: "my-hero-edit",
@@ -29,6 +30,9 @@ import { Hero } from "./hero";
             <div>
                 <button type="button" (click)="saveHero()" class="btn btn-success">Save</button>
             </div>
+            <!--<div>-->
+                <!--<button class="btn btn-danger" (click)="delete(hero); $event.stopPropagation()">Delete</button>-->
+            <!--</div>-->
         </div>
         `
 })
@@ -40,8 +44,17 @@ export class HeroEditComponent {
     canEdit: boolean;
 
     @Output() allowEdit = new EventEmitter<boolean>();
+    @Output() goBack    = new EventEmitter<boolean>();
+
+    constructor(
+        private heroService: HeroService
+    ) {}
 
     saveHero() {
         this.allowEdit.emit(false);
     }
+    save(): void {
+        this.heroService.update(this.hero)
+            .then(() => this.goBack.emit());
+    }
 }
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.component.ts
new file mode 100644
index 00000000..b7e39034
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router';
+import { Observable }        from 'rxjs/Observable';
+import { Subject }           from 'rxjs/Subject';
+// Observable class extensions
+import 'rxjs/add/observable/of';
+// Observable operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import { HeroSearchService } from './hero-search.service';
+import { Hero } from './hero';
+@Component({
+    // moduleId: module.id,
+    selector: 'hero-search',
+    template: `
+        <div id="search-component">
+          <h4>Hero Search</h4>
+          <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+          <div>
+            <div *ngFor="let hero of heroes | async"
+                 (click)="gotoDetail(hero)" class="search-result" >
+              {{hero.name}}
+            </div>
+          </div>
+        </div>
+    `,
+    providers: [HeroSearchService]
+})
+export class HeroSearchComponent implements OnInit {
+    heroes: Observable<Hero[]>;
+    private searchTerms = new Subject<string>();
+    constructor(
+        private heroSearchService: HeroSearchService,
+        private router: Router) {}
+    // Push a search term into the observable stream.
+    search(term: string): void {
+        this.searchTerms.next(term);
+    }
+    ngOnInit(): void {
+        this.heroes = this.searchTerms
+            .debounceTime(300)        // wait 300ms after each keystroke before considering the term
+            .distinctUntilChanged()   // ignore if next search term is same as previous
+            .switchMap(term => term   // switch to new observable each time the term changes
+                // return the http search observable
+                ? this.heroSearchService.search(term)
+                // or the observable of empty heroes if there was no search term
+                : Observable.of<Hero[]>([]))
+            .catch(error => {
+                // TODO: add real error handling
+                console.log(error);
+                return Observable.of<Hero[]>([]);
+            });
+    }
+    gotoDetail(hero: Hero): void {
+        let link = ['/detail', hero.id];
+        this.router.navigate(link);
+    }
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.service.ts
new file mode 100644
index 00000000..8b63d3bf
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-search.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+import { Observable }     from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import { Hero }           from './hero';
+
+@Injectable()
+export class HeroSearchService {
+    constructor(private http: Http) {}
+    search(term: string): Observable<Hero[]> {
+        return this.http
+            .get(`app/heroes/?name=${term}`)
+            .map(response => response.json().data as Hero[]);
+    }
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
index 9289b67f..1ba66725 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.service.ts
@@ -1,14 +1,61 @@
-import { Injectable } from "@angular/core";
-import { Hero } from "./hero";
-import { HEROES } from "../mock-data/mock-heroes";
+import { Injectable }    from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { Hero } from './hero';
 
 @Injectable()
 export class HeroService {
+
+    private heroesUrl = 'api/heroes';  // URL to web api
+
+    private headers = new Headers({'Content-Type': 'application/json'});
+
+    private handleError(error: any): Promise<any> {
+        console.error('An error occurred', error); // for demo purposes only
+        return Promise.reject(error.message || error);
+    }
+
+    constructor(private http: Http) { }
+
     getHeroes(): Promise<Hero[]> {
-        return Promise.resolve(HEROES);
+        return this.http.get(this.heroesUrl)
+            .toPromise()
+            .then(response => response.json().data as Hero[])
+            .catch(this.handleError);
     }
+
     getHero(id: number): Promise<Hero> {
-        return this.getHeroes()
-            .then(heroes => heroes.find(hero => hero.id === id));
+        const url = `${this.heroesUrl}/${id}`;
+        return this.http.get(url)
+            .toPromise()
+            .then(response => response.json().data as Hero)
+            .catch(this.handleError);
+    }
+
+    update(hero: Hero): Promise<Hero> {
+        const url = `${this.heroesUrl}/${hero.id}`;
+        return this.http
+            .put(url, JSON.stringify(hero), {headers: this.headers})
+            .toPromise()
+            .then(() => hero)
+            .catch(this.handleError);
+    }
+
+    create(name: string): Promise<Hero> {
+        return this.http
+            .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
+            .toPromise()
+            .then(res => res.json().data)
+            .catch(this.handleError);
+    }
+
+    delete(id: number): Promise<void> {
+        const url = `${this.heroesUrl}/${id}`;
+        return this.http.delete(url, {headers: this.headers})
+            .toPromise()
+            .then(() => null)
+            .catch(this.handleError);
     }
 }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
index 0d753552..d8ff0dbf 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts
@@ -24,6 +24,12 @@ import { HeroService } from "./hero.service";
                 </div>
             </div>
         </div>
+        <div class="row">
+            <div class="col-12">
+                <label>Hero name:</label> <input #heroName />
+                <button class="btn btn-success" (click)="add(heroName.value); heroName.value=''">Add</button>
+            </div>
+        </div>
         `
 })
 
@@ -56,4 +62,23 @@ export class HeroesComponent implements OnInit {
         this.router.navigate(['/detail', this.selectedHero.id]);
     }
 
+    add(name: string): void {
+        name = name.trim();
+        if (!name) { return; }
+        this.heroService.create(name)
+            .then(hero => {
+                this.heroes.push(hero);
+                this.selectedHero = null;
+            });
+    }
+
+    delete(hero: Hero): void {
+        this.heroService
+            .delete(hero.id)
+            .then(() => {
+                this.heroes = this.heroes.filter(h => h !== hero);
+                if (this.selectedHero === hero) { this.selectedHero = null; }
+            });
+    }
+
 }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
index be359037..d0bf4d69 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
@@ -1,3 +1,18 @@
-/**
- * Created by artem on 2/19/17.
- */
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
+    createDb() {
+        let heroes = [
+            {id: 11, name: 'Mr. Nice', age: 25, skill: "Dark Magic", image: "./public/hero-images/DestructiveMagic_DemonicFlame.gif"},
+            {id: 12, name: 'Narco', age: 28, skill: "Destructive Magic", image: "./public/hero-images/Offence_Frenzy.gif"},
+            {id: 13, name: 'Bombasto', age: 45, skill: "Logistics", image: "./public/hero-images/DestructiveMagic_MasterOfLightnings.gif"},
+            {id: 14, name: 'Celeritas', age: 125, skill: "Enlightenment", image: "./public/hero-images/Gating_AbsoluteGating.gif"},
+            {id: 15, name: 'Magneta', age: 34, skill: "Sorcery", image: "./public/hero-images/Learning_DarkRevelation.gif"},
+            {id: 16, name: 'RubberMan', age: 17, skill: "Summoning Magic", image: "./public/hero-images/Learning_EagleEye.gif"},
+            {id: 17, name: 'Dynama', age: 325, skill: "War Machines", image: "./public/hero-images/Learning_Intelligence.gif"},
+            {id: 18, name: 'Dr IQ', age: 26, skill: "Leadership", image: "./public/hero-images/LightMagic_MasterOfAbjuration.gif"},
+            {id: 19, name: 'Magma', age: 28, skill: "Attack", image: "./public/hero-images/Logistics_TeleportAssault.gif"},
+            {id: 20, name: 'Tornado', age: 21, skill: "Defence", image: "./public/hero-images/DestructiveMagic_MasterOfIce.gif"}
+        ];
+        return {heroes};
+    }
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/app.component.scss
similarity index 100%
rename from homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/app.component.scss
rename to homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/app.component.scss
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/dashboard.component.scss
similarity index 100%
rename from homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/dashboard.component.scss
rename to homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/dashboard.component.scss
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/hero-search.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/hero-search.component.scss
new file mode 100644
index 00000000..c3bbaa86
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/hero-search.component.scss
@@ -0,0 +1,13 @@
+.search-result{
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+}
+#search-box{
+  width: 200px;
+  height: 20px;
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/heroes.component.scss
similarity index 100%
rename from homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/heroes.component.scss
rename to homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/heroes.component.scss
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
similarity index 93%
rename from homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss
rename to homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
index fb7bd1cd..8dfb1d1b 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/styles/style.scss
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
@@ -2,6 +2,7 @@
 @import "app.component";
 @import "dashboard.component";
 @import "heroes.component";
+@import "hero-search.component";
 
 button {
   cursor: pointer;
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
index 2dc37f61..f83aab21 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts
@@ -12,7 +12,7 @@ import "@angular/router";
 import "rxjs";
 import "zone.js";
 
-import "../styles/style.scss";
+import "../app/styles/style.scss";
 
 // Other vendors for example jQuery, Lodash or Bootstrap
 // You can import js, ts, css, sass, ...

From eed3e3817311355b9bfebf64ecb9ac52982cf7ff Mon Sep 17 00:00:00 2001
From: ucozlab <la-3111@mail.ru>
Date: Tue, 21 Feb 2017 00:32:26 +0200
Subject: [PATCH 3/3] homework_11/task2: refactoring edit heroes within
 reactive form

---
 .../src/app/scripts/app.module.ts             |  32 +++--
 .../app/scripts/hero-detail.component.html    |   8 +-
 .../src/app/scripts/hero-edit.component.html  |  29 +++++
 .../src/app/scripts/hero-edit.component.ts    |  62 +++++-----
 .../homework_angular2/src/app/scripts/hero.ts |  12 +-
 .../src/app/scripts/in-memory-data.service.ts | 116 ++++++++++++++++--
 .../src/app/styles/style.scss                 |   8 +-
 7 files changed, 197 insertions(+), 70 deletions(-)
 create mode 100644 homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.html

diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
index b4721211..36d7d708 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/app.module.ts
@@ -1,16 +1,19 @@
-import { NgModule }      from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { FormsModule }   from "@angular/forms";
-import { HttpModule }    from '@angular/http';
+import { NgModule }            from "@angular/core";
+import { BrowserModule }       from "@angular/platform-browser";
+import { FormsModule }         from "@angular/forms";
+import { HttpModule }          from '@angular/http';
+import { ReactiveFormsModule } from '@angular/forms';
 
-import { HeroesComponent }  from "./heroes.component";
-import { AppComponent } from "./app.component";
-import { DashboardComponent } from "./dashboard.component";
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+
+import { HeroesComponent }     from "./heroes.component";
+import { AppComponent }        from "./app.component";
+import { DashboardComponent }  from "./dashboard.component";
 import { HeroDetailComponent } from "./hero-detail.component";
-import { HeroEditComponent } from "./hero-edit.component";
+import { HeroEditComponent }   from "./hero-edit.component";
 import { HeroSearchComponent } from "./hero-search.component";
-import { HeroService } from './hero.service';
-import { AppRoutingModule }     from './app.routing.module';
+import { HeroService }         from './hero.service';
+import { AppRoutingModule }    from './app.routing.module';
 
 // Imports for loading & configuring the in-memory web api
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
@@ -23,6 +26,7 @@ import { InMemoryDataService }  from './in-memory-data.service';
         AppRoutingModule,
         HttpModule,
         InMemoryWebApiModule.forRoot(InMemoryDataService),
+        ReactiveFormsModule
     ],
     declarations: [
         AppComponent,
@@ -32,8 +36,12 @@ import { InMemoryDataService }  from './in-memory-data.service';
         HeroEditComponent,
         HeroSearchComponent
     ],
-    providers: [ HeroService ],
-    bootstrap:    [ AppComponent ]
+    providers: [
+        HeroService
+    ],
+    bootstrap:    [
+        AppComponent
+    ]
 })
 
 export default class AppModule { }
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
index bdff465e..dd4356ec 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html
@@ -9,16 +9,12 @@ <h2>Hero details</h2>
         <div><label>age: </label> {{hero.age}}</div>
         <div><label>skill: </label> {{hero.skill}}</div>
         <div>
-            <button type="button" (click)="allowEdit(true)" class="btn btn-info">Edit</button>
+            <button type="button" (click)="allowEdit(true)" class="btn btn-info">Edit</button> <button type="button" (click)="delete(hero); $event.stopPropagation()" class="btn btn-danger">Delete</button>
         </div>
-        <div>
-            <button type="button" (click)="delete(hero); $event.stopPropagation()" class="btn btn-danger">X</button>
-        </div>
-
     </div>
     <div class="col-4">
         <my-hero-edit [hero]="hero" [canEdit]="canEdit" (goBack)="goBack()" (allowEdit)="allowEdit($event)"></my-hero-edit>
     </div>
 </div>
 <br/>
-<button class="btn btn-info" (click)="goBack()">Back</button>
\ No newline at end of file
+<button class="btn btn-secondary" (click)="goBack()">Back</button>
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.html b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.html
new file mode 100644
index 00000000..f88c919e
--- /dev/null
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.html
@@ -0,0 +1,29 @@
+<div *ngIf="canEdit">
+    <h2>Hero edit</h2>
+    <form [formGroup]="heroForm" novalidate>
+        <div class="form-group">
+            <label class="center-block">Image:
+                <input class="form-control" formControlName="image" [(ngModel)]="hero.image">
+            </label>
+        </div>
+        <div class="form-group">
+            <label class="center-block">Name:
+                <input class="form-control" formControlName="name" [(ngModel)]="hero.name">
+            </label>
+        </div>
+        <div class="form-group">
+            <label class="center-block">Age:
+                <input class="form-control" formControlName="age" [(ngModel)]="hero.age">
+            </label>
+        </div>
+        <div class="form-group">
+            <label class="center-block">Skill:
+                <input class="form-control" formControlName="skill" [(ngModel)]="hero.skill">
+            </label>
+        </div>
+    </form>
+    <p>Form value: {{ heroForm.value | json }}</p>
+    <div>
+        <button type="button" (click)="save()" class="btn btn-success">Save</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
index f4793a8d..2511a757 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-edit.component.ts
@@ -1,40 +1,11 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { Hero } from "./hero";
 import { HeroService } from './hero.service';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Address, Hero, states } from "./hero";
 
 @Component({
     selector: "my-hero-edit",
-    template: `
-        <div *ngIf="canEdit">
-            <h2>Hero edit</h2>
-            <p>
-                <label>image: </label>
-                <input [(ngModel)]="hero.image" placeholder="image"/>
-            </p>
-            <p>
-                <label>id: </label>
-                <input type="number" [(ngModel)]="hero.id" placeholder="id"/>
-            </p>
-            <p>
-                <label>name: </label>
-                <input [(ngModel)]="hero.name" placeholder="name"/>
-            </p
-            ><p>
-                <label>age: </label>
-                <input type="number" [(ngModel)]="hero.age" placeholder="age"/>
-            </p>
-            <p>
-                <label>skill: </label>
-                <input [(ngModel)]="hero.skill" placeholder="skill"/>
-            </p>
-            <div>
-                <button type="button" (click)="saveHero()" class="btn btn-success">Save</button>
-            </div>
-            <!--<div>-->
-                <!--<button class="btn btn-danger" (click)="delete(hero); $event.stopPropagation()">Delete</button>-->
-            <!--</div>-->
-        </div>
-        `
+    templateUrl: "./hero-edit.component.html"
 })
 
 export class HeroEditComponent {
@@ -43,18 +14,41 @@ export class HeroEditComponent {
     @Input()
     canEdit: boolean;
 
+    heroForm: FormGroup; // <--- heroForm is of type FormGroup
+    states = states;
+
     @Output() allowEdit = new EventEmitter<boolean>();
     @Output() goBack    = new EventEmitter<boolean>();
 
     constructor(
+        private fb: FormBuilder,
         private heroService: HeroService
-    ) {}
+    ) { // <--- inject FormBuilder
+
+    }
+
+    ngOnInit () {
+        this.createForm();
+    }
+
+    createForm() {
+        this.heroForm = this.fb.group({ // <-- the parent FormGroup
+            id: this.hero.id,
+            name: [this.hero.name, Validators.required ],
+            image: this.hero.image,
+            age: this.hero.age,
+            skill: this.hero.skill,
+            // addresses: ''
+        });
+
+    }
 
     saveHero() {
         this.allowEdit.emit(false);
     }
     save(): void {
+        console.log(this.hero);
         this.heroService.update(this.hero)
             .then(() => this.goBack.emit());
     }
-}
+}
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.ts
index c1b5b6e6..26ccfd26 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero.ts
@@ -4,4 +4,14 @@ export class Hero {
     image: string;
     age: number;
     skill: string;
-}
\ No newline at end of file
+    addresses: Address[];
+}
+
+export class Address {
+    street = '';
+    city   = '';
+    state  = '';
+    zip    = '';
+}
+
+export const states = ['CA', 'MD', 'OH', 'VA'];
\ No newline at end of file
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
index d0bf4d69..07163a15 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts
@@ -2,16 +2,112 @@ import { InMemoryDbService } from 'angular-in-memory-web-api';
 export class InMemoryDataService implements InMemoryDbService {
     createDb() {
         let heroes = [
-            {id: 11, name: 'Mr. Nice', age: 25, skill: "Dark Magic", image: "./public/hero-images/DestructiveMagic_DemonicFlame.gif"},
-            {id: 12, name: 'Narco', age: 28, skill: "Destructive Magic", image: "./public/hero-images/Offence_Frenzy.gif"},
-            {id: 13, name: 'Bombasto', age: 45, skill: "Logistics", image: "./public/hero-images/DestructiveMagic_MasterOfLightnings.gif"},
-            {id: 14, name: 'Celeritas', age: 125, skill: "Enlightenment", image: "./public/hero-images/Gating_AbsoluteGating.gif"},
-            {id: 15, name: 'Magneta', age: 34, skill: "Sorcery", image: "./public/hero-images/Learning_DarkRevelation.gif"},
-            {id: 16, name: 'RubberMan', age: 17, skill: "Summoning Magic", image: "./public/hero-images/Learning_EagleEye.gif"},
-            {id: 17, name: 'Dynama', age: 325, skill: "War Machines", image: "./public/hero-images/Learning_Intelligence.gif"},
-            {id: 18, name: 'Dr IQ', age: 26, skill: "Leadership", image: "./public/hero-images/LightMagic_MasterOfAbjuration.gif"},
-            {id: 19, name: 'Magma', age: 28, skill: "Attack", image: "./public/hero-images/Logistics_TeleportAssault.gif"},
-            {id: 20, name: 'Tornado', age: 21, skill: "Defence", image: "./public/hero-images/DestructiveMagic_MasterOfIce.gif"}
+            {
+                id: 11,
+                name: 'Mr. Nice',
+                age: 25,
+                skill: "Dark Magic",
+                image: "./public/hero-images/DestructiveMagic_DemonicFlame.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 12,
+                name: 'Narco',
+                age: 28,
+                skill: "Destructive Magic",
+                image: "./public/hero-images/Offence_Frenzy.gif",
+                addresses: [
+                    {street: '789 Elm',  city: 'Smallville', state: 'OH',  zip: '04501'},
+                ]
+            },
+            {
+                id: 13,
+                name: 'Bombasto',
+                age: 45,
+                skill: "Logistics",
+                image: "./public/hero-images/DestructiveMagic_MasterOfLightnings.gif",
+                addresses: [ ]
+            },
+            {
+                id: 14,
+                name: 'Celeritas',
+                age: 125,
+                skill: "Enlightenment",
+                image: "./public/hero-images/Gating_AbsoluteGating.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 15,
+                name: 'Magneta',
+                age: 34,
+                skill: "Sorcery",
+                image: "./public/hero-images/Learning_DarkRevelation.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 16,
+                name: 'RubberMan',
+                age: 17,
+                skill: "Summoning Magic",
+                image: "./public/hero-images/Learning_EagleEye.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 17,
+                name: 'Dynama',
+                age: 325,
+                skill: "War Machines",
+                image: "./public/hero-images/Learning_Intelligence.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 18,
+                name: 'Dr IQ',
+                age: 26,
+                skill: "Leadership",
+                image: "./public/hero-images/LightMagic_MasterOfAbjuration.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 19,
+                name: 'Magma',
+                age: 28,
+                skill: "Attack",
+                image: "./public/hero-images/Logistics_TeleportAssault.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            },
+            {
+                id: 20,
+                name: 'Tornado',
+                age: 21,
+                skill: "Defence",
+                image: "./public/hero-images/DestructiveMagic_MasterOfIce.gif",
+                addresses: [
+                    {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
+                    {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
+                ]
+            }
         ];
         return {heroes};
     }
diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
index 8dfb1d1b..72ac3ace 100644
--- a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
+++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss
@@ -13,18 +13,12 @@ label {
 /* Master Styles */
 h1 {
   color: #369;
-  font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
 }
 h2, h3 {
   color: #444;
-  font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
 body {
   margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
+}
\ No newline at end of file