From 78d0758879fcc194a8d1160bb32e6c0b50677509 Mon Sep 17 00:00:00 2001
From: Steve Crow <steve@smcrow.com>
Date: Sun, 29 Dec 2024 20:46:59 -0500
Subject: [PATCH] Testing rendering restrictions

---
 src/lib/RestrictionRow.svelte        | 11 +++++
 src/routes/restrictions/+page.svelte | 62 ++++++++++++++++------------
 2 files changed, 47 insertions(+), 26 deletions(-)
 create mode 100644 src/lib/RestrictionRow.svelte

diff --git a/src/lib/RestrictionRow.svelte b/src/lib/RestrictionRow.svelte
new file mode 100644
index 0000000..233faf1
--- /dev/null
+++ b/src/lib/RestrictionRow.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	const { restriction }: { restriction: any} = $props()
+</script>
+
+<div class="flex border-b border-b-zinc-200 last:border-0">
+	<div class="w-5/12">{restriction.route}</div>
+	<div class="w-1/12">{restriction.from}</div>
+	<div class="w-1/12">{restriction.to}</div>
+	<div class="w-3/12">{restriction.restriction}</div>
+	<div class="w-2/12">{restriction.notes}</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/restrictions/+page.svelte b/src/routes/restrictions/+page.svelte
index ec674be..561c89d 100644
--- a/src/routes/restrictions/+page.svelte
+++ b/src/routes/restrictions/+page.svelte
@@ -1,34 +1,44 @@
-<script>
+<script lang="ts">
+	import RestrictionRow from '$lib/RestrictionRow.svelte';
+
 	const { data } = $props();
+
+	// Convert restrictions into a map of airports with restrictions
+	let restrictions = $derived.by(() => {
+		const map = new Map();
+		data.restrictions.forEach((restriction: any) => {
+			const airport = restriction.airport;
+			if (!map.has(airport)) {
+				map.set(airport, []);
+			}
+
+			map.get(airport).push(restriction);
+		});
+
+		return map;
+	});
 </script>
 
 <svelte:head>
 	<title>ICCT - Restrictions</title>
 </svelte:head>
 
-<div class="text-center">
-	<table>
-		<thead>
-		<tr>
-			<th>Airport</th>
-			<th>Route</th>
-			<th>From</th>
-			<th>To</th>
-			<th>Restriction</th>
-			<th>Notes</th>
-		</tr>
-		</thead>
-		<tbody>
-		{#each data.restrictions as restriction}
-			<tr>
-				<td>{restriction.airport}</td>
-				<td>{restriction.route}</td>
-				<td>{restriction.from}</td>
-				<td>{restriction.to}</td>
-				<td>{restriction.restriction}</td>
-				<td>{restriction.notes}</td>
-			</tr>
-		{/each}
-		</tbody>
-	</table>
+<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="flex-grow flex flex-col">
+				<div class="flex border-b border-b-zinc-400 font-medium">
+					<div class="w-5/12">Route</div>
+					<div class="w-1/12">From</div>
+					<div class="w-1/12">To</div>
+					<div class="w-3/12">Restriction</div>
+					<div class="w-2/12">Notes</div>
+				</div>
+				{#each r as restriction}
+					<RestrictionRow {restriction} />
+				{/each}
+			</div>
+		</div>
+	{/each}
 </div>
\ No newline at end of file