Skip to content

Commit

Permalink
Testing rendering restrictions
Browse files Browse the repository at this point in the history
  • Loading branch information
cr0wst committed Dec 30, 2024
1 parent 35fdb8b commit 78d0758
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 26 deletions.
11 changes: 11 additions & 0 deletions src/lib/RestrictionRow.svelte
Original file line number Diff line number Diff line change
@@ -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>
62 changes: 36 additions & 26 deletions src/routes/restrictions/+page.svelte
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 78d0758

Please sign in to comment.