now displaying minutes / seconds correctly

src/app/app.module.ts

@@ -12,6 +12,8 @@ import {HttpClientModule} from '@angular/common/http';
 import {AppRoutingModule} from './app-routing.module';
 import { ChampionshipComponent } from './championship/championship.component';
 import { ChampionshipselectordialogComponent } from './championshipselectordialog/championshipselectordialog.component';
+import { RacetimepipePipe } from './racetimepipe.pipe';
+import { MinutesPipe } from './minutes.pipe';
 
 @NgModule({
   declarations: [
@@ -21,7 +23,9 @@ import { ChampionshipselectordialogComponent } from './championshipselectordialo
     PouleComponent,
     TierComponent,
     ChampionshipComponent,
-    ChampionshipselectordialogComponent
+    ChampionshipselectordialogComponent,
+    RacetimepipePipe,
+    MinutesPipe
   ],
   imports: [
     BrowserModule,

src/app/content/poule/poule.component.html

@@ -35,10 +35,13 @@
 
       <!--do a penalty for this race/team combo-->
       <div class="penaltycell" [ngStyle]="{'grid-column':2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell">{{getPenaltySum(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
+        <span class="timecell">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}<span class="timeletter">s</span></span>
       </div>
       <div class="totalcell" [ngStyle]="{'grid-column':3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell">{{getRaceTime(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
+        <span class="timecell">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
+        <span class="timeletter">m</span>
+        <span class="timecell">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
+        <span class="timeletter">s</span>
       </div>
 
 
@@ -48,7 +51,10 @@
     <div class="resultcell" [ngStyle]="{'grid-column':4,
   'grid-row-start':2+(teamindex*(maxRaces+1))+1,
   'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
-      <span class="timecell">{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}</span>
+      <span class="timecell">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
+      <span class="timeletter">m</span>
+      <span class="timecell">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
+      <span class="timeletter">s</span>
     </div>
   </ng-container>
 

src/app/content/poule/poule.component.scss

@@ -20,3 +20,7 @@
   font-family: monospace;
 }
 
+.timeletter {
+  font-size: 60%;
+}
+

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

@@ -89,6 +89,10 @@ export class PouleComponent implements OnInit {
     return penaltysum;
   }
 
+  /**
+   * Get avg of best two in milliseconds.
+   * @param idTeam
+   */
   getAvgOfBestTwo(idTeam: number) {
     if (!this.timesIndexed) {
       return null;
@@ -136,6 +140,15 @@ export class PouleComponent implements OnInit {
     });
   }
 
+  getRaceTimeMinutes(raceNr: number, idTeam: number): number {
+    return Math.floor(this.getRaceTime(raceNr, idTeam) / 1000 / 60);
+  }
+
+  getRaceTimeSeconds(raceNr: number, idTeam: number): string {
+    const raceTime = this.getRaceTime(raceNr, idTeam);
+    return ((raceTime / 1000) % 60).toFixed(2);
+  }
+
   getLapTimes(raceNr: number, idTeam: number): number[] {
     // console.log('lapnr/idteam' + lapNr + '  ' + idTeam);
     // console.log(this.timesIndexed);

src/app/minutes.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { MinutesPipe } from './minutes.pipe';
+
+describe('MinutesPipe', () => {
+  it('create an instance', () => {
+    const pipe = new MinutesPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/minutes.pipe.ts

@@ -0,0 +1,15 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'minutes'
+})
+export class MinutesPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    if (value === null) {
+      return null;
+    }
+    return Math.floor((value / 1000) / 60);
+  }
+
+}

src/app/racetimepipe.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { RacetimepipePipe } from './racetimepipe.pipe';
+
+describe('RacetimepipePipe', () => {
+  it('create an instance', () => {
+    const pipe = new RacetimepipePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/racetimepipe.pipe.ts

@@ -0,0 +1,24 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'racetimepipe'
+})
+export class RacetimepipePipe implements PipeTransform {
+
+  /**
+   * Transform an amount of milliseconds to '999m:99s'
+   * @param value
+   * @param args
+   */
+  transform(value: any, args?: any): any {
+    if (value === null) {
+      return null;
+    }
+    // assume a number in milliseconds
+    const ms = <number>value;
+    const m = Math.floor(ms / 60);
+    const s = ms - m * 60;
+    return value + 'ms' + m + 'm:' + s.toFixed(2) + 's';
+  }
+
+}

src/app/topmenu/topmenu.component.html

@@ -5,6 +5,6 @@
   </button>
   <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/20/tier/{{tier}}">
     <mat-icon svgIcon="{{getTierIcon(tier)}}"></mat-icon>
-    Tier {{tier}}
+    {{getTierName(tier)}}
   </button>
 </div>

src/app/topmenu/topmenu.component.ts

@@ -67,4 +67,24 @@ export class TopmenuComponent implements OnInit {
       return '';
     }
   }
+
+  /**
+   * Get a tier name. If there's a fixed amount of tiers we can give them a special name.
+   * @param tier
+   */
+  getTierName(tier: number) {
+    if (tier === this.tiers.length) {
+      return 'Finale';
+    } else if (tier === this.tiers.length - 1) {
+      return 'Halve finale';
+    } else if (tier === this.tiers.length - 2) {
+      return 'Kwart finale';
+    } else if (tier === this.tiers.length - 3) {
+      return 'Achtste finale';
+    } else if (tier === this.tiers.length - 3) {
+      return 'Zestiende finale';
+    } else {
+      return 'tier' + tier;
+    }
+  }
 }