add overing in stats page

This commit is contained in:
Davide Scaini
2026-03-29 11:20:48 +02:00
parent 7327861c4a
commit 5647e52865
2 changed files with 103 additions and 24 deletions
+25 -10
View File
@@ -8,6 +8,8 @@
export let activity: ActivitySummary;
export let base: string = '/';
const editUrl = import.meta.env.PUBLIC_EDIT_URL;
let detail: ActivityDetail | null = null;
let error = '';
// Linked hover index shared between map and charts
@@ -27,17 +29,18 @@
$: trackUrl = activity.track_url ? `${base}data/${activity.track_url}` : null;
$: color = sportColor(activity.sport);
const stat = (label: string, value: string) => ({ label, value });
const stat = (label: string, value: string, key?: string) => ({ label, value, key });
$: hiddenStats = new Set<string>((detail?.custom as any)?.hide_stats ?? []);
$: stats = [
stat('Distance', formatDistance(activity.distance_m)),
stat('Moving time', formatDuration(activity.moving_time_s ?? activity.duration_s)),
stat('Elevation ↑', formatElevation(activity.elevation_gain_m)),
stat('Avg speed', formatSpeed(activity.avg_speed_kmh)),
stat('Max speed', formatSpeed(activity.max_speed_kmh)),
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—'),
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—'),
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—'),
];
stat('Elevation ↑', formatElevation(activity.elevation_gain_m), 'elevation'),
stat('Avg speed', formatSpeed(activity.avg_speed_kmh), 'speed'),
stat('Max speed', formatSpeed(activity.max_speed_kmh), 'speed'),
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—', 'heart_rate'),
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—', 'heart_rate'),
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—', 'cadence'),
].filter(s => !s.key || !hiddenStats.has(s.key));
</script>
<!-- Header -->
@@ -57,9 +60,21 @@
{formatDate(activity.started_at)} · {formatTime(activity.started_at)}
</span>
</div>
<h1 class="text-2xl font-bold text-white">{activity.title}</h1>
<div class="flex items-center gap-3">
<h1 class="text-2xl font-bold text-white">{activity.title}</h1>
{#if editUrl}
<a
href={`${editUrl}/edit/${activity.id}`}
target="_blank"
rel="noopener"
class="text-xs px-2 py-0.5 rounded border border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-white transition-colors shrink-0"
>
Edit
</a>
{/if}
</div>
{#if detail?.description}
<p class="text-zinc-400 mt-1 text-sm">{detail.description}</p>
<p class="text-zinc-400 mt-1 text-sm whitespace-pre-line">{detail.description}</p>
{/if}
</div>
</div>