feat: flight info lookup

johanohly · Oct 1, 2024 · e04f66a · e04f66a
1 parent 16fbd64
commit e04f66a
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 51 deletions.
diff --git a/src/lib/components/form-fields/AirlineField.svelte b/src/lib/components/form-fields/AirlineField.svelte
@@ -38,6 +38,19 @@
     $formData.airline = item?.value ?? null;
   });
 
+  // If the field is updated externally, update the selected value
+  formData.subscribe((data) => {
+    if (data['airline'] === $selected?.value) return;
+    selected.set(
+      data['airline']
+        ? {
+            label: airlineFromICAO(data['airline'])?.name,
+            value: data['airline'],
+          }
+        : undefined,
+    );
+  });
+
   $effect(() => {
     if (!$open) {
       $inputValue = $selected?.label ?? '';

diff --git a/src/lib/components/form-fields/AirportField.svelte b/src/lib/components/form-fields/AirportField.svelte
@@ -9,7 +9,11 @@
   import { z } from 'zod';
   import type { flightSchema } from '$lib/zod/flight';
   import { writable } from 'svelte/store';
-  import { type Airport, airportFromICAO, airportSearchCache } from '$lib/utils/data/airports';
+  import {
+    type Airport,
+    airportFromICAO,
+    airportSearchCache,
+  } from '$lib/utils/data/airports';
 
   let {
     field,
@@ -42,6 +46,19 @@
     }
   });
 
+  // If the field is updated externally, update the selected value
+  formData.subscribe((data) => {
+    if (data[field] === $selected?.value) return;
+    selected.set(
+      data[field]
+        ? {
+            label: airportFromICAO(data[field])?.name,
+            value: data[field],
+          }
+        : undefined,
+    );
+  });
+
   $effect(() => {
     if (!$open) {
       $inputValue = $selected?.label ?? '';

diff --git a/src/lib/components/modals/add-flight/AddFlightModal.svelte b/src/lib/components/modals/add-flight/AddFlightModal.svelte
@@ -9,6 +9,7 @@
   import FlightInformation from './FlightInformation.svelte';
   import SeatInformation from './SeatInformation.svelte';
   import { page } from '$app/stores';
+  import FlightNumber from '$lib/components/modals/add-flight/FlightNumber.svelte';
 
   let {
     open = $bindable(),
@@ -49,6 +50,7 @@
 >
   <h2>Add Flight</h2>
   <form method="POST" action="/api/flight/save" class="grid gap-4" use:enhance>
+    <FlightNumber {form} />
     <AirportField field="from" {form} />
     <AirportField field="to" {form} />
     <DateTimeField field="departure" {form} />

diff --git a/src/lib/components/modals/add-flight/FlightInformation.svelte b/src/lib/components/modals/add-flight/FlightInformation.svelte
@@ -21,62 +21,51 @@
   <h3 class="font-medium">Flight Information</h3>
   <Separator class="mt-2 mb-3" />
   <div class="grid gap-4">
-    <AircraftField {form} />
-    <AirlineField {form} />
-    <div class="grid grid-cols-[1fr_1fr_1fr] gap-2">
-      <Form.Field {form} name="flightReason">
-        <Form.Control let:attrs>
-          <Form.Label>Flight Reason</Form.Label>
-          <Select.Root
-            selected={{
-              label: $formData.flightReason
-                ? toTitleCase($formData.flightReason)
-                : undefined,
-              value: $formData.flightReason,
-            }}
-            onSelectedChange={(value) => {
-              if (value) {
-                if (value.value === $formData.flightReason) {
-                  $formData.flightReason = null;
-                } else {
-                  $formData.flightReason = value.value;
-                }
-              }
-            }}
-          >
-            <Select.Trigger {...attrs}>
-              <Select.Value placeholder="Select reason..." />
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="leisure" label="Leisure" />
-              <Select.Item value="business" label="Business" />
-              <Select.Item value="crew" label="Crew" />
-              <Select.Item value="other" label="Other" />
-            </Select.Content>
-          </Select.Root>
-          <input
-            type="hidden"
-            value={$formData.flightReason}
-            name={attrs.name}
-          />
-        </Form.Control>
-        <Form.FieldErrors />
-      </Form.Field>
-      <Form.Field {form} name="flightNumber">
-        <Form.Control let:attrs>
-          <Form.Label>Flight Number</Form.Label>
-          <Input bind:value={$formData.flightNumber} {...attrs} />
-        </Form.Control>
-        <Form.FieldErrors />
-      </Form.Field>
-      <Form.Field {form} name="aircraftReg">
+    <div class="grid grid-cols-[2fr_1fr] gap-2">
+      <AircraftField {form} />
+      <Form.Field {form} name="aircraftReg" class="flex flex-col">
         <Form.Control let:attrs>
           <Form.Label>Aircraft Registration</Form.Label>
           <Input bind:value={$formData.aircraftReg} {...attrs} />
         </Form.Control>
         <Form.FieldErrors />
       </Form.Field>
     </div>
+    <AirlineField {form} />
+    <Form.Field {form} name="flightReason">
+      <Form.Control let:attrs>
+        <Form.Label>Flight Reason</Form.Label>
+        <Select.Root
+          selected={{
+            label: $formData.flightReason
+              ? toTitleCase($formData.flightReason)
+              : undefined,
+            value: $formData.flightReason,
+          }}
+          onSelectedChange={(value) => {
+            if (value) {
+              if (value.value === $formData.flightReason) {
+                $formData.flightReason = null;
+              } else {
+                $formData.flightReason = value.value;
+              }
+            }
+          }}
+        >
+          <Select.Trigger {...attrs}>
+            <Select.Value placeholder="Select reason..." />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="leisure" label="Leisure" />
+            <Select.Item value="business" label="Business" />
+            <Select.Item value="crew" label="Crew" />
+            <Select.Item value="other" label="Other" />
+          </Select.Content>
+        </Select.Root>
+        <input type="hidden" value={$formData.flightReason} name={attrs.name} />
+      </Form.Control>
+      <Form.FieldErrors />
+    </Form.Field>
     <Form.Field {form} name="note">
       <Form.Control let:attrs>
         <Form.Label>Notes</Form.Label>

diff --git a/src/lib/components/modals/add-flight/FlightNumber.svelte b/src/lib/components/modals/add-flight/FlightNumber.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import * as Form from '$lib/components/ui/form';
+  import type { SuperForm } from 'sveltekit-superforms';
+  import { z } from 'zod';
+  import { Input } from '$lib/components/ui/input';
+  import type { flightSchema } from '$lib/zod/flight';
+  import { Button } from '$lib/components/ui/button';
+  import { toast } from 'svelte-sonner';
+  import { airportFromICAO } from '$lib/utils/data/airports';
+  import { airlineFromICAO } from '$lib/utils/data/airlines';
+
+  let {
+    form,
+  }: {
+    form: SuperForm<z.infer<typeof flightSchema>>;
+  } = $props();
+  const { form: formData } = form;
+
+  const lookupFlight = async () => {
+    const resp = await fetch(
+      `https://api.adsbdb.com/v0/callsign/${$formData.flightNumber}`,
+    );
+    if (!resp.ok) {
+      toast.error('Flight not found');
+      return;
+    }
+
+    const data = await resp.json();
+    if (!data.response.flightroute) {
+      toast.error('Flight not found');
+      return;
+    }
+
+    const route = data.response.flightroute;
+    const origin = airportFromICAO(route.origin.icao_code);
+    const destination = airportFromICAO(route.destination.icao_code);
+    const airline = airlineFromICAO(route.airline.icao);
+
+    if (!origin || !destination || !airline) {
+      toast.error('Flight not found');
+      return;
+    }
+
+    if (
+      ($formData.from !== '' || $formData.to !== '') &&
+      !confirm(
+        'Are you sure you want to overwrite the current flight information?',
+      )
+    ) {
+      return;
+    }
+
+    $formData.from = origin.ICAO;
+    $formData.to = destination.ICAO;
+    $formData.airline = airline.icao;
+    toast.success('Flight found');
+  };
+</script>
+
+<Form.Field {form} name="flightNumber">
+  <Form.Control let:attrs>
+    <Form.Label>Flight Number</Form.Label>
+    <div class="grid grid-cols-[1fr_auto] gap-2">
+      <Input bind:value={$formData.flightNumber} {...attrs} />
+      <Button
+        onclick={lookupFlight}
+        disabled={!$formData.flightNumber}
+        variant="secondary"
+        class="h-full"
+        >Search
+      </Button>
+    </div>
+  </Form.Control>
+</Form.Field>
diff --git a/src/lib/components/modals/edit-flight/EditFlightModal.svelte b/src/lib/components/modals/edit-flight/EditFlightModal.svelte
@@ -13,6 +13,7 @@
   import SeatInformation from '$lib/components/modals/add-flight/SeatInformation.svelte';
   import FlightInformation from '$lib/components/modals/add-flight/FlightInformation.svelte';
   import { toISOString } from '$lib/utils/index.js';
+  import FlightNumber from '$lib/components/modals/add-flight/FlightNumber.svelte';
 
   const timeFormatter = new Intl.DateTimeFormat(undefined, {
     timeZone: 'UTC',
@@ -75,7 +76,13 @@
   </Dialog.Trigger>
   <Dialog.Content classes="max-h-full overflow-y-auto max-w-lg">
     <h2>Edit Flight</h2>
-    <form method="POST" action="/api/flight/save" use:enhance class="grid gap-4">
+    <form
+      method="POST"
+      action="/api/flight/save"
+      use:enhance
+      class="grid gap-4"
+    >
+      <FlightNumber {form} />
       <AirportField field="from" {form} />
       <AirportField field="to" {form} />
       <DateTimeField field="departure" {form} />