feat: add settings page for managing airports

johanohly · Jan 7, 2025 · ad0d65a · ad0d65a
1 parent 47add4d
commit ad0d65a
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 68 deletions.
diff --git a/...241220172026_airports_table/migration.sql → ...250107100900_airports_table/migration.sql b/...241220172026_airports_table/migration.sql → ...250107100900_airports_table/migration.sql
@@ -1,3 +1,4 @@
+-- CreateTable
 CREATE TABLE "airport" (
     "code" TEXT NOT NULL,
     "iata" TEXT,
@@ -8,6 +9,7 @@ CREATE TABLE "airport" (
     "type" TEXT NOT NULL,
     "continent" TEXT NOT NULL,
     "country" TEXT NOT NULL,
+    "custom" BOOLEAN NOT NULL DEFAULT false,
 
     CONSTRAINT "airport_pkey" PRIMARY KEY ("code")
 );
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -48,6 +48,7 @@ model airport {
   /// @kyselyType('EU' | 'NA' | 'SA' | 'AS' | 'AF' | 'OC' | 'AN')
   continent String
   country   String
+  custom    Boolean @default(false)
 }
 
 model flight {

diff --git a/src/lib/components/modals/settings/SettingsModal.svelte b/src/lib/components/modals/settings/SettingsModal.svelte
@@ -10,9 +10,10 @@
     ExportPage,
     OAuthPage,
     SecurityPage,
+    DataPage,
   } from './pages';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import SettingsTabContainer from '$lib/components/modals/settings/SettingsTabContainer.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Modal } from '$lib/components/ui/modal';
@@ -28,6 +29,7 @@
     { title: 'Export', id: 'export' },
   ] as const;
   const ADMIN_SETTINGS = [
+    { title: 'Data', id: 'data' },
     { title: 'Users', id: 'users' },
     { title: 'OAuth', id: 'oauth' },
   ] as const;
@@ -48,7 +50,7 @@
     }
   });
 
-  const user = $derived($page.data.user);
+  const user = $derived(page.data.user);
 
   const [send, receive] = crossfade({
     duration: 250,
@@ -141,6 +143,8 @@
           <ImportPage bind:open />
         {:else if activeTab === 'export'}
           <ExportPage />
+        {:else if activeTab === 'data'}
+          <DataPage />
         {:else if activeTab === 'users'}
           <UsersPage />
         {:else if activeTab === 'oauth'}

diff --git a/src/lib/components/modals/settings/pages/data-page/DataPage.svelte b/src/lib/components/modals/settings/pages/data-page/DataPage.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { PageHeader } from '../';
+
+  import { Collapsible } from '$lib/components/ui/collapsible';
+</script>
+
+<PageHeader
+  title="Data"
+  subtitle="Manage custom airports, airlines and airplanes."
+>
+  <div class="flex">
+    <Collapsible
+      title="Airports"
+      subtitle="Add airports not found in the official list."
+    >
+      Hello World!
+    </Collapsible>
+  </div>
+</PageHeader>
diff --git a/src/lib/components/modals/settings/pages/index.ts b/src/lib/components/modals/settings/pages/index.ts
@@ -6,3 +6,4 @@ export { default as SecurityPage } from './security-page/SecurityPage.svelte';
 export { default as ImportPage } from './import-page/ImportPage.svelte';
 export { default as ExportPage } from './ExportPage.svelte';
 export { default as OAuthPage } from './OAuthPage.svelte';
+export { default as DataPage } from './data-page/DataPage.svelte';
diff --git a/src/lib/components/modals/settings/pages/security-page/ApiKeys.svelte b/src/lib/components/modals/settings/pages/security-page/ApiKeys.svelte
@@ -1,18 +1,14 @@
 <script lang="ts">
-  import { ChevronRight, X } from '@o7/icon/lucide';
-  import { Collapsible } from 'bits-ui';
+  import { X } from '@o7/icon/lucide';
   import { formatRelative } from 'date-fns';
-  import { slide } from 'svelte/transition';
 
   import { Confirm } from '$lib/components/helpers';
   import CreateKey from '$lib/components/modals/settings/pages/security-page/CreateKey.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Card } from '$lib/components/ui/card';
+  import { Collapsible } from '$lib/components/ui/collapsible';
   import type { ApiKey } from '$lib/db/types';
   import { api } from '$lib/trpc';
-  import { cn } from '$lib/utils';
-
-  let open = $state(false);
 
   let loaded = $state(false);
   let keys: ApiKey[] = $state([]);
@@ -27,62 +23,44 @@
   });
 </script>
 
-<Collapsible.Root
-  bind:open
+<Collapsible
+  title="API Keys"
+  subtitle="Manage your API keys"
   disabled={!loaded}
-  class={cn('flex flex-col p-4 rounded-lg border', { 'opacity-80': !loaded })}
+  class={{ 'opacity-80': !loaded }}
 >
