All tweaks added
This commit is contained in:
@@ -0,0 +1,197 @@
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useState, useMemo } from 'react'
|
||||
import api from '../utils/api'
|
||||
import ActivityMap from '../components/activity/ActivityMap'
|
||||
import MetricTimeline from '../components/activity/MetricTimeline'
|
||||
import HRZoneBar from '../components/activity/HRZoneBar'
|
||||
import LapTable from '../components/activity/LapTable'
|
||||
import StatCard from '../components/ui/StatCard'
|
||||
import {
|
||||
formatDuration, formatDistance, formatPace, formatElevation,
|
||||
formatHeartRate, formatDateTime, formatCadence, sportIcon,
|
||||
} from '../utils/format'
|
||||
|
||||
const METRICS = [
|
||||
{ key: 'heart_rate', label: 'Heart Rate', unit: 'bpm', color: '#f43f5e' },
|
||||
{ key: 'speed_ms', label: 'Pace / Speed', unit: '', color: '#3b82f6' },
|
||||
{ key: 'altitude_m', label: 'Elevation', unit: 'm', color: '#84cc16' },
|
||||
{ key: 'cadence', label: 'Cadence', unit: '', color: '#f97316' },
|
||||
{ key: 'power', label: 'Power', unit: 'W', color: '#a855f7' },
|
||||
{ key: 'temperature_c', label: 'Temperature', unit: '°C', color: '#06b6d4' },
|
||||
]
|
||||
|
||||
export default function ActivityDetailPage() {
|
||||
const { id } = useParams()
|
||||
const [activeMetrics, setActiveMetrics] = useState(['heart_rate', 'speed_ms', 'altitude_m'])
|
||||
const [hoveredDistance, setHoveredDistance] = useState(null)
|
||||
const [mapHeight, setMapHeight] = useState(420)
|
||||
const [mapType, setMapType] = useState('dark')
|
||||
|
||||
const { data: activity, isLoading } = useQuery({
|
||||
queryKey: ['activity', id],
|
||||
queryFn: () => api.get(`/activities/${id}`).then(r => r.data),
|
||||
})
|
||||
|
||||
const { data: dataPoints } = useQuery({
|
||||
queryKey: ['activity-points', id],
|
||||
queryFn: () => api.get(`/activities/${id}/data-points?downsample=3`).then(r => r.data),
|
||||
enabled: !!activity,
|
||||
})
|
||||
|
||||
const { data: laps } = useQuery({
|
||||
queryKey: ['activity-laps', id],
|
||||
queryFn: () => api.get(`/activities/${id}/laps`).then(r => r.data),
|
||||
enabled: !!activity,
|
||||
})
|
||||
|
||||
const toggleMetric = (key) => {
|
||||
setActiveMetrics(prev =>
|
||||
prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
|
||||
)
|
||||
}
|
||||
|
||||
// Check which metrics have actual data
|
||||
const availableMetrics = useMemo(() => {
|
||||
if (!dataPoints?.length) return new Set()
|
||||
return new Set(
|
||||
METRICS
|
||||
.filter(m => dataPoints.some(p => p[m.key] != null && p[m.key] !== 0))
|
||||
.map(m => m.key)
|
||||
)
|
||||
}, [dataPoints])
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="flex items-center justify-center h-full"><div className="text-gray-500">Loading activity…</div></div>
|
||||
}
|
||||
if (!activity) return null
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-2xl">{sportIcon(activity.sport_type)}</span>
|
||||
<h1 className="text-2xl font-bold text-white">{activity.name}</h1>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">{formatDateTime(activity.start_time)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Primary stats */}
|
||||
<div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<StatCard label="Distance" value={formatDistance(activity.distance_m)} />
|
||||
<StatCard label="Time" value={formatDuration(activity.duration_s)} />
|
||||
<StatCard label="Pace" value={formatPace(activity.avg_speed_ms, activity.sport_type)} />
|
||||
<StatCard label="Elevation ↑" value={formatElevation(activity.elevation_gain_m)} />
|
||||
<StatCard label="Avg HR" value={formatHeartRate(activity.avg_heart_rate)} accent="red" />
|
||||
<StatCard label="Calories" value={activity.calories ? `${Math.round(activity.calories)} kcal` : '--'} />
|
||||
</div>
|
||||
|
||||
{/* Secondary stats */}
|
||||
<div className="grid grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<StatCard label="Max HR" value={formatHeartRate(activity.max_heart_rate)} />
|
||||
<StatCard label="Elevation ↓" value={formatElevation(activity.elevation_loss_m)} />
|
||||
<StatCard label="Cadence" value={formatCadence(activity.avg_cadence, activity.sport_type)} />
|
||||
<StatCard label="Avg Power" value={activity.avg_power ? `${Math.round(activity.avg_power)} W` : '--'} />
|
||||
<StatCard label="NP" value={activity.normalized_power ? `${Math.round(activity.normalized_power)} W` : '--'} />
|
||||
<StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
|
||||
</div>
|
||||
|
||||
{/* Map with controls */}
|
||||
<div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
|
||||
{/* Map toolbar */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Map style:</span>
|
||||
{['dark', 'street', 'satellite'].map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setMapType(t)}
|
||||
className={`text-xs px-2.5 py-1 rounded-full capitalize transition-colors ${
|
||||
mapType === t ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Height:</span>
|
||||
{[280, 420, 560].map(h => (
|
||||
<button
|
||||
key={h}
|
||||
onClick={() => setMapHeight(h)}
|
||||
className={`text-xs px-2.5 py-1 rounded-full transition-colors ${
|
||||
mapHeight === h ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{h === 280 ? 'S' : h === 420 ? 'M' : 'L'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ height: mapHeight }}>
|
||||
<ActivityMap
|
||||
polyline={activity.polyline}
|
||||
dataPoints={dataPoints}
|
||||
hoveredDistance={hoveredDistance}
|
||||
sportType={activity.sport_type}
|
||||
mapType={mapType}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HR Zones */}
|
||||
{activity.hr_zones && Object.values(activity.hr_zones).some(v => v > 0) && (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Heart Rate Zones</h3>
|
||||
<HRZoneBar zones={activity.hr_zones} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metric timeline */}
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-gray-300">Activity Timeline</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{METRICS.filter(m => availableMetrics.has(m.key)).map(({ key, label, color }) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => toggleMetric(key)}
|
||||
className={`text-xs px-3 py-1 rounded-full border transition-colors ${
|
||||
activeMetrics.includes(key)
|
||||
? 'border-transparent text-white'
|
||||
: 'border-gray-700 text-gray-500 hover:text-gray-300'
|
||||
}`}
|
||||
style={activeMetrics.includes(key) ? { backgroundColor: color + '33', borderColor: color, color } : {}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{dataPoints && dataPoints.length > 0 ? (
|
||||
<MetricTimeline
|
||||
dataPoints={dataPoints}
|
||||
activeMetrics={activeMetrics.filter(m => availableMetrics.has(m))}
|
||||
metrics={METRICS}
|
||||
onHoverDistance={setHoveredDistance}
|
||||
sportType={activity.sport_type}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-gray-600 text-sm text-center py-8">No timeline data available for this activity</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Laps */}
|
||||
{laps && laps.length > 0 && (
|
||||
<div className="bg-gray-900 rounded-xl border border-gray-800 p-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Laps</h3>
|
||||
<LapTable laps={laps} sportType={activity.sport_type} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user