+
-
+
-
+
\ No newline at end of file
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.scss b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.scss
index eb813562..fad3e429 100644
--- a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.scss
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.scss
@@ -1,3 +1,17 @@
input.ng-invalid {
- border: 1px solid red;
+ border: 1px solid #F44336;
+ box-shadow: 0 0 5px #F44336;
+}
+
+input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ padding: 6px 12px;
+ background: none;
+ border: 1px solid #eee;
+}
+
+.field {
+ margin-bottom: 10px;
}
\ No newline at end of file
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.ts
index 55fe3327..90802caf 100644
--- a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.ts
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-edit/hero-edit.component.ts
@@ -1,7 +1,12 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Hero } from '../../shared/hero';
-import { HeroService } from '../../services/hero.service';
+import { Hero } from '../../shared/hero';
+import { HeroService } from '../../services/hero.service';
+
+import 'rxjs/add/operator/switchMap';
@Component({
selector: 'hero-edit',
@@ -9,14 +14,44 @@ import { HeroService } from '../../services/hero.service';
styleUrls: ['hero-edit.component.scss']
})
-export class HeroEditComponent {
- @Input() hero: Hero;
- @Output() save = new EventEmitter();
+export class HeroEditComponent implements OnInit {
+ hero: Hero;
+ form: FormGroup;
+
+ constructor(private heroService: HeroService,
+ private route: ActivatedRoute,
+ private location: Location,
+ private fb: FormBuilder) {
+ this.createForm();
+ }
+
+ ngOnInit(): void {
+ this.route.params
+ .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+ .subscribe(hero => {
+ this.hero = hero;
+ this.form.setValue({
+ id: this.hero.id,
+ name: this.hero.name,
+ image: this.hero.image
+ });
+ });
+ }
+
+ createForm() {
+ this.form = this.fb.group({
+ id: [''],
+ name: ['', Validators.required],
+ image: ['', Validators.required]
+ });
+ }
- constructor(private heroService: HeroService) {}
+ save(): void {
+ this.heroService.update(this.form.value)
+ .then(() => this.goBack());
+ }
- onSubmit(formValue: Hero): void {
- this.heroService.update(formValue);
- this.save.emit();
+ goBack(): void {
+ this.location.back();
}
}
\ No newline at end of file
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.html b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.html
new file mode 100644
index 00000000..a971555a
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.html
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.scss b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.scss
new file mode 100644
index 00000000..d71389a3
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.scss
@@ -0,0 +1,15 @@
+.search-result {
+ border-bottom: 1px solid gray;
+ border-left: 1px solid gray;
+ border-right: 1px solid gray;
+ width: 195px;
+ height: 20px;
+ padding: 5px;
+ background-color: white;
+ cursor: pointer;
+}
+
+#search-box {
+ width: 200px;
+ height: 20px;
+}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.ts
new file mode 100644
index 00000000..6fb4551a
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/hero-search/hero-search.component.ts
@@ -0,0 +1,56 @@
+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 '../../services/hero-search.service';
+import { Hero } from '../../shared/hero';
+
+@Component({
+ selector: 'hero-search',
+ templateUrl: 'hero-search.component.html',
+ styleUrls: ['hero-search.component.scss'],
+ 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);
+ }
+}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.html b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.html
new file mode 100644
index 00000000..99440ec8
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.html
@@ -0,0 +1,24 @@
+My Heroes
+
+
+
+
+
+
+
+ -
+ {{hero.id}}
+ {{hero.name}}
+
+
+
+
+
+
+ {{selectedHero.name | uppercase}} is my hero
+
+
+
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.scss b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.scss
new file mode 100644
index 00000000..4ee72cd5
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.scss
@@ -0,0 +1,69 @@
+.selected {
+ background-color: #CFD8DC !important;
+ color: white;
+}
+
+.heroes {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+
+ li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+
+ &.selected:hover {
+ background-color: #BBD8DC !important;
+ color: white;
+ }
+
+ &:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+ }
+
+ i {
+ position: absolute;
+ right: 6px;
+ color: darkgrey;
+ border-left: 1px solid;
+ padding-left: 5px;
+ }
+ }
+
+ .text {
+ position: relative;
+ top: -3px;
+ }
+
+ .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+ }
+}
+
+button.delete {
+ float:right;
+ margin-top: 2px;
+ margin-right: .8em;
+ background-color: gray !important;
+ color:white;
+}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.ts
new file mode 100755
index 00000000..857c4248
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/heroes/heroes.component.ts
@@ -0,0 +1,55 @@
+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.component.html',
+ styleUrls: ['heroes.component.scss'],
+})
+
+export class HeroesComponent implements OnInit {
+ heroes: Hero[];
+ selectedHero: Hero;
+
+ constructor(private router: Router,
+ private heroService: HeroService) {
+ }
+
+ getHeroes(): void {
+ this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+ }
+
+ ngOnInit(): void {
+ this.getHeroes();
+ }
+
+ 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/ihor.tkachuk_ihortkachuk/homework_10/src/app/data/mock-heroes.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/data/mock-heroes.ts
deleted file mode 100644
index bd2a69a1..00000000
--- a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/data/mock-heroes.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Hero } from '../shared/hero';
-
-export const HEROES: Hero[] = [
- {
- id: 1,
- name: 'Hulk',
- image: 'https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_(comics_character).png'
- },
- {
- id: 2,
- name: 'Superman',
- image: 'https://upload.wikimedia.org/wikipedia/en/e/eb/SupermanRoss.png'
- },
- {
- id: 3,
- name: 'Batman',
- image: 'https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg'
- },
- {
- id: 4,
- name: 'Iron Man',
- image: 'https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg'
- },
- {
- id: 5,
- name: 'Capitan America',
- image: 'http://vignette3.wikia.nocookie.net/marveldatabase/images/f/f0/Steven_Rogers_(Earth-1610).png/revision/latest?cb=20100205184014'
- },
- {
- id: 6,
- name: 'Green Lantern',
- image: 'https://s-media-cache-ak0.pinimg.com/736x/f6/fd/e2/f6fde22f9571b81ac9d7ffcf580c2b87.jpg'
- },
- {
- id: 7,
- name: 'Thor',
- image: 'https://marvelheroes.com/sites/default/files/styles/character_profile_266x405/public/character/image/Store_Thor_Modern.png?itok=ky_Xd0nm'
- }
-];
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/in-memory-data.service.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/in-memory-data.service.ts
new file mode 100644
index 00000000..b1ef37c3
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/in-memory-data.service.ts
@@ -0,0 +1,44 @@
+import { InMemoryDbService } from 'angular-in-memory-web-api';
+
+export class InMemoryDataService implements InMemoryDbService {
+ createDb() {
+ let heroes = [
+ {
+ id: 1,
+ name: 'Hulk',
+ image: 'https://upload.wikimedia.org/wikipedia/en/5/59/Hulk_(comics_character).png'
+ },
+ {
+ id: 2,
+ name: 'Superman',
+ image: 'https://upload.wikimedia.org/wikipedia/en/e/eb/SupermanRoss.png'
+ },
+ {
+ id: 3,
+ name: 'Batman',
+ image: 'https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg'
+ },
+ {
+ id: 4,
+ name: 'Iron Man',
+ image: 'https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg'
+ },
+ {
+ id: 5,
+ name: 'Capitan America',
+ image: 'http://vignette3.wikia.nocookie.net/marveldatabase/images/f/f0/Steven_Rogers_(Earth-1610).png/revision/latest?cb=20100205184014'
+ },
+ {
+ id: 6,
+ name: 'Green Lantern',
+ image: 'https://s-media-cache-ak0.pinimg.com/736x/f6/fd/e2/f6fde22f9571b81ac9d7ffcf580c2b87.jpg'
+ },
+ {
+ id: 7,
+ name: 'Thor',
+ image: 'https://marvelheroes.com/sites/default/files/styles/character_profile_266x405/public/character/image/Store_Thor_Modern.png?itok=ky_Xd0nm'
+ }
+ ];
+ return { heroes };
+ }
+}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero-search.service.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero-search.service.ts
new file mode 100644
index 00000000..3df3d050
--- /dev/null
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero-search.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { Hero } from '../shared/hero';
+
+@Injectable()
+
+export class HeroSearchService {
+ constructor(private http: Http) {
+ }
+
+ search(term: string): Observable {
+ return this.http
+ .get(`app/heroes/?name=${term}`)
+ .map(response => response.json().data as Hero[]);
+ }
+}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero.service.ts b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero.service.ts
index 01b42236..e14ed384 100644
--- a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero.service.ts
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/services/hero.service.ts
@@ -1,24 +1,60 @@
import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
-import { Hero } from '../shared/hero';
-import { HEROES } from '../data/mock-heroes';
+import 'rxjs/add/operator/toPromise';
+
+import { Hero } from '../shared/hero';
@Injectable()
export class HeroService {
- heroes = HEROES;
+ private heroesUrl = 'api/heroes';
+ private headers = new Headers({'Content-Type': 'application/json'});
+
+ constructor(private http: Http) { }
+
+ getHeroes(): Promise {
+ return this.http.get(this.heroesUrl)
+ .toPromise()
+ .then(response => response.json().data as Hero[])
+ .catch(this.handleError);
+ }
+
+ getHero(id: number): Promise {
+ 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 {
+ const url = `${this.heroesUrl}/${hero.id}`;
+ return this.http
+ .put(url, JSON.stringify(hero), {headers: this.headers})
+ .toPromise()
+ .then(() => hero)
+ .catch(this.handleError);
+ }
- getHeroes() {
- return this.heroes;
+ create(name: string): Promise {
+ return this.http
+ .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
+ .toPromise()
+ .then(res => res.json().data)
+ .catch(this.handleError);
}
- getHeroById(id: number) {
- return this.heroes.filter((item) => item.id === id).pop();
+ delete(id: number): Promise {
+ const url = `${this.heroesUrl}/${id}`;
+ return this.http.delete(url, {headers: this.headers})
+ .toPromise()
+ .then(() => null)
+ .catch(this.handleError);
}
- update(obj: Hero) {
- let hero = this.getHeroById(obj.id);
- Object.assign(hero, obj);
- return hero;
+ private handleError(error: any): Promise {
+ console.error('An error occurred', error);
+ return Promise.reject(error.message || error);
}
}
diff --git a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/index.html b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/index.html
index 68ea1682..2c347cd7 100755
--- a/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/index.html
+++ b/homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/index.html
@@ -8,10 +8,11 @@
+
- Loading...
+ Loading...