+
\ No newline at end of file
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.html
new file mode 100644
index 00000000..093caf64
--- /dev/null
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.html
@@ -0,0 +1,10 @@
+
+
Hero Search
+
+
+
+ {{hero.name}}
+
+
+
\ No newline at end of file
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.ts
new file mode 100644
index 00000000..6e0b50d4
--- /dev/null
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+import { HeroSearchService } from '../../services/hero-search.service';
+import { Hero } from '../../shared/hero';
+
+@Component({
+ selector: 'hero-search',
+ templateUrl: './hero-search.component.html',
+ providers: [HeroSearchService]
+})
+export class HeroSearchComponent implements OnInit {
+ heroes: Observable;
+ private searchTerms = new Subject();
+
+ 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([]))
+ .catch(error => {
+ // TODO: add real error handling
+ console.log(error);
+ return Observable.of([]);
+ });
+ }
+
+ gotoDetail(hero: Hero): void {
+ let link = ['/detail', hero.id];
+ this.router.navigate(link);
+ }
+}
\ No newline at end of file
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.spec.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.spec.ts
new file mode 100644
index 00000000..299e3ded
--- /dev/null
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+import { HeroesComponent } from './heroes.component';
+
+describe('App', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({declarations: [HeroesComponent]});
+ });
+ it ('should work', () => {
+ let fixture = TestBed.createComponent(HeroesComponent);
+ expect(fixture.componentInstance instanceof HeroesComponent).toBe(true, 'should create AppComponent');
+ });
+});
\ No newline at end of file
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts
new file mode 100644
index 00000000..45ad776f
--- /dev/null
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Hero } from '../../shared/hero';
+import { HeroService } from '../../services/hero.service';
+
+@Component({
+ selector: 'my-heroes',
+ templateUrl: './heroes.tour-of-heroes.html',
+ styleUrls: ['./heroes.tour-of-heroes.css'],
+ providers: [HeroService]
+})
+
+export class HeroesComponent implements OnInit {
+ heroes: Hero[];
+ badheroes : Hero[];
+ selectedHero: Hero;
+
+ constructor(
+ private router: Router,
+ private heroService: HeroService) { }
+
+ getHeroes(): void {
+ this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+ }
+
+ getBadHeroes(): void {
+ this.heroService.getBadHeroes().then(badheroes => this.badheroes = badheroes);
+ }
+
+ ngOnInit(): void {
+ this.getHeroes();
+ this.getBadHeroes();
+ }
+
+ onSelect(hero: Hero):void {
+ this.selectedHero = hero;
+ }
+
+ 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; }
+ });
+ }
+
+ gotoDetail(): void {
+ this.router.navigate(['/detail', this.selectedHero.id]);
+ }
+}
+
+
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css
similarity index 74%
rename from homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.css
rename to homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css
index fcba55c3..676ae297 100644
--- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.css
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css
@@ -6,7 +6,7 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 15em;
+ width: 20em;
}
.heroes li {
cursor: pointer;
@@ -14,8 +14,6 @@
left: 0;
background-color: #EEE;
margin: .5em;
- padding: .3em 0;
- height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
@@ -29,28 +27,17 @@
}
.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: 1em;
+ line-height: inherit;
+ background-color: #0275d8;
position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
margin-right: .8em;
- border-radius: 4px 0 0 4px;
+ border-radius: 50% ;
}
-
-.col-xs-6 {
- width: 50%;
- float: left;
-}
-
.heroe-image {
width: 150px;
height: 150px;
@@ -59,4 +46,8 @@
}
.heroe-image img {
max-width: 100%;
-}
\ No newline at end of file
+}
+.col-xs-4 {
+ width: 33.3%;
+ float: left;
+}
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html
new file mode 100644
index 00000000..223ba124
--- /dev/null
+++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html
@@ -0,0 +1,44 @@
+