better controls, formatting, etc

This commit is contained in:
Will Greenberg
2025-04-14 20:05:00 -07:00
parent c4b2c3bbe2
commit a33c7511eb
11 changed files with 133 additions and 31 deletions

View File

@@ -1,23 +1,37 @@
<script lang="ts">
import { ManifestEntry } from "$lib/manifest.svelte";
import DownloadLink from '$lib/components/DownloadLink.svelte';
import DeleteButton from "$lib/components/DeleteButton.svelte";
import AnalysisStatus from "./AnalysisStatus.svelte";
let { entry, current }: {
entry: ManifestEntry;
current: boolean;
} = $props();
// bg-gray-100
// bg-green-300
// passing `undefined` as the locale uses the browser default
const date_formatter = new Intl.DateTimeFormat(undefined, {
timeStyle: "long",
dateStyle: "short",
});
let row_color = current ? "bg-green-300" : "even:bg-gray-100";
</script>
<tr class="{row_color} border-b">
<th class="font-bold p-2 border-b bg-blue-100" scope='row'>{entry.name}</th>
<td class="p-2">{entry.start_time}</td>
<td class="p-2">{entry.last_message_time}</td>
<th class="font-bold p-2 bg-blue-100" scope='row'>{entry.name}</th>
<td class="p-2">{date_formatter.format(entry.start_time)}</td>
<td class="p-2">{date_formatter.format(entry.last_message_time)}</td>
<td class="p-2">{entry.qmdl_size_bytes}</td>
<td class="p-2"><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
<td class="p-2"><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
<td class="p-2"><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
<td class="p-2"><AnalysisStatus entry={entry} /></td>
{#if current}
<td class="p-2"></td>
{:else}
<td class="p-2">
<DeleteButton
prompt={`Are you sure you want to delete entry ${entry.name}?`}
url={entry.getDeleteUrl()}
/>
</td>
{/if}
</tr>