FEAT: Added ability to query weatherservice API

src/routes/+page.svelte

@@ -5,6 +5,32 @@
     import Loading from '$lib/components/Loading.svelte';
 
     import { icao } from '$lib/stores/icao';
+    import { aviationWeatherApi } from '$lib/api/weatherservice';
+    import type { Metar } from '$lib/api/types/metar'
+    import { onDestroy } from 'svelte';
+
+    let metar: Metar | null = null;
+    let loading = false;
+    let error: string | null = null;
+
+    let unsubscribe = icao.subscribe(async (val) => {
+        metar = null;
+        error = null;
+        if (val && val.length === 4) {
+            loading = true;
+            try {
+                const result = await aviationWeatherApi.fetchMetar(val);
+                metar = result;
+                if (!metar) error = 'No METAR found for this ICAO code.';
+            } catch (e) {
+                error = e instanceof Error ? e.message : 'Unknown error';
+            } finally {
+                loading = false;
+            }
+        }
+    });
+
+    onDestroy(() => unsubscribe());
 </script>
 
 <div style="display: none;">
@@ -22,8 +48,22 @@
         <h2 slot="headerLeft">METAR</h2>
         <h2 slot="headerRight">Results</h2>
         <div slot="content" class="flex h-96 w-full items-center justify-center">
-            {#if $icao}
-                <span class="text-3xl font-bold">ICAO: {$icao}</span>
+            {#if loading}
+                <Loading />
+            {:else if error}
+                <span class="text-red-600 text-xl">{error}</span>
+            {:else if metar}
+                <div class="text-left text-lg space-y-2">
+                    <div><strong>ICAO:</strong> {metar.icaoId}</div>
+                    <div><strong>Airport:</strong> {metar.name}</div>
+                    <div><strong>Observed:</strong> {metar.reportTime}</div>
+                    <div><strong>Temperature:</strong> {metar.temp}°C</div>
+                    <div><strong>Dew Point:</strong> {metar.dewp}°C</div>
+                    <div><strong>Wind:</strong> {metar.wdir}° at {metar.wspd}kt</div>
+                    <div><strong>Visibility:</strong> {metar.visib}</div>
+                    <div><strong>Pressure:</strong> {metar.altim} hPa</div>
+                    <div><strong>Raw METAR:</strong> <code>{metar.rawOb}</code></div>
+                </div>
             {:else}
                 <Loading />
             {/if}