grade -> competitor score lines coming along.

todo -> switch to to listview, or plan better list strategy for large collections (blowing up on some complex repeats).

app/app.ts

@@ -22,8 +22,9 @@ import { StartListPage } from "./pages/competition/startList/start.list.page";
 
 //level 4
 import {StartListGradePage } from "./pages/competition/startList/competitors/competitors.page";
-import {GradePage} from "./pages/competition/grade/grade.page";
 import {ClubPage} from "./pages/competition/club/club.page";
+import {GradeCompetitorsPage} from "./pages/competition/grade/grade.page";
+
 
 //providers 
 import {Logger} from "./providers/logger";
@@ -84,7 +85,7 @@ import {RegionCache, CompetitionCache, GradeCache, ClubCache} from "./providers/
     //to-do - template & provider
     { path: "/region/:regionId/competition/:competitionId/startList/:gradeId/competitors", component: StartListGradePage, name: "Region.Competition.StartList.Competitors"},
     //to-do - template & provider
-    //{ path: "/region/:regionId/competition/:competitionId/grade/:gradeId/competitors", component: GradePage, name : "Region.Competition.GradeList.Competitors" },
+    { path: "/region/:regionId/competition/:competitionId/grade/:gradeId/competitors", component: GradeCompetitorsPage, name : "Region.Competition.GradeList.Competitors" },
     //to-do - template & provider
     //{ path: "/region/:regionId/competition/:competitionId/club/:clubId/competitors", component: ClubPage, name : "Region.Competition.GradeList.Competitors" },
 ])

app/controls/list/list-item.ts

@@ -16,7 +16,7 @@ import { Observable, Subscription, Subject} from 'rxjs/Rx';
     template: `
     <StackLayout #item style="opacity:1">
         <Border height="2" borderRadius="0" borderWidth="1" borderColor="#548CEC"></Border>
-        <GridLayout #animateItem columns="50, *, 42" rows="auto" class="nx-item" (tap)="tapWrapper($event)">
+        <GridLayout #animateItem columns="50, *, 50" rows="auto" class="nx-item" (tap)="tapWrapper($event)">
             <StackLayout col="0" class="icon-column" style="vertical-align:center;horizontal-align:center" >
                 <ng-content select="[item-left]"></ng-content>
             </StackLayout>
@@ -26,6 +26,9 @@ import { Observable, Subscription, Subject} from 'rxjs/Rx';
             <StackLayout col="2" class="icon-column" style="vertical-align:center;horizontal-align:center">
                 <ng-content select="[item-right]"></ng-content>
             </StackLayout>
+            <StackLayout colSpan="3" style="vertical-align:center">
+                <ng-content select="[full-item]"></ng-content>
+            </StackLayout>
         </GridLayout>
     </StackLayout>
     `,

app/decorators/page.ts

@@ -1,15 +1,6 @@
 import { Component, provide, ChangeDetectionStrategy } from "@angular/core";
 import {NgIf, NgFor} from "@angular/common";
 import {RouteParams} from "@angular/router-deprecated";
-// import { NxNav} from "../controls/nav/nav";
-// import {NxList} from "../controls/list/list";
-// import {NxListItem} from "../controls/list/list-item";
-// import {NxHeader} from "../controls/list/header";
-// import {NxCard} from "../controls/card/card.control";
-// import {NxPullToRefresh} from "../controls/pullToRefresh/pullToRefresh.control";
-// import {NxContent} from "../controls/content/content.control";
-// import {NxDrawer} from "../controls/drawer/drawer";
-// import {IonIcon,NavIcon} from "../controls/icons/ion-icon";
 import {controls} from "../controls/all";
 
 //import {LoadingService} from "../providers/loadingService/loadingService";
@@ -23,7 +14,7 @@ import {Logger} from "../providers/logger";
 import {TitleTransform} from "../pipes/title";
 import {DisplayDate} from "../pipes/dates";
 import {GroupByPipe, OrderByPipe} from "../pipes/orderBy";
