From fa1a5aff1f36f5e35ce3e6a5cf019ab1ad47a7d7 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Wed, 18 Jun 2025 21:19:09 +0100
Subject: [PATCH] FEAT: Added METAR Page and updated code to update parameters
 when URL is sufficient enough

---
 src/routes/+layout.svelte | 30 ++++++++++++++++++++++++++++--
 src/routes/+page.svelte   | 12 +++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a5b6a2e..d40dba1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,33 @@
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
 
+    import { goto } from '$app/navigation';
+
+    // ICAO input state handler
+    let icao = $state('');
+    $effect(() => {
+        const params = new URLSearchParams();
+
+        if (icao.length === 4) {
+            // If the ICAO code is exactly 4 characters long, add it to the URL parameters
+            if (icao) params.set('icao', icao);
+
+            // This will trigger a navigation and reload the page data from the server
+            goto(`?${params.toString()}`, {
+                keepFocus: true,
+                replaceState: true,
+                noScroll: true
+            });
+        } else {
+            // Otherwise, clear the parameter
+             goto(`?${params.toString()}`, {
+                keepFocus: true,
+                replaceState: true,
+                noScroll: true
+            });
+        }
+    });
+
     let { children } = $props();
 </script>
 
@@ -27,8 +54,6 @@
                 <form
                     slot="content"
                     class="mx-auto flex w-full max-w-3xl flex-col gap-4 text-lg"
-                    action="https://api.staticforms.xyz/submit"
-                    method="post"
                 >
                     <div class="flex-space-between flex flex-col gap-10 md:flex-row">
                         <div class="flex-1">
@@ -46,6 +71,7 @@
                                 maxlength="4"
                                 required
                                 placeholder="EGKK"
+                                bind:value={icao}
                             />
                         </div>
                     </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 36cf2ca..1b1216a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,12 @@
     import Card from '$lib/components/Cards/Card.svelte';
     import { toasts } from 'svelte-toasts';
     import Loading from '$lib/components/Loading.svelte';
+
+    import { page } from '$app/stores';
+    import { derived } from 'svelte/store';
+
+    // Get the ICAO parameter from the URL
+    const icao = derived(page, ($page) => $page.url.searchParams.get('icao'));
 </script>
 
 
@@ -21,7 +27,11 @@
         <h2 slot="headerLeft">METAR</h2>
         <h2 slot="headerRight">Results</h2>
         <div slot="content" class="flex h-96 w-full items-center justify-center">
-            <Loading></Loading>
+            {#if $icao}
+                <span class="text-3xl font-bold">ICAO: {$icao}</span>
+            {:else}
+                <Loading />
+            {/if}
         </div>
     </Card>
 </Section>
\ No newline at end of file