Alexander Bocken
9c3b88e823
All checks were successful
CI / update (push) Successful in 1m30s
Move components from flat src/lib/components/ into recipes/, faith/, and cospend/ subdirectories. Replace ~144 relative imports across API routes and lib files with $models, $utils, $types, and $lib aliases. Add $types alias to svelte.config.js. Remove unused EditRecipe.svelte.
143 lines
3.3 KiB
Svelte
143 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import '$lib/css/nordtheme.css';
|
|
import Recipes from '$lib/components/recipes/Recipes.svelte';
|
|
import Card from '$lib/components/recipes/Card.svelte';
|
|
|
|
let { data } = $props<{ data: PageData }>();
|
|
let current_month = new Date().getMonth() + 1;
|
|
|
|
// Calculate statistics
|
|
const stats = $derived.by(() => {
|
|
const noTranslation = data.untranslated.filter(r => !r.translationStatus).length;
|
|
const pending = data.untranslated.filter(r => r.translationStatus === 'pending').length;
|
|
const needsUpdate = data.untranslated.filter(r => r.translationStatus === 'needs_update').length;
|
|
|
|
return {
|
|
total: data.untranslated.length,
|
|
noTranslation,
|
|
pending,
|
|
needsUpdate
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
font-size: 4rem;
|
|
}
|
|
.subheading {
|
|
text-align: center;
|
|
margin-top: 0;
|
|
font-size: 1.5rem;
|
|
color: var(--nord3);
|
|
}
|
|
.stats-container {
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 1.5rem;
|
|
background: var(--nord1);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
@media(prefers-color-scheme: light) {
|
|
.stats-container {
|
|
background: var(--nord6);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background: var(--nord0);
|
|
border-radius: 6px;
|
|
}
|
|
@media(prefers-color-scheme: light) {
|
|
.stat-item {
|
|
background: var(--nord5);
|
|
}
|
|
}
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--nord14);
|
|
}
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: var(--nord4);
|
|
margin-top: 0.25rem;
|
|
}
|
|
@media(prefers-color-scheme: light) {
|
|
.stat-label {
|
|
color: var(--nord2);
|
|
}
|
|
}
|
|
.empty-state {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
color: var(--nord3);
|
|
}
|
|
.empty-state p {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|
|
|
|
<svelte:head>
|
|
<title>Unübersetzte Rezepte - Bocken Rezepte</title>
|
|
<meta name="description" content="Verwaltung unübersetzter Rezepte" />
|
|
</svelte:head>
|
|
|
|
<h1>Unübersetzte Rezepte</h1>
|
|
|
|
{#if data.error}
|
|
<p class="subheading">{data.error}</p>
|
|
{:else if data.untranslated.length > 0}
|
|
<p class="subheading">
|
|
{stats.total} {stats.total === 1 ? 'Rezept benötigt' : 'Rezepte benötigen'} Übersetzung oder Überprüfung
|
|
</p>
|
|
|
|
<div class="stats-container">
|
|
<h3 style="text-align: center; margin-top: 0;">Statistik</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-value">{stats.noTranslation}</div>
|
|
<div class="stat-label">Keine Übersetzung</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{stats.pending}</div>
|
|
<div class="stat-label">Freigabe ausstehend</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{stats.needsUpdate}</div>
|
|
<div class="stat-label">Aktualisierung erforderlich</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Recipes>
|
|
{#each data.untranslated as recipe}
|
|
<Card
|
|
{recipe}
|
|
{current_month}
|
|
routePrefix="/{data.recipeLang}"
|
|
translationStatus={recipe.translationStatus}
|
|
></Card>
|
|
{/each}
|
|
</Recipes>
|
|
{:else}
|
|
<div class="empty-state">
|
|
<p>Alle Rezepte sind übersetzt!</p>
|
|
<p style="font-size: 1rem; margin-top: 1rem;">
|
|
<a href="/{data.recipeLang}">Zurück zu den Rezepten</a>
|
|
</p>
|
|
</div>
|
|
{/if}
|