Added vertical tabs, formatted race times

src/app/app.module.ts

@@ -33,6 +33,8 @@ import { FormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { NewRaceDialogComponent } from './components/new-race-dialog/new-race-dialog.component';
 
+import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -68,7 +70,8 @@ import { NewRaceDialogComponent } from './components/new-race-dialog/new-race-di
     FormsModule,
     MatMenuModule,
     MatDialogModule,
-    HttpClientModule
+    HttpClientModule,
+    MdbTabsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/season-details/season-details.component.html

@@ -7,6 +7,15 @@
     <button mat-raised-button class="full-width-button" color="primary" (click)="openUploadReplayDialog(seasonInfo._id)">Upload Replay</button>
     <mat-divider></mat-divider>
     <br/>
+    <mdb-tabs [vertical]="true">
+        <mdb-tab *ngIf="seasonStandings" title="Standings"> 
+            <app-season-standings-table [dataSource]="seasonStandings"></app-season-standings-table> 
+        </mdb-tab>
+        <mdb-tab *ngFor="let week of weeks" title="{{'Week #' +week.weekNumber}}">
+            <app-weekly-standings-table [dataSource]="week.entries"></app-weekly-standings-table>
+        </mdb-tab>
+    </mdb-tabs>
+    <!--
     <mat-tab-group>
         <div *ngIf="seasonStandings">
             <mat-tab label="Standings"> 
@@ -19,4 +28,5 @@
             </mat-tab>
         </div>
     </mat-tab-group>
+    -->
 </div>

src/app/components/weekly-standings-table/weekly-standings-table.component.html

@@ -14,7 +14,7 @@
         <!-- Weight Column -->
         <ng-container matColumnDef="runTime">
             <th mat-header-cell *matHeaderCellDef> runTime </th>
-            <td mat-cell *matCellDef="let element"> {{element.timeInMilliseconds}} </td>
+            <td mat-cell *matCellDef="let element"> {{formatMilliseconds(element.timeInMilliseconds)}} </td>
         </ng-container>
         
         <!-- Symbol Column -->

src/app/components/weekly-standings-table/weekly-standings-table.component.ts

@@ -10,4 +10,12 @@ export class WeeklyStandingsTableComponent {
   displayedColumns: string[] = ['position', 'name', 'gameHandle', 'runTime'];
   @Input() dataSource?: SeasonWeekEntry[];
 
+  formatMilliseconds(milliseconds: number)
+  {
+    const minutes = Math.floor(milliseconds / (1000 * 60));
+    const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
+    const remainingMilliseconds = milliseconds % 1000;
+
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(remainingMilliseconds).padStart(3, '0')}`;
+  }
 }

src/app/models/season.ts

@@ -27,6 +27,7 @@ export interface SeasonWeekEntry {
 
 export interface SeasonWeek {
     _id: string;
+    weekNumber: number;
     seasonId: string;
     mapName: string;
     mapImg: string;