now working with tiers/poules

angular.json

@@ -24,7 +24,8 @@
               "src/assets/sounds"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/globals.scss"
             ],
             "scripts": []
           },

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import '../globals.scss';
+
 #appcontainer {
   height: 100vh;
   width: 100vw;
@@ -6,7 +8,7 @@
     "topmenu"
     "content"
     "reclame";
-  grid-template-rows: auto 1fr 50px;
+  grid-template-rows: auto 1fr $reclameheight;
 }
 
 app-reclamespinner {

src/app/championship.service.ts

@@ -132,4 +132,8 @@ export class ChampionshipService implements OnInit {
   getTimesInPoule(idChampionship: number, tier: number, poule: number) {
     return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/poule/${poule}/times`, this.httpOptions);
   }
+
+  getTimesInTier(idChampionship: number, tier: number) {
+    return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/times`, this.httpOptions);
+  }
 }

src/app/content/poule/poule.component.ts

@@ -41,7 +41,6 @@ export class PouleComponent implements OnInit {
       });
 
       this.topmenuService.setPoule(poule);
-
       this.topmenuService.setTier(tier);
 
       this.loadData();
@@ -213,9 +212,6 @@ export class PouleComponent implements OnInit {
   }
 
   getLapTimes(raceNr: number, idTeam: number): number[] {
-    // console.log('lapnr/idteam' + lapNr + '  ' + idTeam);
-    // console.log(this.timesIndexed);
-    // console.log(this.timesIndexed[idTeam][lapNr]);
     if (!this.timesIndexed
       || !this.timesIndexed[idTeam]
       || !this.timesIndexed[idTeam][raceNr]
@@ -235,14 +231,11 @@ export class PouleComponent implements OnInit {
   }
 
   getTimeRank(raceindex, idteam: any) {
-    if (!this.teamtotaltimes) {
+    if (!this.teamtotaltimes || !this.teamtotaltimes[idteam]) {
       return -1;
     }
     let penalisedRaceTime = this.getPenalisedRaceTime(raceindex, idteam);
     let indexOf = this.teamtotaltimes[idteam].indexOf(penalisedRaceTime);
-    console.log(penalisedRaceTime + ' ' + indexOf);
-    console.log(this.teamtotaltimes[idteam]);
-    console.log(this.timesIndexed[idteam]);
     return indexOf;
   }
 }

src/app/content/tier/tier.component.html

@@ -1 +1,28 @@
-TIER TEST
+<div class="tier-component">
+  <div class="tier-header">Resultaten van ronde {{tier}}</div>
+  <div class="tier-total">
+
+    <!--some header fields-->
+    <div class="toplevelheader" [ngStyle]="{'grid-row': 1, 'grid-column': 1}">Team</div>
+    <div class="toplevelheader" [ngStyle]="{'grid-row': 1, 'grid-column': 2}">Poule</div>
+    <div class="toplevelheader" [ngStyle]="{'grid-row': 1, 'grid-column': 3}">Resultaat</div>
+
+    <!--starting from the second row... data-->
+    <ng-container *ngFor="let tierTime of tierTimes; let tierIndex = index">
+      <div class="teamname datacell" [ngStyle]="{'grid-row':tierIndex+2, 'grid-column':1}">
+        {{tierTime.name}}
+      </div>
+      <div class="datacell poule" [ngStyle]="{'grid-row':tierIndex+2, 'grid-column':2}">
+        <div>
+          {{tierTime.poule}}
+        </div>
+      </div>
+      <div class="datacell resulttime" [ngStyle]="{'grid-row':tierIndex+2, 'grid-column':3}">
+        <div class="timespanjoiner">
+          <app-timespan [theNumber]="tierTime.result * 1000 | minutes" [theUnit]="'m'"></app-timespan>
+          <app-timespan [theNumber]="tierTime.result * 1000 | seconds" [theUnit]="'s'"></app-timespan>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>

src/app/content/tier/tier.component.scss

@@ -1,11 +1,47 @@
+.tier-header {
+  text-align: center;
+  border-bottom: 1px solid darkgray;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
 app-poule {
   margin: 10px;
   grid-row: 1;
   min-width: 470px;
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
 }
 
 #poulecontainer {
   display: grid;
 }
 
+.tier-total {
+  display: grid;
+}
+
+.tier-component {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+.teamname {
+  margin-top: 15px;
+  font-size: 120%;
+}
+.toplevelheader {
+  font-size: 80%;
+  font-style: italic;
+  border-bottom: 1px solid darkgray;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+.datacell {
+  display: grid;
+  align-items: end;
+}
+.poule {
+  font-size: 120%;
+}
+.resulttime {
+  font-size: 120%;
+}

src/app/content/tier/tier.component.ts

@@ -15,9 +15,12 @@ export class TierComponent implements OnInit {
   protected tier: number;
   protected poules: number[] = [];
   protected idChampionship: number;
+  protected tierTimes: any[];
 
   constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) {
+  }
 
+  ngOnInit() {
     // we need the current championship and we need the current tier... combine them
     combineLatest(
       this.route.paramMap.pipe(map(val => +val.get('tier'))),
@@ -29,18 +32,21 @@ export class TierComponent implements OnInit {
         this.topmenuService.setTier(tier);
         this.topmenuService.setPoule(null);
         this.idChampionship = idChampionship;
-        console.log('refreshing tier/championship combo: '+this.tier+' '+this.idChampionship);
+        console.log('refreshing tier/championship combo: ' + this.tier + ' ' + this.idChampionship);
         // ... load the corresponding poules
         this.championshipService.getPoules(tier, idChampionship).subscribe(poules => {
           this.poules = poules;
           this.topmenuService.setPoules(poules);
           console.log(this.poules);
         });
+
+        // load the times that we want to display on the tier page.
+        this.championshipService.getTimesInTier(idChampionship, tier).subscribe(val => {
+          console.log('got the times!');
+          console.log(val);
+          this.tierTimes = val;
+        });
       }
     });
   }
-
-  ngOnInit() {
-  }
-
 }

src/app/reclamespinner/reclamespinner.component.scss

@@ -1,3 +1,5 @@
+@import "../../globals.scss";
+
 #reclamespinner {
   display: grid;
   grid-template-rows: 1fr;
@@ -7,7 +9,7 @@
 }
 
 #reclamecontainer {
-  height: 200px;
+  height: $reclameheight;
   white-space: nowrap;
   overflow: hidden;
 }

