brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

personal records tab into athlete page

Browse Source
This commit is contained in:
Davide Scaini
2026-03-30 10:53:51 +02:00
parent 2cc53dece4
commit a6a81f9421
6 changed files with 692 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/AthleteView.svelte
+43 -25
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import type { AthleteJson, BASIndex, ActivitySummary } from '../lib/types';
import MmpChart from './MmpChart.svelte';
import RecordsView from './RecordsView.svelte';
import AthleteDrawer from './AthleteDrawer.svelte';
let athlete: AthleteJson | null = null;
@@ -10,6 +11,9 @@
let error: string | null = null;
let drawerOpen = false;
type Tab = 'power' | 'records' | 'profile';
let activeTab: Tab = 'power';
const editUrl = import.meta.env.PUBLIC_EDIT_URL ?? '';
onMount(async () => {
@@ -21,9 +25,7 @@
if (!athleteRes.ok) throw new Error('athlete.json not found — run bincio extract first');
athlete = await athleteRes.json();
const index: BASIndex = await indexRes.json();
// Only activities with power data contribute to the curve
activities = index.activities.filter(a => a.mmp && a.privacy !== 'private');
} catch (e: any) {
error = e.message;
} finally {
@@ -32,7 +34,6 @@
});
async function onSaved() {
// Reload athlete.json after edits are saved
const res = await fetch(`${import.meta.env.BASE_URL}data/athlete.json?t=${Date.now()}`);
if (res.ok) athlete = await res.json();
drawerOpen = false;
@@ -46,6 +47,12 @@
const [lo, hi] = zones[i];
return hi >= 900 ? `${lo}+ bpm` : `${lo}–${hi} bpm`;
}
const TABS: { key: Tab; label: string }[] = [
{ key: 'power', label: 'Power Curve' },
{ key: 'records', label: 'Records' },
{ key: 'profile', label: 'Profile' },
];
</script>
{#if loading}
@@ -54,19 +61,31 @@
<p class="text-red-400 text-sm">{error}</p>
{:else if athlete}
<!-- Edit button (only when edit server is configured) -->
{#if editUrl}
<div class="flex justify-end mb-6">
<!-- Header row: tabs + edit button -->
<div class="flex items-center justify-between mb-6 border-b border-zinc-800 pb-0">
<nav class="flex gap-0">
{#each TABS as tab}
<button
on:click={() => activeTab = tab.key}
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px"
class:border-blue-500={activeTab === tab.key}
class:text-white={activeTab === tab.key}
class:border-transparent={activeTab !== tab.key}
class:text-zinc-500={activeTab !== tab.key}
class:hover:text-zinc-300={activeTab !== tab.key}
>{tab.label}</button>
{/each}
</nav>
{#if editUrl}
<button
on:click={() => drawerOpen = true}
class="px-4 py-2 text-sm border border-zinc-700 hover:border-zinc-500 text-zinc-300 hover:text-white rounded-md transition-colors"
class="mb-2 px-3 py-1.5 text-xs border border-zinc-700 hover:border-zinc-500 text-zinc-400 hover:text-white rounded-md transition-colors"
>Edit profile</button>
</div>
{/if}
{/if}
</div>
<!-- Power curve section -->
<section class="mb-10">
<h2 class="text-lg font-semibold text-white mb-4">Power Curve</h2>
<!-- Power Curve tab -->
{#if activeTab === 'power'}
{#if athlete.power_curve.all_time}
<div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800">
<MmpChart {athlete} {activities} />
@@ -74,14 +93,15 @@
{:else}
<p class="text-zinc-500 text-sm">No power data found. Make sure your activities include power meter data and re-run <code class="text-zinc-300">bincio extract</code>.</p>
{/if}
</section>
<!-- Profile section -->
<section>
<h2 class="text-lg font-semibold text-white mb-4">Profile</h2>
<!-- Records tab -->
{:else if activeTab === 'records'}
<RecordsView {athlete} />
<!-- Profile tab -->
{:else if activeTab === 'profile'}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Key numbers -->
<div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-3">
<h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">Key numbers</h3>
{#if athlete.max_hr}
@@ -97,38 +117,36 @@
</div>
{/if}
{#if !athlete.max_hr && !athlete.ftp_w}
<p class="text-zinc-500 text-sm">Set <code>athlete.max_hr</code> and <code>athlete.ftp_w</code> in your config.</p>
<p class="text-zinc-500 text-sm">Set <code>athlete.max_hr</code> and <code>athlete.ftp_w</code> in your config, or use Edit profile.</p>
{/if}
</div>
<!-- HR zones -->
{#if athlete.hr_zones}
<div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-2">
<h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">HR Zones</h3>
{#each athlete.hr_zones as zone, i}
{#each athlete.hr_zones as _zone, i}
<div class="flex justify-between items-center text-sm">
<span class="text-zinc-400">Z{i + 1}</span>
<span class="text-white">{fmtHrZone(athlete.hr_zones, i)}</span>
<span class="text-white">{fmtHrZone(athlete.hr_zones!, i)}</span>
</div>
{/each}
</div>
{/if}
<!-- Power zones -->
{#if athlete.power_zones}
<div class="bg-zinc-900 rounded-xl p-4 border border-zinc-800 space-y-2">
<h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide">Power Zones</h3>
{#each athlete.power_zones as zone, i}
{#each athlete.power_zones as _zone, i}
<div class="flex justify-between items-center text-sm">
<span class="text-zinc-400">Z{i + 1}</span>
<span class="text-white">{fmtZone(athlete.power_zones, i)}</span>
<span class="text-white">{fmtZone(athlete.power_zones!, i)}</span>
</div>
{/each}
</div>
{/if}
</div>
</section>
{/if}
{/if}
site/src/components/RecordsView.svelte
+215
View File
@@ -0,0 +1,215 @@
<script lang="ts">
import type { AthleteJson } from '../lib/types';
import { formatDate, sportIcon, sportColor } from '../lib/format';
export let athlete: AthleteJson;
// ── Distance label formatting ──────────────────────────────────────────────
function distLabel(km: number): string {
if (km === 0.4) return '400 m';
if (km === 0.1) return '100 m';
if (km === 0.2) return '200 m';
if (km === 0.5) return '500 m';
if (km === 1.609) return '1 mile';
if (Number.isInteger(km)) return `${km} km`;
return `${km} km`;
}
// ── Time formatting ────────────────────────────────────────────────────────
function fmtTime(s: number): string {
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
const sec = Math.round(s % 60);
if (h > 0) return `${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
return `${m}:${String(sec).padStart(2,'0')}`;
}
// Pace in min/km for running/walking/hiking
function fmtPace(distKm: number, timeS: number): string {
const secPerKm = timeS / distKm;
const m = Math.floor(secPerKm / 60);
const s = Math.round(secPerKm % 60);
return `${m}:${String(s).padStart(2,'0')} /km`;
}
// Speed in km/h for cycling/swimming
function fmtSpeed(distKm: number, timeS: number): string {
return `${((distKm / timeS) * 3600).toFixed(1)} km/h`;
}
// ── Sport tabs ─────────────────────────────────────────────────────────────
type SportTab = 'running' | 'cycling' | 'swimming' | 'hiking' | 'walking';
const TABS: { key: SportTab; label: string }[] = [
{ key: 'running', label: 'Running' },
{ key: 'cycling', label: 'Cycling' },
{ key: 'swimming', label: 'Swimming' },
{ key: 'hiking', label: 'Hiking' },
{ key: 'walking', label: 'Walking' },
];
let activeTab: SportTab = 'running';
// Tabs that have at least one record
function hasRecords(sport: SportTab): boolean {
const bucket = (athlete as any).records?.[sport];
return bucket && Object.keys(bucket).length > 0;
}
// ── Record data helpers ────────────────────────────────────────────────────
interface EffortRecord {
time_s: number;
activity_id: string;
started_at: string;
title: string;
}
interface ValueRecord {
value: number;
activity_id: string;
started_at: string;
title: string;
}
function distanceRecords(sport: SportTab): { distKm: number; rec: EffortRecord }[] {
const bucket = (athlete as any).records?.[sport] ?? {};
return Object.entries(bucket)
.filter(([k]) => !isNaN(Number(k)))
.map(([k, v]) => ({ distKm: Number(k), rec: v as EffortRecord }))
.sort((a, b) => a.distKm - b.distKm);
}
function valueRecord(sport: SportTab, key: string): ValueRecord | null {
return (athlete as any).records?.[sport]?.[key] ?? null;
}
const activityUrl = (id: string) => `/activity/${id}/`;
</script>
<!-- Sport tabs -->
<div class="flex gap-1 mb-6 flex-wrap">
{#each TABS as tab}
{@const active = activeTab === tab.key}
{@const has = hasRecords(tab.key)}
<button
on:click={() => activeTab = tab.key}
disabled={!has}
class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors"
style={active
? `background:${sportColor(tab.key as any)}22; border:1px solid ${sportColor(tab.key as any)}; color:${sportColor(tab.key as any)}`
: 'background:transparent; border:1px solid #3f3f46; color:' + (has ? '#a1a1aa' : '#52525b')}
>
{sportIcon(tab.key as any)} {tab.label}
</button>
{/each}
</div>
<!-- Running / Cycling / Swimming — distance-based sliding-window records -->
{#if activeTab === 'running' || activeTab === 'cycling' || activeTab === 'swimming'}
{@const rows = distanceRecords(activeTab)}
{#if rows.length}
<div class="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-zinc-500 text-xs uppercase tracking-wide">
<th class="text-left px-4 py-3 font-medium">Distance</th>
<th class="text-left px-4 py-3 font-medium">Time</th>
<th class="text-left px-4 py-3 font-medium">
{activeTab === 'running' ? 'Pace' : 'Speed'}
</th>
<th class="text-left px-4 py-3 font-medium">Date</th>
<th class="text-left px-4 py-3 font-medium">Activity</th>
</tr>
</thead>
<tbody>
{#each rows as { distKm, rec }, i}
<tr class="border-b border-zinc-800/50 last:border-0 hover:bg-zinc-800/30 transition-colors">
<td class="px-4 py-3 font-semibold text-white">{distLabel(distKm)}</td>
<td class="px-4 py-3 font-mono text-white">{fmtTime(rec.time_s)}</td>
<td class="px-4 py-3 text-zinc-400">
{activeTab === 'running'
? fmtPace(distKm, rec.time_s)
: fmtSpeed(distKm, rec.time_s)}
</td>
<td class="px-4 py-3 text-zinc-400">{formatDate(rec.started_at)}</td>
<td class="px-4 py-3">
<a
href={activityUrl(rec.activity_id)}
class="text-blue-400 hover:text-blue-300 truncate max-w-[200px] block transition-colors"
title={rec.title}
>{rec.title}</a>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<!-- Best climbs for cycling -->
{#if activeTab === 'cycling' && (athlete as any).best_climbs?.length}
{@const climbs = (athlete as any).best_climbs}
<div class="mt-6">
<h3 class="text-sm font-medium text-zinc-400 uppercase tracking-wide mb-3">⛰️ Best climb in one go</h3>
<div class="bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-zinc-500 text-xs uppercase tracking-wide">
<th class="text-left px-4 py-3 font-medium w-8">#</th>
<th class="text-left px-4 py-3 font-medium">Elevation</th>
<th class="text-left px-4 py-3 font-medium">Date</th>
<th class="text-left px-4 py-3 font-medium">Activity</th>
</tr>
</thead>
<tbody>
{#each climbs as bc, i}
<tr class="border-b border-zinc-800/50 last:border-0 hover:bg-zinc-800/30 transition-colors">
<td class="px-4 py-3 text-zinc-600 text-xs">{i + 1}</td>
<td class="px-4 py-3 font-semibold text-white">{Math.round(bc.climb_m)} m</td>
<td class="px-4 py-3 text-zinc-400">{formatDate(bc.started_at)}</td>
<td class="px-4 py-3">
<a
href={activityUrl(bc.activity_id)}
class="text-blue-400 hover:text-blue-300 truncate max-w-[200px] block transition-colors"
title={bc.title}
>{bc.title}</a>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
{/if}
{:else}
<p class="text-zinc-500 text-sm">No {activeTab} records yet. Records are computed from activities with GPS speed data.</p>
{/if}
<!-- Hiking / Walking — aggregate records only -->
{:else}
{@const longest = valueRecord(activeTab, 'longest_m')}
{@const mostElev = valueRecord(activeTab, 'most_elevation_m')}
{#if longest || mostElev}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{#if longest}
<div class="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
<p class="text-xs text-zinc-500 uppercase tracking-wide mb-1">Longest {activeTab}</p>
<p class="text-white font-semibold text-xl">{(longest.value / 1000).toFixed(1)} km</p>
<a href={activityUrl(longest.activity_id)} class="text-sm text-blue-400 hover:text-blue-300 mt-1 block transition-colors">
{longest.title} · {formatDate(longest.started_at)}
</a>
</div>
{/if}
{#if mostElev}
<div class="bg-zinc-900 rounded-xl border border-zinc-800 p-4">
<p class="text-xs text-zinc-500 uppercase tracking-wide mb-1">Most elevation</p>
<p class="text-white font-semibold text-xl">{Math.round(mostElev.value)} m</p>
<a href={activityUrl(mostElev.activity_id)} class="text-sm text-blue-400 hover:text-blue-300 mt-1 block transition-colors">
{mostElev.title} · {formatDate(mostElev.started_at)}
</a>
</div>
{/if}
</div>
{:else}
<p class="text-zinc-500 text-sm">No {activeTab} records yet.</p>
{/if}
{/if}
site/src/lib/types.ts
+24
View File
@@ -13,14 +13,38 @@ export interface AthletePowerCurve {
last_90d: MmpCurve | null;
}
export interface EffortRecord {
time_s: number;
activity_id: string;
started_at: string;
title: string;
}
export interface ValueRecord {
value: number;
activity_id: string;
started_at: string;
title: string;
}
export interface BestClimb {
climb_m: number;
activity_id: string;
started_at: string;
title: string;
}
export interface AthleteJson {
bas_version: string;
generated_at: string;
power_curve: AthletePowerCurve;
records?: Record<string, Record<string, EffortRecord | ValueRecord>>;
best_climbs?: BestClimb[];
max_hr?: number;
ftp_w?: number;
hr_zones?: [number, number][];
power_zones?: [number, number][];
seasons?: { name: string; start: string; end: string }[];
}
export interface ActivitySummary {