StreakFit web: exercices planifiés en séance + filtre matériel + config matos profil
Build & Deploy / build (push) Successful in 23s

- session/[id]: affiche les exercices planifies de la routine (objectif series x reps) + pre-remplit la 1re serie
- exercises/index: select Materiel + bouton 'Mon matos' (filtre sur le materiel du profil)
- profile: multi-select du materiel possede + PATCH /api/me
- i18n fr/en/pt-BR

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-21 13:27:45 +02:00
co-authored by Claude Opus 4.8
parent d0d1ae65a2
commit 742703a36f
7 changed files with 169 additions and 38 deletions
+36 -2
View File
@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const { t, locale } = useI18n() const { t, locale } = useI18n()
const { api } = useApi() const { api } = useApi()
const auth = useAuthStore()
interface ExerciseRow { id: number, name: string, slug: string, body_part: string | null, equipment: string | null, target: string | null, image_url: string | null } interface ExerciseRow { id: number, name: string, slug: string, body_part: string | null, equipment: string | null, target: string | null, image_url: string | null }
interface Facet { value: string, label: string } interface Facet { value: string, label: string }
@@ -9,29 +10,41 @@ interface Paginated { data: ExerciseRow[], meta: { current_page: number, last_pa
const search = ref('') const search = ref('')
const bodyPart = ref<string | undefined>() const bodyPart = ref<string | undefined>()
const equipment = ref<string | undefined>()
const myGear = ref(false)
const page = ref(1) const page = ref(1)
const { data: facets } = await useAsyncData('ex-facets', () => api<Facets>('/api/exercises/facets', { query: { locale: locale.value } }), { lazy: true, watch: [locale] }) const { data: facets } = await useAsyncData('ex-facets', () => api<Facets>('/api/exercises/facets', { query: { locale: locale.value } }), { lazy: true, watch: [locale] })
const query = computed(() => ({ search: search.value || undefined, body_part: bodyPart.value || undefined, page: page.value, locale: locale.value })) // Matériel possédé (config profil) → filtre "mon matos" (plusieurs équipements, envoyés en CSV).
const myEquipmentCsv = computed(() => (auth.user?.available_equipment ?? []).join(','))
const hasMyGear = computed(() => myEquipmentCsv.value.length > 0)
const equipmentParam = computed(() => (myGear.value && hasMyGear.value) ? myEquipmentCsv.value : (equipment.value || undefined))
const query = computed(() => ({ search: search.value || undefined, body_part: bodyPart.value || undefined, equipment: equipmentParam.value, page: page.value, locale: locale.value }))
const { data, pending } = await useAsyncData<Paginated>( const { data, pending } = await useAsyncData<Paginated>(
'exercises', 'exercises',
() => api<Paginated>('/api/exercises', { query: query.value }), () => api<Paginated>('/api/exercises', { query: query.value }),
{ watch: [query], lazy: true } { watch: [query], lazy: true }
) )
watch([search, bodyPart], () => { page.value = 1 }) watch([search, bodyPart, equipment, myGear], () => { page.value = 1 })
const bodyPartOptions = computed(() => [ const bodyPartOptions = computed(() => [
{ label: t('exercises.all'), value: undefined }, { label: t('exercises.all'), value: undefined },
...(facets.value?.body_parts ?? []).map(b => ({ label: b.label, value: b.value })) ...(facets.value?.body_parts ?? []).map(b => ({ label: b.label, value: b.value }))
]) ])
const equipmentOptions = computed(() => [
{ label: t('exercises.all'), value: undefined },
...(facets.value?.equipments ?? []).map(e => ({ label: e.label, value: e.value }))
])
</script> </script>
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<h1 class="text-2xl font-black tracking-tight">{{ t('exercises.title') }}</h1> <h1 class="text-2xl font-black tracking-tight">{{ t('exercises.title') }}</h1>
<div class="space-y-2">
<div class="flex gap-2"> <div class="flex gap-2">
<UInput <UInput
v-model="search" v-model="search"
@@ -49,6 +62,27 @@ const bodyPartOptions = computed(() => [
class="w-36" class="w-36"
/> />
</div> </div>
<div class="flex gap-2 items-center">
<USelectMenu
v-model="equipment"
:items="equipmentOptions"
value-key="value"
:placeholder="t('exercises.equipment')"
size="lg"
class="flex-1"
:disabled="myGear && hasMyGear"
/>
<UButton
v-if="hasMyGear"
:color="myGear ? 'primary' : 'neutral'"
:variant="myGear ? 'solid' : 'subtle'"
size="lg"
icon="i-lucide-dumbbell"
:label="t('exercises.myGear')"
@click="myGear = !myGear"
/>
</div>
</div>
<div v-if="pending && !data" class="flex justify-center py-16"> <div v-if="pending && !data" class="flex justify-center py-16">
<SfLogo :size="56" loader /> <SfLogo :size="56" loader />
+49
View File
@@ -2,9 +2,34 @@
definePageMeta({ middleware: 'auth' }) definePageMeta({ middleware: 'auth' })
const { t, locale, locales, setLocale } = useI18n() const { t, locale, locales, setLocale } = useI18n()
const auth = useAuthStore() const auth = useAuthStore()
const { api, ensureCsrf } = useApi()
const { isSupported, enable, disable, sendTest } = usePush() const { isSupported, enable, disable, sendTest } = usePush()
const toast = useToast() const toast = useToast()
// Matériel possédé (config profil) : sert au filtre "mon matos" du catalogue d'exercices.
const { data: facets } = await useAsyncData(
'profile-facets',
() => api<{ equipments: { value: string, label: string }[] }>('/api/exercises/facets', { query: { locale: locale.value } }),
{ lazy: true, watch: [locale] }
)
const equipmentItems = computed(() => (facets.value?.equipments ?? []).map(e => ({ label: e.label, value: e.value })))
const gear = ref<string[]>([...(auth.user?.available_equipment ?? [])])
watch(() => auth.user?.available_equipment, v => { gear.value = [...(v ?? [])] })
const savingGear = ref(false)
async function saveGear() {
savingGear.value = true
try {
await ensureCsrf()
await api('/api/me', { method: 'PATCH', body: { available_equipment: gear.value } })
await auth.fetchMe()
toast.add({ title: t('profile.gearSaved'), color: 'primary' })
} catch {
toast.add({ title: t('common.error'), color: 'error' })
} finally {
savingGear.value = false
}
}
const pushOn = ref(auth.push.enabled) const pushOn = ref(auth.push.enabled)
const pushLoading = ref(false) const pushLoading = ref(false)
@@ -68,6 +93,30 @@ async function doLogout() {
</div> </div>
</div> </div>
<div>
<p class="text-sm font-semibold text-zinc-500 mb-2">{{ t('profile.equipment') }}</p>
<p class="text-xs text-zinc-500 mb-2">{{ t('profile.equipmentDesc') }}</p>
<USelectMenu
v-model="gear"
:items="equipmentItems"
value-key="value"
multiple
searchable
:placeholder="t('profile.equipmentPlaceholder')"
size="lg"
class="w-full"
/>
<UButton
class="mt-2"
color="primary"
size="sm"
icon="i-lucide-save"
:loading="savingGear"
:label="t('common.save')"
@click="saveGear"
/>
</div>
<UCard v-if="isSupported()" :ui="{ body: 'p-4' }"> <UCard v-if="isSupported()" :ui="{ body: 'p-4' }">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<div> <div>
+28 -8
View File
@@ -8,7 +8,10 @@ const sessionId = Number(route.params.id)
interface SetLog { id: number, exercise_id: number, set_number: number, reps: number | null, weight: number | null } interface SetLog { id: number, exercise_id: number, set_number: number, reps: number | null, weight: number | null }
interface Exercise { id: number, name: string, image_url: string | null, target?: string | null } interface Exercise { id: number, name: string, image_url: string | null, target?: string | null }
interface Session { id: number, title: string | null, status: string, set_logs: (SetLog & { exercise?: Exercise })[] } interface Plan { sets: number, target_reps: string | null, target_weight: number | null }
interface PlannedExercise { exercise_id: number, position: number, sets: number, target_reps: string | null, target_weight: number | null, rest_seconds: number | null, exercise: Exercise | null }
interface Session { id: number, title: string | null, status: string, routine_id: number | null, set_logs: (SetLog & { exercise?: Exercise })[], planned_exercises?: PlannedExercise[] }
type ActiveExercise = Exercise & { plan?: Plan }
// L'API peut envelopper la resource dans { data: {...} } → déballage tolérant. // L'API peut envelopper la resource dans { data: {...} } → déballage tolérant.
const { data: session, refresh } = await useAsyncData( const { data: session, refresh } = await useAsyncData(
@@ -16,14 +19,17 @@ const { data: session, refresh } = await useAsyncData(
() => api<Session | { data: Session }>(`/api/sessions/${sessionId}`).then((r: unknown) => (r as { data?: Session })?.data ?? r as Session) () => api<Session | { data: Session }>(`/api/sessions/${sessionId}`).then((r: unknown) => (r as { data?: Session })?.data ?? r as Session)
) )
// Exercices actifs = ceux ayant des sets + ceux ajoutés manuellement // Exercices actifs = exercices planifiés par la routine (dans l'ordre) + ceux ayant des sets + ajoutés manuellement.
const added = ref<Exercise[]>([]) const added = ref<Exercise[]>([])
const exercises = computed<Exercise[]>(() => { const exercises = computed<ActiveExercise[]>(() => {
const map = new Map<number, Exercise>() const map = new Map<number, ActiveExercise>()
for (const sl of session.value?.set_logs ?? []) { for (const p of session.value?.planned_exercises ?? []) {
if (sl.exercise) map.set(sl.exercise.id, sl.exercise) if (p.exercise) map.set(p.exercise.id, { ...p.exercise, plan: { sets: p.sets, target_reps: p.target_reps, target_weight: p.target_weight } })
} }
for (const e of added.value) map.set(e.id, e) for (const sl of session.value?.set_logs ?? []) {
if (sl.exercise && !map.has(sl.exercise.id)) map.set(sl.exercise.id, sl.exercise)
}
for (const e of added.value) if (!map.has(e.id)) map.set(e.id, e)
return [...map.values()] return [...map.values()]
}) })
@@ -47,6 +53,15 @@ function addExercise(e: Exercise) {
// Log d'une série // Log d'une série
const draft = reactive<Record<number, { reps?: number, weight?: number }>>({}) const draft = reactive<Record<number, { reps?: number, weight?: number }>>({})
// Pré-remplit la 1re série de chaque exercice planifié avec les cibles de la routine (reps/poids).
watch(() => session.value?.planned_exercises, (planned) => {
for (const p of planned ?? []) {
if (draft[p.exercise_id]) continue
const reps = p.target_reps ? Number.parseInt(String(p.target_reps), 10) : Number.NaN
draft[p.exercise_id] = { reps: Number.isFinite(reps) ? reps : undefined, weight: p.target_weight ?? undefined }
}
}, { immediate: true })
async function logSet(exId: number) { async function logSet(exId: number) {
const d = draft[exId] || {} const d = draft[exId] || {}
const setNumber = setsFor(exId).length + 1 const setNumber = setsFor(exId).length + 1
@@ -91,7 +106,12 @@ async function finish() {
<div v-for="ex in exercises" :key="ex.id" class="rounded-xl border border-zinc-200 dark:border-zinc-800 p-3 space-y-2"> <div v-for="ex in exercises" :key="ex.id" class="rounded-xl border border-zinc-200 dark:border-zinc-800 p-3 space-y-2">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img v-if="ex.image_url" :src="ex.image_url" :alt="ex.name" class="size-10 rounded-lg object-cover"> <img v-if="ex.image_url" :src="ex.image_url" :alt="ex.name" class="size-10 rounded-lg object-cover">
<p class="font-semibold capitalize flex-1">{{ ex.name }}</p> <div class="flex-1">
<p class="font-semibold capitalize">{{ ex.name }}</p>
<p v-if="ex.plan" class="text-xs text-zinc-500">
{{ t('session.target') }} : {{ ex.plan.sets }} × {{ ex.plan.target_reps }}<span v-if="ex.plan.target_weight"> · {{ ex.plan.target_weight }} {{ t('session.weight') }}</span>
</p>
</div>
</div> </div>
<div v-for="s in setsFor(ex.id)" :key="s.id" class="flex items-center gap-3 text-sm pl-1"> <div v-for="s in setsFor(ex.id)" :key="s.id" class="flex items-center gap-3 text-sm pl-1">
+1
View File
@@ -11,6 +11,7 @@ interface SfUser {
locale?: string locale?: string
units?: string units?: string
avatar_url?: string | null avatar_url?: string | null
available_equipment?: string[]
} }
export const useAuthStore = defineStore('auth', () => { export const useAuthStore = defineStore('auth', () => {
+13 -4
View File
@@ -1,5 +1,7 @@
{ {
"app": { "tagline": "Keep the flame." }, "app": {
"tagline": "Keep the flame."
},
"nav": { "nav": {
"dashboard": "Home", "dashboard": "Home",
"exercises": "Exercises", "exercises": "Exercises",
@@ -43,7 +45,9 @@
"instructions": "Instructions", "instructions": "Instructions",
"secondaryMuscles": "Secondary muscles", "secondaryMuscles": "Secondary muscles",
"noResults": "No exercise found.", "noResults": "No exercise found.",
"all": "All" "all": "All",
"equipment": "Equipment",
"myGear": "My gear"
}, },
"session": { "session": {
"inProgress": "Workout in progress", "inProgress": "Workout in progress",
@@ -54,7 +58,8 @@
"live": "live", "live": "live",
"preparing": "Getting your workout ready…", "preparing": "Getting your workout ready…",
"cantStart": "Couldn't start the workout", "cantStart": "Couldn't start the workout",
"streakToast": "Streak: {n} days" "streakToast": "Streak: {n} days",
"target": "Target"
}, },
"routines": { "routines": {
"new": "New", "new": "New",
@@ -91,7 +96,11 @@
"reminders": "Streak reminders 🔥", "reminders": "Streak reminders 🔥",
"remindersDesc": "An evening reminder when your flame is at risk.", "remindersDesc": "An evening reminder when your flame is at risk.",
"test": "Send a test", "test": "Send a test",
"remindersOn": "Reminders enabled 🔥" "remindersOn": "Reminders enabled 🔥",
"equipment": "My equipment",
"equipmentDesc": "Pick your equipment: the catalog can filter to what you own.",
"equipmentPlaceholder": "Choose my equipment…",
"gearSaved": "Equipment saved 💪"
}, },
"common": { "common": {
"loading": "Loading…", "loading": "Loading…",
+13 -4
View File
@@ -1,5 +1,7 @@
{ {
"app": { "tagline": "Garde la flamme." }, "app": {
"tagline": "Garde la flamme."
},
"nav": { "nav": {
"dashboard": "Accueil", "dashboard": "Accueil",
"exercises": "Exercices", "exercises": "Exercices",
@@ -43,7 +45,9 @@
"instructions": "Instructions", "instructions": "Instructions",
"secondaryMuscles": "Muscles secondaires", "secondaryMuscles": "Muscles secondaires",
"noResults": "Aucun exercice trouvé.", "noResults": "Aucun exercice trouvé.",
"all": "Tous" "all": "Tous",
"equipment": "Matériel",
"myGear": "Mon matos"
}, },
"session": { "session": {
"inProgress": "Séance en cours", "inProgress": "Séance en cours",
@@ -54,7 +58,8 @@
"live": "en cours", "live": "en cours",
"preparing": "Préparation de ta séance…", "preparing": "Préparation de ta séance…",
"cantStart": "Impossible de démarrer la séance", "cantStart": "Impossible de démarrer la séance",
"streakToast": "Série : {n} jours" "streakToast": "Série : {n} jours",
"target": "Objectif"
}, },
"routines": { "routines": {
"new": "Nouvelle", "new": "Nouvelle",
@@ -91,7 +96,11 @@
"reminders": "Rappels de série 🔥", "reminders": "Rappels de série 🔥",
"remindersDesc": "Un rappel le soir si tu risques de perdre ta flamme.", "remindersDesc": "Un rappel le soir si tu risques de perdre ta flamme.",
"test": "Envoyer un test", "test": "Envoyer un test",
"remindersOn": "Rappels activés 🔥" "remindersOn": "Rappels activés 🔥",
"equipment": "Mon matériel",
"equipmentDesc": "Sélectionne ton matériel : le catalogue pourra se filtrer sur ce que tu possèdes.",
"equipmentPlaceholder": "Choisir mon matériel…",
"gearSaved": "Matériel enregistré 💪"
}, },
"common": { "common": {
"loading": "Chargement…", "loading": "Chargement…",
+13 -4
View File
@@ -1,5 +1,7 @@
{ {
"app": { "tagline": "Mantenha a chama." }, "app": {
"tagline": "Mantenha a chama."
},
"nav": { "nav": {
"dashboard": "Início", "dashboard": "Início",
"exercises": "Exercícios", "exercises": "Exercícios",
@@ -43,7 +45,9 @@
"instructions": "Instruções", "instructions": "Instruções",
"secondaryMuscles": "Músculos secundários", "secondaryMuscles": "Músculos secundários",
"noResults": "Nenhum exercício encontrado.", "noResults": "Nenhum exercício encontrado.",
"all": "Todos" "all": "Todos",
"equipment": "Equipamento",
"myGear": "Meu material"
}, },
"session": { "session": {
"inProgress": "Treino em andamento", "inProgress": "Treino em andamento",
@@ -54,7 +58,8 @@
"live": "ao vivo", "live": "ao vivo",
"preparing": "Preparando seu treino…", "preparing": "Preparando seu treino…",
"cantStart": "Não foi possível iniciar o treino", "cantStart": "Não foi possível iniciar o treino",
"streakToast": "Sequência: {n} dias" "streakToast": "Sequência: {n} dias",
"target": "Meta"
}, },
"routines": { "routines": {
"new": "Nova", "new": "Nova",
@@ -91,7 +96,11 @@
"reminders": "Lembretes de sequência 🔥", "reminders": "Lembretes de sequência 🔥",
"remindersDesc": "Um lembrete à noite se você corre risco de perder a chama.", "remindersDesc": "Um lembrete à noite se você corre risco de perder a chama.",
"test": "Enviar um teste", "test": "Enviar um teste",
"remindersOn": "Lembretes ativados 🔥" "remindersOn": "Lembretes ativados 🔥",
"equipment": "Meu equipamento",
"equipmentDesc": "Selecione seu equipamento: o catálogo pode filtrar pelo que você tem.",
"equipmentPlaceholder": "Escolher meu equipamento…",
"gearSaved": "Equipamento salvo 💪"
}, },
"common": { "common": {
"loading": "Carregando…", "loading": "Carregando…",