136 lines
4.7 KiB
Vue
136 lines
4.7 KiB
Vue
<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>
|
|
<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>
|
|
</div>
|
|
</template>
|