wip

bin/web/src/lib/components/DownloadLink.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    let { url, text }: {
+        url: string;
+        text: string;
+    } = $props();
+</script>
+
+<a href={url}>📥 {text}</a>
+
+<style>
+    a {
+        @apply underline text-blue-400;
+    }
+</style>

bin/web/src/lib/components/ManifestTable.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { Manifest, ManifestEntry } from "$lib/manifest";
+    import TableRow from "./ManifestTableRow.svelte";
+    interface Props {
+        manifest: Manifest;
+    }
+    let { manifest }: Props = $props();
+</script>
+
+<table>
+    <thead>
+        <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Date Started</th>
+            <th scope="col">Date of Last Message</th>
+            <th scope="col">Size (bytes)</th>
+            <th scope="col">PCAP</th>
+            <th scope="col">QMDL</th>
+            <th scope="col">Analysis Result</th>
+        </tr>
+    </thead>
+    <tbody>
+        {#if manifest.current_entry !== undefined}
+            <TableRow entry={manifest.current_entry} current={true} />
+        {/if}
+        {#each manifest.entries as entry}
+            <TableRow entry={entry} current={false} />
+        {/each}
+    </tbody>
+</table>
+
+<style>
+    table {
+        @apply table-auto border;
+    }
+
+    th {
+        @apply bg-gray-300 p-2;
+    }
+</style>

bin/web/src/lib/components/ManifestTableRow.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { ManifestEntry } from "$lib/manifest";
+    import DownloadLink from '$lib/components/DownloadLink.svelte';
+    let { entry, current }: {
+        entry: ManifestEntry;
+        current: boolean;
+    } = $props();
+
+    let row_class = current ? "current" : "";
+</script>
+
+<tr>
+    <th scope='row'>{entry.name}</th>
+    <td>{entry.start_time}</td>
+    <td>{entry.last_message_time}</td>
+    <td>{entry.qmdl_size_bytes}</td>
+    <td><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
+    <td><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
+    <td>N/A</td>
+</tr>
+
+<style>
+    th {
+        @apply font-bold p-2 border-b bg-blue-100;
+    }
+
+    td {
+        @apply p-2 border-b;
+    }
+
+    tr {
+        @apply even:bg-gray-100;
+    }
+</style>