fix

frontend/src/views/ActivitiesView.vue

@@ -1,18 +1,135 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useActivitiesStore } from '../stores/activities'
+import { useRouter } from 'vue-router'
 import Card from 'primevue/card'
 import Button from 'primevue/button'
+import FileUpload from 'primevue/fileupload'
+import Tag from 'primevue/tag'
+import ProgressSpinner from 'primevue/progressspinner'
+
+const store = useActivitiesStore()
+const router = useRouter()
+const uploading = ref(false)
+const uploadError = ref('')
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return h > 0 ? `${h}h ${m}m` : `${m}m`
+}
+
+function formatDistance(meters: number | null): string {
+  if (!meters) return '—'
+  return `${(meters / 1000).toFixed(1)} km`
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-GB', {
+    day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+  })
+}
+
+async function onUpload(event: any) {
+  const file = event.files?.[0]
+  if (!file) return
+
+  uploading.value = true
+  uploadError.value = ''
+  try {
+    const activity = await store.uploadFit(file)
+    router.push({ name: 'activity-detail', params: { id: activity.id } })
+  } catch (e: any) {
+    uploadError.value = e.response?.data?.detail || 'Upload failed'
+  } finally {
+    uploading.value = false
+  }
+}
+
+onMounted(() => {
+  store.fetchActivities()
+})
 </script>
 
 <template>
   <div>
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-semibold">Activities</h1>
-      <Button label="Upload .FIT" icon="pi pi-upload" />
+      <FileUpload
+        mode="basic"
+        accept=".fit"
+        :auto="true"
+        choose-label="Upload .FIT"
+        choose-icon="pi pi-upload"
+        :custom-upload="true"
+        @uploader="onUpload"
+      />
+    </div>
+
+    <div v-if="uploading" class="flex items-center gap-3 mb-4">
+      <ProgressSpinner style="width: 24px; height: 24px" />
+      <span class="text-surface-500 text-sm">Processing .FIT file...</span>
+    </div>
+
+    <p v-if="uploadError" class="text-red-500 text-sm mb-4">{{ uploadError }}</p>
+
+    <div v-if="store.loading && !uploading" class="flex justify-center py-12">
+      <ProgressSpinner style="width: 40px; height: 40px" />
+    </div>
+
+    <div v-else-if="store.activities.length === 0" class="text-surface-500 py-12 text-center">
+      No activities yet. Upload your first .FIT file!
+    </div>
+
+    <div v-else class="flex flex-col gap-3">
+      <Card
+        v-for="a in store.activities"
+        :key="a.id"
+        class="cursor-pointer hover:border-primary transition-colors"
+        @click="router.push({ name: 'activity-detail', params: { id: a.id } })"
+      >
+        <template #content>
+          <div class="flex items-center justify-between flex-wrap gap-4">
+            <div class="flex items-center gap-4">
+              <div>
+                <p class="font-semibold">{{ a.name || 'Ride' }}</p>
+                <p class="text-surface-500 text-sm">{{ formatDate(a.date) }}</p>
+              </div>
+              <Tag :value="a.activity_type" severity="info" class="text-xs" />
+            </div>
+            <div class="flex items-center gap-6 text-sm">
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Duration</p>
+                <p class="font-semibold">{{ formatDuration(a.duration) }}</p>
+              </div>
+              <div class="text-center">
+                <p class="text-surface-500 text-xs">Distance</p>
+                <p class="font-semibold">{{ formatDistance(a.distance) }}</p>
+              </div>
+              <div v-if="a.elevation_gain" class="text-center">
+                <p class="text-surface-500 text-xs">Elevation</p>
+                <p class="font-semibold">{{ a.elevation_gain }}m</p>
+              </div>
+              <div v-if="a.metrics?.avg_power" class="text-center">
+                <p class="text-surface-500 text-xs">Avg Power</p>
+                <p class="font-semibold">{{ a.metrics.avg_power }}W</p>
+              </div>
+              <div v-if="a.metrics?.normalized_power" class="text-center">
+                <p class="text-surface-500 text-xs">NP</p>
+                <p class="font-semibold">{{ a.metrics.normalized_power }}W</p>
+              </div>
+              <div v-if="a.metrics?.tss" class="text-center">
+                <p class="text-surface-500 text-xs">TSS</p>
+                <p class="font-semibold">{{ a.metrics.tss }}</p>
+              </div>
+              <div v-if="a.metrics?.avg_hr" class="text-center">
+                <p class="text-surface-500 text-xs">Avg HR</p>
+                <p class="font-semibold">{{ a.metrics.avg_hr }}</p>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Card>
     </div>
-    <Card>
-      <template #content>
-        <p class="text-surface-400">Activity list with filters — coming soon</p>
-      </template>
-    </Card>
   </div>
 </template>