Data/Season: Sort substitutions table by race step

src/lib/schema.ts

@@ -1,3 +1,6 @@
+// NOTE: The "expand" fields might be undefined.
+//       I'm not using "expand?" because I won't check for undefined anyways.
+
 // Application Data
 
 export interface Graphic {
@@ -36,6 +39,9 @@ export interface Driver {
   headshot_url?: string;
   team: string;
   active: boolean;
+  expand: {
+    team: Team;
+  };
 }
 
 export interface Race {
@@ -56,6 +62,9 @@ export interface Substitution {
   substitute: string;
   for: string;
   race: string;
+  expand: {
+    race: Race;
+  };
 }
 
 // User Data

src/routes/data/season/+layout.server.ts

@@ -29,6 +29,7 @@ export const load: LayoutServerLoad = async ({ fetch, locals }) => {
     return teams;
   };
 
+  // TODO: Duplicated code from racepicks/+page.server.ts
   const fetch_drivers = async (): Promise<Driver[]> => {
     const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
       sort: "+code",
@@ -56,11 +57,14 @@ export const load: LayoutServerLoad = async ({ fetch, locals }) => {
   };
 
   const fetch_substitutions = async (): Promise<Substitution[]> => {
-    // TODO: Sort by race step (does the race need to be expanded for this?)
     const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
+      expand: "race",
       fetch: fetch,
     });
 
+    // Sort by race step (ascending)
+    substitutions.sort((a, b) => a.expand.race.step - b.expand.race.step);
+
     return substitutions;
   };
 
@@ -69,7 +73,7 @@ export const load: LayoutServerLoad = async ({ fetch, locals }) => {
     graphics: await fetch_graphics(),
     teams: await fetch_teams(),
 
-    // The rest is streamed gradually, since the user has to switch tabs to need them.
+    // The rest is streamed gradually, since the user has to switch pages to need them.
     drivers: fetch_drivers(),
     races: fetch_races(),
     substitutions: fetch_substitutions(),

src/routes/data/season/substitutions/+page.svelte

@@ -54,6 +54,11 @@
   );
 
   const substitutions_columns: TableColumn[] = [
+    {
+      data_value_name: "expand",
+      label: "Step",
+      valuefun: async (value: { race: Race }): Promise<string> => value.race.step.toString(),
+    },
     {
       data_value_name: "substitute",
       label: "Substitute",