feat(directive): added shared module and highlight directive

Ismaestro · Ismaestro · commit f797b7a7733b · 2017-01-06T19:53:46.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,20 +1,7 @@
 .idea/workspace.xml
-.idea/tasks.xml
 .idea/
-.idea/dataSources/
-.idea/dataSources.ids
-.idea/dataSources.xml
-.idea/dataSources.local.xml
-.idea/sqlDataSources.xml
-.idea/dynamic.xml
-.idea/uiDesigner.xml
-.idea/gradle.xml
-.idea/libraries
-*.iws
 
-.idea_modules/
 node_modules/
-npm-debug.log
 
 app/**/*.js
 app/**/*.map
diff --git a/app/app.component.html b/app/app.component.html
@@ -1,3 +1,3 @@
-<h1 tohHighlight>{{title}}</h1>
+<h1>{{title}}</h1>
 <toh-nav></toh-nav>
 <router-outlet></router-outlet>
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -11,7 +11,7 @@ import { APP_CONFIG, IAppConfig } from './app.config';
 
 export class AppComponent {
     title: string;
-    
+
     constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {
         this.title = this.appConfig.title;
     }
diff --git a/app/app.module.ts b/app/app.module.ts
@@ -6,6 +6,7 @@ import { HttpModule }    from '@angular/http';
 import { APP_CONFIG, AppConfig } from './app.config';
 
 import { AppRoutingModule } from './app-routing.module';
+import { SharedModule } from './shared/shared.module';
 import { CoreModule }       from './core/core.module';
 import { HeroesModule }     from './heroes/heroes.module';
 
@@ -15,8 +16,6 @@ import { InMemoryDataService }  from './shared/in-memory-data.service';
 import { AppComponent }     from './app.component';
 import { HeroTopComponent } from './heroes/hero-top/hero-top.component';
 
-import { HighlightDirective } from "./shared/highlight.directive";
-
 import './shared/rxjs-extensions';
 
 @NgModule({
@@ -27,12 +26,12 @@ import './shared/rxjs-extensions';
         InMemoryWebApiModule.forRoot(InMemoryDataService),
         AppRoutingModule,
         CoreModule,
-        HeroesModule
+        HeroesModule,
+        SharedModule
     ],
     declarations: [
         AppComponent,
-        HeroTopComponent,
-        HighlightDirective
+        HeroTopComponent
     ],
     providers: [
         { provide: APP_CONFIG, useValue: AppConfig }
diff --git a/app/core/logger.service.ts b/app/core/logger.service.ts
@@ -5,7 +5,7 @@ export class LoggerService {
     log(msg: string) {
         console.log(msg);
     }
-    
+
     error(msg: string, obj?: any) {
         console.error(msg, obj);
     }
diff --git a/app/core/nav/nav.component.ts b/app/core/nav/nav.component.ts
@@ -11,7 +11,7 @@ import { APP_CONFIG, IAppConfig } from './../../app.config';
 
 export class NavComponent {
     menuItems;
-    
+
     constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {
         this.menuItems = [
             { link: '/', name: 'Home' },
diff --git a/app/heroes/hero-detail/hero-detail.component.ts b/app/heroes/hero-detail/hero-detail.component.ts
@@ -14,12 +14,12 @@ import { HeroService }  from './../shared/hero.service';
 
 export class HeroDetailComponent implements OnInit {
     hero: Hero;
-    
+
     constructor(private heroService: HeroService,
                 private route: ActivatedRoute,
                 private location: Location) {
     }
-    
+
     ngOnInit(): void {
         this.route.params
             .switchMap((params: Params) => this.heroService.getHeroById(+params[ 'id' ]))
@@ -30,7 +30,7 @@ export class HeroDetailComponent implements OnInit {
         this.heroService.update(this.hero)
             .then(() => this.goBack());
     }
-    
+
     goBack(): void {
         this.location.back();
     }
diff --git a/app/heroes/hero-form/hero-form.component.css b/app/heroes/hero-form/hero-form.component.css
@@ -1,3 +1,7 @@
+.form-group {
+    margin: 1em 0 1em 0;
+}
+
 .form-label {
     display: inline-block;
     width: 10%;
diff --git a/app/heroes/hero-form/hero-form.component.ts b/app/heroes/hero-form/hero-form.component.ts
@@ -14,11 +14,11 @@ import { HeroService } from './../shared/hero.service';
 export class HeroFormComponent {
     @Input() heroes: Hero[];
     @Input() selectedHero: Hero;
-    
+
     hero: Hero;
     submitted: boolean;
     powers: string[];
-    
+
     constructor(private heroService: HeroService) {
         this.hero = new Hero(-1, '', '');
         this.submitted = false;
diff --git a/app/heroes/hero-list/hero-list.component.html b/app/heroes/hero-list/hero-list.component.html
@@ -1,12 +1,19 @@
-<h2>My Heroes</h2>
-<br>
 <toh-hero-form [heroes]="heroes"
                [selectedHero]="selectedHero">
 </toh-hero-form>
 <br>
+<h4>Pick a highlight color</h4>
+<div>
+    <input type="radio" name="colors" (click)="color='lightgreen'">Green
+    <input type="radio" name="colors" (click)="color='yellow'">Yellow
+    <input type="radio" name="colors" (click)="color='cyan'">Cyan
+</div>
+<br>
+<h2>My Heroes</h2>
 <ul class="heroes">
     <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
-        [class.selected]="hero === selectedHero">
+        [class.selected]="hero === selectedHero"
+        [tohHighlight]="color" defaultColor="violet">
         <span class="badge">{{hero.id}}</span>
         <span>{{hero.name}} | {{hero.alterEgo}} | {{hero.power}}</span>
         <button class="remove"
@@ -18,6 +25,5 @@ <h2>My Heroes</h2>
     <h2>
         {{selectedHero.name | uppercase}} is my hero
     </h2>
-    <p tohHighlight>Test</p>
     <button (click)="gotoDetail()">View Details</button>
 </div>
diff --git a/app/heroes/hero-list/hero-list.component.ts b/app/heroes/hero-list/hero-list.component.ts
@@ -15,28 +15,29 @@ import { HeroService } from './../shared/hero.service';
 export class HeroListComponent implements OnInit {
     heroes: Hero[];
     selectedHero: Hero;
-    
+    color: string;
+
     constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig,
                 private router: Router,
                 private heroService: HeroService) {
     }
-    
+
     getHeroes(): void {
         this.heroService.getHeroes().then(heroes => this.heroes = heroes);
     }
-    
+
     ngOnInit(): void {
         this.getHeroes();
     }
-    
+
     onSelect(hero: Hero): void {
         this.selectedHero = hero;
     }
-    
+
     gotoDetail(): void {
         this.router.navigate([ `/${this.appConfig.routes.heroes}/`, this.selectedHero.id ]);
     }
-    
+
     remove(hero: Hero): void {
         this.heroService
             .remove(hero.id)
diff --git a/app/heroes/hero-search/hero-search.component.ts b/app/heroes/hero-search/hero-search.component.ts
@@ -23,24 +23,24 @@ import { HeroSearchService } from './hero-search.service';
 
 export class HeroSearchComponent implements OnInit {
     heroes: Observable<Hero[]>;
-    
+
     private searchTerms;
     private showDropDown;
     private searchBox;
-    
+
     constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig,
                 private heroSearchService: HeroSearchService,
                 private router: Router,
                 private loggerService: LoggerService) {
         this.showDropDown = false;
         this.searchTerms = new Subject<string>();
     }
-    
+
     // Push a search term into the observable stream.
     search(): void {
         this.searchTerms.next(this.searchBox);
     }
-    
+
     ngOnInit(): void {
         this.heroes = this.searchTerms
             .debounceTime(200)        // wait for 200ms pause in events
@@ -55,15 +55,15 @@ export class HeroSearchComponent implements OnInit {
                 return Observable.of<Hero[]>([]);
             });
     }
-    
+
     gotoDetail(hero: Hero): void {
         let link = [ '/' + this.appConfig.routes.heroes, hero.id ];
         this.router.navigate(link);
         this.showDropDown = false;
         this.searchBox = null;
         this.loggerService.log('Moved to hero with id: ' + hero.id);
     }
-    
+
     escapePressed(): void {
         this.showDropDown = false;
     }
diff --git a/app/heroes/hero-search/hero-search.service.ts b/app/heroes/hero-search/hero-search.service.ts
@@ -8,7 +8,7 @@ import { Hero } from './../shared/hero.model';
 export class HeroSearchService {
     constructor(private http: Http) {
     }
-    
+
     search(term: string): Observable<Hero[]> {
         return this.http
             .get(`app/heroes/?name=${term}`)
diff --git a/app/heroes/hero-top/hero-top.component.ts b/app/heroes/hero-top/hero-top.component.ts
@@ -11,12 +11,12 @@ import { HeroService } from './../shared/hero.service';
     styleUrls: [ 'hero-top.component.css' ]
 })
 export class HeroTopComponent implements OnInit {
-    
+
     heroes: Hero[] = [];
-    
+
     constructor(private heroService: HeroService) {
     }
-    
+
     ngOnInit(): void {
         this.heroService.getHeroes()
             .then(heroes => this.heroes = heroes.slice(1, 5));
diff --git a/app/heroes/heroes.module.ts b/app/heroes/heroes.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule }  from '@angular/forms';
 
 import { HeroRoutingModule } from './heroes-routing.module';
+import { SharedModule } from "../shared/shared.module";
 
 import { HeroListComponent }   from './hero-list/hero-list.component';
 import { HeroSearchComponent } from './hero-search/hero-search.component';
@@ -15,6 +16,7 @@ import { HeroService } from './shared/hero.service';
     imports: [
         CommonModule,
         FormsModule,
+        SharedModule,
         HeroRoutingModule
     ],
     declarations: [
diff --git a/app/heroes/shared/hero.model.ts b/app/heroes/shared/hero.model.ts
@@ -1,8 +1,7 @@
 export class Hero {
-    constructor(
-        public id: number,
-        public name: string,
-        public power: string,
-        public alterEgo?: string
-    ) {  }
+    constructor(public id: number,
+                public name: string,
+                public power: string,
+                public alterEgo?: string) {
+    }
 }
diff --git a/app/heroes/shared/hero.service.ts b/app/heroes/shared/hero.service.ts
@@ -10,14 +10,14 @@ import { Hero } from './hero.model';
 export class HeroService {
     private headers;
     private heroesUrl;
-    
+
     constructor(private http: Http,
                 private loggerService: LoggerService,
                 @Inject(APP_CONFIG) private appConfig: IAppConfig) {
         this.heroesUrl = this.appConfig.endpoints.heroes;
         this.headers = new Headers({ 'Content-Type': 'application/json' });
     }
-    
+
     getHeroes(): Promise<Hero[]> {
         return this.http.get(this.heroesUrl)
             .toPromise()
@@ -31,15 +31,15 @@ export class HeroService {
             .then(response => response.json().data as string[])
             .catch(this.handleError);
     }
-    
+
     getHeroById(id: number): Promise<Hero> {
         const url = `${this.heroesUrl}/${id}`;
         return this.http.get(url)
             .toPromise()
             .then(response => response.json().data as Hero)
             .catch(this.handleError);
     }
-    
+
     create(hero: Hero): Promise<Hero> {
         return this.http
             .post(this.heroesUrl, JSON.stringify({
@@ -51,7 +51,7 @@ export class HeroService {
             .then(res => res.json().data)
             .catch(this.handleError);
     }
-    
+
     update(hero: Hero): Promise<Hero> {
         const url = `${this.heroesUrl}/${hero.id}`;
         return this.http
@@ -60,15 +60,15 @@ export class HeroService {
             .then(() => hero)
             .catch(this.handleError);
     }
-    
+
     remove(id: number): Promise<void> {
         const url = `${this.heroesUrl}/${id}`;
         return this.http.delete(url, { headers: this.headers })
             .toPromise()
             .then(() => null)
             .catch(this.handleError);
     }
-    
+
     private handleError(error: any): Promise<any> {
         this.loggerService.error('An error occurred', error);
         return Promise.reject(error.message || error);
diff --git a/app/shared/highlight.directive.ts b/app/shared/highlight.directive.ts
@@ -1,9 +1,26 @@
-import { Directive, ElementRef, Input } from '@angular/core';
-
-@Directive({ selector: '[tohHighlight]' })
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
+@Directive({
+    selector: '[tohHighlight]'
+})
 export class HighlightDirective {
-    constructor(el: ElementRef) {
-        el.nativeElement.style.backgroundColor = 'yellow';
+
+    @Input('tohHighlight') highlightColor: string;
+
+    @Input() defaultColor: string;
+
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('mouseenter') onMouseEnter() {
+        this.highlight(this.highlightColor || this.defaultColor || 'red');
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        this.highlight(null);
+    }
+
+    private highlight(color: string) {
+        this.el.nativeElement.style.backgroundColor = color;
     }
 }
diff --git a/app/shared/shared.module.ts b/app/shared/shared.module.ts

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import { APP_CONFIG, IAppConfig } from './app.config';`
`11`	`11`
`12`	`12`	`export class AppComponent {`
`13`	`13`	`title: string;`
`14`		`-`
	`14`	`+`
`15`	`15`	`constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {`
`16`	`16`	`this.title = this.appConfig.title;`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export class LoggerService {`
`5`	`5`	`log(msg: string) {`
`6`	`6`	`console.log(msg);`
`7`	`7`	`}`
`8`		`-`
	`8`	`+`
`9`	`9`	`error(msg: string, obj?: any) {`
`10`	`10`	`console.error(msg, obj);`
`11`	`11`	`}`