From e485acc68baeef531753a8bbc1eb71e336847a87 Mon Sep 17 00:00:00 2001 From: Anton L Date: Mon, 13 Feb 2017 22:34:58 +0200 Subject: [PATCH 1/4] feture / homework 10 + 11 dev --- .../src/app/app.component.spec.ts | 11 --- .../src/app/app.component.ts | 69 +++++++------------ .../src/app/app.module.ts | 31 ++++++++- .../dashboard/dashboard.component.html | 8 +++ .../dashboard/dashboard.component.ts | 10 +++ .../hero-detail/hero-detail.component.ts | 12 ++++ .../hero-detail.my-hero-detail.css | 9 +++ .../hero-detail.my-hero-detail.html | 6 ++ .../hero-update/hero-update.component.ts | 21 ++++++ .../hero-update.my-hero-update.css | 9 +++ .../hero-update.my-hero-update.html | 8 +++ .../heroes/heroes.component.spec.ts | 12 ++++ .../app/components/heroes/heroes.component.ts | 38 ++++++++++ .../heroes/heroes.tour-of-heroes.css} | 14 +--- .../heroes/heroes.tour-of-heroes.html} | 24 +++---- .../src/app/data/mock-heroes.ts | 27 ++++++++ .../src/app/services/hero.service.ts | 15 ++++ .../src/app/shared/hero.ts | 5 ++ .../src/public/index.html | 2 +- 19 files changed, 250 insertions(+), 81 deletions(-) delete mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.spec.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.spec.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts rename homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/{app.tour-of-heroes.css => components/heroes/heroes.tour-of-heroes.css} (84%) rename homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/{app.tour-of-heroes.html => components/heroes/heroes.tour-of-heroes.html} (55%) create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/data/mock-heroes.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/shared/hero.ts diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.spec.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.spec.ts deleted file mode 100644 index 87beafad..00000000 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -describe('App', () => { - beforeEach(() => { - TestBed.configureTestingModule({ declarations: [AppComponent]}); - }); - it ('should work', () => { - let fixture = TestBed.createComponent(AppComponent); - expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); - }); -}); \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts index 750ee915..d6db65a5 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts @@ -1,50 +1,33 @@ import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { HeroesComponent } from './components/heroes/heroes.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; @Component({ - selector: 'tour-of-heroes', - templateUrl: './app.tour-of-heroes.html', - styleUrls: ['./app.tour-of-heroes.css'], + selector: 'my-app', + template: ` +

{{title}}

