RideAware/rideaware-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Workout Library feature with browse, create, and favorites

Browse Source
This commit is contained in:
Cipher Vance
2026-01-21 18:23:02 -06:00
parent 3481db8322
commit 224ea3e55b
15 changed files with 3815 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/components/workout/WorkoutCard.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<div class="workout-card" @click="$emit('click', workout)">
<div class="workout-card-header">
<div class="workout-category" :class="`category-${workout.category}`">
{{ formatCategory(workout.category) }}
</div>
<FavoriteButton
v-if="showFavorite"
:is-favorited="isFavorited"
@toggle="$emit('toggle-favorite', workout.id)"
@click.stop
/>
</div>
<h3 class="workout-name">{{ workout.name }}</h3>
<p class="workout-description">{{ truncateDescription(workout.description) }}</p>
<div class="workout-stats">
<div class="stat">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>{{ workout.duration_minutes }} min</span>
</div>
<div class="stat">
<svg viewBox="0 0 24 24" fill="none">
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>IF {{ formatIF(workout.intensity_factor) }}</span>
</div>
<div class="stat">
<svg viewBox="0 0 24 24" fill="none">
<path d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>TSS {{ workout.tss || '—' }}</span>
</div>
</div>
<div class="workout-footer">
<StarRating :rating="workout.average_rating || 0" :readonly="true" size="small" />
<span class="rating-count" v-if="workout.rating_count">({{ workout.rating_count }})</span>
<div class="use-count" v-if="workout.use_count">
<svg viewBox="0 0 24 24" fill="none">
<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
</svg>
<span>{{ workout.use_count }}</span>
</div>
</div>
<div v-if="workout.is_system" class="system-badge">System</div>
</div>
</template>
<script setup>
import StarRating from './StarRating.vue'
import FavoriteButton from './FavoriteButton.vue'
defineProps({
workout: {
type: Object,
required: true
},
isFavorited: {
type: Boolean,
default: false
},
showFavorite: {
type: Boolean,
default: true
}
})
defineEmits(['click', 'toggle-favorite'])
const categoryLabels = {
endurance: 'Endurance',
threshold: 'Threshold',
vo2max: 'VO2 Max',
sprint: 'Sprint',
recovery: 'Recovery'
}
function formatCategory(category) {
return categoryLabels[category] || category
}
function formatIF(value) {
if (!value) return '—'
return value.toFixed(2)
}
function truncateDescription(text) {
if (!text) return ''
return text.length > 100 ? text.substring(0, 100) + '...' : text
}
</script>
<style scoped>
.workout-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
cursor: pointer;
transition: all var(--transition-base);
position: relative;
}
.workout-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.workout-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-sm);
}
.workout-category {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-endurance {
background: rgba(46, 204, 113, 0.15);
color: #27ae60;
}
.category-threshold {
background: rgba(241, 196, 15, 0.15);
color: #f39c12;
}
.category-vo2max {
background: rgba(231, 76, 60, 0.15);
color: #c0392b;
}
.category-sprint {
background: rgba(155, 89, 182, 0.15);
color: #8e44ad;
}
.category-recovery {
background: rgba(52, 152, 219, 0.15);
color: #2980b9;
}
.workout-name {
margin: 0 0 var(--spacing-xs);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.workout-description {
margin: 0 0 var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.5;
min-height: 42px;
}
.workout-stats {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.stat {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.stat svg {
width: 16px;
height: 16px;
}
.workout-footer {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.rating-count {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.use-count {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.use-count svg {
width: 14px;
height: 14px;
}
.system-badge {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
padding: 2px var(--spacing-xs);
background: var(--color-primary);
color: white;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
}
.workout-card-header + .system-badge {
top: var(--spacing-lg);
right: 48px;
}
</style>