-  <Collapsible.Trigger class="flex justify-between text-left">
-    <div class="space-y-0.5">
-      <h4 class="font-medium leading-4">API Keys</h4>
-      <p class="text-sm text-muted-foreground">Manage your API keys</p>
-    </div>
-    <div class="flex items-center justify-center">
-      <ChevronRight class={cn('transition-transform', { 'rotate-90': open })} />
-    </div>
-  </Collapsible.Trigger>
-  <Collapsible.Content forceMount>
-    {#snippet child({ props, open })}
-      {#if open}
-        <div {...props} transition:slide class="mt-4 flex flex-col space-y-2">
-          {#each keys as key}
-            <Card class="p-2 flex justify-between">
-              <div>
-                <h4 class="font-medium text-lg">
-                  {key.name}
-                </h4>
-                <p class="text-muted-foreground text-sm">
-                  Created {formatRelative(key.createdAt, new Date())}
-                  {#if key.lastUsed}
-                    ∙ Last used {formatRelative(key.lastUsed, new Date())}
-                  {/if}
-                </p>
-              </div>
-              <div class="flex items-center pr-1">
-                <Confirm
-                  title="Delete API Key"
-                  description="Are you sure you want to delete this API key? This action cannot be undone."
-                  onConfirm={async () => {
-                    await api.user.deleteApiKey.mutate(key.id);
-                    keys = keys.filter((k) => k.id !== key.id);
-                  }}
-                >
-                  {#snippet triggerContent({ props })}
-                    <Button variant="outline" size="icon" {...props}>
-                      <X />
-                    </Button>
-                  {/snippet}
-                </Confirm>
-              </div>
-            </Card>
-          {:else}
-            <p class="pb-2 text-center text-muted-foreground">
-              No API keys found
-            </p>
-          {/each}
-          <CreateKey bind:keys />
-        </div>
-      {/if}
-    {/snippet}
-  </Collapsible.Content>
-</Collapsible.Root>
+  {#each keys as key}
+    <Card class="p-2 flex justify-between">
+      <div>
+        <h4 class="font-medium text-lg">
+          {key.name}
+        </h4>
+        <p class="text-muted-foreground text-sm">
+          Created {formatRelative(key.createdAt, new Date())}
+          {#if key.lastUsed}
+            ∙ Last used {formatRelative(key.lastUsed, new Date())}
+          {/if}
+        </p>
+      </div>
+      <div class="flex items-center pr-1">
+        <Confirm
+          title="Delete API Key"
+          description="Are you sure you want to delete this API key? This action cannot be undone."
+          onConfirm={async () => {
+            await api.user.deleteApiKey.mutate(key.id);
+            keys = keys.filter((k) => k.id !== key.id);
+          }}
+        >
+          {#snippet triggerContent({ props })}
+            <Button variant="outline" size="icon" {...props}>
+              <X />
+            </Button>
+          {/snippet}
+        </Confirm>
+      </div>
+    </Card>
+  {:else}
+    <p class="pb-2 text-center text-muted-foreground">No API keys found</p>
+  {/each}
+  <CreateKey bind:keys />
+</Collapsible>
diff --git a/src/lib/components/modals/settings/pages/security-page/SecurityPage.svelte b/src/lib/components/modals/settings/pages/security-page/SecurityPage.svelte
@@ -7,12 +7,12 @@
   import EditPassword from './EditPassword.svelte';
   import OAuth from './OAuth.svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { Confirm } from '$lib/components/helpers';
   import { Button } from '$lib/components/ui/button';
   import { api, trpc } from '$lib/trpc';
 
-  const user = $derived($page.data.user);
+  const user = $derived(page.data.user);
 
   const deleteFlights = async () => {
     const toastId = toast.loading('Deleting all your flights...');
@@ -35,7 +35,7 @@
     </div>
   </div>
   <OAuth {user} />
-  <ApiKeys {user} />
+  <ApiKeys />
   <div class="flex items-center justify-between p-4 rounded-lg border">
     <h4 class="font-medium leading-4">Danger zone</h4>
     <div>

diff --git a/src/lib/components/ui/collapsible/collapsible.svelte b/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { ChevronRight } from '@o7/icon/lucide';
+  import { Collapsible, type WithoutChild } from 'bits-ui';
+  import type { ClassValue } from 'clsx';
+  import { slide } from 'svelte/transition';
+
+  import { cn } from '$lib/utils';
+
+  type Props = WithoutChild<Collapsible.RootProps> & {
+    title: string;
+    subtitle?: string;
+    disabled?: boolean;
+    className?: ClassValue[];
+  };
+
+  let {
+    open = $bindable(false),
+    disabled = false,
+    title,
+    subtitle,
+    class: className,
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Collapsible.Root
+  bind:open
+  {disabled}
+  class={cn('w-full flex flex-col p-4 rounded-lg border', className)}
+  {...restProps}
+>
+  <Collapsible.Trigger class="flex justify-between text-left">
+    <div class="space-y-0.5">
+      <h4 class={cn('font-medium', { 'leading-4': subtitle })}>{title}</h4>
+      {#if subtitle}
+        <p class="text-sm text-muted-foreground">{subtitle}</p>
+      {/if}
+    </div>
+    <div class="flex items-center justify-center">
+      <ChevronRight class={cn('transition-transform', { 'rotate-90': open })} />
+    </div>
+  </Collapsible.Trigger>
+  <Collapsible.Content forceMount>
+    {#snippet child({ props, open })}
+      {#if open}
+        <div {...props} transition:slide class="mt-4 flex flex-col space-y-2">
+          {@render children?.()}
+        </div>
+      {/if}
+    {/snippet}
+  </Collapsible.Content>
+</Collapsible.Root>
diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1 @@
+export { default as Collapsible } from './collapsible.svelte';
diff --git a/src/lib/db/schema.d.ts b/src/lib/db/schema.d.ts
@@ -23,6 +23,7 @@ export type airport = {
      */
     continent: 'EU' | 'NA' | 'SA' | 'AS' | 'AF' | 'OC' | 'AN';
     country: string;
+    custom: Generated<boolean>;
 };
 export type api_key = {
     id: Generated<number>;

diff --git a/src/lib/utils/data/airports/airports.ts b/src/lib/utils/data/airports/airports.ts
@@ -15,6 +15,7 @@ export type Airport = {
   country: string;
   iata: string | null;
   tz: string;
+  custom: boolean;
 };
 
 export const ensureAirports = async () => {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Collapsible } from './collapsible.svelte';