src/app/topmenu/topmenu.component.html

@@ -3,7 +3,7 @@
   <button mat-raised-button (click)="openDialog()">
     {{currentChampionship()}}
   </button>
-  <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier}}">
+  <button mat-raised-button [color]="tierColor(tier)" *ngFor="let tier of tiers" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier}}">
     <mat-icon svgIcon="{{getTierIcon(tier)}}"></mat-icon>
     {{getTierName(tier)}}
   </button>

src/app/topmenu/topmenu.component.scss

@@ -1,3 +1,5 @@
+@import "../../globals";
+
 .button-row {
   text-align: center;
   margin-top: 10px;

src/app/topmenu/topmenu.component.ts

@@ -33,6 +33,10 @@ export class TopmenuComponent implements OnInit {
     this.championshipService.getTiers().subscribe(tiers => {
       this.tiers = tiers;
     });
+
+    this.topmenuService.tier$.subscribe(t => {
+      console.log('tier; ' + t);
+    });
   }
 
   get poules() {
@@ -108,6 +112,19 @@ export class TopmenuComponent implements OnInit {
   }
 
   pouleActive(poule): boolean {
-    return this.topmenuService.poule$.value == poule;
+    return +this.topmenuService.poule$.value === +poule;
+  }
+
+  tierActive(tier): boolean {
+    const value = +this.topmenuService.tier$.value;
+    return (value === +tier);
+  }
+
+  tierColor(tier): string {
+    if (this.tierActive(tier)) {
+      return 'primary';
+    } else {
+      return 'secondary';
+    }
   }
 }