26c6d8031c
Application Laravel 12 + Inertia + Vue 3 + Tailwind. Fonctionnalités : dashboard glycémique, saisie de mesures, courbe SVG, statistiques (jour/semaine/mois/trimestre), défis & badges, chat coach IA (Gemini), paramètres profil avec palette de couleurs, pages auth redessinées, emails transactionnels via Resend avec thème Diabetix. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
105 lines
5.0 KiB
Vue
105 lines
5.0 KiB
Vue
<script setup>
|
||
import InputError from '@/Components/InputError.vue';
|
||
import InputLabel from '@/Components/InputLabel.vue';
|
||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||
import TextInput from '@/Components/TextInput.vue';
|
||
import { Link, useForm, usePage } from '@inertiajs/vue3';
|
||
|
||
const user = usePage().props.auth.user;
|
||
|
||
const form = useForm({
|
||
first_name: user.first_name ?? '',
|
||
diabetes_type: user.diabetes_type ?? 'type2',
|
||
target_min: user.target_min ?? 70,
|
||
target_max: user.target_max ?? 180,
|
||
palette: user.palette ?? 'mint',
|
||
});
|
||
|
||
const palettes = [
|
||
{ id: 'mint', label: 'Menthe', swatch: '#7bbfb5' },
|
||
{ id: 'lilac', label: 'Lilas', swatch: '#9b8ec4' },
|
||
{ id: 'peach', label: 'Pêche', swatch: '#d4826a' },
|
||
];
|
||
|
||
const types = [
|
||
{ id: 'type1', label: 'Type 1' },
|
||
{ id: 'type2', label: 'Type 2' },
|
||
{ id: 'gestational', label: 'Gestationnel' },
|
||
{ id: 'other', label: 'Autre' },
|
||
];
|
||
</script>
|
||
|
||
<template>
|
||
<section>
|
||
<header>
|
||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Préférences Diabetix</h2>
|
||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||
Personnalisez votre prénom, votre type de diabète, votre plage cible (mg/dL) et le thème de l'application.
|
||
</p>
|
||
</header>
|
||
|
||
<form @submit.prevent="form.patch(route('profile.diabetix'), { preserveScroll: true })" class="mt-6 space-y-6">
|
||
<div>
|
||
<InputLabel for="first_name" value="Prénom" />
|
||
<TextInput id="first_name" v-model="form.first_name" type="text" class="mt-1 block w-full" autocomplete="given-name" />
|
||
<InputError :message="form.errors.first_name" class="mt-2" />
|
||
</div>
|
||
|
||
<div>
|
||
<InputLabel value="Type de diabète" />
|
||
<div class="mt-2 flex flex-wrap gap-2">
|
||
<button v-for="t in types" :key="t.id" type="button" @click="form.diabetes_type = t.id"
|
||
:class="[
|
||
'rounded-full border px-4 py-1.5 text-sm transition',
|
||
form.diabetes_type === t.id
|
||
? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200'
|
||
: 'border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700',
|
||
]">{{ t.label }}</button>
|
||
</div>
|
||
<InputError :message="form.errors.diabetes_type" class="mt-2" />
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<InputLabel for="target_min" value="Cible min (mg/dL)" />
|
||
<TextInput id="target_min" v-model.number="form.target_min" type="number" min="50" max="140" class="mt-1 block w-full" />
|
||
<InputError :message="form.errors.target_min" class="mt-2" />
|
||
</div>
|
||
<div>
|
||
<InputLabel for="target_max" value="Cible max (mg/dL)" />
|
||
<TextInput id="target_max" v-model.number="form.target_max" type="number" min="120" max="300" class="mt-1 block w-full" />
|
||
<InputError :message="form.errors.target_max" class="mt-2" />
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||
Valeurs par défaut OMS / consensus international : 70–180 mg/dL.
|
||
</p>
|
||
|
||
<div>
|
||
<InputLabel value="Thème de couleur" />
|
||
<div class="mt-2 flex gap-3">
|
||
<button v-for="p in palettes" :key="p.id" type="button" @click="form.palette = p.id"
|
||
:class="[
|
||
'flex items-center gap-2 rounded-full border px-4 py-2 text-sm transition',
|
||
form.palette === p.id
|
||
? 'border-gray-900 dark:border-gray-100'
|
||
: 'border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700',
|
||
]">
|
||
<span class="block h-4 w-4 rounded-full" :style="{ background: p.swatch }" />
|
||
<span>{{ p.label }}</span>
|
||
</button>
|
||
</div>
|
||
<InputError :message="form.errors.palette" class="mt-2" />
|
||
</div>
|
||
|
||
<div class="flex items-center gap-4">
|
||
<PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
|
||
<Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
|
||
<p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Préférences enregistrées.</p>
|
||
</Transition>
|
||
<Link :href="route('dashboard')" class="ml-auto text-sm text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100">← Retour à l'app</Link>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</template>
|