+
+ +
+ + ` }) - export class AppComponent { - title = `Tour of Heroes`; - selectedHero: Hero; - heroes = HEROES; - badheroes = BADHEROES; - - onSelect(hero: Hero):void { - this.selectedHero = hero; - } + title = 'Tour of Heroes'; } -const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice', img: 'https://upload.wikimedia.org/wikipedia/en/7/79/Mr._Nice.jpg' }, - { id: 12, name: 'Narco', img: 'https://s-media-cache-ak0.pinimg.com/236x/cb/1e/21/cb1e217af38d3c8e6658ff0322fca52b.jpg' }, - { id: 13, name: 'Bombasto', img: 'https://hydra-media.cursecdn.com/solsticearena.gamepedia.com/thumb/2/2e/Portrait_bombast.png/225px-Portrait_bombast.png?version=5684639074fe5ec7f58083d0b9e1e04e'}, - { id: 14, name: 'Celeritas', img: 'http://www.cardiacathletes.com/images/superheroes/superhero-3.png' }, - { id: 15, name: 'Magneta', img: 'http://vignette4.wikia.nocookie.net/marveldatabase/images/f/fd/MC2_Magneta.png/revision/latest?cb=20120409045056' }, - { id: 16, name: 'RubberMan', img: 'http://images.buycostumes.com/mgen/merchandiser/802980.jpg?zm=1600,1600,1,0,0' }, - { id: 17, name: 'Dynama', img: 'http://orig10.deviantart.net/ad33/f/2008/275/7/6/dynamo_via_hero_creator_by_gwhitmore.png' }, - { id: 18, name: 'Dr IQ', img: 'http://dresdencodak.com/images/costume/drstrange' }, - { id: 19, name: 'Magma', img: 'http://1.bp.blogspot.com/-3kcOLFqmjfg/VHavDweTvqI/AAAAAAAABJ0/TWUql7iB-1o/s1600/279.png' }, - { id: 20, name: 'Tornado', img: 'http://i283.photobucket.com/albums/kk286/skarth7/Renders/GreatTornado.png' } -]; - -const BADHEROES: Hero[] = [ - { id: 211, name: 'Ultron', img: 'https://i.annihil.us/u/prod/marvel/i/mg/2/03/537bc76411307/standard_xlarge.jpg' }, - { id: 212, name: 'Loki', img: 'https://i.annihil.us/u/prod/marvel/i/mg/2/03/537bc76411307/standard_xlarge.jpg' }, - { id: 213, name: 'Red Skull' , img: 'https://i.annihil.us/u/prod/marvel/i/mg/2/03/526036550cd37/standard_xlarge.jpg'}, - { id: 214, name: 'Mystique', img: 'https://i.annihil.us/u/prod/marvel/i/mg/5/03/5390dc2225782/standard_xlarge.jpg' }, - { id: 215, name: 'Thanos', img: 'https://i.annihil.us/u/prod/marvel/i/mg/a/10/537bc68747ccf/standard_xlarge.jpg' }, - { id: 216, name: 'Ronan', img: 'https://i.annihil.us/u/prod/marvel/i/mg/2/f0/5260363fc40f2/standard_xlarge.jpg' }, - { id: 217, name: 'Magneto', img: 'https://i.annihil.us/u/prod/marvel/i/mg/3/b0/5261a7e53f827/standard_xlarge.jpg' }, - { id: 218, name: 'Dr. Doom', img: 'https://i.annihil.us/u/prod/marvel/i/mg/3/60/53176bb096d17/standard_xlarge.jpg' }, - { id: 219, name: 'Green Goblin', img: 'https://i.annihil.us/u/prod/marvel/i/mg/f/40/538cf0c2acdd9/standard_xlarge.jpg' }, - { id: 220, name: 'Black Cat', img: 'https://i.annihil.us/u/prod/marvel/i/mg/e/03/526952357d91c/standard_xlarge.jpg' } -]; - -export class Hero { - id: number; - name: string; - img: string; -} \ No newline at end of file +RouterModule.forRoot([ + { + path: 'heroes', + component: HeroesComponent + }, + { + path: 'dashboard', + component: DashboardComponent + }, +]); \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts index 89a8972e..e65e8de2 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts @@ -1,15 +1,42 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; +import { HeroesComponent } from './components/heroes/heroes.component'; +import { HeroDetailComponent } from './components/hero-detail/hero-detail.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { HeroUpdateComponent } from './components/hero-update/hero-update.component'; + +import { HeroService } from './services/hero.service'; @NgModule({ imports: [ BrowserModule, - FormsModule + FormsModule, + RouterModule.forRoot([ + { + path: 'heroes', + component: HeroesComponent + }, + { + path: '', + redirectTo: '/dashboard', + pathMatch: 'full' + }, + ]) + ], + declarations: [ + AppComponent, + HeroesComponent, + HeroDetailComponent, + HeroUpdateComponent, + DashboardComponent, ], - declarations: [ AppComponent ], +providers: [ + HeroService +], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html new file mode 100644 index 00000000..cdf0db43 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html @@ -0,0 +1,8 @@ +

Top Heroes

+
+
+
+

{{hero.name}}

+
+
+
\ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts new file mode 100644 index 00000000..003bf72f --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-dashboard', + moduleId: module.id, + templateUrl: './dashboard.component.html', +}) +export class DashboardComponent { + +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts new file mode 100644 index 00000000..29f460d4 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts @@ -0,0 +1,12 @@ +import { Component, Input } from '@angular/core'; +import { Hero } from '../../shared/hero'; + +@Component({ + selector: 'my-hero-detail', + templateUrl: './hero-detail.my-hero-detail.html', + styleUrls: ['./hero-detail.my-hero-detail.css'], +}) +export class HeroDetailComponent { + @Input() + hero: Hero; +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css new file mode 100644 index 00000000..6de83e19 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css @@ -0,0 +1,9 @@ +.heroe-image { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; +} +.heroe-image img { + max-width: 100%; +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html new file mode 100644 index 00000000..f46f0f7f --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html @@ -0,0 +1,6 @@ +
+

{{hero.name}} details!

+
{{hero.id}}
+
{{hero.name}}
+
+
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts new file mode 100644 index 00000000..3dd6cca4 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts @@ -0,0 +1,21 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Hero } from '../../shared/hero'; + +@Component({ + selector: 'my-hero-update', + templateUrl: './hero-update.my-hero-update.html', + styleUrls: ['./hero-update.my-hero-update.css'], +}) + +export class HeroUpdateComponent { + @Input() hero: Hero; + @Output() onUpdate = new EventEmitter(); + + edited = false; + + onSave() { + this.onUpdate.emit(true); + this.edited = true; + } +} + diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css new file mode 100644 index 00000000..6de83e19 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css @@ -0,0 +1,9 @@ +.heroe-image { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; +} +.heroe-image img { + max-width: 100%; +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html new file mode 100644 index 00000000..0ffd2cf5 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html @@ -0,0 +1,8 @@ +
+

{{hero.name}} update!

+
+
+
+ +
+ 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..54c44921 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; + +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 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; + } +} + + 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 84% 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..8891d1bf 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 @@ -46,17 +46,7 @@ border-radius: 4px 0 0 4px; } -.col-xs-6 { - width: 50%; +.col-xs-4 { + width: 33.3%; float: left; } - -.heroe-image { - width: 150px; - height: 150px; - border-radius: 50%; - overflow: hidden; -} -.heroe-image img { - max-width: 100%; -} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html similarity index 55% rename from homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.html rename to homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html index da5ed959..226fd6d1 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.tour-of-heroes.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.html @@ -1,13 +1,5 @@ -

{{title}}

-
-

{{selectedHero.name}} details!

-
{{selectedHero.id}}
-
-
-
- -
-

My Heroes

+
+

Good Heroes

  • My Heroes
-
-

My Bad Heroes

+
+

+ +

+

+ +

+
+
+

Evil Heroes

  • { + return Promise.resolve(HEROES); + } + getBadHeroes(): Promise { + return Promise.resolve(BADHEROES); + } +} diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/shared/hero.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/shared/hero.ts new file mode 100644 index 00000000..a58b0c55 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/shared/hero.ts @@ -0,0 +1,5 @@ +export class Hero { + id: number; + name: string; + img: string; +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html index 2867e5fb..6284ae6e 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html @@ -8,6 +8,6 @@ - Loading AppComponent content here ... + Loading AppComponent content here ... From dc6d7409abbd777f8b82822485b85574b4f199aa Mon Sep 17 00:00:00 2001 From: Anton L Date: Tue, 21 Feb 2017 00:35:33 +0200 Subject: [PATCH 2/4] feture / 11 dev routing added --- .../src/app/app-routing.module.ts | 18 +++++++++++ .../src/app/app.component.ts | 5 +-- .../src/app/app.module.ts | 22 +++---------- .../dashboard/dashboard.component.html | 2 +- .../dashboard/dashboard.component.ts | 17 ++++++++-- .../hero-detail/hero-detail.component.ts | 31 ++++++++++++++++--- .../hero-detail.my-hero-detail.css | 9 ------ .../hero-detail.my-hero-detail.html | 7 +++-- .../hero-update/hero-update.component.ts | 21 ------------- .../hero-update.my-hero-update.css | 9 ------ .../hero-update.my-hero-update.html | 8 ----- .../app/components/heroes/heroes.component.ts | 9 +++++- .../heroes/heroes.tour-of-heroes.css | 10 +++++- .../heroes/heroes.tour-of-heroes.html | 16 ++++++---- .../src/app/services/hero.service.ts | 4 +++ 15 files changed, 102 insertions(+), 86 deletions(-) create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app-routing.module.ts delete mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts delete mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css delete mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app-routing.module.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app-routing.module.ts new file mode 100644 index 00000000..2dc7c625 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { HeroesComponent } from './components/heroes/heroes.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { HeroDetailComponent } from './components/hero-detail/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/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts index d6db65a5..9408cf84 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts @@ -5,13 +5,14 @@ import { HeroesComponent } from './components/heroes/heroes.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; @Component({ + //moduleId: module.id, selector: 'my-app', template: `

    {{title}}

    diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts index e65e8de2..42e5ca8d 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts @@ -1,13 +1,12 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeroesComponent } from './components/heroes/heroes.component'; import { HeroDetailComponent } from './components/hero-detail/hero-detail.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; -import { HeroUpdateComponent } from './components/hero-update/hero-update.component'; import { HeroService } from './services/hero.service'; @@ -15,23 +14,12 @@ import { HeroService } from './services/hero.service'; imports: [ BrowserModule, FormsModule, - RouterModule.forRoot([ - { - path: 'heroes', - component: HeroesComponent - }, - { - path: '', - redirectTo: '/dashboard', - pathMatch: 'full' - }, - ]) + AppRoutingModule ], declarations: [ AppComponent, HeroesComponent, HeroDetailComponent, - HeroUpdateComponent, DashboardComponent, ], providers: [ diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html index cdf0db43..42df2a87 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html @@ -1,6 +1,6 @@

    Top Heroes

    -
    +

    {{hero.name}}

    diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts index 003bf72f..b7a4d694 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts @@ -1,10 +1,21 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; + +import { Hero } from '../../shared/hero'; +import { HeroService } from '../../services/hero.service'; @Component({ + //moduleId: module.id, selector: 'my-dashboard', - moduleId: module.id, templateUrl: './dashboard.component.html', }) -export class DashboardComponent { +export class DashboardComponent implements OnInit { + + heroes: Hero[] = []; + + constructor(private heroService: HeroService) { } + ngOnInit(): void { + this.heroService.getHeroes() + .then(heroes => this.heroes = heroes.slice(1, 5)); + } } \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts index 29f460d4..59e1ec9e 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts @@ -1,12 +1,33 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from '../../shared/hero'; +import 'rxjs/add/operator/switchMap'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; + +import { Hero } from '../../shared/hero'; +import { HeroService } from '../../services/hero.service'; @Component({ + //moduleId: module.id, selector: 'my-hero-detail', templateUrl: './hero-detail.my-hero-detail.html', styleUrls: ['./hero-detail.my-hero-detail.css'], }) -export class HeroDetailComponent { - @Input() +export class HeroDetailComponent implements OnInit { hero: Hero; -} \ No newline at end of file + + 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); + } + + goBack(): void { + this.location.back(); + } +} diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css index 6de83e19..e69de29b 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.css @@ -1,9 +0,0 @@ -.heroe-image { - width: 150px; - height: 150px; - border-radius: 50%; - overflow: hidden; -} -.heroe-image img { - max-width: 100%; -} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html index f46f0f7f..93120c90 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html @@ -1,6 +1,7 @@

    {{hero.name}} details!

    -
    {{hero.id}}
    -
    {{hero.name}}
    -
    +
    +
    +
    +
    diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts deleted file mode 100644 index 3dd6cca4..00000000 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { Hero } from '../../shared/hero'; - -@Component({ - selector: 'my-hero-update', - templateUrl: './hero-update.my-hero-update.html', - styleUrls: ['./hero-update.my-hero-update.css'], -}) - -export class HeroUpdateComponent { - @Input() hero: Hero; - @Output() onUpdate = new EventEmitter(); - - edited = false; - - onSave() { - this.onUpdate.emit(true); - this.edited = true; - } -} - diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css deleted file mode 100644 index 6de83e19..00000000 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.css +++ /dev/null @@ -1,9 +0,0 @@ -.heroe-image { - width: 150px; - height: 150px; - border-radius: 50%; - overflow: hidden; -} -.heroe-image img { - max-width: 100%; -} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html deleted file mode 100644 index 0ffd2cf5..00000000 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-update/hero-update.my-hero-update.html +++ /dev/null @@ -1,8 +0,0 @@ -
    -

    {{hero.name}} update!

    -
    -
    -
    - -
    - 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 index 54c44921..ab199250 100644 --- 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 @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { Hero } from '../../shared/hero'; import { HeroService } from '../../services/hero.service'; @@ -15,7 +16,9 @@ export class HeroesComponent implements OnInit { badheroes : Hero[]; selectedHero: Hero; - constructor(private heroService: HeroService) { } + constructor( + private router: Router, + private heroService: HeroService) { } getHeroes(): void { this.heroService.getHeroes().then(heroes => this.heroes = heroes); @@ -33,6 +36,10 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero):void { this.selectedHero = hero; } + + gotoDetail(): void { + this.router.navigate(['/detail', this.selectedHero.id]); + } } diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css index 8891d1bf..c89fb570 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css @@ -45,7 +45,15 @@ margin-right: .8em; border-radius: 4px 0 0 4px; } - +.heroe-image { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; +} +.heroe-image img { + max-width: 100%; +} .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 index 226fd6d1..6e88238e 100644 --- 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 @@ -9,12 +9,16 @@

    Good Heroes

-

- -

-

- -

+
+

+ {{selectedHero.name | uppercase}} is my hero +

+
{{selectedHero.id}}
+
{{selectedHero.name}}
+
+ +
+

Evil Heroes

diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts index 44babb93..81c6aad6 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts @@ -12,4 +12,8 @@ export class HeroService { getBadHeroes(): Promise { return Promise.resolve(BADHEROES); } + getHero(id: number): Promise { + return this.getBadHeroes() + .then(heroes => heroes.find(hero => hero.id === id)); + } } From 8dd6acfc8e71ded9b27acfa87f3cdfd6b4de034e Mon Sep 17 00:00:00 2001 From: Anton L Date: Thu, 23 Feb 2017 12:24:21 +0200 Subject: [PATCH 3/4] feture /routing + bootstrap style --- .../angular-test-project/package.json | 3 +- .../src/app/app.component.ts | 6 +- .../src/app/app.module.ts | 5 +- .../dashboard/dashboard.component.css | 51 +++++++++++++++ .../dashboard/dashboard.component.html | 19 ++++-- .../dashboard/dashboard.component.ts | 1 + .../hero-detail.my-hero-detail.html | 8 +-- .../heroes/heroes.tour-of-heroes.css | 11 +--- .../heroes/heroes.tour-of-heroes.html | 64 ++++++++++--------- .../src/public/index.html | 9 +++ 10 files changed, 122 insertions(+), 55 deletions(-) create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.css diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json index a0e89870..77f57a01 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json @@ -19,13 +19,14 @@ "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", + "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.7.4" }, "devDependencies": { + "@types/jasmine": "2.5.38", "@types/node": "^6.0.45", - "@types/jasmine": "^2.5.35", "angular2-template-loader": "^0.6.0", "awesome-typescript-loader": "^3.0.0-beta.18", "css-loader": "^0.26.1", diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts index 9408cf84..71ec2c3e 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.component.ts @@ -8,11 +8,11 @@ import { DashboardComponent } from './components/dashboard/dashboard.component'; //moduleId: module.id, selector: 'my-app', template: ` -

{{title}}

+

{{title}}

diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts index 42e5ca8d..418b9d46 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts @@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; +import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; + import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeroesComponent } from './components/heroes/heroes.component'; @@ -14,7 +16,8 @@ import { HeroService } from './services/hero.service'; imports: [ BrowserModule, FormsModule, - AppRoutingModule + AppRoutingModule, + NgbModule.forRoot() ], declarations: [ AppComponent, diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.css new file mode 100644 index 00000000..98491188 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.css @@ -0,0 +1,51 @@ +/* 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; +} +/* . . . */ +/* everywhere else */ +* { + font-family: Arial, Helvetica, sans-serif; +} +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/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html index 42df2a87..b8fa7750 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html @@ -1,8 +1,15 @@ -

Top Heroes

-
-
-
-

{{hero.name}}

+
+

Top Heroes

+
+
+
+
+
+

{{hero.name}}

+
+
+
-
\ No newline at end of file +
+ diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts index b7a4d694..b71471aa 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.ts @@ -7,6 +7,7 @@ import { HeroService } from '../../services/hero.service'; //moduleId: module.id, selector: 'my-dashboard', templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.css'], }) export class DashboardComponent implements OnInit { diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html index 93120c90..a93ac2fc 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html @@ -1,7 +1,7 @@

{{hero.name}} details!

-
-
-
- +
+
+
+
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css index c89fb570..f2f30913 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css @@ -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,19 +27,14 @@ } .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; } 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 index 6e88238e..ccc9353b 100644 --- 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 @@ -1,32 +1,34 @@ -
-

