From c3b578056c24853cee83083da9d3e0d8f3888679 Mon Sep 17 00:00:00 2001
From: Dan <Quildra@gmail.com>
Date: Thu, 16 Nov 2023 09:06:39 +0000
Subject: [PATCH] Added vertical tabs, formatted race times

---
 src/app/app.module.ts                                  |  5 ++++-
 .../season-details/season-details.component.html       | 10 ++++++++++
 .../weekly-standings-table.component.html              |  2 +-
 .../weekly-standings-table.component.ts                |  8 ++++++++
 src/app/models/season.ts                               |  1 +
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 30da9c6..49e63b5 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/components/season-details/season-details.component.html b/src/app/components/season-details/season-details.component.html
index 5b8d674..f33a57d 100644
--- a/src/app/components/season-details/season-details.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/components/weekly-standings-table/weekly-standings-table.component.html b/src/app/components/weekly-standings-table/weekly-standings-table.component.html
index 88aaab5..4c39aed 100644
--- a/src/app/components/weekly-standings-table/weekly-standings-table.component.html
+++ b/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 -->
diff --git a/src/app/components/weekly-standings-table/weekly-standings-table.component.ts b/src/app/components/weekly-standings-table/weekly-standings-table.component.ts
index 51c2e81..056791c 100644
--- a/src/app/components/weekly-standings-table/weekly-standings-table.component.ts
+++ b/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')}`;
+  }
 }
diff --git a/src/app/models/season.ts b/src/app/models/season.ts
index c793fc1..1a887be 100644
--- a/src/app/models/season.ts
+++ b/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;