popup on goals save

This commit is contained in:
Piotr Domański 2026-04-08 12:48:20 +02:00
parent 80e1c33c8c
commit a219b4449a
2 changed files with 52 additions and 0 deletions

View file

@ -2,6 +2,7 @@
import type { Diary } from '$lib/types/api'; import type { Diary } from '$lib/types/api';
import { kcal, g } from '$lib/utils/format'; import { kcal, g } from '$lib/utils/format';
import { updateDiary } from '$lib/api/diary'; import { updateDiary } from '$lib/api/diary';
import { updateUserSettings } from '$lib/api/settings';
import { useQueryClient } from '@tanstack/svelte-query'; import { useQueryClient } from '@tanstack/svelte-query';
import Sheet from '$lib/components/ui/Sheet.svelte'; import Sheet from '$lib/components/ui/Sheet.svelte';
@ -31,6 +32,8 @@
// Goal editing sheet // Goal editing sheet
let sheetOpen = $state(false); let sheetOpen = $state(false);
let saving = $state(false); let saving = $state(false);
let syncSettingsOpen = $state(false);
let lastSavedForm: typeof form | null = null;
let form = $state<{ let form = $state<{
calories_goal: number | null; calories_goal: number | null;
protein_goal: number; protein_goal: number;
@ -61,11 +64,19 @@
try { try {
await updateDiary(date, form); await updateDiary(date, form);
await queryClient.invalidateQueries({ queryKey: ['diary', date] }); await queryClient.invalidateQueries({ queryKey: ['diary', date] });
lastSavedForm = { ...form };
sheetOpen = false; sheetOpen = false;
syncSettingsOpen = true;
} finally { } finally {
saving = false; saving = false;
} }
} }
async function handleSyncToSettings() {
if (!lastSavedForm) return;
await updateUserSettings(lastSavedForm);
syncSettingsOpen = false;
}
</script> </script>
<div class="bg-zinc-900 rounded-2xl p-4 relative"> <div class="bg-zinc-900 rounded-2xl p-4 relative">
@ -125,6 +136,20 @@
</div> </div>
</div> </div>
<Sheet open={syncSettingsOpen} onclose={() => syncSettingsOpen = false} title="Update global settings?">
<p class="text-sm text-zinc-400 mb-5">Override your default macro goals in user settings with these values as well?</p>
<div class="flex gap-3">
<button
onclick={() => syncSettingsOpen = false}
class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors"
>No</button>
<button
onclick={handleSyncToSettings}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button>
</div>
</Sheet>
<Sheet open={sheetOpen} onclose={() => sheetOpen = false} title="Day goals"> <Sheet open={sheetOpen} onclose={() => sheetOpen = false} title="Day goals">
<form onsubmit={handleSave} class="space-y-4"> <form onsubmit={handleSave} class="space-y-4">
<!-- Calories: null = auto-calculated by server from macros --> <!-- Calories: null = auto-calculated by server from macros -->

View file

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { createQuery, useQueryClient } from '@tanstack/svelte-query'; import { createQuery, useQueryClient } from '@tanstack/svelte-query';
import { getUserSettings, updateUserSettings } from '$lib/api/settings'; import { getUserSettings, updateUserSettings } from '$lib/api/settings';
import { updateDiary } from '$lib/api/diary';
import TopBar from '$lib/components/ui/TopBar.svelte'; import TopBar from '$lib/components/ui/TopBar.svelte';
import Sheet from '$lib/components/ui/Sheet.svelte';
import { today } from '$lib/utils/date'; import { today } from '$lib/utils/date';
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -15,6 +17,8 @@
let saving = $state(false); let saving = $state(false);
let saved = $state(false); let saved = $state(false);
let error = $state(''); let error = $state('');
let syncDiaryOpen = $state(false);
let lastSavedForm: typeof form | null = null;
let form = $state<{ let form = $state<{
calories_goal: number | null; calories_goal: number | null;
@ -49,14 +53,23 @@
try { try {
await updateUserSettings(form); await updateUserSettings(form);
queryClient.invalidateQueries({ queryKey: ['user-settings'] }); queryClient.invalidateQueries({ queryKey: ['user-settings'] });
lastSavedForm = { ...form };
saved = true; saved = true;
setTimeout(() => { saved = false; }, 2000); setTimeout(() => { saved = false; }, 2000);
syncDiaryOpen = true;
} catch { } catch {
error = 'Failed to save settings'; error = 'Failed to save settings';
} finally { } finally {
saving = false; saving = false;
} }
} }
async function handleSyncToDiary() {
if (!lastSavedForm) return;
await updateDiary(today(), lastSavedForm);
queryClient.invalidateQueries({ queryKey: ['diary', today()] });
syncDiaryOpen = false;
}
</script> </script>
<div class="flex flex-col h-screen"> <div class="flex flex-col h-screen">
@ -139,3 +152,17 @@
{/if} {/if}
</main> </main>
</div> </div>
<Sheet open={syncDiaryOpen} onclose={() => syncDiaryOpen = false} title="Update today's diary?">
<p class="text-sm text-zinc-400 mb-5">Override today's diary macro goals with these values as well?</p>
<div class="flex gap-3">
<button
onclick={() => syncDiaryOpen = false}
class="flex-1 bg-zinc-800 hover:bg-zinc-700 rounded-xl py-3 text-sm font-medium transition-colors"
>No</button>
<button
onclick={handleSyncToDiary}
class="flex-1 bg-green-600 hover:bg-green-500 rounded-xl py-3 font-semibold transition-colors"
>Yes</button>
</div>
</Sheet>