diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/package.json index edb6e3f0..05160de1 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,7 @@ "zone.js": "^0.7.6" }, "devDependencies": { - "@angular/forms": "^2.4.6", + "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", @@ -34,6 +37,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 @@ Title + 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.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:` -
-
-

My Heroes

- -
-
- -
-
- `, - 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: ` +

{{title}}

+ +
+ +
+ ` }) - -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..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,14 +1,47 @@ -import { NgModule } from "@angular/core"; -import { BrowserModule } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { AppComponent } from "./app.component"; +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 { 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'; + +// 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 ], - declarations: [ AppComponent, HeroDetailComponent, HeroEditComponent ], - bootstrap: [ AppComponent ] + imports: [ + BrowserModule, + FormsModule, + AppRoutingModule, + HttpModule, + InMemoryWebApiModule.forRoot(InMemoryDataService), + ReactiveFormsModule + ], + declarations: [ + AppComponent, + HeroesComponent, + DashboardComponent, + HeroDetailComponent, + HeroEditComponent, + HeroSearchComponent + ], + 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..db952490 --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/dashboard.component.html @@ -0,0 +1,13 @@ +

Top Heroes

+
+ +
+

{{hero.name}}

+
+ +
+
+
+ +
+
\ 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..dd4356ec --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/hero-detail.component.html @@ -0,0 +1,20 @@ +
+
+

Hero details

+

+ {{hero.name}} +

+
{{hero.id}}
+
{{hero.name}}
+
{{hero.age}}
+
{{hero.skill}}
+
+ +
+
+
+ +
+
+
+ \ 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: ` -
-
-

Hero details

-

- {{hero.name}} -

-
{{hero.id}}
-
{{hero.name}}
-
{{hero.age}}
-
{{hero.skill}}
-
- -
-
-
- -
-
- ` + 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-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 @@ +
+

Hero edit

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+

Form value: {{ heroForm.value | json }}

+
+ +
+
\ 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 752b6822..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,36 +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: ` -
-

Hero edit

-

- - -

-

- - -

-

- - -

- - -

-

- - -

-
- -
-
- ` + templateUrl: "./hero-edit.component.html" }) export class HeroEditComponent { @@ -39,9 +14,41 @@ export class HeroEditComponent { @Input() canEdit: boolean; + heroForm: FormGroup; // <--- heroForm is of type FormGroup + states = states; + @Output() allowEdit = new EventEmitter(); + @Output() goBack = new EventEmitter(); + + 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-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: ` +
+

Hero Search

+ +
+
+ {{hero.name}} +
+
+
+ `, + 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/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 { + 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 05bc7846..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,10 +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 { + console.error('An error occurred', error); // for demo purposes only + return Promise.reject(error.message || error); + } + + 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); + } + + 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); + } + + 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); + } + + delete(id: number): Promise { + 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/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/heroes.component.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts new file mode 100644 index 00000000..d8ff0dbf --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/heroes.component.ts @@ -0,0 +1,84 @@ +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:` +
+
+

My Heroes

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

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

+ +
+
+
+
+
+ + +
+
+ ` +}) + +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]); + } + + 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 new file mode 100644 index 00000000..07163a15 --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/scripts/in-memory-data.service.ts @@ -0,0 +1,114 @@ +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", + 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}; + } +} \ No newline at end of file diff --git a/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/app.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/app.component.scss new file mode 100644 index 00000000..984e4c10 --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/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/app/styles/dashboard.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/dashboard.component.scss new file mode 100644 index 00000000..4c023194 --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/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/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/app/styles/heroes.component.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/heroes.component.scss new file mode 100644 index 00000000..8283ae12 --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/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/app/styles/style.scss b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss new file mode 100644 index 00000000..72ac3ace --- /dev/null +++ b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/app/styles/style.scss @@ -0,0 +1,24 @@ +@import '~bootstrap/scss/bootstrap.scss'; +@import "app.component"; +@import "dashboard.component"; +@import "heroes.component"; +@import "hero-search.component"; + +button { + cursor: pointer; +} +label { + min-width: 50px; +} +/* Master Styles */ +h1 { + color: #369; + font-size: 250%; +} +h2, h3 { + color: #444; + font-weight: lighter; +} +body { + margin: 2em; +} \ No newline at end of file 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/vendor/main.ts b/homeworks/artem.luzhanovskyi_ucozlab/homework_angular2/src/vendor/main.ts index f5092992..f83aab21 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 "../app/styles/style.scss"; // Other vendors for example jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ...