Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(badges): show full date + browser timezone in throughput separators

Browse Source 
Date separators now display "Monday, June 9 — EDT" instead of "Jun 9",
using the browser's local timezone abbreviation resolved at page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-09 11:24:25 -04:00
parent 1c541cd090
commit d0286f7868
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte
View File

@@ -33,6 +33,21 @@ function fmt_date(ms: number): string {
return new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' });
}
// Resolved once per page load — timezone abbreviation (e.g. "EDT", "PDT") for the separator label.
const tz_abbr: string =
Intl.DateTimeFormat('en-US', { timeZoneName: 'short' })
.formatToParts(new Date())
.find((p) => p.type === 'timeZoneName')?.value ?? '';
function fmt_date_header(ms: number): string {
const date_part = new Intl.DateTimeFormat('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric'
}).format(ms);
return tz_abbr ? `${date_part} — ${tz_abbr}` : date_part;
}
// Naive UTC strings from the backend have no timezone indicator — append Z so
// the browser parses them as UTC and converts to local time, matching the badge list display.
function parse_utc_ms(dt: string | null | undefined): number {
@@ -82,7 +97,7 @@ let stats: PrintStats = $derived.by(() => {
let prev_day = '';
const buckets: Bucket[] = raw_buckets.map((b) => {
const day = fmt_date(b.start_ms);
const date_label = day !== prev_day ? day : null;
const date_label = day !== prev_day ? fmt_date_header(b.start_ms) : null;
prev_day = day;
return { ...b, date_label };
});
@@ -142,7 +157,7 @@ function get_effective_name(badge: any): string {
{#each stats.buckets as bucket (bucket.start_ms)}
<!-- Date separator when the day changes -->
{#if bucket.date_label}
<div class="pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-surface-500-400">
<div class="pt-2 pb-1 text-xs font-semibold tracking-wide text-surface-500-400">
{bucket.date_label}
</div>
{/if}
@@ -154,7 +169,7 @@ function get_effective_name(badge: any): string {
onclick={() => (expanded_bucket = expanded_bucket === bucket.start_ms ? null : bucket.start_ms)}
class="flex w-full flex-row items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-surface-50 dark:hover:bg-surface-900/50 transition-colors">
<!-- Time label -->
<span class="w-14 shrink-0 font-mono text-sm">
<span class="w-18 shrink-0 font-mono text-sm">
{bucket.label}
</span>