add English translation support for recipes with DeepL integration
- Add embedded translations schema to Recipe model with English support - Create DeepL translation service with batch translation and change detection - Build translation approval UI with side-by-side editing for all recipe fields - Integrate translation workflow into add/edit pages with field comparison - Create complete English recipe routes at /recipes/* mirroring German structure - Add language switcher component with hreflang SEO tags - Support image loading from German short_name for English recipes - Add English API endpoints for all recipe filters (category, tag, icon, season) - Include layout with English navigation header for all recipe subroutes
This commit is contained in:
@@ -11,6 +11,8 @@ export let isFavorite = false;
|
||||
export let showFavoriteIndicator = false;
|
||||
// to manually override lazy loading for top cards
|
||||
export let loading_strat : "lazy" | "eager" | undefined;
|
||||
// route prefix for language support (/rezepte or /recipes)
|
||||
export let routePrefix = '/rezepte';
|
||||
if(loading_strat === undefined){
|
||||
loading_strat = "lazy"
|
||||
}
|
||||
@@ -27,7 +29,9 @@ onMount(() => {
|
||||
isloaded = document.querySelector("img")?.complete ? true : false
|
||||
})
|
||||
|
||||
const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
|
||||
// Use germanShortName for images if available (English recipes), otherwise use short_name (German recipes)
|
||||
const imageShortName = recipe.germanShortName || recipe.short_name;
|
||||
const img_name = imageShortName + ".webp?v=" + recipe.dateModified
|
||||
</script>
|
||||
<style>
|
||||
.card_anchor{
|
||||
@@ -253,7 +257,7 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
|
||||
|
||||
<div class=card_anchor class:search_me={search} data-tags=[{recipe.tags}]>
|
||||
<div class="card" class:margin_right={do_margin_right}>
|
||||
<a href="/rezepte/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
|
||||
<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
|
||||
<span class="visually-hidden">View recipe: {recipe.name}</span>
|
||||
</a>
|
||||
<div class=div_div_image >
|
||||
@@ -261,24 +265,24 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
|
||||
<noscript>
|
||||
<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{recipe.alt}"/>
|
||||
</noscript>
|
||||
<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading={loading_strat} alt="{recipe.alt}" on:load={() => isloaded=true}/>
|
||||
<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + imageShortName + '.webp'} loading={loading_strat} alt="{recipe.alt}" on:load={() => isloaded=true}/>
|
||||
</div>
|
||||
</div>
|
||||
{#if showFavoriteIndicator && isFavorite}
|
||||
<div class="favorite-indicator">❤️</div>
|
||||
{/if}
|
||||
{#if icon_override || recipe.season.includes(current_month)}
|
||||
<a href="/rezepte/icon/{recipe.icon}" class=icon>{recipe.icon}</a>
|
||||
<a href="{routePrefix}/icon/{recipe.icon}" class=icon>{recipe.icon}</a>
|
||||
{/if}
|
||||
<div class="card_title">
|
||||
<a href="/rezepte/category/{recipe.category}" class=category>{recipe.category}</a>
|
||||
<a href="{routePrefix}/category/{recipe.category}" class=category>{recipe.category}</a>
|
||||
<div>
|
||||
<div class=name>{@html recipe.name}</div>
|
||||
<div class=description>{@html recipe.description}</div>
|
||||
</div>
|
||||
<div class=tags>
|
||||
{#each recipe.tags as tag}
|
||||
<a href="/rezepte/tag/{tag}" class=tag>{tag}</a>
|
||||
<a href="{routePrefix}/tag/{tag}" class=tag>{tag}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
137
src/lib/components/EditableIngredients.svelte
Normal file
137
src/lib/components/EditableIngredients.svelte
Normal file
@@ -0,0 +1,137 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let ingredients: any[] = [];
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleChange() {
|
||||
dispatch('change', { ingredients });
|
||||
}
|
||||
|
||||
function updateIngredientGroupName(groupIndex: number, event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
ingredients[groupIndex].name = target.value;
|
||||
handleChange();
|
||||
}
|
||||
|
||||
function updateIngredientItem(groupIndex: number, itemIndex: number, field: string, event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
ingredients[groupIndex].list[itemIndex][field] = target.value;
|
||||
handleChange();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ingredients-editor {
|
||||
background: var(--nord0);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.ingredients-editor {
|
||||
background: var(--nord5);
|
||||
border-color: var(--nord3);
|
||||
}
|
||||
}
|
||||
|
||||
.ingredient-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ingredient-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--nord1);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
color: var(--nord6);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.group-name {
|
||||
background: var(--nord6);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.ingredient-item {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 60px 1fr;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ingredient-item input {
|
||||
padding: 0.4rem;
|
||||
background: var(--nord1);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
color: var(--nord6);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.ingredient-item input {
|
||||
background: var(--nord6);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.ingredient-item input:focus {
|
||||
outline: 2px solid var(--nord14);
|
||||
border-color: var(--nord14);
|
||||
}
|
||||
|
||||
.ingredient-item input.amount {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="ingredients-editor">
|
||||
{#each ingredients as group, groupIndex}
|
||||
<div class="ingredient-group">
|
||||
<input
|
||||
type="text"
|
||||
class="group-name"
|
||||
value={group.name || ''}
|
||||
on:input={(e) => updateIngredientGroupName(groupIndex, e)}
|
||||
placeholder="Ingredient group name"
|
||||
/>
|
||||
{#each group.list as item, itemIndex}
|
||||
<div class="ingredient-item">
|
||||
<input
|
||||
type="text"
|
||||
class="amount"
|
||||
value={item.amount || ''}
|
||||
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'amount', e)}
|
||||
placeholder="Amt"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="unit"
|
||||
value={item.unit || ''}
|
||||
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'unit', e)}
|
||||
placeholder="Unit"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="name"
|
||||
value={item.name || ''}
|
||||
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'name', e)}
|
||||
placeholder="Ingredient name"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
140
src/lib/components/EditableInstructions.svelte
Normal file
140
src/lib/components/EditableInstructions.svelte
Normal file
@@ -0,0 +1,140 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let instructions: any[] = [];
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleChange() {
|
||||
dispatch('change', { instructions });
|
||||
}
|
||||
|
||||
function updateInstructionGroupName(groupIndex: number, event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
instructions[groupIndex].name = target.value;
|
||||
handleChange();
|
||||
}
|
||||
|
||||
function updateStep(groupIndex: number, stepIndex: number, event: Event) {
|
||||
const target = event.target as HTMLTextAreaElement;
|
||||
instructions[groupIndex].steps[stepIndex] = target.value;
|
||||
handleChange();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.instructions-editor {
|
||||
background: var(--nord0);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.instructions-editor {
|
||||
background: var(--nord5);
|
||||
border-color: var(--nord3);
|
||||
}
|
||||
}
|
||||
|
||||
.instruction-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.instruction-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--nord1);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
color: var(--nord6);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.group-name {
|
||||
background: var(--nord6);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-item {
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
min-width: 2rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
background: var(--nord3);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: var(--nord6);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.step-number {
|
||||
background: var(--nord4);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-item textarea {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
background: var(--nord1);
|
||||
border: 1px solid var(--nord3);
|
||||
border-radius: 4px;
|
||||
color: var(--nord6);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.step-item textarea {
|
||||
background: var(--nord6);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-item textarea:focus {
|
||||
outline: 2px solid var(--nord14);
|
||||
border-color: var(--nord14);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="instructions-editor">
|
||||
{#each instructions as group, groupIndex}
|
||||
<div class="instruction-group">
|
||||
<input
|
||||
type="text"
|
||||
class="group-name"
|
||||
value={group.name || ''}
|
||||
on:input={(e) => updateInstructionGroupName(groupIndex, e)}
|
||||
placeholder="Instruction section name"
|
||||
/>
|
||||
{#each group.steps as step, stepIndex}
|
||||
<div class="step-item">
|
||||
<div class="step-number">{stepIndex + 1}</div>
|
||||
<textarea
|
||||
value={step || ''}
|
||||
on:input={(e) => updateStep(groupIndex, stepIndex, e)}
|
||||
placeholder="Step description"
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
127
src/lib/components/RecipeLanguageSwitcher.svelte
Normal file
127
src/lib/components/RecipeLanguageSwitcher.svelte
Normal file
@@ -0,0 +1,127 @@
|
||||
<script lang="ts">
|
||||
export let germanUrl: string;
|
||||
export let englishUrl: string;
|
||||
export let currentLang: 'de' | 'en' = 'de';
|
||||
export let hasTranslation: boolean = true;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.language-switcher {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
background: var(--nord0);
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.language-switcher {
|
||||
background: var(--nord6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.language-switcher a {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: var(--nord4);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.language-switcher a {
|
||||
color: var(--nord2);
|
||||
}
|
||||
}
|
||||
|
||||
.language-switcher a:hover {
|
||||
background: var(--nord3);
|
||||
color: var(--nord6);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.language-switcher a:hover {
|
||||
background: var(--nord4);
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.language-switcher a.active {
|
||||
background: var(--nord14);
|
||||
color: var(--nord0);
|
||||
}
|
||||
|
||||
.language-switcher a.active:hover {
|
||||
background: var(--nord15);
|
||||
}
|
||||
|
||||
.language-switcher a.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.language-switcher {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.language-switcher a {
|
||||
padding: 0.4rem 0.7rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="language-switcher">
|
||||
<a
|
||||
href={germanUrl}
|
||||
class:active={currentLang === 'de'}
|
||||
aria-label="Switch to German"
|
||||
>
|
||||
<span class="flag">🇩🇪</span>
|
||||
<span class="label">DE</span>
|
||||
</a>
|
||||
{#if hasTranslation}
|
||||
<a
|
||||
href={englishUrl}
|
||||
class:active={currentLang === 'en'}
|
||||
aria-label="Switch to English"
|
||||
>
|
||||
<span class="flag">🇬🇧</span>
|
||||
<span class="label">EN</span>
|
||||
</a>
|
||||
{:else}
|
||||
<span
|
||||
class="disabled"
|
||||
title="English translation not available"
|
||||
aria-label="English translation not available"
|
||||
>
|
||||
<span class="flag">🇬🇧</span>
|
||||
<span class="label">EN</span>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
677
src/lib/components/TranslationApproval.svelte
Normal file
677
src/lib/components/TranslationApproval.svelte
Normal file
@@ -0,0 +1,677 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { TranslatedRecipeType } from '$types/types';
|
||||
import TranslationFieldComparison from './TranslationFieldComparison.svelte';
|
||||
import EditableIngredients from './EditableIngredients.svelte';
|
||||
import EditableInstructions from './EditableInstructions.svelte';
|
||||
|
||||
export let germanData: any;
|
||||
export let englishData: TranslatedRecipeType | null = null;
|
||||
export let changedFields: string[] = [];
|
||||
export let isEditMode: boolean = false; // true when editing existing recipe
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
type TranslationState = 'idle' | 'translating' | 'preview' | 'approved' | 'error';
|
||||
let translationState: TranslationState = englishData ? 'preview' : 'idle';
|
||||
let errorMessage: string = '';
|
||||
let validationErrors: string[] = [];
|
||||
|
||||
// Editable English data (clone of englishData)
|
||||
let editableEnglish: any = englishData ? { ...englishData } : null;
|
||||
|
||||
// Handle auto-translate button click
|
||||
async function handleAutoTranslate() {
|
||||
translationState = 'translating';
|
||||
errorMessage = '';
|
||||
validationErrors = [];
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/rezepte/translate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
recipe: germanData,
|
||||
fields: isEditMode && changedFields.length > 0 ? changedFields : undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Translation failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
editableEnglish = result.translatedRecipe;
|
||||
translationState = 'preview';
|
||||
|
||||
// Notify parent component
|
||||
dispatch('translated', { translatedRecipe: editableEnglish });
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Translation error:', error);
|
||||
translationState = 'error';
|
||||
errorMessage = error.message || 'Translation failed. Please try again.';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle field changes from TranslationFieldComparison components
|
||||
function handleFieldChange(event: CustomEvent) {
|
||||
const { field, value } = event.detail;
|
||||
if (editableEnglish) {
|
||||
// Special handling for tags (comma-separated string -> array)
|
||||
if (field === 'tags') {
|
||||
editableEnglish[field] = value.split(',').map((t: string) => t.trim()).filter((t: string) => t);
|
||||
} else {
|
||||
editableEnglish[field] = value;
|
||||
}
|
||||
editableEnglish = editableEnglish; // Trigger reactivity
|
||||
}
|
||||
}
|
||||
|
||||
// Handle ingredients changes
|
||||
function handleIngredientsChange(event: CustomEvent) {
|
||||
if (editableEnglish) {
|
||||
editableEnglish.ingredients = event.detail.ingredients;
|
||||
editableEnglish = editableEnglish; // Trigger reactivity
|
||||
}
|
||||
}
|
||||
|
||||
// Handle instructions changes
|
||||
function handleInstructionsChange(event: CustomEvent) {
|
||||
if (editableEnglish) {
|
||||
editableEnglish.instructions = event.detail.instructions;
|
||||
editableEnglish = editableEnglish; // Trigger reactivity
|
||||
}
|
||||
}
|
||||
|
||||
// Handle approval
|
||||
function handleApprove() {
|
||||
// Validate required fields
|
||||
validationErrors = [];
|
||||
|
||||
if (!editableEnglish?.name) {
|
||||
validationErrors.push('English name is required');
|
||||
}
|
||||
if (!editableEnglish?.description) {
|
||||
validationErrors.push('English description is required');
|
||||
}
|
||||
if (!editableEnglish?.short_name) {
|
||||
validationErrors.push('English short_name is required');
|
||||
}
|
||||
|
||||
if (validationErrors.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
translationState = 'approved';
|
||||
dispatch('approved', {
|
||||
translatedRecipe: {
|
||||
...editableEnglish,
|
||||
translationStatus: 'approved',
|
||||
lastTranslated: new Date(),
|
||||
changedFields: [],
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle skip translation
|
||||
function handleSkip() {
|
||||
dispatch('skipped');
|
||||
}
|
||||
|
||||
// Handle cancel
|
||||
function handleCancel() {
|
||||
translationState = 'idle';
|
||||
editableEnglish = null;
|
||||
dispatch('cancelled');
|
||||
}
|
||||
|
||||
// Get status badge color
|
||||
function getStatusColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'approved': return 'var(--nord14)';
|
||||
case 'pending': return 'var(--nord13)';
|
||||
case 'needs_update': return 'var(--nord12)';
|
||||
default: return 'var(--nord9)';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.translation-approval {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid var(--nord9);
|
||||
border-radius: 8px;
|
||||
background: var(--nord1);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.translation-approval {
|
||||
background: var(--nord6);
|
||||
border-color: var(--nord4);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header h3 {
|
||||
margin: 0;
|
||||
color: var(--nord6);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.header h3 {
|
||||
color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 16px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--nord0);
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: var(--nord13);
|
||||
}
|
||||
|
||||
.status-approved {
|
||||
background: var(--nord14);
|
||||
}
|
||||
|
||||
.status-needs_update {
|
||||
background: var(--nord12);
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.comparison-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
color: var(--nord8);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--nord9);
|
||||
}
|
||||
|
||||
.field-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--nord14);
|
||||
color: var(--nord0);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--nord15);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--nord9);
|
||||
color: var(--nord6);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--nord10);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--nord11);
|
||||
color: var(--nord6);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--nord12);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid var(--nord4);
|
||||
border-top-color: var(--nord14);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: var(--nord11);
|
||||
color: var(--nord6);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.validation-errors {
|
||||
background: var(--nord12);
|
||||
color: var(--nord0);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.validation-errors ul {
|
||||
margin: 0.5rem 0 0 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.changed-fields {
|
||||
background: var(--nord13);
|
||||
color: var(--nord0);
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.changed-fields strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.idle-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--nord4);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.idle-state {
|
||||
color: var(--nord2);
|
||||
}
|
||||
}
|
||||
|
||||
.idle-state p {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="translation-approval">
|
||||
<div class="header">
|
||||
<h3>English Translation</h3>
|
||||
{#if editableEnglish?.translationStatus}
|
||||
<span class="status-badge status-{editableEnglish.translationStatus}">
|
||||
{editableEnglish.translationStatus === 'pending' ? 'Pending Approval' : ''}
|
||||
{editableEnglish.translationStatus === 'approved' ? 'Approved' : ''}
|
||||
{editableEnglish.translationStatus === 'needs_update' ? 'Needs Update' : ''}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="error-message">
|
||||
<strong>Error:</strong> {errorMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if validationErrors.length > 0}
|
||||
<div class="validation-errors">
|
||||
<strong>Please fix the following errors:</strong>
|
||||
<ul>
|
||||
{#each validationErrors as error}
|
||||
<li>{error}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isEditMode && changedFields.length > 0}
|
||||
<div class="changed-fields">
|
||||
<strong>Changed fields:</strong> {changedFields.join(', ')}
|
||||
<br>
|
||||
<small>Only these fields will be re-translated if you use auto-translate.</small>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if translationState === 'idle'}
|
||||
<div class="idle-state">
|
||||
<p>Click "Auto-translate" to generate English translation using DeepL.</p>
|
||||
<div class="actions">
|
||||
<button class="btn-primary" on:click={handleAutoTranslate}>
|
||||
Auto-translate
|
||||
</button>
|
||||
<button class="btn-secondary" on:click={handleSkip}>
|
||||
Skip Translation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if translationState === 'translating'}
|
||||
<div class="idle-state">
|
||||
<p>
|
||||
<span class="loading-spinner"></span>
|
||||
Translating recipe...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{:else if translationState === 'preview' || translationState === 'approved'}
|
||||
<div class="comparison-grid">
|
||||
<div>
|
||||
<div class="column-header">🇩🇪 German (Original)</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Name"
|
||||
germanValue={germanData.name}
|
||||
englishValue={editableEnglish?.name || ''}
|
||||
fieldName="name"
|
||||
readonly={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Short Name (URL)"
|
||||
germanValue={germanData.short_name}
|
||||
englishValue={editableEnglish?.short_name || ''}
|
||||
fieldName="short_name"
|
||||
readonly={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Description"
|
||||
germanValue={germanData.description}
|
||||
englishValue={editableEnglish?.description || ''}
|
||||
fieldName="description"
|
||||
readonly={true}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Category"
|
||||
germanValue={germanData.category}
|
||||
englishValue={editableEnglish?.category || ''}
|
||||
fieldName="category"
|
||||
readonly={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if germanData.tags && germanData.tags.length > 0}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Tags"
|
||||
germanValue={germanData.tags.join(', ')}
|
||||
englishValue={editableEnglish?.tags?.join(', ') || ''}
|
||||
fieldName="tags"
|
||||
readonly={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if germanData.preamble}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Preamble"
|
||||
germanValue={germanData.preamble}
|
||||
englishValue={editableEnglish?.preamble || ''}
|
||||
fieldName="preamble"
|
||||
readonly={true}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if germanData.addendum}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Addendum"
|
||||
germanValue={germanData.addendum}
|
||||
englishValue={editableEnglish?.addendum || ''}
|
||||
fieldName="addendum"
|
||||
readonly={true}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if germanData.note}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Note"
|
||||
germanValue={germanData.note}
|
||||
englishValue={editableEnglish?.note || ''}
|
||||
fieldName="note"
|
||||
readonly={true}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if germanData.ingredients && germanData.ingredients.length > 0}
|
||||
<div class="field-group">
|
||||
<div class="field-label">Ingredients</div>
|
||||
<div class="field-value readonly readonly-text">
|
||||
{#each germanData.ingredients as ing}
|
||||
<strong>{ing.name || 'Ingredients'}</strong>
|
||||
<ul>
|
||||
{#each ing.list as item}
|
||||
<li>{item.amount} {item.unit} {item.name}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if germanData.instructions && germanData.instructions.length > 0}
|
||||
<div class="field-group">
|
||||
<div class="field-label">Instructions</div>
|
||||
<div class="field-value readonly readonly-text">
|
||||
{#each germanData.instructions as inst}
|
||||
<strong>{inst.name || 'Steps'}</strong>
|
||||
<ol>
|
||||
{#each inst.steps as step}
|
||||
<li>{step}</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="column-header">🇬🇧 English (Translated)</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Name"
|
||||
germanValue={germanData.name}
|
||||
englishValue={editableEnglish?.name || ''}
|
||||
fieldName="name"
|
||||
readonly={false}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Short Name (URL)"
|
||||
germanValue={germanData.short_name}
|
||||
englishValue={editableEnglish?.short_name || ''}
|
||||
fieldName="short_name"
|
||||
readonly={false}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Description"
|
||||
germanValue={germanData.description}
|
||||
englishValue={editableEnglish?.description || ''}
|
||||
fieldName="description"
|
||||
readonly={false}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Category"
|
||||
germanValue={germanData.category}
|
||||
englishValue={editableEnglish?.category || ''}
|
||||
fieldName="category"
|
||||
readonly={false}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if editableEnglish?.tags}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Tags"
|
||||
germanValue={germanData.tags?.join(', ') || ''}
|
||||
englishValue={editableEnglish.tags.join(', ')}
|
||||
fieldName="tags"
|
||||
readonly={false}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editableEnglish?.preamble}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Preamble"
|
||||
germanValue={germanData.preamble}
|
||||
englishValue={editableEnglish.preamble}
|
||||
fieldName="preamble"
|
||||
readonly={false}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editableEnglish?.addendum}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Addendum"
|
||||
germanValue={germanData.addendum}
|
||||
englishValue={editableEnglish.addendum}
|
||||
fieldName="addendum"
|
||||
readonly={false}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editableEnglish?.note}
|
||||
<div class="field-group">
|
||||
<TranslationFieldComparison
|
||||
label="Note"
|
||||
germanValue={germanData.note}
|
||||
englishValue={editableEnglish.note}
|
||||
fieldName="note"
|
||||
readonly={false}
|
||||
multiline={true}
|
||||
on:change={handleFieldChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editableEnglish?.ingredients && editableEnglish.ingredients.length > 0}
|
||||
<div class="field-group">
|
||||
<div class="field-label">Ingredients (Editable)</div>
|
||||
<EditableIngredients
|
||||
ingredients={editableEnglish.ingredients}
|
||||
on:change={handleIngredientsChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if editableEnglish?.instructions && editableEnglish.instructions.length > 0}
|
||||
<div class="field-group">
|
||||
<div class="field-label">Instructions (Editable)</div>
|
||||
<EditableInstructions
|
||||
instructions={editableEnglish.instructions}
|
||||
on:change={handleInstructionsChange}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
{#if translationState !== 'approved'}
|
||||
<button class="btn-danger" on:click={handleCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-secondary" on:click={handleAutoTranslate}>
|
||||
Re-translate
|
||||
</button>
|
||||
<button class="btn-primary" on:click={handleApprove}>
|
||||
Approve Translation
|
||||
</button>
|
||||
{:else}
|
||||
<span style="color: var(--nord14); font-weight: 700;">✓ Translation Approved</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
142
src/lib/components/TranslationFieldComparison.svelte
Normal file
142
src/lib/components/TranslationFieldComparison.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let label: string;
|
||||
export let germanValue: string;
|
||||
export let englishValue: string;
|
||||
export let fieldName: string;
|
||||
export let readonly: boolean = false;
|
||||
export let multiline: boolean = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement | HTMLTextAreaElement;
|
||||
dispatch('change', {
|
||||
field: fieldName,
|
||||
value: target.value
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.field-comparison {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-weight: 600;
|
||||
color: var(--nord4);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.field-label {
|
||||
color: var(--nord2);
|
||||
}
|
||||
}
|
||||
|
||||
.field-value {
|
||||
padding: 0.75rem;
|
||||
background: var(--nord0);
|
||||
border-radius: 4px;
|
||||
color: var(--nord6);
|
||||
border: 1px solid var(--nord3);
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
.field-value {
|
||||
background: var(--nord5);
|
||||
color: var(--nord0);
|
||||
border-color: var(--nord3);
|
||||
}
|
||||
}
|
||||
|
||||
.field-value.readonly {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
input.field-value,
|
||||
textarea.field-value {
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input.field-value:focus,
|
||||
textarea.field-value:focus {
|
||||
outline: 2px solid var(--nord14);
|
||||
border-color: var(--nord14);
|
||||
}
|
||||
|
||||
textarea.field-value {
|
||||
min-height: 6rem;
|
||||
}
|
||||
|
||||
.readonly-text {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
:global(.readonly-text strong) {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--nord8);
|
||||
}
|
||||
|
||||
:global(.readonly-text strong:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:global(.readonly-text ul),
|
||||
:global(.readonly-text ol) {
|
||||
margin: 0.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
:global(.readonly-text li) {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--nord4);
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
:global(.readonly-text strong) {
|
||||
color: var(--nord10);
|
||||
}
|
||||
|
||||
:global(.readonly-text li) {
|
||||
color: var(--nord2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="field-comparison">
|
||||
<div class="field-label">{label}</div>
|
||||
{#if readonly}
|
||||
<div class="field-value readonly readonly-text">
|
||||
{germanValue || '(empty)'}
|
||||
</div>
|
||||
{:else if multiline}
|
||||
<textarea
|
||||
class="field-value"
|
||||
value={englishValue}
|
||||
on:input={handleInput}
|
||||
placeholder="Enter {label.toLowerCase()}..."
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
type="text"
|
||||
class="field-value"
|
||||
value={englishValue}
|
||||
on:input={handleInput}
|
||||
placeholder="Enter {label.toLowerCase()}..."
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user