Good Heroes

-
    -
  • - {{hero.id}} {{hero.name}} -
    • -
-
-
-
-

- {{selectedHero.name | uppercase}} is my hero -

-
{{selectedHero.id}}
-
{{selectedHero.name}}
-
- +
+
+

Good Heroes

+
    +
  • + {{hero.id}} {{hero.name}} +
    • +
-

-
-
-

Evil Heroes

-
    -
  • - {{hero.id}} {{hero.name}} -
    • -
-
+
+
+

+ {{selectedHero.name | uppercase}} is my hero +

+
{{selectedHero.id}}
+
{{selectedHero.name}}
+
+ +
+

+
+
+

Evil Heroes

+
    +
  • + {{hero.id}} {{hero.name}} +
    • +
+
+
\ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html index 6284ae6e..0a16c7a3 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/public/index.html @@ -4,10 +4,19 @@ Angular Wbpack Tour-of-heroes by Dissident + +
Loading AppComponent content here ... +
+ + From 011fdc087a9b626ae3659384cc9c74f7940ca4e8 Mon Sep 17 00:00:00 2001 From: Anton L Date: Sat, 25 Feb 2017 19:31:15 +0200 Subject: [PATCH 4/4] feture /routing + bootstrap style + reactiveForms --- .../angular-test-project/package.json | 1 + .../src/app/app.module.ts | 31 ++++++---- .../dashboard/dashboard.component.html | 3 + .../hero-detail/hero-detail.component.ts | 39 +++++++++++- .../hero-detail.my-hero-detail.html | 17 ++++++ .../hero-search/hero-search.component.html | 10 ++++ .../hero-search/hero-search.component.ts | 52 ++++++++++++++++ .../app/components/heroes/heroes.component.ts | 19 ++++++ .../heroes/heroes.tour-of-heroes.css | 4 +- .../heroes/heroes.tour-of-heroes.html | 18 ++++-- .../src/app/data/in-memory-data.service.ts | 18 ++++++ .../src/app/services/hero-search.service.ts | 16 +++++ .../src/app/services/hero.service.ts | 60 +++++++++++++++++-- 13 files changed, 261 insertions(+), 27 deletions(-) create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.html create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-search/hero-search.component.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/data/in-memory-data.service.ts create mode 100644 homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero-search.service.ts diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json index 77f57a01..4698f430 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", + "angular-in-memory-web-api": "^0.2.4", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.7.4" diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts index 418b9d46..437507d8 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/app.module.ts @@ -1,21 +1,28 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { ReactiveFormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; +import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; +import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { HeroesComponent } from './components/heroes/heroes.component'; -import { HeroDetailComponent } from './components/hero-detail/hero-detail.component'; -import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { AppComponent } from './app.component'; +import { HeroesComponent } from './components/heroes/heroes.component'; +import { HeroDetailComponent } from './components/hero-detail/hero-detail.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { HeroSearchComponent } from './components/hero-search/hero-search.component'; import { HeroService } from './services/hero.service'; +import { InMemoryDataService } from './data/in-memory-data.service'; @NgModule({ imports: [ BrowserModule, FormsModule, + ReactiveFormsModule, + HttpModule, + InMemoryWebApiModule.forRoot(InMemoryDataService), AppRoutingModule, NgbModule.forRoot() ], @@ -24,10 +31,10 @@ import { HeroService } from './services/hero.service'; HeroesComponent, HeroDetailComponent, DashboardComponent, + HeroSearchComponent, ], -providers: [ - HeroService -], + providers: [ HeroService ], bootstrap: [ AppComponent ] }) + export class AppModule { } diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html index b8fa7750..47604bbc 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/dashboard/dashboard.component.html @@ -11,5 +11,8 @@

{{hero.name}}

+
+ +
diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts index 59e1ec9e..bcaea932 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.component.ts @@ -2,6 +2,7 @@ import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; +import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Hero } from '../../shared/hero'; import { HeroService } from '../../services/hero.service'; @@ -14,17 +15,49 @@ import { HeroService } from '../../services/hero.service'; }) export class HeroDetailComponent implements OnInit { hero: Hero; + heroForm: FormGroup; constructor( private heroService: HeroService, private route: ActivatedRoute, - private location: Location - ) {} + private location: Location, + private fb: FormBuilder, + ) { + + } + + createForm() { + this.heroForm = this.fb.group({ + id: ['', Validators.required], + name: ['', Validators.required], + img: '', + }) + } + + saveHero(){ + this.heroService.update(this.heroForm.value) + .then(() => this.goBack()); + } ngOnInit(): void { + + this.createForm(); this.route.params .switchMap((params: Params) => this.heroService.getHero(+params['id'])) - .subscribe(hero => this.hero = hero); + .subscribe(hero => { + this.hero = hero; + this.heroForm = this.fb.group({ + id: [this.hero.id, Validators.required], + name: [this.hero.name, Validators.required], + img: this.hero.img, + }) + }); + } + + save(): void { + console.log(this.hero); + this.heroService.update(this.hero) + .then(() => this.goBack()); } goBack(): void { diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html index a93ac2fc..753d5b62 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/hero-detail/hero-detail.my-hero-detail.html @@ -4,4 +4,21 @@

{{hero.name}} details!

+
+ +

Update using reactive Forms

+
+
+ +
+
+ +
+
+ +
+
+ +
+
\ 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.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.component.ts index ab199250..45ad776f 100644 --- 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 @@ -37,6 +37,25 @@ export class HeroesComponent implements OnInit { 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/components/heroes/heroes.tour-of-heroes.css b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.tour-of-heroes.css index f2f30913..676ae297 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/components/heroes/heroes.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; @@ -36,7 +36,7 @@ background-color: #0275d8; position: relative; margin-right: .8em; - border-radius: 4px 0 0 4px; + border-radius: 50% ; } .heroe-image { width: 150px; 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 index ccc9353b..223ba124 100644 --- 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 @@ -1,11 +1,21 @@
+
+ + +

Good Heroes

-
    +
    • - {{hero.id}} {{hero.name}} + {{hero.id}} + {{hero.name}} +
@@ -21,7 +31,7 @@

-
+
\ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/data/in-memory-data.service.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/data/in-memory-data.service.ts new file mode 100644 index 00000000..9128fea5 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/data/in-memory-data.service.ts @@ -0,0 +1,18 @@ +import { InMemoryDbService } from 'angular-in-memory-web-api'; +export class InMemoryDataService implements InMemoryDbService { + createDb() { + let heroes = [ + { id: 11, name: 'Mr. Nice', img: 'https://upload.wikimedia.org/wikipedia/en/7/79/Mr._Nice.jpg' }, + { id: 12, name: 'Narco', img: 'https://s-media-cache-ak0.pinimg.com/236x/cb/1e/21/cb1e217af38d3c8e6658ff0322fca52b.jpg' }, + { id: 13, name: 'Bombasto', img: 'https://hydra-media.cursecdn.com/solsticearena.gamepedia.com/thumb/2/2e/Portrait_bombast.png/225px-Portrait_bombast.png?version=5684639074fe5ec7f58083d0b9e1e04e'}, + { id: 14, name: 'Celeritas', img: 'http://www.cardiacathletes.com/images/superheroes/superhero-3.png' }, + { id: 15, name: 'Magneta', img: 'http://vignette4.wikia.nocookie.net/marveldatabase/images/f/fd/MC2_Magneta.png/revision/latest?cb=20120409045056' }, + { id: 16, name: 'RubberMan', img: 'http://images.buycostumes.com/mgen/merchandiser/802980.jpg?zm=1600,1600,1,0,0' }, + { id: 17, name: 'Dynama', img: 'http://orig10.deviantart.net/ad33/f/2008/275/7/6/dynamo_via_hero_creator_by_gwhitmore.png' }, + { id: 18, name: 'Dr IQ', img: 'http://dresdencodak.com/images/costume/drstrange' }, + { id: 19, name: 'Magma', img: 'http://1.bp.blogspot.com/-3kcOLFqmjfg/VHavDweTvqI/AAAAAAAABJ0/TWUql7iB-1o/s1600/279.png' }, + { id: 20, name: 'Tornado', img: 'http://i283.photobucket.com/albums/kk286/skarth7/Renders/GreatTornado.png' } + ]; + return {heroes}; + } +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero-search.service.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero-search.service.ts new file mode 100644 index 00000000..99ae66c4 --- /dev/null +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero-search.service.ts @@ -0,0 +1,16 @@ +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[]); + } +} \ No newline at end of file diff --git a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts index 81c6aad6..b3a39ff3 100644 --- a/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts +++ b/homeworks/anton.luzhanovskyi_diss1dent/angular-test-project/src/app/services/hero.service.ts @@ -1,19 +1,67 @@ import { Injectable } from '@angular/core'; +import { Headers, Http } from '@angular/http'; + +import 'rxjs/add/operator/toPromise'; import { Hero } from '../shared/hero'; -import { HEROES } from '../data/mock-heroes'; -import { BADHEROES } from '../data/mock-heroes'; +/*import { HEROES } from '../data/mock-heroes'; +import { BADHEROES } from '../data/mock-heroes';*/ @Injectable() export class HeroService { + private headers = new Headers({'Content-Type': 'application/json'}); + private heroesUrl = 'api/heroes'; // URL to web api + + constructor(private http: Http) { } + getHeroes(): Promise { - return Promise.resolve(HEROES); + return this.http.get(this.heroesUrl) + .toPromise() + .then(response => response.json().data as Hero[]) + .catch(this.handleError); } + getBadHeroes(): Promise { - return Promise.resolve(BADHEROES); + return this.http.get(this.heroesUrl) + .toPromise() + .then(response => response.json().data as Hero[]) + .catch(this.handleError); } + getHero(id: number): Promise { - return this.getBadHeroes() - .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); + } + + delete(id: number): Promise { + const url = `${this.heroesUrl}/${id}`; + return this.http.delete(url, {headers: this.headers}) + .toPromise() + .then(() => null) + .catch(this.handleError); + } + + 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); + } + 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); + } + + private handleError(error: any): Promise { + console.error('An error occurred', error); // for demo purposes only + return Promise.reject(error.message || error); } }