recipes: overhaul nutrition editor UI and defer saves to form submission
- Nutrition mappings and global overwrites are now local-only until the recipe is saved, preventing premature DB writes on generate/edit - Generate endpoint supports ?preview=true for non-persisting previews - Show existing nutrition data immediately instead of requiring generate - Replace raw checkboxes with Toggle component for global overwrites, initialized from existing NutritionOverwrite records - Fix search dropdown readability (solid backgrounds, proper theming) - Use fuzzy search (fzf-style) for manual nutrition ingredient lookup - Swap ingredient display: German primary, English in brackets - Allow editing g/u on manually mapped ingredients - Make translation optional: separate save (FAB) and translate buttons - "Vollständig neu übersetzen" now triggers actual full retranslation - Show existing translation inline instead of behind a button - Replace nord0 dark backgrounds with semantic theme variables
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import type { Actions, PageServerLoad } from "./$types";
|
||||
import { redirect, fail } from "@sveltejs/kit";
|
||||
import { Recipe } from '$models/Recipe';
|
||||
import { NutritionOverwrite } from '$models/NutritionOverwrite';
|
||||
import { dbConnect } from '$utils/db';
|
||||
import { invalidateRecipeCaches } from '$lib/server/cache';
|
||||
import { invalidateOverwriteCache } from '$lib/server/nutritionMatcher';
|
||||
import { IMAGE_DIR } from '$env/static/private';
|
||||
import { rename, access, unlink } from 'fs/promises';
|
||||
import { join } from 'path';
|
||||
@@ -209,6 +211,44 @@ export const actions = {
|
||||
});
|
||||
}
|
||||
|
||||
// Save nutrition mappings (deferred from nutrition UI)
|
||||
const nutritionMappingsJson = formData.get('nutritionMappings_json')?.toString();
|
||||
if (nutritionMappingsJson) {
|
||||
try {
|
||||
const mappings = JSON.parse(nutritionMappingsJson);
|
||||
if (mappings.length > 0) {
|
||||
await Recipe.updateOne(
|
||||
{ short_name: recipeData.short_name },
|
||||
{ $set: { nutritionMappings: mappings } }
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to save nutrition mappings:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Save global nutrition overwrites
|
||||
const globalOverwritesJson = formData.get('globalOverwrites_json')?.toString();
|
||||
if (globalOverwritesJson) {
|
||||
try {
|
||||
const overwrites = JSON.parse(globalOverwritesJson);
|
||||
for (const ow of overwrites) {
|
||||
if (ow.ingredientNameDe) {
|
||||
await NutritionOverwrite.findOneAndUpdate(
|
||||
{ ingredientNameDe: ow.ingredientNameDe },
|
||||
ow,
|
||||
{ upsert: true, runValidators: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
if (overwrites.length > 0) {
|
||||
invalidateOverwriteCache();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to save global overwrites:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Invalidate recipe caches after successful update
|
||||
await invalidateRecipeCaches();
|
||||
|
||||
|
||||
@@ -170,33 +170,40 @@
|
||||
return changed;
|
||||
}
|
||||
|
||||
// Show translation workflow before submission
|
||||
function prepareSubmit() {
|
||||
// Client-side validation
|
||||
// Save recipe directly (no translation workflow)
|
||||
async function saveRecipe() {
|
||||
if (!short_name.trim()) {
|
||||
toast.error('Bitte geben Sie einen Kurznamen ein');
|
||||
toast.error('Bitte einen Kurznamen eingeben');
|
||||
return;
|
||||
}
|
||||
if (!card_data.name) {
|
||||
toast.error('Bitte geben Sie einen Namen ein');
|
||||
toast.error('Bitte einen Namen eingeben');
|
||||
return;
|
||||
}
|
||||
|
||||
// Only detect changed fields if there's an existing translation
|
||||
changedFields = translationData ? detectChangedFields() : [];
|
||||
showTranslationWorkflow = true;
|
||||
|
||||
// Scroll to translation section
|
||||
setTimeout(() => {
|
||||
document.getElementById('translation-section')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
// Mark translation as needing update if fields changed
|
||||
if (translationData) {
|
||||
const changed = detectChangedFields();
|
||||
if (changed.length > 0) {
|
||||
translationData.translationStatus = 'needs_update';
|
||||
translationData.changedFields = changed;
|
||||
}
|
||||
}
|
||||
await tick();
|
||||
formElement.requestSubmit();
|
||||
}
|
||||
|
||||
// Force full retranslation of entire recipe
|
||||
function forceFullRetranslation() {
|
||||
changedFields = [];
|
||||
// Open translation workflow (optional)
|
||||
function openTranslation() {
|
||||
if (!short_name.trim()) {
|
||||
toast.error('Bitte einen Kurznamen eingeben');
|
||||
return;
|
||||
}
|
||||
if (!card_data.name) {
|
||||
toast.error('Bitte einen Namen eingeben');
|
||||
return;
|
||||
}
|
||||
changedFields = translationData ? detectChangedFields() : [];
|
||||
showTranslationWorkflow = true;
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('translation-section')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
@@ -237,22 +244,77 @@
|
||||
showTranslationWorkflow = false;
|
||||
}
|
||||
|
||||
// Nutrition generation
|
||||
// Nutrition state — all edits are local until form save
|
||||
let nutritionMappings = $state<any[]>(data.recipe.nutritionMappings || []);
|
||||
let generatingNutrition = $state(false);
|
||||
let nutritionResult = $state<{ count: number; mappings: any[] } | null>(null);
|
||||
let searchQueries = $state<Record<string, string>>({});
|
||||
let searchResults = $state<Record<string, { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number }[]>>({});
|
||||
let searchTimers = $state<Record<string, ReturnType<typeof setTimeout>>>({});
|
||||
let globalToggle = $state<Record<string, boolean>>({});
|
||||
|
||||
function mappingKey(m: any) {
|
||||
return `${m.sectionIndex}-${m.ingredientIndex}`;
|
||||
}
|
||||
|
||||
// Global overwrites loaded from DB — used to init toggle state
|
||||
let globalOverwriteNames = $state<Set<string>>(new Set());
|
||||
|
||||
async function loadGlobalOverwrites() {
|
||||
try {
|
||||
const res = await fetch('/api/nutrition/overwrites');
|
||||
if (res.ok) {
|
||||
const overwrites: any[] = await res.json();
|
||||
globalOverwriteNames = new Set(overwrites.map((o: any) => o.ingredientNameDe));
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// Ensure globalToggle entries exist for all mappings, init from DB overwrites
|
||||
function initGlobalToggles() {
|
||||
for (const m of nutritionMappings) {
|
||||
const key = mappingKey(m);
|
||||
if (!(key in globalToggle)) {
|
||||
const deName = (m.ingredientNameDe || m.ingredientName || '').toLowerCase().trim();
|
||||
globalToggle[key] = globalOverwriteNames.has(deName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pre-init all toggles to false (prevents bind:checked={undefined}), then load real state
|
||||
initGlobalToggles();
|
||||
if (nutritionMappings.length > 0) {
|
||||
loadGlobalOverwrites().then(() => {
|
||||
// Re-init with real overwrite data (overwrite the false defaults)
|
||||
for (const m of nutritionMappings) {
|
||||
const key = mappingKey(m);
|
||||
const deName = (m.ingredientNameDe || m.ingredientName || '').toLowerCase().trim();
|
||||
globalToggle[key] = globalOverwriteNames.has(deName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function generateNutrition() {
|
||||
generatingNutrition = true;
|
||||
nutritionResult = null;
|
||||
try {
|
||||
const res = await fetch(`/api/rezepte/nutrition/generate/${encodeURIComponent(short_name.trim())}`, { method: 'POST' });
|
||||
const res = await fetch(`/api/rezepte/nutrition/generate/${encodeURIComponent(short_name.trim())}?preview=true`, { method: 'POST' });
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ message: res.statusText }));
|
||||
throw new Error(err.message || `HTTP ${res.status}`);
|
||||
}
|
||||
const result = await res.json();
|
||||
nutritionResult = result;
|
||||
const mapped = result.mappings.filter((/** @type {any} */ m) => m.matchMethod !== 'none').length;
|
||||
// Merge: keep local manual edits, use auto for the rest
|
||||
const manualMap = new Map(
|
||||
nutritionMappings
|
||||
.filter((m: any) => m.manuallyEdited)
|
||||
.map((m: any) => [mappingKey(m), m])
|
||||
);
|
||||
nutritionMappings = result.mappings.map((m: any) => {
|
||||
const key = mappingKey(m);
|
||||
return manualMap.get(key) || m;
|
||||
});
|
||||
await loadGlobalOverwrites();
|
||||
initGlobalToggles();
|
||||
const mapped = nutritionMappings.filter((m: any) => m.matchMethod !== 'none').length;
|
||||
toast.success(`Nährwerte generiert: ${mapped}/${result.count} Zutaten zugeordnet`);
|
||||
} catch (e: any) {
|
||||
toast.error(`Fehler: ${e.message}`);
|
||||
@@ -261,17 +323,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Manual nutrition search
|
||||
let searchQueries = $state<Record<string, string>>({});
|
||||
let searchResults = $state<Record<string, { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number }[]>>({});
|
||||
let searchTimers = $state<Record<string, ReturnType<typeof setTimeout>>>({});
|
||||
let savingMapping = $state<string | null>(null);
|
||||
let globalToggle = $state<Record<string, boolean>>({});
|
||||
|
||||
function mappingKey(m: any) {
|
||||
return `${m.sectionIndex}-${m.ingredientIndex}`;
|
||||
}
|
||||
|
||||
function handleSearchInput(key: string, value: string) {
|
||||
searchQueries[key] = value;
|
||||
if (searchTimers[key]) clearTimeout(searchTimers[key]);
|
||||
@@ -287,115 +338,55 @@
|
||||
}, 250);
|
||||
}
|
||||
|
||||
async function assignNutritionEntry(mapping: any, entry: { source: 'bls' | 'usda'; id: string; name: string }) {
|
||||
function assignNutritionEntry(mapping: any, entry: { source: 'bls' | 'usda'; id: string; name: string }) {
|
||||
const key = mappingKey(mapping);
|
||||
const isGlobal = globalToggle[key] || false;
|
||||
savingMapping = key;
|
||||
try {
|
||||
const patchBody: Record<string, any> = {
|
||||
sectionIndex: mapping.sectionIndex,
|
||||
ingredientIndex: mapping.ingredientIndex,
|
||||
ingredientName: mapping.ingredientName,
|
||||
ingredientNameDe: mapping.ingredientNameDe,
|
||||
source: entry.source,
|
||||
nutritionDbName: entry.name,
|
||||
matchMethod: 'manual',
|
||||
matchConfidence: 1,
|
||||
excluded: false,
|
||||
global: isGlobal,
|
||||
};
|
||||
if (entry.source === 'bls') {
|
||||
patchBody.blsCode = entry.id;
|
||||
} else {
|
||||
patchBody.fdcId = parseInt(entry.id);
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/rezepte/nutrition/${encodeURIComponent(short_name.trim())}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify([patchBody]),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save');
|
||||
if (entry.source === 'bls') {
|
||||
mapping.blsCode = entry.id;
|
||||
mapping.source = 'bls';
|
||||
} else {
|
||||
mapping.fdcId = parseInt(entry.id);
|
||||
mapping.source = 'usda';
|
||||
}
|
||||
mapping.nutritionDbName = entry.name;
|
||||
mapping.matchMethod = 'manual';
|
||||
mapping.matchConfidence = 1;
|
||||
mapping.excluded = false;
|
||||
mapping.manuallyEdited = true;
|
||||
searchResults[key] = [];
|
||||
searchQueries[key] = '';
|
||||
toast.success(`${mapping.ingredientName} → ${entry.name}${isGlobal ? ' (global)' : ''}`);
|
||||
} catch (e: any) {
|
||||
toast.error(`Fehler: ${e.message}`);
|
||||
} finally {
|
||||
savingMapping = null;
|
||||
if (entry.source === 'bls') {
|
||||
mapping.blsCode = entry.id;
|
||||
mapping.source = 'bls';
|
||||
} else {
|
||||
mapping.fdcId = parseInt(entry.id);
|
||||
mapping.source = 'usda';
|
||||
}
|
||||
mapping.nutritionDbName = entry.name;
|
||||
mapping.matchMethod = 'manual';
|
||||
mapping.matchConfidence = 1;
|
||||
mapping.excluded = false;
|
||||
mapping.manuallyEdited = true;
|
||||
searchResults[key] = [];
|
||||
searchQueries[key] = '';
|
||||
const isGlobal = globalToggle[key] || false;
|
||||
toast.success(`${mapping.ingredientNameDe} → ${entry.name}${isGlobal ? ' (global)' : ''}`);
|
||||
}
|
||||
|
||||
async function skipIngredient(mapping: any) {
|
||||
function skipIngredient(mapping: any) {
|
||||
const key = mappingKey(mapping);
|
||||
mapping.excluded = true;
|
||||
mapping.matchMethod = 'manual';
|
||||
mapping.manuallyEdited = true;
|
||||
searchResults[key] = [];
|
||||
searchQueries[key] = '';
|
||||
const isGlobal = globalToggle[key] || false;
|
||||
savingMapping = key;
|
||||
try {
|
||||
const res = await fetch(`/api/rezepte/nutrition/${encodeURIComponent(short_name.trim())}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify([{
|
||||
sectionIndex: mapping.sectionIndex,
|
||||
ingredientIndex: mapping.ingredientIndex,
|
||||
ingredientName: mapping.ingredientName,
|
||||
ingredientNameDe: mapping.ingredientNameDe,
|
||||
matchMethod: 'manual',
|
||||
matchConfidence: 1,
|
||||
excluded: true,
|
||||
global: isGlobal,
|
||||
}]),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save');
|
||||
mapping.excluded = true;
|
||||
mapping.matchMethod = 'manual';
|
||||
mapping.manuallyEdited = true;
|
||||
searchResults[key] = [];
|
||||
searchQueries[key] = '';
|
||||
toast.success(`${mapping.ingredientName} übersprungen${isGlobal ? ' (global)' : ''}`);
|
||||
} catch (e: any) {
|
||||
toast.error(`Fehler: ${e.message}`);
|
||||
} finally {
|
||||
savingMapping = null;
|
||||
}
|
||||
toast.success(`${mapping.ingredientNameDe} übersprungen${isGlobal ? ' (global)' : ''}`);
|
||||
}
|
||||
|
||||
async function revertToAuto(mapping: any) {
|
||||
const key = mappingKey(mapping);
|
||||
savingMapping = key;
|
||||
try {
|
||||
const res = await fetch(`/api/rezepte/nutrition/${encodeURIComponent(short_name.trim())}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify([{
|
||||
sectionIndex: mapping.sectionIndex,
|
||||
ingredientIndex: mapping.ingredientIndex,
|
||||
ingredientName: mapping.ingredientName,
|
||||
ingredientNameDe: mapping.ingredientNameDe,
|
||||
manuallyEdited: false,
|
||||
excluded: false,
|
||||
}]),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save');
|
||||
// Re-generate to get the auto match
|
||||
await generateNutrition();
|
||||
toast.success(`${mapping.ingredientName} → automatisch`);
|
||||
} catch (e: any) {
|
||||
toast.error(`Fehler: ${e.message}`);
|
||||
} finally {
|
||||
savingMapping = null;
|
||||
}
|
||||
mapping.manuallyEdited = false;
|
||||
mapping.excluded = false;
|
||||
await generateNutrition();
|
||||
}
|
||||
|
||||
function getGlobalOverwrites() {
|
||||
return nutritionMappings
|
||||
.filter((m: any) => globalToggle[mappingKey(m)])
|
||||
.map((m: any) => ({
|
||||
ingredientNameDe: (m.ingredientNameDe || m.ingredientName).toLowerCase().trim(),
|
||||
ingredientNameEn: m.ingredientName,
|
||||
source: m.excluded ? 'skip' : (m.source || 'usda'),
|
||||
fdcId: m.fdcId,
|
||||
blsCode: m.blsCode,
|
||||
nutritionDbName: m.nutritionDbName,
|
||||
excluded: m.excluded || false,
|
||||
}));
|
||||
}
|
||||
|
||||
// Display form errors if any
|
||||
@@ -488,6 +479,34 @@
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
}
|
||||
.fab-save {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: 2rem;
|
||||
margin: 2rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background-color: var(--red);
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
z-index: 100;
|
||||
animation: unset !important;
|
||||
}
|
||||
.fab-save:hover, .fab-save:focus {
|
||||
background-color: var(--nord0) !important;
|
||||
}
|
||||
.fab-save:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.fab-save {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
.submit_buttons {
|
||||
display: flex;
|
||||
margin-inline: auto;
|
||||
@@ -497,11 +516,6 @@
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
.submit_buttons p {
|
||||
padding: 0;
|
||||
padding-right: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:global(:root:not([data-theme="light"])) .title {
|
||||
background-color: var(--nord6-dark);
|
||||
@@ -542,98 +556,122 @@
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
}
|
||||
.nutrition-generate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem auto;
|
||||
.nutrition-section {
|
||||
max-width: 1000px;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
.nutrition-result-box {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
background: var(--nord0, #2e3440);
|
||||
color: var(--nord6, #eceff4);
|
||||
font-family: monospace;
|
||||
.nutrition-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.nutrition-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.regenerate-btn {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
.regenerate-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.regenerate-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.nutrition-table-wrapper {
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.nutrition-result-summary {
|
||||
margin: 0 0 0.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.nutrition-result-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.nutrition-result-table th,
|
||||
.nutrition-result-table td {
|
||||
text-align: left;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-bottom: 1px solid var(--nord3, #4c566a);
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-bg-elevated);
|
||||
}
|
||||
.nutrition-result-table th {
|
||||
color: var(--nord9, #81a1c1);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.unmapped-row {
|
||||
opacity: 0.7;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.usda-search-cell {
|
||||
.search-cell {
|
||||
position: relative;
|
||||
}
|
||||
.usda-search-input {
|
||||
.search-input {
|
||||
display: inline !important;
|
||||
width: 100%;
|
||||
padding: 0.2rem 0.4rem !important;
|
||||
padding: 0.3rem 0.5rem !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid var(--nord3) !important;
|
||||
border-radius: 3px !important;
|
||||
background: var(--nord1, #3b4252) !important;
|
||||
color: inherit !important;
|
||||
border: 1px solid var(--color-bg-elevated) !important;
|
||||
border-radius: 6px !important;
|
||||
background: var(--color-bg-primary) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
font-size: 0.85rem !important;
|
||||
scale: 1 !important;
|
||||
}
|
||||
.usda-search-input:hover,
|
||||
.usda-search-input:focus-visible {
|
||||
.search-input:hover,
|
||||
.search-input:focus-visible {
|
||||
scale: 1 !important;
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
.usda-search-dropdown {
|
||||
.search-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin: 2px 0 0;
|
||||
padding: 0;
|
||||
background: var(--nord1, #3b4252);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 3px;
|
||||
max-height: 200px;
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-bg-elevated);
|
||||
border-radius: 8px;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
min-width: 300px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.usda-search-dropdown li button {
|
||||
.search-dropdown li button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.35rem 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
}
|
||||
.usda-search-dropdown li button:hover {
|
||||
background: var(--nord2, #434c5e);
|
||||
.search-dropdown li button:hover {
|
||||
background: var(--color-bg-tertiary);
|
||||
}
|
||||
.usda-cal {
|
||||
color: var(--nord9, #81a1c1);
|
||||
.search-cal {
|
||||
color: var(--color-text-secondary);
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@@ -641,64 +679,67 @@
|
||||
display: inline-block;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 2px;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.3rem;
|
||||
background: var(--nord10, #5e81ac);
|
||||
color: var(--nord6, #eceff4);
|
||||
background: var(--nord10);
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.source-badge.bls {
|
||||
background: var(--nord14, #a3be8c);
|
||||
color: var(--nord0, #2e3440);
|
||||
background: var(--nord14);
|
||||
color: var(--nord0);
|
||||
}
|
||||
.source-badge.skip {
|
||||
background: var(--nord11, #bf616a);
|
||||
background: var(--nord11);
|
||||
color: white;
|
||||
}
|
||||
.manual-indicator {
|
||||
display: inline-block;
|
||||
font-size: 0.55rem;
|
||||
font-weight: 700;
|
||||
color: var(--nord13, #ebcb8b);
|
||||
color: var(--nord13);
|
||||
margin-left: 0.2rem;
|
||||
vertical-align: super;
|
||||
}
|
||||
.excluded-row {
|
||||
opacity: 0.45;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.excluded-row td {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.excluded-row td:last-child,
|
||||
.excluded-row td:nth-last-child(2),
|
||||
.excluded-row td:nth-last-child(3) {
|
||||
.excluded-row td:nth-last-child(3),
|
||||
.excluded-row td:nth-last-child(4) {
|
||||
text-decoration: none;
|
||||
}
|
||||
.manual-row {
|
||||
border-left: 2px solid var(--nord13, #ebcb8b);
|
||||
border-left: 2px solid var(--nord13);
|
||||
}
|
||||
.excluded-label {
|
||||
font-style: italic;
|
||||
color: var(--nord11, #bf616a);
|
||||
color: var(--nord11);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.de-name {
|
||||
color: var(--nord9, #81a1c1);
|
||||
.en-name {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.current-match {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.current-match.manual-match {
|
||||
color: var(--nord13, #ebcb8b);
|
||||
color: var(--nord13);
|
||||
}
|
||||
.usda-search-input.has-match {
|
||||
.search-input.has-match {
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
.usda-search-input.has-match:focus {
|
||||
.search-input.has-match:focus {
|
||||
opacity: 1;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
@@ -706,60 +747,110 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.global-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--nord9, #81a1c1);
|
||||
cursor: pointer;
|
||||
.row-controls :global(.toggle-wrapper) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.global-toggle input {
|
||||
display: inline !important;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
scale: 1 !important;
|
||||
.row-controls :global(.toggle-wrapper label) {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.row-controls :global(.toggle-track),
|
||||
.row-controls :global(input[type="checkbox"]) {
|
||||
width: 32px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
.row-controls :global(.toggle-track::before),
|
||||
.row-controls :global(input[type="checkbox"]::before) {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
}
|
||||
.row-controls :global(.toggle-track.checked::before),
|
||||
.row-controls :global(input[type="checkbox"]:checked::before) {
|
||||
transform: translateX(14px) !important;
|
||||
}
|
||||
.revert-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--nord3, #4c566a);
|
||||
border-radius: 3px;
|
||||
color: var(--nord9, #81a1c1);
|
||||
border: 1px solid var(--color-bg-elevated);
|
||||
border-radius: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.35rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.revert-btn:hover {
|
||||
background: var(--nord9, #81a1c1);
|
||||
color: var(--nord0, #2e3440);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.skip-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--nord3, #4c566a);
|
||||
border-radius: 3px;
|
||||
color: var(--nord11, #bf616a);
|
||||
border: 1px solid var(--color-bg-elevated);
|
||||
border-radius: 4px;
|
||||
color: var(--nord11);
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.skip-btn:hover {
|
||||
background: var(--nord11, #bf616a);
|
||||
color: var(--nord6, #eceff4);
|
||||
background: var(--nord11);
|
||||
color: white;
|
||||
}
|
||||
.skip-btn.active {
|
||||
background: var(--nord11, #bf616a);
|
||||
color: var(--nord6, #eceff4);
|
||||
background: var(--nord11);
|
||||
color: white;
|
||||
}
|
||||
.skip-btn.active:hover {
|
||||
background: var(--nord14, #a3be8c);
|
||||
color: var(--nord0, #2e3440);
|
||||
background: var(--nord14);
|
||||
color: var(--nord0);
|
||||
}
|
||||
.gpu-input {
|
||||
display: inline !important;
|
||||
width: 4em !important;
|
||||
padding: 0.2rem 0.3rem !important;
|
||||
margin: 0 !important;
|
||||
border: 1px solid var(--color-bg-elevated) !important;
|
||||
border-radius: 4px !important;
|
||||
background: var(--color-bg-primary) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
font-size: 0.8rem !important;
|
||||
scale: 1 !important;
|
||||
text-align: right;
|
||||
}
|
||||
.gpu-input:hover, .gpu-input:focus-visible {
|
||||
scale: 1 !important;
|
||||
}
|
||||
.section-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.section-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
.section-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.section-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.translation-section-trigger {
|
||||
max-width: 1000px;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -915,33 +1006,33 @@
|
||||
<input type="hidden" name="addendum" value={addendum} />
|
||||
</div>
|
||||
|
||||
<!-- Nutrition generation -->
|
||||
<div class="nutrition-generate">
|
||||
<button
|
||||
type="button"
|
||||
class="action_button"
|
||||
onclick={generateNutrition}
|
||||
disabled={generatingNutrition || !short_name.trim()}
|
||||
style="background-color: var(--nord10);"
|
||||
>
|
||||
<p>{generatingNutrition ? 'Generiere…' : 'Nährwerte generieren'}</p>
|
||||
</button>
|
||||
{#if nutritionResult}
|
||||
<div class="nutrition-result-box">
|
||||
<!-- Nutrition section -->
|
||||
<input type="hidden" name="nutritionMappings_json" value={JSON.stringify(nutritionMappings)} />
|
||||
<input type="hidden" name="globalOverwrites_json" value={JSON.stringify(getGlobalOverwrites())} />
|
||||
|
||||
{#if nutritionMappings.length > 0}
|
||||
<div class="nutrition-section">
|
||||
<div class="nutrition-header">
|
||||
<h3>Nährwerte</h3>
|
||||
<button type="button" class="regenerate-btn" onclick={generateNutrition} disabled={generatingNutrition || !short_name.trim()}>
|
||||
{generatingNutrition ? 'Generiere…' : 'Neu generieren'}
|
||||
</button>
|
||||
</div>
|
||||
<div class="nutrition-table-wrapper">
|
||||
<p class="nutrition-result-summary">
|
||||
{nutritionResult.mappings.filter((m) => m.matchMethod !== 'none').length}/{nutritionResult.count} Zutaten zugeordnet
|
||||
{nutritionMappings.filter((m) => m.matchMethod !== 'none').length}/{nutritionMappings.length} Zutaten zugeordnet
|
||||
</p>
|
||||
<table class="nutrition-result-table">
|
||||
<thead><tr><th>#</th><th>Zutat</th><th>Quelle</th><th>Treffer / Suche</th><th>Konf.</th><th>g/u</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{#each nutritionResult.mappings as m, i}
|
||||
{#each nutritionMappings as m, i (mappingKey(m))}
|
||||
{@const key = mappingKey(m)}
|
||||
<tr class:unmapped-row={m.matchMethod === 'none' && !m.excluded} class:excluded-row={m.excluded} class:manual-row={m.manuallyEdited && !m.excluded}>
|
||||
<td>{i + 1}</td>
|
||||
<td>
|
||||
{m.ingredientName}
|
||||
{#if m.ingredientNameDe && m.ingredientNameDe !== m.ingredientName}
|
||||
<span class="de-name">({m.ingredientNameDe})</span>
|
||||
{m.ingredientNameDe || m.ingredientName}
|
||||
{#if m.ingredientName && m.ingredientName !== m.ingredientNameDe}
|
||||
<span class="en-name">({m.ingredientName})</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
@@ -955,7 +1046,7 @@
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<div class="usda-search-cell">
|
||||
<div class="search-cell">
|
||||
{#if m.excluded}
|
||||
<span class="excluded-label">Übersprungen</span>
|
||||
{:else if m.matchMethod !== 'none' && !searchQueries[key]}
|
||||
@@ -963,48 +1054,49 @@
|
||||
{/if}
|
||||
<input
|
||||
type="text"
|
||||
class="usda-search-input"
|
||||
class="search-input"
|
||||
class:has-match={m.matchMethod !== 'none' && !m.excluded && !searchQueries[key]}
|
||||
placeholder={m.excluded ? 'Suche für neuen Treffer…' : (m.matchMethod !== 'none' ? 'Überschreiben…' : 'BLS/USDA suchen…')}
|
||||
value={searchQueries[key] || ''}
|
||||
oninput={(e) => handleSearchInput(key, e.currentTarget.value)}
|
||||
/>
|
||||
{#if searchResults[key]?.length > 0}
|
||||
<ul class="usda-search-dropdown">
|
||||
{#each searchResults[key] as result}
|
||||
<ul class="search-dropdown">
|
||||
{#each searchResults[key] as result (result.id)}
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
disabled={savingMapping === key}
|
||||
onclick={() => assignNutritionEntry(m, result)}
|
||||
>
|
||||
<span class="source-badge" class:bls={result.source === 'bls'}>{result.source.toUpperCase()}</span>
|
||||
{result.name}
|
||||
<span class="usda-cal">{Math.round(result.calories)} kcal</span>
|
||||
<span class="search-cal">{Math.round(result.calories)} kcal</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="row-controls">
|
||||
<label class="global-toggle">
|
||||
<input type="checkbox" checked={globalToggle[key] || false} onchange={() => { globalToggle[key] = !globalToggle[key]; }} />
|
||||
global
|
||||
</label>
|
||||
<Toggle checked={globalToggle[key] ?? false} label="global" onchange={() => { globalToggle[key] = !globalToggle[key]; }} />
|
||||
{#if m.manuallyEdited || m.excluded}
|
||||
<button type="button" class="revert-btn" disabled={savingMapping === key} onclick={() => revertToAuto(m)} title="Zurück auf automatisch">auto</button>
|
||||
<button type="button" class="revert-btn" onclick={() => revertToAuto(m)} title="Zurück auf automatisch">auto</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{m.matchConfidence ? (m.matchConfidence * 100).toFixed(0) + '%' : '—'}</td>
|
||||
<td>{m.gramsPerUnit || '—'}</td>
|
||||
<td>
|
||||
{#if m.manuallyEdited}
|
||||
<input type="number" class="gpu-input" min="0" step="0.1" bind:value={m.gramsPerUnit} />
|
||||
{:else}
|
||||
{m.gramsPerUnit || '—'}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="skip-btn"
|
||||
class:active={m.excluded}
|
||||
disabled={savingMapping === key}
|
||||
onclick={() => m.excluded ? revertToAuto(m) : skipIngredient(m)}
|
||||
title={m.excluded ? 'Wieder aktivieren' : 'Überspringen'}
|
||||
>
|
||||
@@ -1016,38 +1108,31 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !showTranslationWorkflow}
|
||||
<div class="submit_buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="action_button"
|
||||
onclick={prepareSubmit}
|
||||
disabled={submitting}
|
||||
style="background-color: var(--nord14);"
|
||||
>
|
||||
<p>Speichern & Übersetzung aktualisieren</p>
|
||||
<Check fill="white" width="2rem" height="2rem" />
|
||||
</button>
|
||||
{#if translationData}
|
||||
<button
|
||||
type="button"
|
||||
class="action_button"
|
||||
onclick={forceFullRetranslation}
|
||||
disabled={submitting}
|
||||
style="background-color: var(--nord12);"
|
||||
>
|
||||
<p>Komplett neu übersetzen</p>
|
||||
<Check fill="white" width="2rem" height="2rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="nutrition-section">
|
||||
<h3>Nährwerte</h3>
|
||||
<div class="section-actions">
|
||||
<button type="button" class="section-btn" onclick={generateNutrition} disabled={generatingNutrition || !short_name.trim()}>
|
||||
{generatingNutrition ? 'Generiere…' : 'Generieren'}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !translationData && !showTranslationWorkflow}
|
||||
<div class="translation-section-trigger">
|
||||
<h3>Übersetzung</h3>
|
||||
<div class="section-actions">
|
||||
<button type="button" class="section-btn" onclick={openTranslation} disabled={submitting}>
|
||||
Übersetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
{#if showTranslationWorkflow}
|
||||
{#if translationData || showTranslationWorkflow}
|
||||
<div id="translation-section">
|
||||
<TranslationApproval
|
||||
germanData={currentRecipeData}
|
||||
@@ -1058,7 +1143,17 @@
|
||||
onapproved={handleTranslationApproved}
|
||||
onskipped={handleTranslationSkipped}
|
||||
oncancelled={handleTranslationCancelled}
|
||||
onforceFullRetranslation={forceFullRetranslation}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- FAB save button -->
|
||||
<button
|
||||
type="button"
|
||||
class="fab-save action_button"
|
||||
onclick={saveRecipe}
|
||||
disabled={submitting}
|
||||
aria-label="Rezept speichern"
|
||||
>
|
||||
<Check fill="white" width="2rem" height="2rem" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user