feat(progress): add base for percentage on progress bar

app/components/box.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter } from 'angular2/core';
+import { DecimalPipe }             from 'angular2/common';
 
 import { Capture }          from '../classes/capture';
-import { NumberPipe }       from '../pipes/number';
 import { PokemonComponent } from './pokemon';
 import { SessionService }   from '../services/session';
 import { User }             from '../classes/user';
@@ -12,7 +12,7 @@ const HTML = require('../views/box.html');
   directives: [PokemonComponent],
   events: ['activeChange', 'collapsedChange'],
   inputs: ['captures', 'region', 'user'],
-  pipes: [NumberPipe],
+  pipes: [DecimalPipe],
   providers: [SessionService],
   selector: 'box',
   template: HTML

app/components/header.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter } from 'angular2/core';
+import { PercentPipe }             from 'angular2/common';
 
 import { Capture }        from '../classes/capture';
 import { SessionService } from '../services/session';
@@ -9,6 +10,7 @@ const HTML = require('../views/header.html');
 @Component({
   events: ['regionChange'],
   inputs: ['captures', 'region', 'user'],
+  pipes: [PercentPipe],
   providers: [SessionService],
   selector: 'header',
   template: HTML

app/components/info.ts

@@ -1,14 +1,14 @@
 import { Component, EventEmitter } from 'angular2/core';
+import { DecimalPipe }             from 'angular2/common';
 
 import { Capture }    from '../classes/capture';
-import { NumberPipe } from '../pipes/number';
 
 const HTML = require('../views/info.html');
 
 @Component({
   events: ['collapsedChange'],
   inputs: ['active', 'collapsed'],
-  pipes: [NumberPipe],
+  pipes: [DecimalPipe],
   selector: 'info',
   template: HTML
 })

app/components/pokemon.ts

@@ -1,16 +1,16 @@
 import { Component, EventEmitter } from 'angular2/core';
+import { DecimalPipe }             from 'angular2/common';
 
 import { Capture }        from '../classes/capture';
 import { CaptureService } from '../services/capture';
-import { NumberPipe }     from '../pipes/number';
 import { SessionService } from '../services/session';
 
 const HTML = require('../views/pokemon.html');
 
 @Component({
   events: ['activeChange', 'collapsedChange'],
   inputs: ['capture', 'region'],
-  pipes: [NumberPipe],
+  pipes: [DecimalPipe],
   providers: [SessionService],
   selector: 'pokemon',
   template: HTML

app/pipes/group.ts

@@ -1,6 +1,6 @@
 import { Pipe } from 'angular2/core';
 
-@Pipe({ name: 'GroupPipe' })
+@Pipe({ name: 'group' })
 export class GroupPipe {
 
   public transform (arr, [size]) {

app/views/box.html

@@ -1,4 +1,4 @@
-<h1>{{captures[0].pokemon.national_id | NumberPipe : 3}} - {{captures[captures.length - 1].pokemon.national_id | NumberPipe : 3}}</h1>
+<h1>{{captures[0].pokemon.national_id | number : '3.0'}} - {{captures[captures.length - 1].pokemon.national_id | number : '3.0'}}</h1>
 <div class="box-container">
   <pokemon *ngFor="#capture of captures" (activeChange)="capture.pokemon.is(region) && activeChange.emit($event)" (collapsedChange)="capture.pokemon.is(region) && collapsedChange.emit($event)" [class.captured]="capture.captured" [class.disabled]="!capture.pokemon.is(region)" [class.viewing]="_session.user?.id !== user.id" [capture]="capture" [region]="region"></pokemon>
   <pokemon *ngFor="#capture of empties" [capture]="capture" class="empty"></pokemon>

app/views/dex.html

@@ -1,2 +1,2 @@
 <header [captures]="captures" [(region)]="region" [user]="user"></header>
-<box *ngFor="#group of captures | GroupPipe : 30" (activeChange)="activeChange.emit($event)" (collapsedChange)="collapsedChange.emit($event)" [captures]="group" [region]="region" [user]="user"></box>
+<box *ngFor="#group of captures | group : 30" (activeChange)="activeChange.emit($event)" (collapsedChange)="collapsedChange.emit($event)" [captures]="group" [region]="region" [user]="user"></box>

app/views/header.html

@@ -12,7 +12,7 @@ <h2>FC: <span [class.fc-missing]="!user.friend_code">{{user.friend_code || 'XXXX
 <div class="percentage">
   <div class="progress-container">
     <div class="progress-outer">
-      <div class="progress-inner" [style.width.%]="caught * 100 / total"></div>
+      <div class="progress-inner" [style.width.%]="caught * 100 / total">{{caught / total | percent : '1.2-2'}}</div>
     </div>
     <h3>{{caught}} caught, {{total - caught}} to go!</h3>
   </div>

app/views/info.html

@@ -6,7 +6,7 @@
   <div class="info-header">
     <img [src]="active.pokemon.icon_url">
     <h1 [innerHTML]="active.pokemon.name"></h1>
-    <h2>#{{active.pokemon.national_id | NumberPipe : 3}}</h2>
+    <h2>#{{active.pokemon.national_id | number : '3.0'}}</h2>
   </div>
 
   <div class="info-body">

app/views/pokemon.html

@@ -1,12 +1,12 @@
 <div class="set-captured" (click)="toggle()">
   <h4 *ngIf="capture" [innerHTML]="capture.pokemon.name"></h4>
   <img *ngIf="capture" [src]="capture.pokemon.icon_url">
-  <p *ngIf="capture">#{{capture.pokemon.national_id | NumberPipe : 3}}</p>
+  <p *ngIf="capture">#{{capture.pokemon.national_id | number : '3.0'}}</p>
 </div>
 <div class="set-captured-mobile" (click)="toggle()">
   <img *ngIf="capture" [src]="capture.pokemon.icon_url">
   <h4 *ngIf="capture" [innerHTML]="capture.pokemon.name"></h4>
-  <p *ngIf="capture">#{{capture.pokemon.national_id | NumberPipe : 3}}</p>
+  <p *ngIf="capture">#{{capture.pokemon.national_id | number : '3.0'}}</p>
 </div>
 <div *ngIf="capture" class="set-info" (click)="activeChange.emit(capture); collapsedChange.emit(false)">
   <i class="fa fa-info"></i>