feat(hero): added fields to Hero class, created a form to add a new hero, and show details

Author: Ismaestro

app/app.config.ts

@@ -16,6 +16,7 @@ export const AppConfig: IAppConfig = {
         heroById: heroesRoute + '/:id'
     },
     endpoints: {
-        heroes: 'api/heroes'
+        heroes: 'api/heroes',
+        heroesPowers: 'api/heroesPowers'
     }
 };

app/heroes/hero-detail/hero-detail.component.css

@@ -1,6 +1,6 @@
 label {
     display: inline-block;
-    width: 3em;
+    width: 5em;
     margin: .5em 0;
     color: #607D8B;
     font-weight: bold;

app/heroes/hero-detail/hero-detail.component.html

@@ -7,6 +7,10 @@ <h2>{{hero.name}} details!</h2>
         <label>name: </label>
         <input [(ngModel)]="hero.name" placeholder="name"/>
     </div>
+    <div>
+        <label>alterEgo: </label>
+        <input [(ngModel)]="hero.alterEgo" placeholder="alterEgo"/>
+    </div>
     <button (click)="goBack()">Back</button>
-    <button (click)="save()">Save</button>
+    <button (click)="saveHero()">Save hero</button>
 </div>

app/heroes/hero-detail/hero-detail.component.ts

@@ -25,8 +25,8 @@ export class HeroDetailComponent implements OnInit {
             .switchMap((params: Params) => this.heroService.getHeroById(+params[ 'id' ]))
             .subscribe(hero => this.hero = hero);
     }
-    
-    save(): void {
+
+    saveHero(): void {
         this.heroService.update(this.hero)
             .then(() => this.goBack());
     }

app/heroes/hero-form/hero-form.component.css

@@ -1,3 +1,19 @@
+.form-label {
+    display: inline-block;
+    width: 10%;
+    text-align: left;
+}
+
+.form-button {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    background-color: #eee;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: hand;
+    margin: 1.5em 0 0 0;
+}
+
 .ng-valid[required], .ng-valid.required {
     border-left: 5px solid #42A948;
 }

app/heroes/hero-form/hero-form.component.html

@@ -3,7 +3,7 @@
         <h1>New hero</h1>
         <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
             <div class="form-group">
-                <label for="name">Name</label>
+                <label class="form-label" for="name">Name</label>
                 <input type="text" class="form-control" id="name"
                        required
                        [(ngModel)]="hero.name" name="name"
@@ -14,19 +14,19 @@ <h1>New hero</h1>
                 </div>
             </div>
             <div class="form-group">
-                <label for="alterEgo">Alter Ego</label>
+                <label class="form-label" for="alterEgo">Alter Ego</label>
                 <input type="text" class="form-control" id="alterEgo"
                        [(ngModel)]="hero.alterEgo" name="alterEgo">
             </div>
             <div class="form-group">
-                <label for="power">Hero Power</label>
+                <label class="form-label" for="power">Hero Power</label>
                 <select class="form-control" id="power"
                         required
                         [(ngModel)]="hero.power" name="power">
                     <option *ngFor="let power of powers" [value]="power">{{power}}</option>
                 </select>
             </div>
-            <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Create new hero!</button>
+            <button type="submit" class="button form-button" [disabled]="!heroForm.form.valid">Create new hero!</button>
         </form>
     </div>
     <div [hidden]="!submitted">

app/heroes/hero-form/hero-form.component.ts

@@ -22,12 +22,10 @@ export class HeroFormComponent {
     constructor(private heroService: HeroService) {
         this.hero = new Hero(-1, '', '');
         this.submitted = false;
-        
-        // TODO
-        this.powers = [ 'Really Smart', 'Super Flexible',
-            'Super Hot', 'Weather Changer' ];
+
+        this.heroService.getHeroesPowers().then(powers => this.powers = powers);
     }
-    
+
     onSubmit() {
         this.heroService.create(this.hero)
             .then(hero => {

app/heroes/hero-list/hero-list.component.css

@@ -7,7 +7,7 @@
     margin: 0 0 2em 0;
     list-style-type: none;
     padding: 0;
-    width: 23em;
+    width: 40%;
 }
 
 .heroes li {

app/heroes/hero-search/hero-search.component.css

@@ -13,7 +13,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
-    position: fixed;
+    position: absolute;
     z-index: 20;
 }
 

app/heroes/shared/hero.service.ts

@@ -24,6 +24,13 @@ export class HeroService {
             .then(response => response.json().data as Hero[])
             .catch(this.handleError);
     }
+
+    getHeroesPowers(): Promise<string[]> {
+        return this.http.get(this.appConfig.endpoints.heroesPowers)
+            .toPromise()
+            .then(response => response.json().data as string[])
+            .catch(this.handleError);
+    }
 
     getHeroById(id: number): Promise<Hero> {
         const url = `${this.heroesUrl}/${id}`;