Update rough filtering logic

Author: cr0wst

src/ambient.d.ts

@@ -0,0 +1,3 @@
+type RestrictionFilters = {
+	areas: string[];
+};

src/lib/state.svelte.ts

@@ -0,0 +1,3 @@
+export const restrictionFilters: RestrictionFilters = $state({
+	areas: []
+});

src/routes/api/restrictions/+server.ts

@@ -3,7 +3,7 @@ import { restriction } from '$lib/server/db/schema';
 import { json } from '@sveltejs/kit';
 
 export async function GET() {
-	const restrictions = await db.select().from(restriction);
+	const restrictions = await db.select().from(restriction).orderBy(restriction.airport, 'asc');
 
 	return json(restrictions);
 }

src/routes/restrictions/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import RestrictionRow from '$lib/RestrictionRow.svelte';
+	import RestrictionRow from './RestrictionRow.svelte';
+	import { restrictionFilters } from '$lib/state.svelte';
 
 	const { data } = $props();
 
@@ -12,21 +13,57 @@
 				map.set(airport, []);
 			}
 
-			map.get(airport).push(restriction);
+			if (restrictionFilters.areas.length === 0
+				|| (restrictionFilters.areas.includes(restriction.to)
+					|| restrictionFilters.areas.includes(restriction.from))) {
+				map.get(airport).push(restriction);
+			}
+		});
+
+		// Filter out any airports with no restrictions
+		map.forEach((restrictions, airport) => {
+			if (restrictions.length === 0) {
+				map.delete(airport);
+			}
 		});
 
 		return map;
 	});
+
+	const areas = [
+		'Area 1',
+		'Area 2',
+		'Area 3',
+		'Area 4',
+		'Area 5',
+		'Area 6',
+		'Area 7'
+	];
+
+	function toggleAreaFilter(area: string) {
+		if (restrictionFilters.areas.includes(area)) {
+			restrictionFilters.areas = restrictionFilters.areas.filter(a => a !== area);
+		} else {
+			restrictionFilters.areas.push(area);
+		}
+	}
 </script>
 
 <svelte:head>
 	<title>ICCT - Restrictions</title>
 </svelte:head>
-
+<h2>Filters</h2>
+<div class="flex gap-2">
+	{#each areas.filter((a) => a && a.includes('Area')) as area}
+		<button class="px-2 py-1 rounded-md border border-b-zinc-200"
+						class:bg-zinc-200={restrictionFilters.areas.includes(area)}
+						onclick="{() => toggleAreaFilter(area)}">{area}</button>
+	{/each}
+</div>
 <div class="w-full">
 	{#each restrictions as [airport, r]}
 		<div class="w-full flex mb-2 p-2">
-			<div class="text-left mr-4 font-medium border rounded-md p-2 bg-gray-700 text-white">{airport}</div>
+			<div class="w-32 text-left mr-4 font-medium border rounded-md p-2 bg-gray-700 text-white">{airport}</div>
 			<div class="flex-grow flex flex-col">
 				<div class="flex border-b border-b-zinc-400 font-medium">
 					<div class="w-5/12">Route</div>

src/lib/RestrictionRow.svelte src/routes/restrictions/RestrictionRow.svelte

@@ -2,7 +2,7 @@
 	const { restriction }: { restriction: any} = $props()
 </script>
 
-<div class="flex border-b border-b-zinc-200 last:border-0">
+<div class="flex border-b border-b-zinc-200 last:border-0 text-sm">
 	<div class="w-5/12">{restriction.route}</div>
 	<div class="w-1/12">{restriction.from}</div>
 	<div class="w-1/12">{restriction.to}</div>