Fix race countdown for races that haven't started

packages/bridge-ui/src/app/components/race-details/race-details.component.html

@@ -13,7 +13,10 @@
     <div class="column middle">
         <h1 style="text-align: center;" >{{race.mapName}}</h1>
         <div class="count-down-timer">
-            @if(openToUploads) {
+            @if(notOpenYet) {
+                <h2>Race opens on: {{race.startDate}}</h2>
+            }
+            @else if(openToUploads) {
                 <h2>Entries Close on: {{currentTime}} </h2>
                 <div class="wrapper">
                     <div class="description">

packages/bridge-ui/src/app/components/race-details/race-details.component.ts

@@ -38,6 +38,7 @@ export class RaceDetailsComponent implements AfterViewInit {
   sortedResults: RaceEntry[] = [];
 
   openToUploads: boolean = true;
+  notOpenYet: boolean = false;
 
   date: any;
   now: any;
@@ -85,6 +86,12 @@ export class RaceDetailsComponent implements AfterViewInit {
     this.targetDate = new Date(this.race.endDate);
     this.targetTime = this.targetDate.getTime();
 
+    let startDate = new Date(this.race.startDate);
+
+    if(startDate.getTime() > Date.now()) {
+      this.notOpenYet = true;
+    }
+
     if(this.targetTime < Date.now()){
       this.openToUploads = false;
     }

packages/bridge-ui/src/app/pages/season-details/season-details.component.html

@@ -19,8 +19,16 @@
                 <app-season-standings [season]="season"></app-season-standings>
             </mat-tab>
             @for (race of races; track race) {
-            <mat-tab label="{{'Race #' +race.id}}"> 
+            <mat-tab>
-                <app-race-details [race]="race"></app-race-details>
+                <ng-template mat-tab-label>
+                    <div class="trafficLight">
+                        @if(isRaceOver(race)) {<span class="red"></span>} @else {<span></span>}
+                        @if(isRacePending(race)) {<span class="yellow"></span>} @else {<span></span>}
+                        @if(isRaceOpen(race)) {<span class="green"></span>} @else {<span></span>}
+                    </div>
+                    {{'Race #' +race.id}}
+                  </ng-template>
+                  <app-race-details [race]="race"></app-race-details>
             </mat-tab>
             }
         </mat-tab-group>

packages/bridge-ui/src/app/pages/season-details/season-details.component.scss

@@ -30,4 +30,36 @@
 
 .full-width-button {
     width: 100%;
+}
+
+.trafficLight {
+    background-color: black;
+    width: 10px;
+    height: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 3px;
+    border-radius: 6px;
+    margin-right: 3px;
+  }
+  
+  .trafficLight span {
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    background-color: gray;
+  }
+
+  .red {
+    background-color: red !important;
+  }
+
+  .yellow {
+    background-color: yellow !important;
+  }
+
+  .green {
+    background-color: green !important;
   }

packages/bridge-ui/src/app/pages/season-details/season-details.component.ts

@@ -6,6 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule }  from '@angular/material/divider';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 
 import { RaceDetailsComponent } from '../../components/race-details/race-details.component';
 import { SeasonStandingsComponent } from '../../components/season-standings/season-standings.component';
@@ -26,6 +27,7 @@ import { NewRaceDialogComponent } from '../../components/new-race-dialog/new-rac
     MatButtonModule,
     MatDividerModule,
     MatTabsModule,
+    MatIconModule,
     RaceDetailsComponent,
     SeasonStandingsComponent,
     UploadReplayDialogComponent
@@ -79,4 +81,30 @@ export class SeasonDetailsComponent {
   forceUpdate(id: string) {
     this.seasonsService.updateSeason(this.seasonId);
   }
+
+  isRaceOver(race: Race) {
+    if(race == undefined) { return true;}
+
+    let date = new Date(race.endDate);
+    return Date.now() > date.getTime();
+  }
+
+  isRaceOpen(race: Race) {
+    if(race == undefined) { return true;}
+
+    let endDate = new Date(race.endDate);
+    let startDate = new Date(race.startDate);
+    let now = Date.now();
+    let over = now > endDate.getTime();
+    let started = now > startDate.getTime();
+
+    return started && !over;
+  }
+
+  isRacePending(race: Race) {
+    if(race == undefined) { return true;}
+
+    let date = new Date(race.startDate);
+    return Date.now() < date.getTime();
+  }
 }