All tweaks added

2026-06-06 18:10:35 +01:00
parent 043b3b7269
commit ec5a01d12a
92 changed files with 7517 additions and 784 deletions
@@ -9,14 +9,14 @@ import LapTable from '../components/activity/LapTable'
 import StatCard from '../components/ui/StatCard'
 import {
  formatDuration, formatDistance, formatPace, formatElevation,
-  formatHeartRate, formatDateTime, sportIcon,
+  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: 'rpm', color: '#f97316' },
+  { key: 'cadence', label: 'Cadence', unit: '', color: '#f97316' },
  { key: 'power', label: 'Power', unit: 'W', color: '#a855f7' },
  { key: 'temperature_c', label: 'Temperature', unit: '°C', color: '#06b6d4' },
 ]
@@ -25,6 +25,8 @@ 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],
@@ -49,19 +51,21 @@ export default function ActivityDetailPage() {
    )
  }

-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-gray-500">Loading activity…</div>
-      </div>
+  // 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

-  const speed = activity.avg_speed_ms
-  const pace = formatPace(speed, activity.sport_type)
-
  return (
    <div className="p-6 space-y-6">
      {/* Header */}
@@ -75,12 +79,12 @@ export default function ActivityDetailPage() {
        </div>
      </div>

-      {/* Summary stats */}
+      {/* 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={pace} />
-        <StatCard label="Elevation" value={`↑ ${formatElevation(activity.elevation_gain_m)}`} />
+        <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>
@@ -88,37 +92,71 @@ export default function ActivityDetailPage() {
      {/* 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="Avg Cadence" value={activity.avg_cadence ? `${Math.round(activity.avg_cadence)} rpm` : '--'} />
+        <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="TSS" value={activity.training_stress_score ? Math.round(activity.training_stress_score) : '--'} />
        <StatCard label="Avg Temp" value={activity.avg_temperature_c ? `${activity.avg_temperature_c.toFixed(1)} °C` : '--'} />
      </div>

-      {/* Map */}
-      <div className="bg-gray-900 rounded-xl overflow-hidden border border-gray-800" style={{ height: 420 }}>
-        <ActivityMap
-          polyline={activity.polyline}
-          dataPoints={dataPoints}
-          hoveredDistance={hoveredDistance}
-          sportType={activity.sport_type}
-        />
+      {/* 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.keys(activity.hr_zones).length > 0 && (
+      {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 selector */}
+      {/* 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.map(({ key, label, color }) => (
+            {METRICS.filter(m => availableMetrics.has(m.key)).map(({ key, label, color }) => (
              <button
                key={key}
                onClick={() => toggleMetric(key)}
@@ -134,15 +172,16 @@ export default function ActivityDetailPage() {
            ))}
          </div>
        </div>
-
-        {dataPoints && (
+        {dataPoints && dataPoints.length > 0 ? (
          <MetricTimeline
            dataPoints={dataPoints}
-            activeMetrics={activeMetrics}
+            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>