happyDeliver/web/src/lib/components/EmailPathCard.svelte

41 lines
1.7 KiB
Svelte

<script lang="ts">
import type { ReceivedHop } from "$lib/api/types.gen";
interface Props {
receivedChain: ReceivedHop[];
}
let { receivedChain }: Props = $props();
</script>
{#if receivedChain && receivedChain.length > 0}
<div class="mb-3">
<h5>Email Path (Received Chain)</h5>
<div class="list-group">
{#each receivedChain as hop, i}
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">
<span class="badge bg-primary me-2">{receivedChain.length - i}</span>
{hop.reverse || '-'} <span class="text-muted">({hop.ip})</span>{hop.by || 'Unknown'}
</h6>
<small class="text-muted" title={hop.timestamp}>{hop.timestamp ? new Intl.DateTimeFormat('default', { dateStyle: 'long', 'timeStyle': 'short' }).format(new Date(hop.timestamp)) : '-'}</small>
</div>
{#if hop.with || hop.id}
<p class="mb-1 small">
{#if hop.with}
<span class="text-muted">Protocol:</span> <code>{hop.with}</code>
{/if}
{#if hop.id}
<span class="text-muted ms-3">ID:</span> <code>{hop.id}</code>
{/if}
{#if hop.from}
<span class="text-muted ms-3">Helo:</span> <code>{hop.from}</code>
{/if}
</p>
{/if}
</div>
{/each}
</div>
</div>
{/if}