feat: consolidate admin features into centralized administration page
All checks were successful
CI / update (push) Successful in 1m10s
All checks were successful
CI / update (push) Successful in 1m10s
- Created administration page at /{recipeLang}/administration accessible only to rezepte_users
- Moved alt-text generator from /admin to /{recipeLang}/admin/alt-text-generator
- Added "Administration" link to user profile dropdown for rezepte_users
- Removed "Unübersetzt" link from main navigation (now accessed via administration page)
- Administration page provides card-based UI with links to:
- Untranslated Recipes management
- AI Alt-Text Generator
- Both features now integrated into recipe language routing structure
- Added server-side authentication to all admin routes
This commit is contained in:
@@ -51,7 +51,7 @@ function isActive(path) {
|
||||
{/snippet}
|
||||
|
||||
{#snippet right_side()}
|
||||
<UserHeader {user}></UserHeader>
|
||||
<UserHeader {user} recipeLang={data.recipeLang} lang={data.lang}></UserHeader>
|
||||
{/snippet}
|
||||
|
||||
{@render children()}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals, url }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
if (!session?.user?.nickname) {
|
||||
const callbackUrl = encodeURIComponent(url.pathname);
|
||||
throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
|
||||
}
|
||||
|
||||
// Check user group permission
|
||||
if (!session.user.groups?.includes('rezepte_users')) {
|
||||
throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
|
||||
}
|
||||
|
||||
return {
|
||||
user: session.user
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,284 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let stats = $state({
|
||||
totalWithImages: 0,
|
||||
missingAltText: 0,
|
||||
ollamaAvailable: false,
|
||||
});
|
||||
|
||||
let processing = $state(false);
|
||||
let filter = $state<'missing' | 'all'>('missing');
|
||||
let limit = $state(10);
|
||||
let results = $state<any[]>([]);
|
||||
let error = $state('');
|
||||
|
||||
onMount(async () => {
|
||||
await fetchStats();
|
||||
});
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const response = await fetch('/api/generate-alt-text-bulk');
|
||||
if (response.ok) {
|
||||
stats = await response.json();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch stats:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function processBatch() {
|
||||
processing = true;
|
||||
error = '';
|
||||
results = [];
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/generate-alt-text-bulk', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ filter, limit }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Failed to process batch');
|
||||
}
|
||||
|
||||
results = data.results || [];
|
||||
|
||||
// Refresh stats
|
||||
await fetchStats();
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'An error occurred';
|
||||
} finally {
|
||||
processing = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--nord0);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1.5rem;
|
||||
background-color: var(--nord6);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.stat-card {
|
||||
background-color: var(--nord0);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--nord3);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--nord10);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.status-ok {
|
||||
background-color: var(--nord14);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: var(--nord11);
|
||||
}
|
||||
|
||||
.controls {
|
||||
background-color: var(--nord6);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.controls {
|
||||
background-color: var(--nord1);
|
||||
}
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--nord4);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
select,
|
||||
input {
|
||||
background-color: var(--nord0);
|
||||
color: white;
|
||||
border-color: var(--nord2);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--nord8);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--nord7);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: var(--nord3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.results {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 1rem;
|
||||
background-color: var(--nord6);
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.result-item {
|
||||
background-color: var(--nord1);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 1rem;
|
||||
background-color: var(--nord11);
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 1rem;
|
||||
background-color: var(--nord13);
|
||||
color: var(--nord0);
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<h1>🤖 AI Alt Text Generator</h1>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Recipes with Images</div>
|
||||
<div class="stat-value">{stats.totalWithImages}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Missing Alt Text</div>
|
||||
<div class="stat-value">{stats.missingAltText}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">
|
||||
Ollama Status
|
||||
<span class="status-indicator" class:status-ok={stats.ollamaAvailable} class:status-error={!stats.ollamaAvailable}></span>
|
||||
</div>
|
||||
<div class="stat-value">{stats.ollamaAvailable ? 'Online' : 'Offline'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !stats.ollamaAvailable}
|
||||
<div class="warning">
|
||||
⚠️ Ollama is not running. Please start Ollama with: <code>ollama serve</code>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<label for="filter">Filter:</label>
|
||||
<select id="filter" bind:value={filter}>
|
||||
<option value="missing">Only Missing Alt Text</option>
|
||||
<option value="all">All Recipes (Regenerate)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="limit">Batch Size:</label>
|
||||
<input id="limit" type="number" bind:value={limit} min="1" max="100" />
|
||||
</div>
|
||||
|
||||
<button onclick={processBatch} disabled={processing || !stats.ollamaAvailable}>
|
||||
{processing ? '🔄 Processing...' : '✨ Generate Alt Texts'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if results.length > 0}
|
||||
<div class="results">
|
||||
<h2>Results</h2>
|
||||
{#each results as result}
|
||||
<div class="result-item">
|
||||
<strong>{result.name}</strong> ({result.shortName})
|
||||
<br />
|
||||
Processed: {result.processed} | Failed: {result.failed}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals, params, url }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
if (!session?.user?.nickname) {
|
||||
const callbackUrl = encodeURIComponent(url.pathname);
|
||||
throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
|
||||
}
|
||||
|
||||
// Check user group permission
|
||||
if (!session.user.groups?.includes('rezepte_users')) {
|
||||
throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
|
||||
}
|
||||
|
||||
return {
|
||||
user: session.user
|
||||
};
|
||||
};
|
||||
126
src/routes/[recipeLang=recipeLang]/administration/+page.svelte
Normal file
126
src/routes/[recipeLang=recipeLang]/administration/+page.svelte
Normal file
@@ -0,0 +1,126 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import '$lib/css/nordtheme.css';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
const isEnglish = data.lang === 'en';
|
||||
const pageTitle = isEnglish ? 'Administration' : 'Administration';
|
||||
const pageDescription = isEnglish
|
||||
? 'Manage recipes and content'
|
||||
: 'Rezepte und Inhalte verwalten';
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: isEnglish ? 'Untranslated Recipes' : 'Unübersetzte Rezepte',
|
||||
description: isEnglish
|
||||
? 'View and manage recipes that need translation'
|
||||
: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
|
||||
href: '/rezepte/untranslated',
|
||||
icon: '🌐'
|
||||
},
|
||||
{
|
||||
title: isEnglish ? 'Alt-Text Generator' : 'Alt-Text Generator',
|
||||
description: isEnglish
|
||||
? 'Generate alternative text for recipe images using AI'
|
||||
: 'Alternativtext für Rezeptbilder mit KI generieren',
|
||||
href: `/${data.recipeLang}/admin/alt-text-generator`,
|
||||
icon: '🖼️'
|
||||
}
|
||||
];
|
||||
</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);
|
||||
}
|
||||
.admin-container {
|
||||
max-width: 1000px;
|
||||
margin: 2rem auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.admin-card {
|
||||
background: var(--nord1);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 200ms, box-shadow 200ms;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.admin-card:hover,
|
||||
.admin-card:focus {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
background: hsl(from var(--nord1) h calc(s * 1.1) calc(l * 1.05));
|
||||
}
|
||||
.admin-card-icon {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
.admin-card-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.admin-card-description {
|
||||
font-size: 1rem;
|
||||
color: var(--nord4);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
@media(prefers-color-scheme: light) {
|
||||
.admin-card {
|
||||
background: var(--nord6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.admin-card:hover,
|
||||
.admin-card:focus {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
|
||||
}
|
||||
.admin-card-description {
|
||||
color: var(--nord2);
|
||||
}
|
||||
.subheading {
|
||||
color: var(--nord2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{pageTitle}</h1>
|
||||
<p class="subheading">{pageDescription}</p>
|
||||
|
||||
<div class="admin-container">
|
||||
<div class="admin-grid">
|
||||
{#each links as link (link.href)}
|
||||
<a href={link.href} class="admin-card">
|
||||
<div class="admin-card-icon">{link.icon}</div>
|
||||
<h2 class="admin-card-title">{link.title}</h2>
|
||||
<p class="admin-card-description">{link.description}</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user