-
+import {FormScoreFormatter, ScoreFormatter} from "../pipes/score";
 const _reflect: any = Reflect;
 
 /*
@@ -68,7 +59,8 @@ export function Page(config: IPageConfig={})
             NgFor
         ];
 
-        var corePipes = [TitleTransform, DisplayDate, GroupByPipe, OrderByPipe];
+        var corePipes = [TitleTransform, DisplayDate, GroupByPipe, OrderByPipe, ScoreFormatter, FormScoreFormatter];
+
 
         config.directives = config.directives 
             ? config.directives.concat(coreDirectives) 

app/decorators/pageControl.ts

@@ -29,7 +29,9 @@ export interface IPageControlConfig {
     pipes?: any[];
     host?: {
         'class' : string 
-    }
+    },
+    changeDetection? : any;
+    styleUrls?: string[];
 }
 export function PageControl(config: IPageControlConfig={}) {
     return (cls) =>

app/pages/competition/grade/grade.page.ts

@@ -7,92 +7,91 @@ import {AppRoutingService} from "../../../context/router.context";
 import {CompetitionService} from "../../../providers/leagues/competitions";
 import {ClubService} from "../../../providers/leagues/club";
 import {GradeService} from "../../../providers/leagues/grade";
+import {CompetitorService} from "../../../providers/leagues/competitors";
 import {RegionCache, CompetitionCache, GradeCache, ClubCache} from "../../../providers/leagues/cache";
-import {IGrade} from "../../../models/models.d.ts";
+import * as Models from "../../../models/models.d.ts";
+
+import * as Rx from "rxjs";
+import 'rxjs/add/operator/max';
+import 'rxjs/add/operator/distinct';
+
 import {CompetitionNav} from "../../nav/competition.nav";
+import {CompetitorResult} from "../../templates/competitor.results";
 @Page({
-    selector: "grade-page",
-    //templateUrl: "pages/competition/gradeList/page.html",
+    selector: "grade-competitors-page",
     template: `
         <nx-drawer>
             <competition-nav drawer-aside-left></competition-nav>
-            
             <nx-nav>
-                <label class="nx-header-title" [text]="'Grade List' | Title" style="horizontal-align:center"></label>
+                <label class="nx-header-title" [text]="'Competitors' | Title" style="horizontal-align:center"></label>
                 <ion-icon nav-right nav="true" icon="ion-android-favorite"></ion-icon>
             </nx-nav>
-
             <nx-content (refreshStarted)="refresh($event)">
-                <StackLayout class="inset">
-                    <nx-list *ngFor="let group of list | groupBy: 'Discipline' | orderBy:'key'">
-                        <nx-header item-top>
-                            <label [text]="group.key | Title" class="nx-header-title"></label>
-                        </nx-header>
-                        
-                        <nx-item *ngFor="let grade of group.items | orderBy:'ClassName'">
-                            <ion-icon item-left icon="ion-clipboard"></ion-icon>
-                            <label [text]="grade.ClassName"></label>
-                            <ion-icon item-right icon="ion-ios-people"></ion-icon>
-                            <label item-right class="note" [text]="grade.Competitors"></label>
-                        </nx-item>
-                    </nx-list>
-                </StackLayout>
+
+                <GridLayout>
+                    <StackLayout class="inset">
+                        <nx-list>
+                            <competitor-result *ngFor="let item of list; #i = index" [competitor]="item"></competitor-result>
+                             
+                        </nx-list>
+                    </StackLayout>
+                    <material-fab text="face" vertical-align="top" horizontal-align="right"></material-fab>
+                </GridLayout>
+                
             </nx-content>
-            
         </nx-drawer>
     `,
-    directives: [CompetitionNav],
-    providers: [CompetitionService, GradeService, ClubService]
+    directives: [CompetitionNav, CompetitorResult],
+    providers: [CompetitionService, GradeService, ClubService, CompetitorService]
 })
-export class GradePage implements OnInit
-{
+export class GradeCompetitorsPage implements OnInit {
     constructor(
-        private logger: Logger, 
+        private logger: Logger,
         private gradeService: GradeService,
+        private competitorService: CompetitorService,
         private context: AppRoutingService,
-        private cache: CompetitionCache)
-    {
-
+        private cache: CompetitionCache) {
         this.logger.Notify("grade list page started");
     }
-
-    public list : IGrade[] = [];
 
-    //passed to the child component
-    public regionsHintText = "Hi from regions";
-    
+    public list: Models.ICompetitor[] = [];
+    public groups: number = 0; //if more than one group change the label
+
     //action to 
-    public gradeSearch($event : any)
-    {
+    public gradeSearch($event: any) {
         this.logger.Notify("Search passed to region");
         this.logger.Notify($event);
         //this.logger.Notify("Search Term in Regions Page: " + $event.Value);
-    } 
-    
-    public ngOnInit(){
+    }
+
+    public ngOnInit() {
         this.logger.Notify("grade-list-page ngOnInit");
         //time to load the data
-        if(this.cache.Grades && this.cache.Grades.length > 0){
-            this.list = this.cache.Grades;
-            return;
-        }
-
+
         this.loadDetail();
     }
 
     public loadDetail() {
-        let observable = this.gradeService.List(this.cache.Competition.Id).map(e=> e.json());
-        observable.subscribe(e=> {
+        let obseravable = this.competitorService.ListGradeCompetitors(this.context.CompetitionId, this.context.GradeId);
+
+        //this.logger.NotifyResponse(obseravable);
+
+        obseravable.map(e => e.json()).subscribe(e => {
             this.list = e;
+            let max = Rx.Observable.from(this.list).map(e => e.StartGroup).max();
+
+            max.subscribe(m => {
+                this.groups = m;
+            });
         });
-        
-        return observable;
+
+        return obseravable;
     }
 
-    public refresh(args: any){
+    public refresh(args: any) {
         this.loadDetail().subscribe(() => {
             args.completed();
         });
     }
-    
+
 }