Data/Season: Split Teams/Drivers/Races/Substitutions into individual routes

src/routes/data/season/substitutions/+page.server.ts

@@ -0,0 +1,31 @@
+import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
+import type { Actions } from "@sveltejs/kit";
+
+export const actions = {
+  create_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    form_data_ensure_keys(data, ["substitute", "for", "race"]);
+
+    await locals.pb.collection("substitutions").create(data);
+  },
+
+  update_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").update(id, data);
+  },
+
+  delete_substitution: async ({ request, locals }) => {
+    if (!locals.admin) return { unauthorized: true };
+
+    const data: FormData = form_data_clean(await request.formData());
+    const id: string = form_data_get_and_remove_id(data);
+
+    await locals.pb.collection("substitutions").delete(id);
+  },
+} satisfies Actions;

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

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { get_by_value } from "$lib/database";
+  import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
+  import type { PageData } from "./$types";
+  import type { Driver, Race, Substitution } from "$lib/schema";
+  import { Button, Table, type DropdownOption, type TableColumn } from "$lib/components";
+  import {
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    RACE_PICTOGRAM_HEIGHT,
+    RACE_PICTOGRAM_WIDTH,
+  } from "$lib/config";
+
+  let { data }: { data: PageData } = $props();
+
+  const update_substitution_substitute_select_values: { [key: string]: string } = $state({});
+  const update_substitution_for_select_values: { [key: string]: string } = $state({});
+  const update_substitution_race_select_values: { [key: string]: string } = $state({});
+  data.substitutions.then((substitutions: Substitution[]) =>
+    substitutions.forEach((substitution: Substitution) => {
+      update_substitution_substitute_select_values[substitution.id] = substitution.substitute;
+      update_substitution_for_select_values[substitution.id] = substitution.for;
+      update_substitution_race_select_values[substitution.id] = substitution.race;
+    }),
+  );
+  update_substitution_substitute_select_values["create"] = "";
+  update_substitution_for_select_values["create"] = "";
+  update_substitution_race_select_values["create"] = "";
+
+  const driver_dropdown_options: DropdownOption[] = [];
+  data.drivers.then((drivers: Driver[]) =>
+    drivers.forEach((driver: Driver) => {
+      driver_dropdown_options.push({
+        label: driver.code,
+        value: driver.id,
+        icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
+      });
+    }),
+  );
+
+  const race_dropdown_options: DropdownOption[] = [];
+  data.races.then((races: Race[]) =>
+    races.forEach((race: Race) => {
+      race_dropdown_options.push({
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      });
+    }),
+  );
+
+  const substitutions_columns: TableColumn[] = [
+    {
+      data_value_name: "substitute",
+      label: "Substitute",
+      valuefun: async (value: string): Promise<string> => {
+        const substitute = get_by_value(await data.drivers, "id", value)?.code ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${substitute}</span>`;
+      },
+    },
+    {
+      data_value_name: "for",
+      label: "For",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.drivers, "id", value)?.code ?? "Invalid",
+    },
+    {
+      data_value_name: "race",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.races, "id", value)?.name ?? "Invalid",
+    },
+  ];
+
+  const modalStore: ModalStore = getModalStore();
+
+  const substitutions_handler = async (event: Event, id: string) => {
+    const substitution: Substitution | undefined = get_by_value(await data.substitutions, "id", id);
+    if (!substitution) return;
+
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        substitution: substitution,
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values[substitution.id],
+        driver_select_value: update_substitution_for_select_values[substitution.id],
+        race_select_value: update_substitution_race_select_values[substitution.id],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
+  const create_substitution_handler = async (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "substitutionCard",
+      meta: {
+        drivers: await data.drivers,
+        substitute_select_value: update_substitution_substitute_select_values["create"],
+        driver_select_value: update_substitution_for_select_values["create"],
+        disable_inputs: !data.admin,
+        race_select_value: update_substitution_race_select_values["create"],
+        driver_select_options: driver_dropdown_options,
+        race_select_options: race_dropdown_options,
+        require_inputs: true,
+        headshot_template:
+          get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url ?? "Invalid",
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+</script>
+
+<div class="pb-2">
+  <Button width="w-full" color="surface" onclick={create_substitution_handler}>
+    <b>Create New Substitution</b>
+  </Button>
+</div>
+{#await data.substitutions then substitutions}
+  <Table data={substitutions} columns={substitutions_columns} handler={substitutions_handler} />
+{/await}