Initial commit: Second Brain Platform
Complete platform with unified design system and real API integration. Apps: Dashboard, Fitness, Budget, Inventory, Trips, Reader, Media, Settings Infrastructure: SvelteKit + Python gateway + Docker Compose
This commit is contained in:
Yusuf Suleman
37
services/fitness/frontend-legacy/src/routes/+layout.svelte
Normal file
37
services/fitness/frontend-legacy/src/routes/+layout.svelte
Normal file
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import Navbar from '$lib/components/Navbar.svelte';
|
||||
import { get, hasToken } from '$lib/api/client.ts';
|
||||
import type { User } from '$lib/api/types.ts';
|
||||
import { page } from '$app/state';
|
||||
|
||||
let { children } = $props();
|
||||
let user = $state<User | null>(null);
|
||||
|
||||
let currentPage = $derived(
|
||||
page.url.pathname === '/' ? 'dashboard' :
|
||||
page.url.pathname.startsWith('/foods') ? 'foods' :
|
||||
page.url.pathname.startsWith('/goals') ? 'goals' :
|
||||
page.url.pathname.startsWith('/templates') ? 'templates' :
|
||||
page.url.pathname.startsWith('/admin') ? 'admin' : ''
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
if (typeof window !== 'undefined' && hasToken() && !page.url.pathname.startsWith('/login')) {
|
||||
get<User>('/api/user').then(u => user = u).catch(() => {});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Calorie Tracker</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-base-100 flex flex-col">
|
||||
{#if !page.url.pathname.startsWith('/login')}
|
||||
<Navbar {user} {currentPage} />
|
||||
{/if}
|
||||
<main class="flex-1">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
297
services/fitness/frontend-legacy/src/routes/+page.svelte
Normal file
297
services/fitness/frontend-legacy/src/routes/+page.svelte
Normal file
@@ -0,0 +1,297 @@
|
||||
<script lang="ts">
|
||||
import { get, del, today, formatDate } from '$lib/api/client.ts';
|
||||
import type { FoodEntry, DailyTotals, Goal, User, MealType, QueueItem } from '$lib/api/types.ts';
|
||||
import { MEAL_TYPES } from '$lib/api/types.ts';
|
||||
import AddFoodModal from '$lib/components/AddFoodModal.svelte';
|
||||
|
||||
let selectedDate = $state(today());
|
||||
let entries = $state<FoodEntry[]>([]);
|
||||
let totals = $state<DailyTotals>({ total_calories: 0, total_protein: 0, total_carbs: 0, total_fat: 0, entry_count: 0 });
|
||||
let goal = $state<Goal | null>(null);
|
||||
let users = $state<User[]>([]);
|
||||
let selectedUser = $state('');
|
||||
let showAddModal = $state(false);
|
||||
let addMealType = $state<MealType>('snack');
|
||||
let queueCount = $state(0);
|
||||
let loading = $state(true);
|
||||
let expandedMeals = $state<Set<string>>(new Set(['breakfast', 'lunch', 'dinner', 'snack']));
|
||||
|
||||
let isToday = $derived(selectedDate === today());
|
||||
|
||||
$effect(() => { loadUsers(); });
|
||||
$effect(() => { if (selectedUser) loadDay(); });
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
users = await get<User[]>('/api/users');
|
||||
const me = await get<User>('/api/user');
|
||||
selectedUser = me.id;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function loadDay() {
|
||||
loading = true;
|
||||
try {
|
||||
const [e, t, g, q] = await Promise.all([
|
||||
get<FoodEntry[]>(`/api/entries?date=${selectedDate}&user_id=${selectedUser}`),
|
||||
get<DailyTotals>(`/api/entries/totals?date=${selectedDate}&user_id=${selectedUser}`),
|
||||
get<Goal>(`/api/goals/for-date?date=${selectedDate}&user_id=${selectedUser}`).catch(() => null),
|
||||
get<QueueItem[]>('/api/resolution-queue').catch(() => []),
|
||||
]);
|
||||
entries = e; totals = t; goal = g; queueCount = q.length;
|
||||
} catch {} finally { loading = false; }
|
||||
}
|
||||
|
||||
function entriesByMeal(meal: MealType) { return entries.filter(e => e.meal_type === meal); }
|
||||
function mealCalories(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.snapshot_calories, 0); }
|
||||
function mealProtein(meal: MealType) { return entriesByMeal(meal).reduce((s, e) => s + e.snapshot_protein, 0); }
|
||||
|
||||
async function deleteEntry(id: string) { await del(`/api/entries/${id}`); loadDay(); }
|
||||
function openAdd(meal: MealType) { addMealType = meal; showAddModal = true; }
|
||||
|
||||
function shiftDate(days: number) {
|
||||
const d = new Date(selectedDate + 'T00:00:00');
|
||||
d.setDate(d.getDate() + days);
|
||||
selectedDate = d.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
function toggleMeal(meal: string) {
|
||||
const next = new Set(expandedMeals);
|
||||
if (next.has(meal)) next.delete(meal); else next.add(meal);
|
||||
expandedMeals = next;
|
||||
}
|
||||
|
||||
function userName(id: string) { return users.find(u => u.id === id)?.display_name || ''; }
|
||||
</script>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- Header row: title, date picker, user — all aligned -->
|
||||
<div class="flex items-center justify-between gap-4 mb-8">
|
||||
<h1 class="text-3xl font-bold">
|
||||
{#if isToday}Today{:else}{formatDate(selectedDate)}{/if}
|
||||
</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => shiftDate(-1)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
<input type="date" class="input input-bordered input-sm" bind:value={selectedDate} />
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => shiftDate(1)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
{#if !isToday}
|
||||
<button class="btn btn-ghost btn-xs" onclick={() => selectedDate = today()}>Today</button>
|
||||
{/if}
|
||||
<div class="divider divider-horizontal mx-0"></div>
|
||||
<select class="select select-bordered select-sm" bind:value={selectedUser}>
|
||||
{#each users as u}<option value={u.id}>{u.display_name}</option>{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-16"><span class="loading loading-spinner loading-lg text-primary"></span></div>
|
||||
{:else}
|
||||
<!-- Review queue -->
|
||||
{#if queueCount > 0}
|
||||
<a href="/admin" class="flex items-center justify-between bg-base-200 rounded-xl p-4 mb-6 border-l-4 border-l-warning">
|
||||
<div>
|
||||
<div class="font-medium text-sm">{queueCount} food{queueCount > 1 ? 's' : ''} need review</div>
|
||||
<div class="text-xs text-base-content/50">Tap to resolve</div>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<!-- Stats cards (trips StatsBar style, with goal progress built in) -->
|
||||
{@const g = goal}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex flex-row items-center gap-3">
|
||||
<div class="p-3 rounded-2xl bg-primary/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_calories)}</div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Calories</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if g}
|
||||
<progress class="progress progress-primary w-full h-1.5 mt-3" value={Math.min(totals.total_calories / g.calories * 100, 100)} max="100"></progress>
|
||||
<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.calories - totals.total_calories, 0))} left of {Math.round(g.calories)}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-gradient-to-br from-secondary/10 to-secondary/5 border border-secondary/20 shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex flex-row items-center gap-3">
|
||||
<div class="p-3 rounded-2xl bg-secondary/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 1 0-7 0"/><path d="M1.5 21v-1a7 7 0 0 1 7-7"/><path d="M17.5 12l2 2 4-4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_protein)}g</div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Protein</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if g}
|
||||
<progress class="progress progress-secondary w-full h-1.5 mt-3" value={Math.min(totals.total_protein / g.protein * 100, 100)} max="100"></progress>
|
||||
<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.protein - totals.total_protein, 0))}g left of {Math.round(g.protein)}g</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20 shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex flex-row items-center gap-3">
|
||||
<div class="p-3 rounded-2xl bg-accent/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22 16 8"/><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_carbs)}g</div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Carbs</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if g}
|
||||
<progress class="progress progress-accent w-full h-1.5 mt-3" value={Math.min(totals.total_carbs / g.carbs * 100, 100)} max="100"></progress>
|
||||
<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.carbs - totals.total_carbs, 0))}g left of {Math.round(g.carbs)}g</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex flex-row items-center gap-3">
|
||||
<div class="p-3 rounded-2xl bg-info/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-base-content">{Math.round(totals.total_fat)}g</div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Fat</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if g}
|
||||
<progress class="progress progress-info w-full h-1.5 mt-3" value={Math.min(totals.total_fat / g.fat * 100, 100)} max="100"></progress>
|
||||
<div class="text-xs text-base-content/40 mt-1">{Math.round(Math.max(g.fat - totals.total_fat, 0))}g left of {Math.round(g.fat)}g</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !g}
|
||||
<div class="text-center text-sm text-base-content/40 mb-8">
|
||||
<a href="/goals" class="link link-primary">Set goals</a> to see progress bars
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Meals (trip day-view style: collapsible sections with timeline) -->
|
||||
{#each MEAL_TYPES as meal}
|
||||
{@const mealEntries = entriesByMeal(meal)}
|
||||
{@const mCal = mealCalories(meal)}
|
||||
{@const mPro = mealProtein(meal)}
|
||||
{@const expanded = expandedMeals.has(meal)}
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- Meal header (like trip day header) -->
|
||||
<button class="w-full flex items-center gap-3 py-3 group" onclick={() => toggleMeal(meal)}>
|
||||
<div class="w-10 h-10 rounded-full {mealEntries.length > 0 ? 'bg-primary/15' : 'bg-base-300'} flex items-center justify-center shrink-0">
|
||||
<span class="text-sm font-bold {mealEntries.length > 0 ? 'text-primary' : 'text-base-content/30'}">{MEAL_TYPES.indexOf(meal) + 1}</span>
|
||||
</div>
|
||||
<div class="flex-1 text-left">
|
||||
<span class="font-bold capitalize">{meal}</span>
|
||||
{#if mCal > 0}
|
||||
<span class="text-base-content/40 text-sm ml-2">{Math.round(mCal)} cal</span>
|
||||
<span class="text-base-content/30 text-xs ml-1">· {Math.round(mPro)}g protein</span>
|
||||
{/if}
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-base-content/30 transition-transform {expanded ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
|
||||
{#if expanded}
|
||||
<div class="ml-4 border-l-2 border-base-300 pl-7">
|
||||
{#if mealEntries.length > 0}
|
||||
{#each mealEntries as entry}
|
||||
<div class="bg-base-200 rounded-xl mb-2 overflow-hidden group hover:shadow-md transition-shadow {entry.food_image_path ? '' : 'p-4'}">
|
||||
{#if entry.food_image_path}
|
||||
<div class="relative h-28">
|
||||
<img src="/images/{entry.food_image_path}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-base-300/90 via-base-300/30 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-3 flex items-end justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-base-content">{entry.snapshot_food_name}</div>
|
||||
<div class="text-xs text-base-content/60">
|
||||
{entry.serving_description || `${entry.quantity} ${entry.unit}`}
|
||||
{#if entry.entry_method === 'ai_plate' || entry.entry_method === 'ai_label'}
|
||||
<span class="badge badge-xs badge-info">AI</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if entry.note}
|
||||
<div class="text-xs text-base-content/40 italic">{entry.note}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="font-bold text-base-content">{Math.round(entry.snapshot_calories)}</div>
|
||||
<div class="text-xs text-base-content/60">cal</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-ghost btn-xs btn-circle absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-base-300/50"
|
||||
onclick={() => deleteEntry(entry.id)}
|
||||
title="Delete"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium">{entry.snapshot_food_name}</div>
|
||||
<div class="text-xs text-base-content/40 mt-0.5 flex items-center gap-2">
|
||||
<span>{entry.serving_description || `${entry.quantity} ${entry.unit}`}</span>
|
||||
{#if entry.entry_method === 'ai_plate' || entry.entry_method === 'ai_label'}
|
||||
<span class="badge badge-xs badge-info">AI</span>
|
||||
{/if}
|
||||
{#if entry.entry_method === 'quick_add'}
|
||||
<span class="badge badge-xs badge-ghost">quick</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if entry.note}
|
||||
<div class="text-xs text-base-content/30 italic mt-0.5">{entry.note}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-right">
|
||||
<div class="font-bold">{Math.round(entry.snapshot_calories)}</div>
|
||||
<div class="text-xs text-base-content/40">cal</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onclick={() => deleteEntry(entry.id)}
|
||||
title="Delete"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/30" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="py-3 text-sm text-base-content/30">No entries</div>
|
||||
{/if}
|
||||
<button class="btn btn-ghost btn-sm gap-1 text-primary mt-1 mb-4" onclick={() => openAdd(meal)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
|
||||
Add food
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- FAB for quick add (like trips) -->
|
||||
<button class="btn btn-primary btn-circle btn-lg shadow-lg fixed bottom-6 right-6 z-40" onclick={() => openAdd('snack')}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
|
||||
</button>
|
||||
|
||||
{#if showAddModal}
|
||||
<AddFoodModal date={selectedDate} defaultMeal={addMealType} onSave={() => { showAddModal = false; loadDay(); }} onClose={() => showAddModal = false} />
|
||||
{/if}
|
||||
171
services/fitness/frontend-legacy/src/routes/admin/+page.svelte
Normal file
171
services/fitness/frontend-legacy/src/routes/admin/+page.svelte
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts">
|
||||
import { get, post } from '$lib/api/client.ts';
|
||||
import type { QueueItem, Food } from '$lib/api/types.ts';
|
||||
|
||||
let queue = $state<QueueItem[]>([]);
|
||||
let loading = $state(true);
|
||||
let tab = $state<'queue' | 'merge'>('queue');
|
||||
|
||||
let mergeSourceQuery = $state('');
|
||||
let mergeTargetQuery = $state('');
|
||||
let mergeSource = $state<Food | null>(null);
|
||||
let mergeTarget = $state<Food | null>(null);
|
||||
let mergeSourceResults = $state<Food[]>([]);
|
||||
let mergeTargetResults = $state<Food[]>([]);
|
||||
let merging = $state(false);
|
||||
|
||||
$effect(() => { loadQueue(); });
|
||||
|
||||
async function loadQueue() {
|
||||
loading = true;
|
||||
try { queue = await get<QueueItem[]>('/api/resolution-queue'); }
|
||||
catch {} finally { loading = false; }
|
||||
}
|
||||
|
||||
function parseCandidates(json: string | undefined): Array<{ food_id: string; name: string; score: number }> {
|
||||
if (!json) return [];
|
||||
try { return JSON.parse(json); } catch { return []; }
|
||||
}
|
||||
|
||||
async function resolveItem(queueId: string, action: string, foodId?: string) {
|
||||
await post(`/api/resolution-queue/${queueId}/resolve`, { action, food_id: foodId });
|
||||
loadQueue();
|
||||
}
|
||||
|
||||
async function searchMerge(query: string, which: 'source' | 'target') {
|
||||
if (!query.trim()) return;
|
||||
const results = await get<Food[]>(`/api/foods/search?q=${encodeURIComponent(query)}&limit=5`);
|
||||
if (which === 'source') mergeSourceResults = results;
|
||||
else mergeTargetResults = results;
|
||||
}
|
||||
|
||||
async function doMerge() {
|
||||
if (!mergeSource || !mergeTarget) return;
|
||||
if (!confirm(`Merge "${mergeSource.name}" into "${mergeTarget.name}"? Source will be archived.`)) return;
|
||||
merging = true;
|
||||
try {
|
||||
await post('/api/foods/merge', { source_id: mergeSource.id, target_id: mergeTarget.id });
|
||||
mergeSource = null; mergeTarget = null;
|
||||
mergeSourceQuery = ''; mergeTargetQuery = '';
|
||||
alert('Merged successfully');
|
||||
} catch {} finally { merging = false; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-3xl mx-auto px-4 py-6">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-3xl font-bold">Admin</h1>
|
||||
<p class="text-base-content/50 text-sm mt-0.5">Review queue and manage duplicates</p>
|
||||
</div>
|
||||
|
||||
<div role="tablist" class="tabs tabs-boxed mb-6">
|
||||
<button role="tab" class="tab gap-2" class:tab-active={tab === 'queue'} onclick={() => tab = 'queue'}>
|
||||
Review Queue
|
||||
{#if queue.length > 0}<span class="badge badge-sm badge-warning">{queue.length}</span>{/if}
|
||||
</button>
|
||||
<button role="tab" class="tab" class:tab-active={tab === 'merge'} onclick={() => tab = 'merge'}>Merge Foods</button>
|
||||
</div>
|
||||
|
||||
{#if tab === 'queue'}
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-12"><span class="loading loading-spinner loading-lg text-primary"></span></div>
|
||||
{:else if queue.length === 0}
|
||||
<div class="text-center py-16">
|
||||
<div class="p-4 rounded-2xl bg-success/15 inline-block mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
</div>
|
||||
<div class="text-base-content/50">No items to review</div>
|
||||
<div class="text-sm text-base-content/30 mt-1">All caught up!</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each queue as item}
|
||||
{@const candidates = parseCandidates(item.candidates_json)}
|
||||
<div class="rounded-xl border border-warning/20 bg-gradient-to-br from-warning/5 to-warning/0 p-5 shadow-sm card-hover">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<div class="font-bold text-lg">"{item.raw_text}"</div>
|
||||
<div class="flex gap-2 mt-1 text-xs text-base-content/40">
|
||||
{#if item.source}<span class="badge badge-xs badge-ghost">{item.source}</span>{/if}
|
||||
<span>confidence: {(item.confidence * 100).toFixed(0)}%</span>
|
||||
{#if item.meal_type}<span>{item.meal_type}</span>{/if}
|
||||
{#if item.entry_date}<span>{item.entry_date}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-ghost btn-sm" onclick={() => resolveItem(item.id, 'dismissed')}>Dismiss</button>
|
||||
</div>
|
||||
|
||||
{#if candidates.length > 0}
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-2">Match to existing</div>
|
||||
<div class="space-y-1.5">
|
||||
{#each candidates as c}
|
||||
<button
|
||||
class="btn btn-sm btn-outline w-full justify-between"
|
||||
onclick={() => resolveItem(item.id, 'matched', c.food_id)}
|
||||
>
|
||||
<span>{c.name}</span>
|
||||
<span class="badge badge-sm badge-ghost">{(c.score * 100).toFixed(0)}%</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm text-base-content/30">No candidates — create a new food manually from the Foods page</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<div class="rounded-xl border border-base-300 bg-base-200/50 p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 rounded-xl bg-secondary/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" viewBox="0 0 20 20" fill="currentColor"><path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-bold text-lg">Merge Duplicate Foods</h2>
|
||||
<p class="text-xs text-base-content/40">Source gets archived. Entries and aliases move to target.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<div class="text-xs text-error font-medium uppercase tracking-wide mb-2">Source (will be archived)</div>
|
||||
<div class="flex gap-1 mb-2">
|
||||
<input class="input input-bordered input-sm flex-1" placeholder="Search..." bind:value={mergeSourceQuery} />
|
||||
<button class="btn btn-sm btn-ghost" onclick={() => searchMerge(mergeSourceQuery, 'source')}>Go</button>
|
||||
</div>
|
||||
{#if mergeSource}
|
||||
<div class="rounded-lg border border-error/30 bg-error/5 p-3 text-sm font-medium">{mergeSource.name}</div>
|
||||
{/if}
|
||||
{#each mergeSourceResults as f}
|
||||
<button class="btn btn-sm btn-ghost w-full justify-start mt-1 text-left" onclick={() => { mergeSource = f; mergeSourceResults = []; }}>
|
||||
{f.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-success font-medium uppercase tracking-wide mb-2">Target (will keep)</div>
|
||||
<div class="flex gap-1 mb-2">
|
||||
<input class="input input-bordered input-sm flex-1" placeholder="Search..." bind:value={mergeTargetQuery} />
|
||||
<button class="btn btn-sm btn-ghost" onclick={() => searchMerge(mergeTargetQuery, 'target')}>Go</button>
|
||||
</div>
|
||||
{#if mergeTarget}
|
||||
<div class="rounded-lg border border-success/30 bg-success/5 p-3 text-sm font-medium">{mergeTarget.name}</div>
|
||||
{/if}
|
||||
{#each mergeTargetResults as f}
|
||||
<button class="btn btn-sm btn-ghost w-full justify-start mt-1 text-left" onclick={() => { mergeTarget = f; mergeTargetResults = []; }}>
|
||||
{f.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-warning w-full mt-6 gap-2" onclick={doMerge} disabled={!mergeSource || !mergeTarget || merging}>
|
||||
{#if merging}<span class="loading loading-spinner loading-sm"></span>{/if}
|
||||
Merge Foods
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
338
services/fitness/frontend-legacy/src/routes/foods/+page.svelte
Normal file
338
services/fitness/frontend-legacy/src/routes/foods/+page.svelte
Normal file
@@ -0,0 +1,338 @@
|
||||
<script lang="ts">
|
||||
import { get, post, patch, del } from '$lib/api/client.ts';
|
||||
import type { Food } from '$lib/api/types.ts';
|
||||
|
||||
let query = $state('');
|
||||
let allFoods = $state<Food[]>([]);
|
||||
let favorites = $state<Food[]>([]);
|
||||
let loading = $state(true);
|
||||
let editFood = $state<Food | null>(null);
|
||||
let showCreate = $state(false);
|
||||
let tab = $state<'all' | 'favorites'>('all');
|
||||
|
||||
// Image picker state
|
||||
let imageQuery = $state('');
|
||||
let imageResults = $state<Array<{url: string; thumbnail: string; title: string}>>([]);
|
||||
let imageSearching = $state(false);
|
||||
let imageSettingUrl = $state('');
|
||||
|
||||
async function searchImages() {
|
||||
if (!imageQuery.trim() || !editFood) return;
|
||||
imageSearching = true;
|
||||
try {
|
||||
const res = await post<{images: Array<{url: string; thumbnail: string; title: string}>}>('/api/images/search', { query: imageQuery + ' food', num: 9 });
|
||||
imageResults = res.images || [];
|
||||
} catch {} finally { imageSearching = false; }
|
||||
}
|
||||
|
||||
async function pickImage(fullUrl: string, thumbnailUrl: string) {
|
||||
if (!editFood) return;
|
||||
imageSettingUrl = fullUrl;
|
||||
const foodId = editFood.id;
|
||||
const urls = [fullUrl, thumbnailUrl];
|
||||
|
||||
for (const url of urls) {
|
||||
try {
|
||||
const res = await post<{success: boolean; image_path?: string}>(`/api/foods/${foodId}/image`, { url });
|
||||
if (res.success && res.image_path) {
|
||||
if (editFood) editFood.image_path = res.image_path;
|
||||
imageResults = [];
|
||||
imageSettingUrl = '';
|
||||
loadAll();
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
imageSettingUrl = '';
|
||||
}
|
||||
|
||||
let newName = $state('');
|
||||
let newBrand = $state('');
|
||||
let newCal = $state(0);
|
||||
let newProtein = $state(0);
|
||||
let newCarbs = $state(0);
|
||||
let newFat = $state(0);
|
||||
let newUnit = $state('100g');
|
||||
let newServingName = $state('');
|
||||
let newServingAmount = $state(1);
|
||||
|
||||
let filtered = $derived(
|
||||
query.trim()
|
||||
? allFoods.filter(f => f.name.toLowerCase().includes(query.toLowerCase()) || (f.brand || '').toLowerCase().includes(query.toLowerCase()))
|
||||
: allFoods
|
||||
);
|
||||
|
||||
$effect(() => { loadAll(); });
|
||||
|
||||
async function loadAll() {
|
||||
loading = true;
|
||||
try {
|
||||
[allFoods, favorites] = await Promise.all([
|
||||
get<Food[]>('/api/foods'),
|
||||
get<Food[]>('/api/favorites'),
|
||||
]);
|
||||
} catch {} finally { loading = false; }
|
||||
}
|
||||
|
||||
async function toggleFavorite(food: Food) {
|
||||
const isFav = favorites.some(f => f.id === food.id);
|
||||
if (isFav) { await del(`/api/favorites/${food.id}`); }
|
||||
else { await post('/api/favorites', { food_id: food.id }); }
|
||||
loadAll();
|
||||
}
|
||||
|
||||
async function createFood() {
|
||||
const servings = [{ name: `1 ${newUnit}`, amount_in_base: 1.0, is_default: true }];
|
||||
if (newServingName) servings.push({ name: newServingName, amount_in_base: newServingAmount, is_default: false });
|
||||
await post('/api/foods', {
|
||||
name: newName, brand: newBrand || undefined,
|
||||
calories_per_base: newCal, protein_per_base: newProtein,
|
||||
carbs_per_base: newCarbs, fat_per_base: newFat,
|
||||
base_unit: newUnit, servings,
|
||||
});
|
||||
showCreate = false;
|
||||
newName = ''; newBrand = ''; newCal = 0; newProtein = 0; newCarbs = 0; newFat = 0;
|
||||
loadAll();
|
||||
}
|
||||
|
||||
async function deleteFood() {
|
||||
if (!editFood) return;
|
||||
if (!confirm(`Delete "${editFood.name}"? This will archive it.`)) return;
|
||||
await del(`/api/foods/${editFood.id}`);
|
||||
editFood = null;
|
||||
loadAll();
|
||||
}
|
||||
|
||||
async function updateFood() {
|
||||
if (!editFood) return;
|
||||
await patch(`/api/foods/${editFood.id}`, {
|
||||
name: editFood.name, brand: editFood.brand,
|
||||
calories_per_base: editFood.calories_per_base,
|
||||
protein_per_base: editFood.protein_per_base,
|
||||
carbs_per_base: editFood.carbs_per_base,
|
||||
fat_per_base: editFood.fat_per_base,
|
||||
status: editFood.status,
|
||||
});
|
||||
editFood = null;
|
||||
loadAll();
|
||||
}
|
||||
|
||||
async function addAlias(foodId: string) {
|
||||
const alias = prompt('Add alias:');
|
||||
if (alias) {
|
||||
await post(`/api/foods/${foodId}/aliases`, { alias });
|
||||
if (editFood?.id === foodId) editFood = await get<Food>(`/api/foods/${foodId}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-3xl mx-auto px-4 py-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Food Library</h1>
|
||||
<p class="text-base-content/50 text-sm mt-0.5">{allFoods.length} foods saved</p>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm gap-2" onclick={() => showCreate = true}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
|
||||
New Food
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div role="tablist" class="tabs tabs-boxed mb-4">
|
||||
<button role="tab" class="tab" class:tab-active={tab === 'all'} onclick={() => tab = 'all'}>All ({allFoods.length})</button>
|
||||
<button role="tab" class="tab" class:tab-active={tab === 'favorites'} onclick={() => tab = 'favorites'}>Favorites ({favorites.length})</button>
|
||||
</div>
|
||||
|
||||
{#if tab === 'all'}
|
||||
<div class="relative mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/30" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>
|
||||
<input class="input input-bordered w-full pl-10" placeholder="Filter foods..." bind:value={query} />
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-12"><span class="loading loading-spinner loading-lg text-primary"></span></div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each filtered as food}
|
||||
<div class="rounded-xl border border-base-300 bg-base-200/50 p-4 shadow-sm card-hover flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold">{food.name}</span>
|
||||
{#if food.status === 'ai_created'}<span class="badge badge-xs badge-info badge-outline">AI</span>{/if}
|
||||
{#if food.status === 'needs_review'}<span class="badge badge-xs badge-warning">Review</span>{/if}
|
||||
</div>
|
||||
{#if food.brand}<div class="text-xs text-base-content/40">{food.brand}</div>{/if}
|
||||
<div class="flex gap-3 mt-1 text-xs text-base-content/50">
|
||||
<span>{food.calories_per_base} cal</span>
|
||||
<span>{food.protein_per_base}g P</span>
|
||||
<span>{food.carbs_per_base}g C</span>
|
||||
<span>{food.fat_per_base}g F</span>
|
||||
<span class="text-base-content/30">per {food.base_unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-2">
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => toggleFavorite(food)} title="Favorite">
|
||||
{#if favorites.some(f => f.id === food.id)}
|
||||
<span class="text-warning">★</span>
|
||||
{:else}
|
||||
<span class="text-base-content/30">☆</span>
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => { editFood = food; imageResults = []; imageQuery = ''; }} title="Edit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if filtered.length === 0}
|
||||
<div class="text-center py-12 text-base-content/30">
|
||||
{#if query.trim()}No foods match "{query}"{:else}No foods yet{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each favorites as food}
|
||||
<div class="rounded-xl border border-warning/20 bg-gradient-to-br from-warning/5 to-warning/0 p-4 shadow-sm card-hover flex items-center justify-between">
|
||||
<div>
|
||||
<div class="font-semibold">{food.name}</div>
|
||||
<div class="text-xs text-base-content/50">{food.calories_per_base} cal/{food.base_unit}</div>
|
||||
</div>
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => toggleFavorite(food)}>
|
||||
<span class="text-warning">★</span>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
{#if favorites.length === 0}
|
||||
<div class="text-center py-12 text-base-content/30">No favorites yet</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Create food modal -->
|
||||
{#if showCreate}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-lg">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => showCreate = false}>X</button>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 rounded-xl bg-primary/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg">New Food</h3>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<input class="input input-bordered" placeholder="Food name *" bind:value={newName} />
|
||||
<input class="input input-bordered" placeholder="Brand (optional)" bind:value={newBrand} />
|
||||
<select class="select select-bordered" bind:value={newUnit}>
|
||||
<option value="100g">Per 100g</option>
|
||||
<option value="piece">Per piece</option>
|
||||
<option value="serving">Per serving</option>
|
||||
<option value="scoop">Per scoop</option>
|
||||
<option value="slice">Per slice</option>
|
||||
</select>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input class="input input-bordered" type="number" placeholder="Calories" bind:value={newCal} />
|
||||
<input class="input input-bordered" type="number" placeholder="Protein (g)" bind:value={newProtein} />
|
||||
<input class="input input-bordered" type="number" placeholder="Carbs (g)" bind:value={newCarbs} />
|
||||
<input class="input input-bordered" type="number" placeholder="Fat (g)" bind:value={newFat} />
|
||||
</div>
|
||||
<div class="divider text-xs my-0">Optional Serving</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input class="input input-bordered input-sm" placeholder="e.g. 1 cup (240g)" bind:value={newServingName} />
|
||||
<input class="input input-bordered input-sm" type="number" step="0.01" placeholder="Base multiplier" bind:value={newServingAmount} />
|
||||
</div>
|
||||
<button class="btn btn-primary mt-1" onclick={createFood} disabled={!newName}>Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop"><button onclick={() => showCreate = false}>close</button></form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Edit food modal -->
|
||||
{#if editFood}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-lg">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => editFood = null}>X</button>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 rounded-xl bg-info/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-info" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-lg">Edit: {editFood.name}</h3>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<input class="input input-bordered" bind:value={editFood.name} />
|
||||
<input class="input input-bordered" placeholder="Brand" bind:value={editFood.brand} />
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input class="input input-bordered" type="number" bind:value={editFood.calories_per_base} />
|
||||
<input class="input input-bordered" type="number" bind:value={editFood.protein_per_base} />
|
||||
<input class="input input-bordered" type="number" bind:value={editFood.carbs_per_base} />
|
||||
<input class="input input-bordered" type="number" bind:value={editFood.fat_per_base} />
|
||||
</div>
|
||||
<select class="select select-bordered" bind:value={editFood.status}>
|
||||
<option value="confirmed">Confirmed</option>
|
||||
<option value="ai_created">AI Created</option>
|
||||
<option value="needs_review">Needs Review</option>
|
||||
<option value="archived">Archived</option>
|
||||
</select>
|
||||
{#if editFood.aliases}
|
||||
<div class="text-sm font-medium">Aliases</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each editFood.aliases as a}
|
||||
<span class="badge badge-sm badge-outline">{a.alias}</span>
|
||||
{/each}
|
||||
<button class="badge badge-sm badge-primary badge-outline cursor-pointer" onclick={() => addAlias(editFood!.id)}>+ add</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Image picker -->
|
||||
<div class="divider text-xs my-1">Image</div>
|
||||
{#if editFood.image_path}
|
||||
<div class="relative rounded-lg overflow-hidden h-32">
|
||||
<img src="/images/{editFood.image_path}" alt="" class="w-full h-full object-cover" />
|
||||
<div class="absolute bottom-2 right-2">
|
||||
<button class="btn btn-xs btn-ghost bg-base-300/70" onclick={() => { imageQuery = editFood!.name; searchImages(); }}>Change</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="btn btn-sm btn-outline w-full" onclick={() => { imageQuery = editFood!.name; searchImages(); }}>
|
||||
Search for image
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if imageResults.length > 0 || imageSearching}
|
||||
<div class="flex gap-1 mt-2">
|
||||
<input class="input input-bordered input-sm flex-1" placeholder="Search images..." bind:value={imageQuery} onkeydown={(e) => { if (e.key === 'Enter') searchImages(); }} />
|
||||
<button class="btn btn-sm" onclick={searchImages} disabled={imageSearching}>
|
||||
{#if imageSearching}<span class="loading loading-spinner loading-xs"></span>{:else}Search{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 mt-2 max-h-48 overflow-y-auto">
|
||||
{#each imageResults as img}
|
||||
<button
|
||||
class="relative rounded-lg overflow-hidden h-20 hover:ring-2 hover:ring-primary transition-all {imageSettingUrl === img.url ? 'opacity-50' : ''}"
|
||||
onclick={() => pickImage(img.url, img.thumbnail)}
|
||||
disabled={!!imageSettingUrl}
|
||||
>
|
||||
<img src={img.thumbnail} alt={img.title} class="w-full h-full object-cover" />
|
||||
{#if imageSettingUrl === img.url}
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-base-300/50">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<button class="btn btn-primary flex-1" onclick={updateFood}>Save</button>
|
||||
<button class="btn btn-error btn-outline" onclick={deleteFood}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop"><button onclick={() => editFood = null}>close</button></form>
|
||||
</div>
|
||||
{/if}
|
||||
136
services/fitness/frontend-legacy/src/routes/goals/+page.svelte
Normal file
136
services/fitness/frontend-legacy/src/routes/goals/+page.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { get, put } from '$lib/api/client.ts';
|
||||
import type { Goal, User } from '$lib/api/types.ts';
|
||||
import { today } from '$lib/api/client.ts';
|
||||
|
||||
let users = $state<User[]>([]);
|
||||
let selectedUser = $state('');
|
||||
let goals = $state<Goal[]>([]);
|
||||
let loading = $state(true);
|
||||
|
||||
let calories = $state(2000);
|
||||
let protein = $state(150);
|
||||
let carbs = $state(200);
|
||||
let fat = $state(65);
|
||||
let startDate = $state(today());
|
||||
let saving = $state(false);
|
||||
|
||||
$effect(() => { loadUsers(); });
|
||||
$effect(() => { if (selectedUser) loadGoals(); });
|
||||
|
||||
async function loadUsers() {
|
||||
users = await get<User[]>('/api/users');
|
||||
const me = await get<User>('/api/user');
|
||||
selectedUser = me.id;
|
||||
}
|
||||
|
||||
async function loadGoals() {
|
||||
loading = true;
|
||||
try {
|
||||
goals = await get<Goal[]>(`/api/goals?user_id=${selectedUser}`);
|
||||
const current = goals.find(g => g.is_active);
|
||||
if (current) {
|
||||
calories = current.calories; protein = current.protein;
|
||||
carbs = current.carbs; fat = current.fat;
|
||||
}
|
||||
} catch {} finally { loading = false; }
|
||||
}
|
||||
|
||||
async function saveGoal() {
|
||||
saving = true;
|
||||
try {
|
||||
await put('/api/goals', { user_id: selectedUser, start_date: startDate, calories, protein, carbs, fat });
|
||||
loadGoals();
|
||||
} catch {} finally { saving = false; }
|
||||
}
|
||||
|
||||
function userName(id: string) { return users.find(u => u.id === id)?.display_name || ''; }
|
||||
</script>
|
||||
|
||||
<div class="max-w-2xl mx-auto px-4 py-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Goals</h1>
|
||||
<p class="text-base-content/50 text-sm mt-0.5">Daily nutrition targets</p>
|
||||
</div>
|
||||
<select class="select select-bordered select-sm" bind:value={selectedUser}>
|
||||
{#each users as u}
|
||||
<option value={u.id}>{u.display_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-12"><span class="loading loading-spinner loading-lg text-primary"></span></div>
|
||||
{:else}
|
||||
<!-- Set goals card -->
|
||||
<div class="rounded-xl border border-primary/20 bg-gradient-to-br from-primary/10 to-primary/5 p-6 mb-8 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="p-2 rounded-xl bg-primary/15">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>
|
||||
</div>
|
||||
<h2 class="font-bold text-lg">Set Goals for {userName(selectedUser)}</h2>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Start Date</div>
|
||||
<input type="date" class="input input-bordered input-sm w-full max-w-xs" bind:value={startDate} />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Calories</div>
|
||||
<input type="number" class="input input-bordered w-full" bind:value={calories} />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Protein (g)</div>
|
||||
<input type="number" class="input input-bordered w-full" bind:value={protein} />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Carbs (g)</div>
|
||||
<input type="number" class="input input-bordered w-full" bind:value={carbs} />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Fat (g)</div>
|
||||
<input type="number" class="input input-bordered w-full" bind:value={fat} />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary gap-2 mt-1" onclick={saveGoal} disabled={saving}>
|
||||
{#if saving}<span class="loading loading-spinner loading-sm"></span>{/if}
|
||||
Save Goals
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Goal history -->
|
||||
{#if goals.length > 0}
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-2 h-2 rounded-full bg-info"></div>
|
||||
<h2 class="text-xl font-bold">History</h2>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each goals as g}
|
||||
<div class="rounded-xl border p-4 shadow-sm card-hover {g.is_active ? 'border-primary/30 bg-gradient-to-br from-primary/5 to-transparent' : 'border-base-300 bg-base-200/50'}">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div class="text-sm font-medium">
|
||||
{g.start_date}{g.end_date ? ` — ${g.end_date}` : ''}
|
||||
</div>
|
||||
<div class="flex gap-3 text-xs text-base-content/50 mt-1">
|
||||
<span>{g.calories} cal</span>
|
||||
<span>{g.protein}g P</span>
|
||||
<span>{g.carbs}g C</span>
|
||||
<span>{g.fat}g F</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if g.is_active}
|
||||
<span class="badge badge-primary badge-sm">Active</span>
|
||||
{:else}
|
||||
<span class="badge badge-ghost badge-sm">Ended</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let username = $state('');
|
||||
let password = $state('');
|
||||
let error = $state('');
|
||||
let loading = $state(false);
|
||||
|
||||
async function handleLogin() {
|
||||
if (!username.trim() || !password) { error = 'Enter username and password'; return; }
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username: username.trim(), password }),
|
||||
credentials: 'include'
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
localStorage.setItem('session_token', data.token);
|
||||
goto('/');
|
||||
} else { error = 'Invalid credentials'; }
|
||||
} catch { error = 'Connection failed'; }
|
||||
finally { loading = false; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center px-4">
|
||||
<div class="card bg-base-200 shadow-xl w-full max-w-md border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-6">
|
||||
<div class="p-4 rounded-2xl bg-primary/15 inline-block mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 20V10"/>
|
||||
<path d="M18 20V4"/>
|
||||
<path d="M6 20v-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-base-content">Calorie Tracker</h2>
|
||||
<p class="text-base-content/50 text-sm mt-1">Sign in to continue</p>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="alert alert-error text-sm py-2"><span>{error}</span></div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
|
||||
<div class="form-control">
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Username</div>
|
||||
<input type="text" class="input input-bordered w-full" bind:value={username} />
|
||||
</div>
|
||||
<div class="form-control mt-3">
|
||||
<div class="text-xs text-base-content/50 font-medium uppercase tracking-wide mb-1">Password</div>
|
||||
<input type="password" class="input input-bordered w-full" bind:value={password} />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-full mt-5 gap-2" disabled={loading}>
|
||||
{#if loading}<span class="loading loading-spinner loading-sm"></span>{/if}
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { get, post, del } from '$lib/api/client.ts';
|
||||
import type { MealTemplate, MealType } from '$lib/api/types.ts';
|
||||
import { MEAL_TYPES } from '$lib/api/types.ts';
|
||||
import { today } from '$lib/api/client.ts';
|
||||
|
||||
let templates = $state<MealTemplate[]>([]);
|
||||
let loading = $state(true);
|
||||
let logDate = $state(today());
|
||||
let logMeal = $state<MealType>('lunch');
|
||||
let loggingId = $state('');
|
||||
|
||||
$effect(() => { loadTemplates(); });
|
||||
|
||||
async function loadTemplates() {
|
||||
loading = true;
|
||||
try { templates = await get<MealTemplate[]>('/api/templates'); }
|
||||
catch {} finally { loading = false; }
|
||||
}
|
||||
|
||||
async function logTemplate(id: string) {
|
||||
loggingId = id;
|
||||
try {
|
||||
await post(`/api/templates/${id}/log`, { meal_type: logMeal, entry_date: logDate });
|
||||
alert('Logged!');
|
||||
} catch {} finally { loggingId = ''; }
|
||||
}
|
||||
|
||||
async function deleteTemplate(id: string) {
|
||||
if (confirm('Archive this template?')) {
|
||||
await del(`/api/templates/${id}`);
|
||||
loadTemplates();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="max-w-3xl mx-auto px-4 py-6">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-3xl font-bold">Meal Templates</h1>
|
||||
<p class="text-base-content/50 text-sm mt-0.5">Save and reuse your favorite meals</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-info/20 bg-gradient-to-br from-info/10 to-info/5 p-4 mb-6 shadow-md flex items-center gap-4 flex-wrap">
|
||||
<span class="text-xs text-base-content/50 font-medium uppercase tracking-wide">Log to:</span>
|
||||
<input type="date" class="input input-bordered input-sm" bind:value={logDate} />
|
||||
<select class="select select-bordered select-sm" bind:value={logMeal}>
|
||||
{#each MEAL_TYPES as mt}
|
||||
<option value={mt}>{mt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-12"><span class="loading loading-spinner loading-lg text-primary"></span></div>
|
||||
{:else if templates.length === 0}
|
||||
<div class="text-center py-16">
|
||||
<div class="p-4 rounded-2xl bg-primary/15 inline-block mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
|
||||
</div>
|
||||
<div class="text-base-content/50">No templates yet</div>
|
||||
<div class="text-sm text-base-content/30 mt-1">Templates can be created from the daily log or via API</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each templates as t}
|
||||
<div class="rounded-xl border border-base-300 bg-base-200/50 p-5 shadow-sm card-hover">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold text-lg">{t.name}</span>
|
||||
{#if t.meal_type}<span class="badge badge-sm badge-outline">{t.meal_type}</span>{/if}
|
||||
{#if t.is_favorite}<span class="text-warning">★</span>{/if}
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="btn btn-primary btn-sm gap-1" onclick={() => logTemplate(t.id)} disabled={loggingId === t.id}>
|
||||
{#if loggingId === t.id}<span class="loading loading-spinner loading-xs"></span>{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
|
||||
{/if}
|
||||
Log
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick={() => deleteTemplate(t.id)}>Archive</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if t.items?.length > 0}
|
||||
<div class="space-y-1.5">
|
||||
{#each t.items as item}
|
||||
<div class="flex justify-between text-sm text-base-content/70">
|
||||
<span>{item.snapshot_food_name} <span class="text-base-content/30">x{item.quantity}</span></span>
|
||||
<span class="font-medium">{Math.round(item.snapshot_calories * item.quantity)} cal</span>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="border-t border-base-300/50 pt-2 mt-2 flex justify-between font-bold text-sm">
|
||||
<span>Total</span>
|
||||
<span>{Math.round(t.items.reduce((s, i) => s + i.snapshot_calories * i.quantity, 0))} cal</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user