website refactor

apps/website/lib/view-models/LeagueScheduleViewModel.ts

@@ -7,6 +7,8 @@ export interface LeagueScheduleRaceViewModel {
   id: string;
   name: string;
   scheduledAt: Date;
+  formattedDate: string;
+  formattedTime: string;
   isPast: boolean;
   isUpcoming: boolean;
   status: string;

apps/website/lib/view-models/ProtestViewModel.ts

@@ -1,5 +1,7 @@
 import { ProtestDTO } from '@/lib/types/generated/ProtestDTO';
 import { RaceProtestDTO } from '@/lib/types/generated/RaceProtestDTO';
+import { DateDisplay } from '../display-objects/DateDisplay';
+import { StatusDisplay } from '../display-objects/StatusDisplay';
 
 /**
  * Protest view model
@@ -96,11 +98,11 @@ export class ProtestViewModel {
 
   /** UI-specific: Formatted submitted date */
   get formattedSubmittedAt(): string {
-    return new Date(this.submittedAt).toLocaleString();
+    return DateDisplay.formatShort(this.submittedAt);
   }
 
   /** UI-specific: Status display */
   get statusDisplay(): string {
-    return 'Pending';
+    return StatusDisplay.protestStatus(this.status);
   }
 }

apps/website/lib/view-models/RaceResultViewModel.ts

@@ -1,4 +1,5 @@
 import { RaceResultDTO } from '@/lib/types/generated/RaceResultDTO';
+import { FinishDisplay } from '../display-objects/FinishDisplay';
 
 export class RaceResultViewModel {
   driverId!: string;
@@ -42,7 +43,7 @@ export class RaceResultViewModel {
 
   /** UI-specific: Badge for position */
   get positionBadge(): string {
-    return this.position.toString();
+    return FinishDisplay.format(this.position);
   }
 
   /** UI-specific: Color for incidents badge */
@@ -66,6 +67,25 @@ export class RaceResultViewModel {
     return this.positionChange;
   }
 
+  get formattedPosition(): string {
+    return FinishDisplay.format(this.position);
+  }
+
+  get formattedStartPosition(): string {
+    return FinishDisplay.format(this.startPosition);
+  }
+
+  get formattedIncidents(): string {
+    return `${this.incidents}x incidents`;
+  }
+
+  get formattedPositionsGained(): string | undefined {
+    if (this.position < this.startPosition) {
+      return `+${this.startPosition - this.position} positions`;
+    }
+    return undefined;
+  }
+
   // Note: The generated DTO doesn't have id or raceId
   // These will need to be added when the OpenAPI spec is updated
   id: string = '';

apps/website/lib/view-models/SponsorshipViewModel.ts

@@ -1,3 +1,7 @@
+import { CurrencyDisplay } from '../display-objects/CurrencyDisplay';
+import { DateDisplay } from '../display-objects/DateDisplay';
+import { NumberDisplay } from '../display-objects/NumberDisplay';
+
 /**
  * Interface for sponsorship data input
  */
@@ -69,11 +73,11 @@ export class SponsorshipViewModel {
   }
 
   get formattedImpressions(): string {
-    return this.impressions.toLocaleString();
+    return NumberDisplay.format(this.impressions);
   }
 
   get formattedPrice(): string {
-    return `$${this.price}`;
+    return CurrencyDisplay.format(this.price);
   }
 
   get daysRemaining(): number {
@@ -109,8 +113,8 @@ export class SponsorshipViewModel {
   }
 
   get periodDisplay(): string {
-    const start = this.startDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
-    const end = this.endDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+    const start = DateDisplay.formatMonthYear(this.startDate);
+    const end = DateDisplay.formatMonthYear(this.endDate);
     return `${start} - ${end}`;
   }
 }