Mehrsprachige Oberfläche + lokalisierte Gericht-/Bereichsnamen
Alle Seiten und Komponenten (öffentliche Speisekarte, Login, Kantinen- und Admin-Bereich, eigenes Konto) verwenden jetzt die Wörterbücher aus lib/i18n statt fest codierter deutscher Texte. Gerichte/Bereiche/ Allergene/Zusatzstoffe zeigen den Namen zur aktuell gewählten Sprache; Gerichte- und Kennzeichnungs-Formulare bekommen Englisch-/Polnisch- Felder mit Übersetzen-Button (siehe vorherigen Commit). Datumsformat- ierung (formatDateLong) nimmt jetzt ein locale-Argument statt fix 'de-DE'.
This commit is contained in:
@@ -3,16 +3,8 @@ import CodeListManager from "@/components/CodeListManager";
|
|||||||
export default function KennzeichnungPage() {
|
export default function KennzeichnungPage() {
|
||||||
return (
|
return (
|
||||||
<div className="grid gap-6 lg:grid-cols-2">
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
<CodeListManager
|
<CodeListManager table="allergens" />
|
||||||
table="allergens"
|
<CodeListManager table="additives" />
|
||||||
title="Allergene"
|
|
||||||
codeLabel="Kürzel (z. B. A)"
|
|
||||||
/>
|
|
||||||
<CodeListManager
|
|
||||||
table="additives"
|
|
||||||
title="Zusatzstoffe"
|
|
||||||
codeLabel="Kürzel (z. B. 1)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+26
-20
@@ -4,20 +4,25 @@ import { useState } from "react";
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
|
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
||||||
|
import type { Dict } from "@/lib/i18n/shared";
|
||||||
|
|
||||||
function germanAuthError(message: string): string {
|
function authErrorMessage(dict: Dict, message: string): string {
|
||||||
if (/invalid login credentials/i.test(message))
|
if (/invalid login credentials/i.test(message))
|
||||||
return "E-Mail-Adresse oder Passwort ist falsch.";
|
return dict.login.errorInvalidCredentials;
|
||||||
if (/email not confirmed/i.test(message))
|
if (/email not confirmed/i.test(message))
|
||||||
return "Die E-Mail-Adresse wurde noch nicht bestätigt.";
|
return dict.login.errorEmailNotConfirmed;
|
||||||
if (/cancelled|aborted|NotAllowedError/i.test(message))
|
if (/cancelled|aborted|NotAllowedError/i.test(message))
|
||||||
return "Passkey-Anmeldung wurde abgebrochen.";
|
return dict.login.errorPasskeyCancelled;
|
||||||
return `Anmeldung fehlgeschlagen: ${message}`;
|
return formatMessage(dict.login.errorGeneric, { message });
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const supabase = createClient();
|
const supabase = createClient();
|
||||||
|
const dict = useDict();
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
@@ -42,7 +47,7 @@ export default function LoginPage() {
|
|||||||
password,
|
password,
|
||||||
});
|
});
|
||||||
if (error || !data.user) {
|
if (error || !data.user) {
|
||||||
setError(germanAuthError(error?.message ?? "Unbekannter Fehler"));
|
setError(authErrorMessage(dict, error?.message ?? "Unbekannter Fehler"));
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -54,9 +59,7 @@ export default function LoginPage() {
|
|||||||
.single();
|
.single();
|
||||||
if (profile?.password_auth_enabled === false) {
|
if (profile?.password_auth_enabled === false) {
|
||||||
await supabase.auth.signOut();
|
await supabase.auth.signOut();
|
||||||
setError(
|
setError(dict.login.errorPasswordDisabled);
|
||||||
"Die Anmeldung mit Passwort ist für dieses Konto deaktiviert. Bitte mit Passkey anmelden."
|
|
||||||
);
|
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -71,14 +74,14 @@ export default function LoginPage() {
|
|||||||
const { data, error } = await supabase.auth.signInWithPasskey();
|
const { data, error } = await supabase.auth.signInWithPasskey();
|
||||||
if (error || !data?.user) {
|
if (error || !data?.user) {
|
||||||
setError(
|
setError(
|
||||||
germanAuthError(error?.message ?? "Passkey-Anmeldung fehlgeschlagen")
|
authErrorMessage(dict, error?.message ?? "Passkey-Anmeldung fehlgeschlagen")
|
||||||
);
|
);
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
await redirectByRole(data.user.id);
|
await redirectByRole(data.user.id);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(germanAuthError(err instanceof Error ? err.message : String(err)));
|
setError(authErrorMessage(dict, err instanceof Error ? err.message : String(err)));
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -86,13 +89,16 @@ export default function LoginPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex-1 flex items-center justify-center p-4">
|
<div className="flex-1 flex items-center justify-center p-4">
|
||||||
<div className="card w-full max-w-sm">
|
<div className="card w-full max-w-sm">
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)] mb-4">
|
<div className="flex justify-between items-center mb-4">
|
||||||
Anmeldung
|
<h1 className="text-xl font-bold text-[var(--c-primary)]">
|
||||||
</h1>
|
{dict.login.title}
|
||||||
|
</h1>
|
||||||
|
<LanguageSwitcher variant="light" />
|
||||||
|
</div>
|
||||||
<form onSubmit={signInWithPassword} className="space-y-3">
|
<form onSubmit={signInWithPassword} className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="label" htmlFor="email">
|
<label className="label" htmlFor="email">
|
||||||
E-Mail-Adresse
|
{dict.common.email}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
@@ -106,7 +112,7 @@ export default function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="label" htmlFor="password">
|
<label className="label" htmlFor="password">
|
||||||
Passwort
|
{dict.common.password}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="password"
|
id="password"
|
||||||
@@ -120,13 +126,13 @@ export default function LoginPage() {
|
|||||||
</div>
|
</div>
|
||||||
{error && <p className="text-sm text-[var(--c-del)]">{error}</p>}
|
{error && <p className="text-sm text-[var(--c-del)]">{error}</p>}
|
||||||
<button type="submit" className="btn btn-primary w-full" disabled={busy}>
|
<button type="submit" className="btn btn-primary w-full" disabled={busy}>
|
||||||
Anmelden
|
{dict.login.submit}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div className="my-4 flex items-center gap-3 text-xs text-gray-400">
|
<div className="my-4 flex items-center gap-3 text-xs text-gray-400">
|
||||||
<span className="h-px flex-1 bg-gray-200" />
|
<span className="h-px flex-1 bg-gray-200" />
|
||||||
oder
|
{dict.login.or}
|
||||||
<span className="h-px flex-1 bg-gray-200" />
|
<span className="h-px flex-1 bg-gray-200" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -136,12 +142,12 @@ export default function LoginPage() {
|
|||||||
className="btn btn-neutral w-full"
|
className="btn btn-neutral w-full"
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Mit Passkey anmelden
|
{dict.login.passkeyButton}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<p className="mt-4 text-center text-sm">
|
<p className="mt-4 text-center text-sm">
|
||||||
<Link href="/" className="text-gray-500 hover:text-[var(--c-primary)]">
|
<Link href="/" className="text-gray-500 hover:text-[var(--c-primary)]">
|
||||||
← Zur Speisekarte
|
{dict.login.backToMenu}
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+34
-20
@@ -8,11 +8,12 @@ import {
|
|||||||
formatPrice,
|
formatPrice,
|
||||||
mondayOf,
|
mondayOf,
|
||||||
todayISO,
|
todayISO,
|
||||||
WEEKDAYS,
|
|
||||||
} from "@/lib/menu";
|
} from "@/lib/menu";
|
||||||
import { logoUrl, SITE_TITLE } from "@/lib/types";
|
import { getDictionary, getLocale } from "@/lib/i18n";
|
||||||
|
import { localized, logoUrl, SITE_TITLE } from "@/lib/types";
|
||||||
import type { CodeItem, MenuEntry, Section } from "@/lib/types";
|
import type { CodeItem, MenuEntry, Section } from "@/lib/types";
|
||||||
import PublicMobileMenu from "@/components/PublicMobileMenu";
|
import PublicMobileMenu from "@/components/PublicMobileMenu";
|
||||||
|
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
||||||
|
|
||||||
export default async function Home({
|
export default async function Home({
|
||||||
searchParams,
|
searchParams,
|
||||||
@@ -23,7 +24,9 @@ export default async function Home({
|
|||||||
const monday = mondayOf(woche);
|
const monday = mondayOf(woche);
|
||||||
const friday = addDays(monday, 4);
|
const friday = addDays(monday, 4);
|
||||||
const currentWeek = mondayOf(todayISO());
|
const currentWeek = mondayOf(todayISO());
|
||||||
const days = WEEKDAYS.map((weekday, i) => ({
|
const locale = await getLocale();
|
||||||
|
const dict = getDictionary(locale);
|
||||||
|
const days = dict.weekdays.long.map((weekday, i) => ({
|
||||||
weekday,
|
weekday,
|
||||||
iso: addDays(monday, i),
|
iso: addDays(monday, i),
|
||||||
}));
|
}));
|
||||||
@@ -35,7 +38,7 @@ export default async function Home({
|
|||||||
supabase
|
supabase
|
||||||
.from("menu_entries")
|
.from("menu_entries")
|
||||||
.select(
|
.select(
|
||||||
"id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
|
"id, menu_date, section_key, position, dish:dishes(id, name, name_en, name_pl, price, allergens, additives)"
|
||||||
)
|
)
|
||||||
.gte("menu_date", monday)
|
.gte("menu_date", monday)
|
||||||
.lte("menu_date", friday)
|
.lte("menu_date", friday)
|
||||||
@@ -54,16 +57,18 @@ export default async function Home({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
|
<div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
|
||||||
{/* Kopfbereich: Login-Link eigene Zeile, Logo zentriert darunter.
|
{/* Kopfbereich: Sprache + Login-Link eigene Zeile, Logo zentriert
|
||||||
Kein absolutes Positionieren mehr – ein breites Logo (z. B. ein
|
darunter. Kein absolutes Positionieren mehr – ein breites Logo
|
||||||
Banner-Format) konnte sonst mit dem Login-Link kollidieren. */}
|
(z. B. ein Banner-Format) konnte sonst mit dem Login-Link
|
||||||
|
kollidieren. */}
|
||||||
<header className="mb-6">
|
<header className="mb-6">
|
||||||
<div className="flex justify-end mb-2">
|
<div className="flex justify-end items-center gap-3 mb-2">
|
||||||
|
<LanguageSwitcher variant="light" />
|
||||||
<Link
|
<Link
|
||||||
href="/login"
|
href="/login"
|
||||||
className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
|
className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
|
||||||
>
|
>
|
||||||
Anmelden
|
{dict.common.login}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
@@ -87,15 +92,18 @@ export default async function Home({
|
|||||||
|
|
||||||
{/* Ab "sm": klassische Wochentabelle */}
|
{/* Ab "sm": klassische Wochentabelle */}
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<div className="flex gap-3 mb-4">
|
<div className="flex flex-wrap items-center gap-3 mb-4">
|
||||||
<Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
|
<Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
|
||||||
← Vorherige Woche
|
{dict.publicMenu.prevWeek}
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
|
<Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
|
||||||
Heute
|
{dict.publicMenu.today}
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
|
<Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
|
||||||
Nächste Woche →
|
{dict.publicMenu.nextWeek}
|
||||||
|
</Link>
|
||||||
|
<Link href="/vorschlag" className="btn btn-neutral ml-auto">
|
||||||
|
{dict.publicMenu.suggestDish}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -108,7 +116,7 @@ export default async function Home({
|
|||||||
<th key={d.iso} className="day-head">
|
<th key={d.iso} className="day-head">
|
||||||
<span className="font-bold">{d.weekday}</span>
|
<span className="font-bold">{d.weekday}</span>
|
||||||
<br />
|
<br />
|
||||||
{formatDateLong(d.iso)}
|
{formatDateLong(d.iso, dict.dateLocale)}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
@@ -117,7 +125,7 @@ export default async function Home({
|
|||||||
{sections.map((s) => (
|
{sections.map((s) => (
|
||||||
<tr key={s.key}>
|
<tr key={s.key}>
|
||||||
<th className="section-head">
|
<th className="section-head">
|
||||||
<div>{s.label}</div>
|
<div>{localized(s, locale)}</div>
|
||||||
<div className="time">{s.time_range}</div>
|
<div className="time">{s.time_range}</div>
|
||||||
</th>
|
</th>
|
||||||
{days.map((d) => (
|
{days.map((d) => (
|
||||||
@@ -126,7 +134,9 @@ export default async function Home({
|
|||||||
const codes = dishCodes(e.dish);
|
const codes = dishCodes(e.dish);
|
||||||
return (
|
return (
|
||||||
<div key={e.id} className="dish">
|
<div key={e.id} className="dish">
|
||||||
<span className="font-bold">{e.dish.name}</span>
|
<span className="font-bold">
|
||||||
|
{localized(e.dish, locale)}
|
||||||
|
</span>
|
||||||
{codes && <sup className="dish-codes">{codes}</sup>}
|
{codes && <sup className="dish-codes">{codes}</sup>}
|
||||||
{" – "}
|
{" – "}
|
||||||
{formatPrice(e.dish.price)}
|
{formatPrice(e.dish.price)}
|
||||||
@@ -145,23 +155,27 @@ export default async function Home({
|
|||||||
{/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
|
{/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
|
||||||
<section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
|
<section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-bold text-[var(--c-primary)] mb-2">Allergene</h2>
|
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
||||||
|
{dict.publicMenu.allergens}
|
||||||
|
</h2>
|
||||||
<ul className="space-y-0.5">
|
<ul className="space-y-0.5">
|
||||||
{allergens.map((a) => (
|
{allergens.map((a) => (
|
||||||
<li key={a.code}>
|
<li key={a.code}>
|
||||||
<span className="font-semibold">{a.code}</span> – {a.name}
|
<span className="font-semibold">{a.code}</span> –{" "}
|
||||||
|
{localized(a, locale)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
||||||
Zusatzstoffe
|
{dict.publicMenu.additives}
|
||||||
</h2>
|
</h2>
|
||||||
<ul className="space-y-0.5">
|
<ul className="space-y-0.5">
|
||||||
{additives.map((a) => (
|
{additives.map((a) => (
|
||||||
<li key={a.code}>
|
<li key={a.code}>
|
||||||
<span className="font-semibold">{a.code}</span> – {a.name}
|
<span className="font-semibold">{a.code}</span> –{" "}
|
||||||
|
{localized(a, locale)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -3,20 +3,17 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import type { Dict } from "@/lib/i18n/shared";
|
||||||
import PasskeyManager from "@/components/PasskeyManager";
|
import PasskeyManager from "@/components/PasskeyManager";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
const ROLE_LABELS: Record<string, string> = {
|
function authErrorMessage(dict: Dict, message: string): string {
|
||||||
admin: "Administrator",
|
|
||||||
staff: "Kantinenmitarbeiter",
|
|
||||||
};
|
|
||||||
|
|
||||||
function germanAuthError(message: string): string {
|
|
||||||
if (/invalid login credentials/i.test(message))
|
if (/invalid login credentials/i.test(message))
|
||||||
return "Das aktuelle Passwort ist falsch.";
|
return dict.account.wrongCurrentPassword;
|
||||||
if (/should be at least/i.test(message))
|
if (/should be at least/i.test(message)) return dict.account.passwordTooShort;
|
||||||
return "Das neue Passwort ist zu kurz (mindestens 8 Zeichen).";
|
|
||||||
if (/email.*already|already.*registered/i.test(message))
|
if (/email.*already|already.*registered/i.test(message))
|
||||||
return "Diese E-Mail-Adresse wird bereits verwendet.";
|
return dict.account.emailAlreadyUsed;
|
||||||
return message;
|
return message;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -33,6 +30,8 @@ export default function AccountManager({
|
|||||||
}) {
|
}) {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const dict = useDict();
|
||||||
|
const roleLabel = role === "admin" ? dict.common.roleAdmin : dict.common.roleStaff;
|
||||||
|
|
||||||
// Persönliche Daten
|
// Persönliche Daten
|
||||||
const [fullName, setFullName] = useState(initialFullName);
|
const [fullName, setFullName] = useState(initialFullName);
|
||||||
@@ -75,7 +74,7 @@ export default function AccountManager({
|
|||||||
setNameInfo(null);
|
setNameInfo(null);
|
||||||
const name = fullName.trim();
|
const name = fullName.trim();
|
||||||
if (!name) {
|
if (!name) {
|
||||||
setNameError("Bitte einen Namen angeben.");
|
setNameError(dict.account.nameRequired);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setNameBusy(true);
|
setNameBusy(true);
|
||||||
@@ -83,9 +82,10 @@ export default function AccountManager({
|
|||||||
.from("profiles")
|
.from("profiles")
|
||||||
.update({ full_name: name })
|
.update({ full_name: name })
|
||||||
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
|
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
|
||||||
if (error) setNameError(`Speichern fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setNameError(formatMessage(dict.account.saveError, { message: error.message }));
|
||||||
else {
|
else {
|
||||||
setNameInfo("Name gespeichert.");
|
setNameInfo(dict.account.nameSaved);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}
|
}
|
||||||
setNameBusy(false);
|
setNameBusy(false);
|
||||||
@@ -100,11 +100,13 @@ export default function AccountManager({
|
|||||||
setEmailBusy(true);
|
setEmailBusy(true);
|
||||||
const { error } = await supabase.auth.updateUser({ email: next });
|
const { error } = await supabase.auth.updateUser({ email: next });
|
||||||
if (error) {
|
if (error) {
|
||||||
setEmailError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
|
setEmailError(
|
||||||
} else {
|
formatMessage(dict.account.changeError, {
|
||||||
setEmailInfo(
|
message: authErrorMessage(dict, error.message),
|
||||||
"Bestätigungs-E-Mails wurden verschickt. Die neue Adresse wird erst nach Bestätigung des Links aktiv."
|
})
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
setEmailInfo(dict.account.emailSent);
|
||||||
}
|
}
|
||||||
setEmailBusy(false);
|
setEmailBusy(false);
|
||||||
}
|
}
|
||||||
@@ -114,11 +116,11 @@ export default function AccountManager({
|
|||||||
setPwError(null);
|
setPwError(null);
|
||||||
setPwInfo(null);
|
setPwInfo(null);
|
||||||
if (newPassword.length < 8) {
|
if (newPassword.length < 8) {
|
||||||
setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein.");
|
setPwError(dict.account.passwordTooShort);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (newPassword !== newPasswordRepeat) {
|
if (newPassword !== newPasswordRepeat) {
|
||||||
setPwError("Die Passwörter stimmen nicht überein.");
|
setPwError(dict.account.passwordMismatch);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setPwBusy(true);
|
setPwBusy(true);
|
||||||
@@ -129,16 +131,20 @@ export default function AccountManager({
|
|||||||
password: currentPassword,
|
password: currentPassword,
|
||||||
});
|
});
|
||||||
if (verifyError) {
|
if (verifyError) {
|
||||||
setPwError(germanAuthError(verifyError.message));
|
setPwError(authErrorMessage(dict, verifyError.message));
|
||||||
setPwBusy(false);
|
setPwBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { error } = await supabase.auth.updateUser({ password: newPassword });
|
const { error } = await supabase.auth.updateUser({ password: newPassword });
|
||||||
if (error) {
|
if (error) {
|
||||||
setPwError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`);
|
setPwError(
|
||||||
|
formatMessage(dict.account.changeError, {
|
||||||
|
message: authErrorMessage(dict, error.message),
|
||||||
|
})
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
setPwInfo("Passwort geändert.");
|
setPwInfo(dict.account.passwordChanged);
|
||||||
setCurrentPassword("");
|
setCurrentPassword("");
|
||||||
setNewPassword("");
|
setNewPassword("");
|
||||||
setNewPasswordRepeat("");
|
setNewPasswordRepeat("");
|
||||||
@@ -151,18 +157,10 @@ export default function AccountManager({
|
|||||||
setAuthInfo(null);
|
setAuthInfo(null);
|
||||||
const next = !passwordAuthEnabled;
|
const next = !passwordAuthEnabled;
|
||||||
if (!next && (passkeyCount ?? 0) === 0) {
|
if (!next && (passkeyCount ?? 0) === 0) {
|
||||||
setAuthError(
|
setAuthError(dict.account.passwordAuthNeedsPasskey);
|
||||||
"Ohne registrierten Passkey kannst du die Passwort-Anmeldung nicht deaktivieren – sonst wärst du ausgesperrt. Registriere zuerst einen Passkey weiter unten."
|
|
||||||
);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (
|
if (!next && !window.confirm(dict.account.confirmDisablePasswordAuth)) return;
|
||||||
!next &&
|
|
||||||
!window.confirm(
|
|
||||||
"Anmeldung mit E-Mail und Passwort wirklich deaktivieren? Du kannst dich danach nur noch per Passkey anmelden."
|
|
||||||
)
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
|
|
||||||
setAuthBusy(true);
|
setAuthBusy(true);
|
||||||
const { error } = await supabase
|
const { error } = await supabase
|
||||||
@@ -170,11 +168,11 @@ export default function AccountManager({
|
|||||||
.update({ password_auth_enabled: next })
|
.update({ password_auth_enabled: next })
|
||||||
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
|
.eq("id", (await supabase.auth.getUser()).data.user?.id ?? "");
|
||||||
if (error) {
|
if (error) {
|
||||||
setAuthError(`Speichern fehlgeschlagen: ${error.message}`);
|
setAuthError(formatMessage(dict.account.saveError, { message: error.message }));
|
||||||
} else {
|
} else {
|
||||||
setPasswordAuthEnabled(next);
|
setPasswordAuthEnabled(next);
|
||||||
setAuthInfo(
|
setAuthInfo(
|
||||||
next ? "Passwort-Anmeldung aktiviert." : "Passwort-Anmeldung deaktiviert."
|
next ? dict.account.passwordAuthEnabled : dict.account.passwordAuthDisabled
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
setAuthBusy(false);
|
setAuthBusy(false);
|
||||||
@@ -183,18 +181,20 @@ export default function AccountManager({
|
|||||||
return (
|
return (
|
||||||
<div className="max-w-3xl space-y-6">
|
<div className="max-w-3xl space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)]">Mein Konto</h1>
|
<h1 className="text-xl font-bold text-[var(--c-primary)]">
|
||||||
|
{dict.account.title}
|
||||||
|
</h1>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
{initialEmail} – {ROLE_LABELS[role] ?? role}
|
{initialEmail} – {roleLabel}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">Persönliche Daten</h2>
|
<h2 className="font-semibold mb-3">{dict.account.personalTitle}</h2>
|
||||||
<form onSubmit={saveName} className="space-y-3">
|
<form onSubmit={saveName} className="space-y-3">
|
||||||
<div className="max-w-80">
|
<div className="max-w-80">
|
||||||
<label className="label" htmlFor="account-name">
|
<label className="label" htmlFor="account-name">
|
||||||
Name
|
{dict.common.name}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="account-name"
|
id="account-name"
|
||||||
@@ -211,17 +211,17 @@ export default function AccountManager({
|
|||||||
)}
|
)}
|
||||||
{nameInfo && <p className="text-sm text-green-700">{nameInfo}</p>}
|
{nameInfo && <p className="text-sm text-green-700">{nameInfo}</p>}
|
||||||
<button type="submit" className="btn btn-add" disabled={nameBusy}>
|
<button type="submit" className="btn btn-add" disabled={nameBusy}>
|
||||||
Name speichern
|
{dict.account.saveName}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">E-Mail-Adresse</h2>
|
<h2 className="font-semibold mb-3">{dict.account.emailTitle}</h2>
|
||||||
<form onSubmit={saveEmail} className="space-y-3">
|
<form onSubmit={saveEmail} className="space-y-3">
|
||||||
<div className="max-w-80">
|
<div className="max-w-80">
|
||||||
<label className="label" htmlFor="account-email">
|
<label className="label" htmlFor="account-email">
|
||||||
E-Mail-Adresse
|
{dict.common.email}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="account-email"
|
id="account-email"
|
||||||
@@ -243,17 +243,17 @@ export default function AccountManager({
|
|||||||
className="btn btn-add"
|
className="btn btn-add"
|
||||||
disabled={emailBusy || email.trim() === initialEmail}
|
disabled={emailBusy || email.trim() === initialEmail}
|
||||||
>
|
>
|
||||||
E-Mail-Adresse ändern
|
{dict.account.changeEmail}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">Passwort ändern</h2>
|
<h2 className="font-semibold mb-3">{dict.account.passwordTitle}</h2>
|
||||||
<form onSubmit={savePassword} className="space-y-3">
|
<form onSubmit={savePassword} className="space-y-3">
|
||||||
<div className="max-w-80">
|
<div className="max-w-80">
|
||||||
<label className="label" htmlFor="account-current-password">
|
<label className="label" htmlFor="account-current-password">
|
||||||
Aktuelles Passwort (zur Verifizierung)
|
{dict.account.currentPassword}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="account-current-password"
|
id="account-current-password"
|
||||||
@@ -267,7 +267,7 @@ export default function AccountManager({
|
|||||||
</div>
|
</div>
|
||||||
<div className="max-w-80">
|
<div className="max-w-80">
|
||||||
<label className="label" htmlFor="account-new-password">
|
<label className="label" htmlFor="account-new-password">
|
||||||
Neues Passwort
|
{dict.account.newPassword}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="account-new-password"
|
id="account-new-password"
|
||||||
@@ -282,7 +282,7 @@ export default function AccountManager({
|
|||||||
</div>
|
</div>
|
||||||
<div className="max-w-80">
|
<div className="max-w-80">
|
||||||
<label className="label" htmlFor="account-new-password-repeat">
|
<label className="label" htmlFor="account-new-password-repeat">
|
||||||
Neues Passwort wiederholen
|
{dict.account.newPasswordRepeat}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="account-new-password-repeat"
|
id="account-new-password-repeat"
|
||||||
@@ -302,18 +302,14 @@ export default function AccountManager({
|
|||||||
)}
|
)}
|
||||||
{pwInfo && <p className="text-sm text-green-700">{pwInfo}</p>}
|
{pwInfo && <p className="text-sm text-green-700">{pwInfo}</p>}
|
||||||
<button type="submit" className="btn btn-add" disabled={pwBusy}>
|
<button type="submit" className="btn btn-add" disabled={pwBusy}>
|
||||||
Passwort ändern
|
{dict.account.changePassword}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-1">Anmeldung mit Passwort</h2>
|
<h2 className="font-semibold mb-1">{dict.account.passwordAuthTitle}</h2>
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
<p className="text-sm text-gray-600 mb-3">{dict.account.passwordAuthHint}</p>
|
||||||
Du kannst die Anmeldung mit E-Mail und Passwort für dein Konto
|
|
||||||
deaktivieren und dich künftig ausschließlich per Passkey anmelden.
|
|
||||||
Dafür muss mindestens ein Passkey registriert sein.
|
|
||||||
</p>
|
|
||||||
{authError && (
|
{authError && (
|
||||||
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
|
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
|
||||||
{authError}
|
{authError}
|
||||||
@@ -327,7 +323,7 @@ export default function AccountManager({
|
|||||||
onChange={togglePasswordAuth}
|
onChange={togglePasswordAuth}
|
||||||
disabled={authBusy || passkeyCount === null}
|
disabled={authBusy || passkeyCount === null}
|
||||||
/>
|
/>
|
||||||
Anmeldung mit E-Mail und Passwort erlaubt
|
{dict.account.passwordAuthCheckbox}
|
||||||
</label>
|
</label>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
+25
-21
@@ -8,17 +8,8 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import type { Role } from "@/lib/types";
|
import type { Role } from "@/lib/types";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
const MENU_LINKS = [
|
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
||||||
{ href: "/intern", label: "Wochenplan" },
|
|
||||||
{ href: "/intern/gerichte", label: "Gerichte" },
|
|
||||||
{ href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const ADMIN_LINKS = [
|
|
||||||
{ href: "/admin", label: "Benutzer" },
|
|
||||||
{ href: "/admin/design", label: "Design" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function AppHeader({
|
export default function AppHeader({
|
||||||
role,
|
role,
|
||||||
@@ -28,6 +19,18 @@ export default function AppHeader({
|
|||||||
displayName: string;
|
displayName: string;
|
||||||
}) {
|
}) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const dict = useDict();
|
||||||
|
|
||||||
|
const menuLinks = [
|
||||||
|
{ href: "/intern", label: dict.header.weekPlan },
|
||||||
|
{ href: "/intern/gerichte", label: dict.header.dishes },
|
||||||
|
{ href: "/intern/kennzeichnung", label: dict.header.labels },
|
||||||
|
{ href: "/intern/vorschlaege", label: dict.header.suggestions },
|
||||||
|
];
|
||||||
|
const adminLinks = [
|
||||||
|
{ href: "/admin", label: dict.header.users },
|
||||||
|
{ href: "/admin/design", label: dict.header.design },
|
||||||
|
];
|
||||||
|
|
||||||
const linkClass = (href: string) =>
|
const linkClass = (href: string) =>
|
||||||
`rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
|
`rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
|
||||||
@@ -37,16 +40,16 @@ export default function AppHeader({
|
|||||||
return (
|
return (
|
||||||
<header className="bg-[var(--c-primary-dark)] text-white">
|
<header className="bg-[var(--c-primary-dark)] text-white">
|
||||||
<div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
|
<div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
|
||||||
<span className="font-bold text-base">Kantine</span>
|
<span className="font-bold text-base">{dict.header.canteen}</span>
|
||||||
|
|
||||||
<nav
|
<nav
|
||||||
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
||||||
aria-label="Speiseplan"
|
aria-label={dict.header.menuGroup}
|
||||||
>
|
>
|
||||||
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
||||||
Speiseplan
|
{dict.header.menuGroup}
|
||||||
</span>
|
</span>
|
||||||
{MENU_LINKS.map((l) => (
|
{menuLinks.map((l) => (
|
||||||
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
||||||
{l.label}
|
{l.label}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -56,12 +59,12 @@ export default function AppHeader({
|
|||||||
{role === "admin" && (
|
{role === "admin" && (
|
||||||
<nav
|
<nav
|
||||||
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
||||||
aria-label="Verwaltung"
|
aria-label={dict.header.adminGroup}
|
||||||
>
|
>
|
||||||
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
||||||
Verwaltung
|
{dict.header.adminGroup}
|
||||||
</span>
|
</span>
|
||||||
{ADMIN_LINKS.map((l) => (
|
{adminLinks.map((l) => (
|
||||||
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
||||||
{l.label}
|
{l.label}
|
||||||
</Link>
|
</Link>
|
||||||
@@ -73,13 +76,14 @@ export default function AppHeader({
|
|||||||
href="/"
|
href="/"
|
||||||
className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
|
className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
|
||||||
>
|
>
|
||||||
Speisekarte ansehen
|
{dict.header.viewMenu}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="ml-auto flex items-center gap-3">
|
<div className="ml-auto flex items-center gap-3">
|
||||||
|
<LanguageSwitcher />
|
||||||
<Link
|
<Link
|
||||||
href="/konto"
|
href="/konto"
|
||||||
title="Mein Konto"
|
title={dict.header.myAccount}
|
||||||
className={`rounded px-2 py-0.5 hover:bg-white/10 ${
|
className={`rounded px-2 py-0.5 hover:bg-white/10 ${
|
||||||
pathname === "/konto"
|
pathname === "/konto"
|
||||||
? "bg-white/20 font-semibold"
|
? "bg-white/20 font-semibold"
|
||||||
@@ -90,7 +94,7 @@ export default function AppHeader({
|
|||||||
</Link>
|
</Link>
|
||||||
<form action="/logout" method="post">
|
<form action="/logout" method="post">
|
||||||
<button type="submit" className="btn btn-del">
|
<button type="submit" className="btn btn-del">
|
||||||
Abmelden
|
{dict.common.logout}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import type { CodeItem } from "@/lib/types";
|
import type { CodeItem } from "@/lib/types";
|
||||||
|
import { localized } from "@/lib/types";
|
||||||
|
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
export default function ChipPicker({
|
export default function ChipPicker({
|
||||||
items,
|
items,
|
||||||
@@ -13,15 +15,19 @@ export default function ChipPicker({
|
|||||||
onToggle: (code: string) => void;
|
onToggle: (code: string) => void;
|
||||||
label: string;
|
label: string;
|
||||||
}) {
|
}) {
|
||||||
|
const dict = useDict();
|
||||||
|
const locale = useLocale();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<label className="label">{label}</label>
|
<label className="label">{label}</label>
|
||||||
{items.length === 0 ? (
|
{items.length === 0 ? (
|
||||||
<p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
|
<p className="text-sm text-gray-400">{dict.codeList.empty}</p>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-wrap gap-1.5">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{items.map((item) => {
|
{items.map((item) => {
|
||||||
const active = selected.includes(item.code);
|
const active = selected.includes(item.code);
|
||||||
|
const name = localized(item, locale);
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={item.code}
|
key={item.code}
|
||||||
@@ -29,9 +35,9 @@ export default function ChipPicker({
|
|||||||
onClick={() => onToggle(item.code)}
|
onClick={() => onToggle(item.code)}
|
||||||
className={`chip ${active ? "chip-active" : ""}`}
|
className={`chip ${active ? "chip-active" : ""}`}
|
||||||
aria-pressed={active}
|
aria-pressed={active}
|
||||||
title={item.name}
|
title={name}
|
||||||
>
|
>
|
||||||
<span className="font-semibold">{item.code}</span> {item.name}
|
<span className="font-semibold">{item.code}</span> {name}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
+125
-24
@@ -5,31 +5,44 @@
|
|||||||
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { localized } from "@/lib/types";
|
||||||
import type { CodeItem } from "@/lib/types";
|
import type { CodeItem } from "@/lib/types";
|
||||||
|
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
export default function CodeListManager({
|
export default function CodeListManager({
|
||||||
table,
|
table,
|
||||||
title,
|
|
||||||
codeLabel,
|
|
||||||
}: {
|
}: {
|
||||||
table: "allergens" | "additives";
|
table: "allergens" | "additives";
|
||||||
title: string;
|
|
||||||
codeLabel: string;
|
|
||||||
}) {
|
}) {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
|
const dict = useDict();
|
||||||
|
const locale = useLocale();
|
||||||
|
const title =
|
||||||
|
table === "allergens" ? dict.codeList.allergensTitle : dict.codeList.additivesTitle;
|
||||||
|
const codeLabel =
|
||||||
|
table === "allergens"
|
||||||
|
? dict.codeList.allergenCodeLabel
|
||||||
|
: dict.codeList.additiveCodeLabel;
|
||||||
|
|
||||||
const [items, setItems] = useState<CodeItem[]>([]);
|
const [items, setItems] = useState<CodeItem[]>([]);
|
||||||
const [editing, setEditing] = useState<{
|
const [editing, setEditing] = useState<{
|
||||||
original: string | null; // code vor der Bearbeitung, null = neu
|
original: string | null; // code vor der Bearbeitung, null = neu
|
||||||
code: string;
|
code: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
nameEn: string;
|
||||||
|
namePl: string;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [translateState, setTranslateState] = useState<
|
||||||
|
"idle" | "busy" | "done" | "unavailable"
|
||||||
|
>("idle");
|
||||||
|
|
||||||
const load = useCallback(async () => {
|
const load = useCallback(async () => {
|
||||||
const { data, error } = await supabase.from(table).select("*").order("sort");
|
const { data, error } = await supabase.from(table).select("*").order("sort");
|
||||||
if (error) setError(`Laden fehlgeschlagen: ${error.message}`);
|
if (error) setError(formatMessage(dict.codeList.loadError, { message: error.message }));
|
||||||
else setItems(data as CodeItem[]);
|
else setItems(data as CodeItem[]);
|
||||||
}, [supabase, table]);
|
}, [supabase, table, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
@@ -42,24 +55,30 @@ export default function CodeListManager({
|
|||||||
const code = editing.code.trim();
|
const code = editing.code.trim();
|
||||||
const name = editing.name.trim();
|
const name = editing.name.trim();
|
||||||
if (!code || !name) return;
|
if (!code || !name) return;
|
||||||
|
const payload = {
|
||||||
|
code,
|
||||||
|
name,
|
||||||
|
name_en: editing.nameEn.trim() || null,
|
||||||
|
name_pl: editing.namePl.trim() || null,
|
||||||
|
};
|
||||||
|
|
||||||
let dbError;
|
let dbError;
|
||||||
if (editing.original) {
|
if (editing.original) {
|
||||||
({ error: dbError } = await supabase
|
({ error: dbError } = await supabase
|
||||||
.from(table)
|
.from(table)
|
||||||
.update({ code, name })
|
.update(payload)
|
||||||
.eq("code", editing.original));
|
.eq("code", editing.original));
|
||||||
} else {
|
} else {
|
||||||
const maxSort = items.reduce((m, i) => Math.max(m, i.sort), 0);
|
const maxSort = items.reduce((m, i) => Math.max(m, i.sort), 0);
|
||||||
({ error: dbError } = await supabase
|
({ error: dbError } = await supabase
|
||||||
.from(table)
|
.from(table)
|
||||||
.insert({ code, name, sort: maxSort + 1 }));
|
.insert({ ...payload, sort: maxSort + 1 }));
|
||||||
}
|
}
|
||||||
if (dbError) {
|
if (dbError) {
|
||||||
setError(
|
setError(
|
||||||
/duplicate key/i.test(dbError.message)
|
/duplicate key/i.test(dbError.message)
|
||||||
? `Das Kürzel „${code}“ existiert bereits.`
|
? formatMessage(dict.codeList.duplicateCode, { code })
|
||||||
: `Speichern fehlgeschlagen: ${dbError.message}`
|
: formatMessage(dict.codeList.saveError, { message: dbError.message })
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -68,13 +87,48 @@ export default function CodeListManager({
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function remove(item: CodeItem) {
|
async function remove(item: CodeItem) {
|
||||||
if (!window.confirm(`„${item.code} – ${item.name}“ wirklich löschen?`))
|
if (
|
||||||
|
!window.confirm(
|
||||||
|
formatMessage(dict.codeList.confirmDelete, { code: item.code, name: item.name })
|
||||||
|
)
|
||||||
|
)
|
||||||
return;
|
return;
|
||||||
const { error } = await supabase.from(table).delete().eq("code", item.code);
|
const { error } = await supabase.from(table).delete().eq("code", item.code);
|
||||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.codeList.deleteError, { message: error.message }));
|
||||||
await load();
|
await load();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function autoTranslate() {
|
||||||
|
if (!editing || !editing.name.trim()) return;
|
||||||
|
setTranslateState("busy");
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/translate", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
table,
|
||||||
|
id: editing.original,
|
||||||
|
text: editing.name.trim(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`);
|
||||||
|
if (data.configured === false) {
|
||||||
|
setTranslateState("unavailable");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setEditing((prev) =>
|
||||||
|
prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev
|
||||||
|
);
|
||||||
|
setTranslateState("done");
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
setTranslateState("idle");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<div className="flex items-center gap-3 mb-3">
|
<div className="flex items-center gap-3 mb-3">
|
||||||
@@ -84,9 +138,12 @@ export default function CodeListManager({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-add"
|
className="btn btn-add"
|
||||||
onClick={() => setEditing({ original: null, code: "", name: "" })}
|
onClick={() => {
|
||||||
|
setEditing({ original: null, code: "", name: "", nameEn: "", namePl: "" });
|
||||||
|
setTranslateState("idle");
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Hinzufügen
|
{dict.common.add}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -108,7 +165,7 @@ export default function CodeListManager({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="label">Bezeichnung</label>
|
<label className="label">{dict.codeList.nameLabel}</label>
|
||||||
<input
|
<input
|
||||||
className="input"
|
className="input"
|
||||||
value={editing.name}
|
value={editing.name}
|
||||||
@@ -116,16 +173,56 @@ export default function CodeListManager({
|
|||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label className="label">{dict.dishManager.nameEnLabel}</label>
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
value={editing.nameEn}
|
||||||
|
onChange={(e) => setEditing({ ...editing, nameEn: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="label">{dict.dishManager.namePlLabel}</label>
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
value={editing.namePl}
|
||||||
|
onChange={(e) => setEditing({ ...editing, namePl: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-neutral"
|
||||||
|
onClick={autoTranslate}
|
||||||
|
disabled={translateState === "busy" || !editing.name.trim()}
|
||||||
|
>
|
||||||
|
{translateState === "busy"
|
||||||
|
? dict.dishManager.translating
|
||||||
|
: dict.dishManager.autoTranslate}
|
||||||
|
</button>
|
||||||
|
{translateState === "done" && (
|
||||||
|
<span className="ml-2 text-sm text-green-700">
|
||||||
|
{dict.dishManager.translated}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{translateState === "unavailable" && (
|
||||||
|
<span className="ml-2 text-sm text-gray-500">
|
||||||
|
{dict.dishManager.translateUnavailable}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button type="submit" className="btn btn-add">
|
<button type="submit" className="btn btn-add">
|
||||||
Speichern
|
{dict.common.save}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-neutral"
|
className="btn btn-neutral"
|
||||||
onClick={() => setEditing(null)}
|
onClick={() => setEditing(null)}
|
||||||
>
|
>
|
||||||
Abbrechen
|
{dict.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -135,32 +232,36 @@ export default function CodeListManager({
|
|||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<li key={item.code} className="flex items-center gap-2 py-1.5 text-sm">
|
<li key={item.code} className="flex items-center gap-2 py-1.5 text-sm">
|
||||||
<span className="mr-auto">
|
<span className="mr-auto">
|
||||||
<span className="font-semibold">{item.code}</span> – {item.name}
|
<span className="font-semibold">{item.code}</span> –{" "}
|
||||||
|
{localized(item, locale)}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
onClick={() =>
|
onClick={() => {
|
||||||
setEditing({
|
setEditing({
|
||||||
original: item.code,
|
original: item.code,
|
||||||
code: item.code,
|
code: item.code,
|
||||||
name: item.name,
|
name: item.name,
|
||||||
})
|
nameEn: item.name_en ?? "",
|
||||||
}
|
namePl: item.name_pl ?? "",
|
||||||
|
});
|
||||||
|
setTranslateState("idle");
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Bearbeiten
|
{dict.common.edit}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-del"
|
className="btn btn-del"
|
||||||
onClick={() => remove(item)}
|
onClick={() => remove(item)}
|
||||||
>
|
>
|
||||||
Löschen
|
{dict.common.delete}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
{items.length === 0 && (
|
{items.length === 0 && (
|
||||||
<li className="py-2 text-gray-500 text-sm">Keine Einträge.</li>
|
<li className="py-2 text-gray-500 text-sm">{dict.codeList.empty}</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+47
-36
@@ -3,7 +3,9 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
import { COLOR_LABELS, DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
type AssetKind = "logo" | "favicon";
|
type AssetKind = "logo" | "favicon";
|
||||||
|
|
||||||
@@ -15,6 +17,17 @@ const ASSET_COLUMN: Record<AssetKind, "logo_path" | "favicon_path"> = {
|
|||||||
export default function DesignEditor() {
|
export default function DesignEditor() {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const dict = useDict();
|
||||||
|
const colorLabels: Record<string, string> = {
|
||||||
|
primary: dict.designEditor.colorPrimary,
|
||||||
|
primaryDark: dict.designEditor.colorPrimaryDark,
|
||||||
|
accent: dict.designEditor.colorAccent,
|
||||||
|
headerText: dict.designEditor.colorHeaderText,
|
||||||
|
rowBg: dict.designEditor.colorRowBg,
|
||||||
|
rowBgAlt: dict.designEditor.colorRowBgAlt,
|
||||||
|
addBtn: dict.designEditor.colorAddBtn,
|
||||||
|
deleteBtn: dict.designEditor.colorDeleteBtn,
|
||||||
|
};
|
||||||
const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
|
const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
|
||||||
const [logoPath, setLogoPath] = useState<string | null>(null);
|
const [logoPath, setLogoPath] = useState<string | null>(null);
|
||||||
const [faviconPath, setFaviconPath] = useState<string | null>(null);
|
const [faviconPath, setFaviconPath] = useState<string | null>(null);
|
||||||
@@ -29,13 +42,13 @@ export default function DesignEditor() {
|
|||||||
.eq("id", 1)
|
.eq("id", 1)
|
||||||
.maybeSingle();
|
.maybeSingle();
|
||||||
if (error) {
|
if (error) {
|
||||||
setError(`Laden fehlgeschlagen: ${error.message}`);
|
setError(formatMessage(dict.designEditor.loadError, { message: error.message }));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
|
setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
|
||||||
setLogoPath(data?.logo_path ?? null);
|
setLogoPath(data?.logo_path ?? null);
|
||||||
setFaviconPath(data?.favicon_path ?? null);
|
setFaviconPath(data?.favicon_path ?? null);
|
||||||
}, [supabase]);
|
}, [supabase, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
@@ -49,9 +62,10 @@ export default function DesignEditor() {
|
|||||||
.from("settings")
|
.from("settings")
|
||||||
.update({ colors })
|
.update({ colors })
|
||||||
.eq("id", 1);
|
.eq("id", 1);
|
||||||
if (error) setError(`Speichern fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
|
||||||
else {
|
else {
|
||||||
setInfo("Farben gespeichert.");
|
setInfo(dict.designEditor.colorsSaved);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}
|
}
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
@@ -66,7 +80,7 @@ export default function DesignEditor() {
|
|||||||
e.target.value = "";
|
e.target.value = "";
|
||||||
if (!file) return;
|
if (!file) return;
|
||||||
if (!/^image\//.test(file.type)) {
|
if (!/^image\//.test(file.type)) {
|
||||||
setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP, ICO).");
|
setError(dict.designEditor.invalidImage);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
@@ -80,7 +94,7 @@ export default function DesignEditor() {
|
|||||||
.from("branding")
|
.from("branding")
|
||||||
.upload(path, file, { contentType: file.type });
|
.upload(path, file, { contentType: file.type });
|
||||||
if (uploadError) {
|
if (uploadError) {
|
||||||
setError(`Upload fehlgeschlagen: ${uploadError.message}`);
|
setError(formatMessage(dict.designEditor.uploadError, { message: uploadError.message }));
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -90,7 +104,7 @@ export default function DesignEditor() {
|
|||||||
.update({ [ASSET_COLUMN[kind]]: path })
|
.update({ [ASSET_COLUMN[kind]]: path })
|
||||||
.eq("id", 1);
|
.eq("id", 1);
|
||||||
if (settingsError) {
|
if (settingsError) {
|
||||||
setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
|
setError(formatMessage(dict.designEditor.saveError, { message: settingsError.message }));
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -98,7 +112,7 @@ export default function DesignEditor() {
|
|||||||
|
|
||||||
if (kind === "logo") setLogoPath(path);
|
if (kind === "logo") setLogoPath(path);
|
||||||
else setFaviconPath(path);
|
else setFaviconPath(path);
|
||||||
setInfo(kind === "logo" ? "Logo aktualisiert." : "Favicon aktualisiert.");
|
setInfo(kind === "logo" ? dict.designEditor.logoUpdated : dict.designEditor.faviconUpdated);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
}
|
}
|
||||||
@@ -108,7 +122,9 @@ export default function DesignEditor() {
|
|||||||
if (!path) return;
|
if (!path) return;
|
||||||
if (
|
if (
|
||||||
!window.confirm(
|
!window.confirm(
|
||||||
`${kind === "logo" ? "Logo" : "Favicon"} wirklich entfernen?`
|
kind === "logo"
|
||||||
|
? dict.designEditor.confirmRemoveLogo
|
||||||
|
: dict.designEditor.confirmRemoveFavicon
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
@@ -119,12 +135,12 @@ export default function DesignEditor() {
|
|||||||
.update({ [ASSET_COLUMN[kind]]: null })
|
.update({ [ASSET_COLUMN[kind]]: null })
|
||||||
.eq("id", 1);
|
.eq("id", 1);
|
||||||
if (error) {
|
if (error) {
|
||||||
setError(`Speichern fehlgeschlagen: ${error.message}`);
|
setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
|
||||||
} else {
|
} else {
|
||||||
await supabase.storage.from("branding").remove([path]);
|
await supabase.storage.from("branding").remove([path]);
|
||||||
if (kind === "logo") setLogoPath(null);
|
if (kind === "logo") setLogoPath(null);
|
||||||
else setFaviconPath(null);
|
else setFaviconPath(null);
|
||||||
setInfo(kind === "logo" ? "Logo entfernt." : "Favicon entfernt.");
|
setInfo(kind === "logo" ? dict.designEditor.logoRemoved : dict.designEditor.faviconRemoved);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
}
|
}
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
@@ -135,7 +151,9 @@ export default function DesignEditor() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-3xl space-y-6">
|
<div className="max-w-3xl space-y-6">
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)]">Design</h1>
|
<h1 className="text-xl font-bold text-[var(--c-primary)]">
|
||||||
|
{dict.designEditor.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<p className="text-sm text-[var(--c-del)]" role="alert">
|
<p className="text-sm text-[var(--c-del)]" role="alert">
|
||||||
@@ -145,23 +163,21 @@ export default function DesignEditor() {
|
|||||||
{info && <p className="text-sm text-green-700">{info}</p>}
|
{info && <p className="text-sm text-green-700">{info}</p>}
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">Logo</h2>
|
<h2 className="font-semibold mb-3">{dict.designEditor.logoTitle}</h2>
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
<p className="text-sm text-gray-600 mb-3">{dict.designEditor.logoHint}</p>
|
||||||
Das Logo wird zentriert über der Speisekarte angezeigt.
|
|
||||||
</p>
|
|
||||||
{currentLogo ? (
|
{currentLogo ? (
|
||||||
// eslint-disable-next-line @next/next/no-img-element
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
<img
|
<img
|
||||||
src={currentLogo}
|
src={currentLogo}
|
||||||
alt="Aktuelles Logo"
|
alt="Logo"
|
||||||
className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
|
className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-gray-400 mb-3">Kein Logo hinterlegt.</p>
|
<p className="text-sm text-gray-400 mb-3">{dict.designEditor.logoNone}</p>
|
||||||
)}
|
)}
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
<label className="btn btn-primary cursor-pointer">
|
<label className="btn btn-primary cursor-pointer">
|
||||||
Logo hochladen
|
{dict.designEditor.logoUpload}
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
@@ -177,33 +193,28 @@ export default function DesignEditor() {
|
|||||||
onClick={() => removeAsset("logo")}
|
onClick={() => removeAsset("logo")}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Logo entfernen
|
{dict.designEditor.logoRemove}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">Favicon</h2>
|
<h2 className="font-semibold mb-3">{dict.designEditor.faviconTitle}</h2>
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
<p className="text-sm text-gray-600 mb-3">{dict.designEditor.faviconHint}</p>
|
||||||
Wird als Icon im Browser-Tab angezeigt. Ohne eigenes Favicon gilt
|
|
||||||
das Standard-Icon der Anwendung.
|
|
||||||
</p>
|
|
||||||
{currentFavicon ? (
|
{currentFavicon ? (
|
||||||
// eslint-disable-next-line @next/next/no-img-element
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
<img
|
<img
|
||||||
src={currentFavicon}
|
src={currentFavicon}
|
||||||
alt="Aktuelles Favicon"
|
alt="Favicon"
|
||||||
className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
|
className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-gray-400 mb-3">
|
<p className="text-sm text-gray-400 mb-3">{dict.designEditor.faviconNone}</p>
|
||||||
Kein eigenes Favicon hinterlegt.
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
<div className="flex gap-2 items-center">
|
<div className="flex gap-2 items-center">
|
||||||
<label className="btn btn-primary cursor-pointer">
|
<label className="btn btn-primary cursor-pointer">
|
||||||
Favicon hochladen
|
{dict.designEditor.faviconUpload}
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
accept="image/*"
|
accept="image/*"
|
||||||
@@ -219,16 +230,16 @@ export default function DesignEditor() {
|
|||||||
onClick={() => removeAsset("favicon")}
|
onClick={() => removeAsset("favicon")}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Favicon entfernen
|
{dict.designEditor.faviconRemove}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-3">Farbgebung</h2>
|
<h2 className="font-semibold mb-3">{dict.designEditor.colorsTitle}</h2>
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
{Object.entries(COLOR_LABELS).map(([key, label]) => (
|
{Object.entries(colorLabels).map(([key, label]) => (
|
||||||
<label key={key} className="flex items-center gap-3 text-sm">
|
<label key={key} className="flex items-center gap-3 text-sm">
|
||||||
<input
|
<input
|
||||||
type="color"
|
type="color"
|
||||||
@@ -249,7 +260,7 @@ export default function DesignEditor() {
|
|||||||
onClick={saveColors}
|
onClick={saveColors}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Farben speichern
|
{dict.designEditor.colorsSave}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -257,7 +268,7 @@ export default function DesignEditor() {
|
|||||||
onClick={resetColors}
|
onClick={resetColors}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Auf Standard zurücksetzen
|
{dict.designEditor.colorsReset}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+141
-36
@@ -3,12 +3,17 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
import { dishCodes, formatPrice } from "@/lib/menu";
|
import { dishCodes, formatPrice } from "@/lib/menu";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { localized } from "@/lib/types";
|
||||||
import type { CodeItem, Dish } from "@/lib/types";
|
import type { CodeItem, Dish } from "@/lib/types";
|
||||||
import ChipPicker from "@/components/ChipPicker";
|
import ChipPicker from "@/components/ChipPicker";
|
||||||
|
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
interface DishForm {
|
interface DishForm {
|
||||||
id: string | null; // null = neues Gericht
|
id: string | null; // null = neues Gericht
|
||||||
name: string;
|
name: string;
|
||||||
|
nameEn: string;
|
||||||
|
namePl: string;
|
||||||
price: string;
|
price: string;
|
||||||
allergens: string[];
|
allergens: string[];
|
||||||
additives: string[];
|
additives: string[];
|
||||||
@@ -17,6 +22,8 @@ interface DishForm {
|
|||||||
const EMPTY_FORM: DishForm = {
|
const EMPTY_FORM: DishForm = {
|
||||||
id: null,
|
id: null,
|
||||||
name: "",
|
name: "",
|
||||||
|
nameEn: "",
|
||||||
|
namePl: "",
|
||||||
price: "",
|
price: "",
|
||||||
allergens: [],
|
allergens: [],
|
||||||
additives: [],
|
additives: [],
|
||||||
@@ -24,6 +31,8 @@ const EMPTY_FORM: DishForm = {
|
|||||||
|
|
||||||
export default function DishManager() {
|
export default function DishManager() {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
|
const dict = useDict();
|
||||||
|
const locale = useLocale();
|
||||||
const [dishes, setDishes] = useState<Dish[]>([]);
|
const [dishes, setDishes] = useState<Dish[]>([]);
|
||||||
const [allergens, setAllergens] = useState<CodeItem[]>([]);
|
const [allergens, setAllergens] = useState<CodeItem[]>([]);
|
||||||
const [additives, setAdditives] = useState<CodeItem[]>([]);
|
const [additives, setAdditives] = useState<CodeItem[]>([]);
|
||||||
@@ -33,6 +42,9 @@ export default function DishManager() {
|
|||||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
const [bulkBusy, setBulkBusy] = useState(false);
|
const [bulkBusy, setBulkBusy] = useState(false);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
|
const [translateState, setTranslateState] = useState<
|
||||||
|
"idle" | "busy" | "done" | "unavailable"
|
||||||
|
>("idle");
|
||||||
|
|
||||||
// Live-Suche: filtert die Liste bereits während des Tippens
|
// Live-Suche: filtert die Liste bereits während des Tippens
|
||||||
const visible = useMemo(() => {
|
const visible = useMemo(() => {
|
||||||
@@ -47,14 +59,15 @@ export default function DishManager() {
|
|||||||
supabase.from("additives").select("*").order("sort"),
|
supabase.from("additives").select("*").order("sort"),
|
||||||
]);
|
]);
|
||||||
const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error;
|
const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error;
|
||||||
if (problem) setError(`Laden fehlgeschlagen: ${problem.message}`);
|
if (problem)
|
||||||
|
setError(formatMessage(dict.dishManager.loadError, { message: problem.message }));
|
||||||
else {
|
else {
|
||||||
setDishes(dishesRes.data as Dish[]);
|
setDishes(dishesRes.data as Dish[]);
|
||||||
setAllergens(allergensRes.data as CodeItem[]);
|
setAllergens(allergensRes.data as CodeItem[]);
|
||||||
setAdditives(additivesRes.data as CodeItem[]);
|
setAdditives(additivesRes.data as CodeItem[]);
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}, [supabase]);
|
}, [supabase, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
@@ -66,11 +79,13 @@ export default function DishManager() {
|
|||||||
setError(null);
|
setError(null);
|
||||||
const price = Number.parseFloat(form.price.replace(",", "."));
|
const price = Number.parseFloat(form.price.replace(",", "."));
|
||||||
if (Number.isNaN(price) || price < 0) {
|
if (Number.isNaN(price) || price < 0) {
|
||||||
setError("Bitte einen gültigen Preis angeben, z. B. 3,50");
|
setError(dict.dishManager.invalidPrice);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const payload = {
|
const payload = {
|
||||||
name: form.name.trim(),
|
name: form.name.trim(),
|
||||||
|
name_en: form.nameEn.trim() || null,
|
||||||
|
name_pl: form.namePl.trim() || null,
|
||||||
price,
|
price,
|
||||||
allergens: form.allergens,
|
allergens: form.allergens,
|
||||||
additives: form.additives,
|
additives: form.additives,
|
||||||
@@ -79,7 +94,7 @@ export default function DishManager() {
|
|||||||
? await supabase.from("dishes").update(payload).eq("id", form.id)
|
? await supabase.from("dishes").update(payload).eq("id", form.id)
|
||||||
: await supabase.from("dishes").insert(payload);
|
: await supabase.from("dishes").insert(payload);
|
||||||
if (error) {
|
if (error) {
|
||||||
setError(`Speichern fehlgeschlagen: ${error.message}`);
|
setError(formatMessage(dict.dishManager.saveError, { message: error.message }));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setForm(null);
|
setForm(null);
|
||||||
@@ -89,12 +104,13 @@ export default function DishManager() {
|
|||||||
async function remove(dish: Dish) {
|
async function remove(dish: Dish) {
|
||||||
if (
|
if (
|
||||||
!window.confirm(
|
!window.confirm(
|
||||||
`„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
|
formatMessage(dict.dishManager.confirmDelete, { name: dish.name })
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
|
const { error } = await supabase.from("dishes").delete().eq("id", dish.id);
|
||||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
|
||||||
setSelected((prev) => {
|
setSelected((prev) => {
|
||||||
const next = new Set(prev);
|
const next = new Set(prev);
|
||||||
next.delete(dish.id);
|
next.delete(dish.id);
|
||||||
@@ -128,7 +144,9 @@ export default function DishManager() {
|
|||||||
if (selected.size === 0) return;
|
if (selected.size === 0) return;
|
||||||
if (
|
if (
|
||||||
!window.confirm(
|
!window.confirm(
|
||||||
`${selected.size} Gericht(e) wirklich löschen? Sie werden auch aus allen Wochenplänen entfernt.`
|
formatMessage(dict.dishManager.confirmDeleteSelected, {
|
||||||
|
count: selected.size,
|
||||||
|
})
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
@@ -138,7 +156,8 @@ export default function DishManager() {
|
|||||||
.from("dishes")
|
.from("dishes")
|
||||||
.delete()
|
.delete()
|
||||||
.in("id", Array.from(selected));
|
.in("id", Array.from(selected));
|
||||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.dishManager.deleteError, { message: error.message }));
|
||||||
setSelected(new Set());
|
setSelected(new Set());
|
||||||
setBulkBusy(false);
|
setBulkBusy(false);
|
||||||
await load();
|
await load();
|
||||||
@@ -164,6 +183,36 @@ export default function DishManager() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function autoTranslate() {
|
||||||
|
if (!form || !form.name.trim()) return;
|
||||||
|
setTranslateState("busy");
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/translate", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
table: "dishes",
|
||||||
|
id: form.id,
|
||||||
|
text: form.name.trim(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`);
|
||||||
|
if (data.configured === false) {
|
||||||
|
setTranslateState("unavailable");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setForm((prev) =>
|
||||||
|
prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev
|
||||||
|
);
|
||||||
|
setTranslateState("done");
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
setTranslateState("idle");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const allSelected =
|
const allSelected =
|
||||||
visible.length > 0 && visible.every((d) => selected.has(d.id));
|
visible.length > 0 && visible.every((d) => selected.has(d.id));
|
||||||
|
|
||||||
@@ -171,14 +220,17 @@ export default function DishManager() {
|
|||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
||||||
Gerichte
|
{dict.dishManager.title}
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-add"
|
className="btn btn-add"
|
||||||
onClick={() => setForm(EMPTY_FORM)}
|
onClick={() => {
|
||||||
|
setForm(EMPTY_FORM);
|
||||||
|
setTranslateState("idle");
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Neues Gericht
|
{dict.dishManager.newDish}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -191,11 +243,11 @@ export default function DishManager() {
|
|||||||
{form && (
|
{form && (
|
||||||
<form onSubmit={save} className="card mb-4 space-y-4">
|
<form onSubmit={save} className="card mb-4 space-y-4">
|
||||||
<h2 className="font-semibold">
|
<h2 className="font-semibold">
|
||||||
{form.id ? "Gericht bearbeiten" : "Neues Gericht"}
|
{form.id ? dict.dishManager.editDish : dict.dishManager.newDish}
|
||||||
</h2>
|
</h2>
|
||||||
<div>
|
<div>
|
||||||
<label className="label" htmlFor="dish-name">
|
<label className="label" htmlFor="dish-name">
|
||||||
Bezeichnung
|
{dict.dishManager.nameLabel}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="dish-name"
|
id="dish-name"
|
||||||
@@ -207,57 +259,105 @@ export default function DishManager() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="max-w-40">
|
<div className="max-w-40">
|
||||||
<label className="label" htmlFor="dish-price">
|
<label className="label" htmlFor="dish-price">
|
||||||
Preis in €
|
{dict.dishManager.priceLabel}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="dish-price"
|
id="dish-price"
|
||||||
className="input"
|
className="input"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
placeholder="3,50"
|
placeholder={dict.dishManager.pricePlaceholder}
|
||||||
value={form.price}
|
value={form.price}
|
||||||
onChange={(e) => setForm({ ...form, price: e.target.value })}
|
onChange={(e) => setForm({ ...form, price: e.target.value })}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label className="label" htmlFor="dish-name-en">
|
||||||
|
{dict.dishManager.nameEnLabel}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dish-name-en"
|
||||||
|
className="input"
|
||||||
|
value={form.nameEn}
|
||||||
|
onChange={(e) => setForm({ ...form, nameEn: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="label" htmlFor="dish-name-pl">
|
||||||
|
{dict.dishManager.namePlLabel}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="dish-name-pl"
|
||||||
|
className="input"
|
||||||
|
value={form.namePl}
|
||||||
|
onChange={(e) => setForm({ ...form, namePl: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-neutral"
|
||||||
|
onClick={autoTranslate}
|
||||||
|
disabled={translateState === "busy" || !form.name.trim()}
|
||||||
|
>
|
||||||
|
{translateState === "busy"
|
||||||
|
? dict.dishManager.translating
|
||||||
|
: dict.dishManager.autoTranslate}
|
||||||
|
</button>
|
||||||
|
{translateState === "done" && (
|
||||||
|
<span className="ml-2 text-sm text-green-700">
|
||||||
|
{dict.dishManager.translated}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{translateState === "unavailable" && (
|
||||||
|
<span className="ml-2 text-sm text-gray-500">
|
||||||
|
{dict.dishManager.translateUnavailable}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<ChipPicker
|
<ChipPicker
|
||||||
label="Allergene"
|
label={dict.codeList.allergensTitle}
|
||||||
items={allergens}
|
items={allergens}
|
||||||
selected={form.allergens}
|
selected={form.allergens}
|
||||||
onToggle={toggleAllergen}
|
onToggle={toggleAllergen}
|
||||||
/>
|
/>
|
||||||
<ChipPicker
|
<ChipPicker
|
||||||
label="Zusatzstoffe"
|
label={dict.codeList.additivesTitle}
|
||||||
items={additives}
|
items={additives}
|
||||||
selected={form.additives}
|
selected={form.additives}
|
||||||
onToggle={toggleAdditive}
|
onToggle={toggleAdditive}
|
||||||
/>
|
/>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button type="submit" className="btn btn-add">
|
<button type="submit" className="btn btn-add">
|
||||||
Speichern
|
{dict.common.save}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-neutral"
|
className="btn btn-neutral"
|
||||||
onClick={() => setForm(null)}
|
onClick={() => setForm(null)}
|
||||||
>
|
>
|
||||||
Abbrechen
|
{dict.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<p className="text-gray-500">Lade Gerichte…</p>
|
<p className="text-gray-500">{dict.common.loading}</p>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{dishes.length > 0 && (
|
{dishes.length > 0 && (
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
className="input mb-3"
|
className="input mb-3"
|
||||||
placeholder="Gericht suchen…"
|
placeholder={dict.dishManager.searchPlaceholder}
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
aria-label="Gerichte durchsuchen"
|
aria-label={dict.dishManager.searchPlaceholder}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{dishes.length > 0 && (
|
{dishes.length > 0 && (
|
||||||
@@ -268,10 +368,10 @@ export default function DishManager() {
|
|||||||
checked={allSelected}
|
checked={allSelected}
|
||||||
onChange={toggleAll}
|
onChange={toggleAll}
|
||||||
/>
|
/>
|
||||||
Alle auswählen
|
{dict.dishManager.selectAll}
|
||||||
</label>
|
</label>
|
||||||
<span className="text-gray-500">
|
<span className="text-gray-500">
|
||||||
{selected.size} ausgewählt
|
{formatMessage(dict.dishManager.selectedCount, { count: selected.size })}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -279,7 +379,11 @@ export default function DishManager() {
|
|||||||
onClick={removeSelected}
|
onClick={removeSelected}
|
||||||
disabled={selected.size === 0 || bulkBusy}
|
disabled={selected.size === 0 || bulkBusy}
|
||||||
>
|
>
|
||||||
Ausgewählte löschen{selected.size > 0 ? ` (${selected.size})` : ""}
|
{selected.size > 0
|
||||||
|
? formatMessage(dict.dishManager.deleteSelectedCount, {
|
||||||
|
count: selected.size,
|
||||||
|
})
|
||||||
|
: dict.dishManager.deleteSelected}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -292,10 +396,10 @@ export default function DishManager() {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={selected.has(dish.id)}
|
checked={selected.has(dish.id)}
|
||||||
onChange={() => toggleOne(dish.id)}
|
onChange={() => toggleOne(dish.id)}
|
||||||
aria-label={`${dish.name} auswählen`}
|
aria-label={dish.name}
|
||||||
/>
|
/>
|
||||||
<span className="mr-auto">
|
<span className="mr-auto">
|
||||||
<span className="font-semibold">{dish.name}</span>
|
<span className="font-semibold">{localized(dish, locale)}</span>
|
||||||
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
|
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
|
||||||
<span className="text-gray-500">
|
<span className="text-gray-500">
|
||||||
– {formatPrice(dish.price)}
|
– {formatPrice(dish.price)}
|
||||||
@@ -304,36 +408,37 @@ export default function DishManager() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
onClick={() =>
|
onClick={() => {
|
||||||
setForm({
|
setForm({
|
||||||
id: dish.id,
|
id: dish.id,
|
||||||
name: dish.name,
|
name: dish.name,
|
||||||
|
nameEn: dish.name_en ?? "",
|
||||||
|
namePl: dish.name_pl ?? "",
|
||||||
price: String(dish.price).replace(".", ","),
|
price: String(dish.price).replace(".", ","),
|
||||||
allergens: dish.allergens ?? [],
|
allergens: dish.allergens ?? [],
|
||||||
additives: dish.additives ?? [],
|
additives: dish.additives ?? [],
|
||||||
})
|
});
|
||||||
}
|
setTranslateState("idle");
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Bearbeiten
|
{dict.common.edit}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-del"
|
className="btn btn-del"
|
||||||
onClick={() => remove(dish)}
|
onClick={() => remove(dish)}
|
||||||
>
|
>
|
||||||
Löschen
|
{dict.common.delete}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{dishes.length === 0 && (
|
{dishes.length === 0 && (
|
||||||
<li className="px-4 py-3 text-gray-500">
|
<li className="px-4 py-3 text-gray-500">{dict.dishManager.empty}</li>
|
||||||
Noch keine Gerichte angelegt.
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
{dishes.length > 0 && visible.length === 0 && (
|
{dishes.length > 0 && visible.length === 0 && (
|
||||||
<li className="px-4 py-3 text-gray-500">
|
<li className="px-4 py-3 text-gray-500">
|
||||||
Keine Treffer für „{search}“.
|
{formatMessage(dict.dishManager.noResults, { query: search })}
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
interface PasskeyItem {
|
interface PasskeyItem {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -12,6 +14,7 @@ interface PasskeyItem {
|
|||||||
|
|
||||||
export default function PasskeyManager() {
|
export default function PasskeyManager() {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
|
const dict = useDict();
|
||||||
const [passkeys, setPasskeys] = useState<PasskeyItem[]>([]);
|
const [passkeys, setPasskeys] = useState<PasskeyItem[]>([]);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [info, setInfo] = useState<string | null>(null);
|
const [info, setInfo] = useState<string | null>(null);
|
||||||
@@ -19,9 +22,10 @@ export default function PasskeyManager() {
|
|||||||
|
|
||||||
const load = useCallback(async () => {
|
const load = useCallback(async () => {
|
||||||
const { data, error } = await supabase.auth.passkey.list();
|
const { data, error } = await supabase.auth.passkey.list();
|
||||||
if (error) setError(`Passkeys konnten nicht geladen werden: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.passkeys.loadError, { message: error.message }));
|
||||||
else setPasskeys((data ?? []) as PasskeyItem[]);
|
else setPasskeys((data ?? []) as PasskeyItem[]);
|
||||||
}, [supabase]);
|
}, [supabase, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
@@ -34,37 +38,35 @@ export default function PasskeyManager() {
|
|||||||
try {
|
try {
|
||||||
const { error } = await supabase.auth.registerPasskey();
|
const { error } = await supabase.auth.registerPasskey();
|
||||||
if (error) {
|
if (error) {
|
||||||
setError(`Registrierung fehlgeschlagen: ${error.message}`);
|
setError(formatMessage(dict.passkeys.registerError, { message: error.message }));
|
||||||
} else {
|
} else {
|
||||||
setInfo("Passkey wurde erfolgreich registriert.");
|
setInfo(dict.passkeys.registered);
|
||||||
await load();
|
await load();
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(
|
setError(
|
||||||
/NotAllowedError|abort/i.test(String(err))
|
/NotAllowedError|abort/i.test(String(err))
|
||||||
? "Die Passkey-Registrierung wurde abgebrochen."
|
? dict.passkeys.registerCancelled
|
||||||
: `Registrierung fehlgeschlagen: ${err instanceof Error ? err.message : String(err)}`
|
: formatMessage(dict.passkeys.registerError, {
|
||||||
|
message: err instanceof Error ? err.message : String(err),
|
||||||
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function remove(pk: PasskeyItem) {
|
async function remove(pk: PasskeyItem) {
|
||||||
if (!window.confirm("Diesen Passkey wirklich löschen?")) return;
|
if (!window.confirm(dict.passkeys.confirmDelete)) return;
|
||||||
const { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id });
|
const { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id });
|
||||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.passkeys.deleteError, { message: error.message }));
|
||||||
await load();
|
await load();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="card">
|
<section className="card">
|
||||||
<h2 className="font-semibold mb-1">Passkeys</h2>
|
<h2 className="font-semibold mb-1">{dict.passkeys.title}</h2>
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
<p className="text-sm text-gray-600 mb-3">{dict.passkeys.hint}</p>
|
||||||
Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder
|
|
||||||
Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden.
|
|
||||||
Passkeys gelten pro Domain – für den Live-Betrieb muss die Domain in
|
|
||||||
der Supabase-Konfiguration hinterlegt sein.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
|
<p className="mb-2 text-sm text-[var(--c-del)]" role="alert">
|
||||||
@@ -79,7 +81,7 @@ export default function PasskeyManager() {
|
|||||||
onClick={register}
|
onClick={register}
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
Neuen Passkey registrieren
|
{dict.passkeys.register}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul className="divide-y divide-gray-100">
|
<ul className="divide-y divide-gray-100">
|
||||||
@@ -90,8 +92,9 @@ export default function PasskeyManager() {
|
|||||||
{pk.friendly_name || "Passkey"}
|
{pk.friendly_name || "Passkey"}
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
<span className="text-gray-500">
|
<span className="text-gray-500">
|
||||||
– angelegt am{" "}
|
{formatMessage(dict.passkeys.createdOn, {
|
||||||
{new Date(pk.created_at).toLocaleDateString("de-DE")}
|
date: new Date(pk.created_at).toLocaleDateString(dict.dateLocale),
|
||||||
|
})}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
@@ -99,14 +102,12 @@ export default function PasskeyManager() {
|
|||||||
className="btn btn-del"
|
className="btn btn-del"
|
||||||
onClick={() => remove(pk)}
|
onClick={() => remove(pk)}
|
||||||
>
|
>
|
||||||
Löschen
|
{dict.common.delete}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
{passkeys.length === 0 && (
|
{passkeys.length === 0 && (
|
||||||
<li className="py-2 text-gray-500 text-sm">
|
<li className="py-2 text-gray-500 text-sm">{dict.passkeys.empty}</li>
|
||||||
Noch keine Passkeys registriert.
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -17,10 +17,11 @@ import {
|
|||||||
mondayOf,
|
mondayOf,
|
||||||
todayISO,
|
todayISO,
|
||||||
weekdayIndex,
|
weekdayIndex,
|
||||||
WEEKDAYS,
|
|
||||||
WEEKDAYS_SHORT,
|
|
||||||
} from "@/lib/menu";
|
} from "@/lib/menu";
|
||||||
|
import { localized } from "@/lib/types";
|
||||||
import type { MenuEntry, Section } from "@/lib/types";
|
import type { MenuEntry, Section } from "@/lib/types";
|
||||||
|
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||||
|
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
||||||
|
|
||||||
export default function PublicMobileMenu({
|
export default function PublicMobileMenu({
|
||||||
monday,
|
monday,
|
||||||
@@ -32,9 +33,11 @@ export default function PublicMobileMenu({
|
|||||||
entries: MenuEntry[];
|
entries: MenuEntry[];
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const days = WEEKDAYS.map((weekday, i) => ({
|
const dict = useDict();
|
||||||
|
const locale = useLocale();
|
||||||
|
const days = dict.weekdays.long.map((weekday, i) => ({
|
||||||
weekday,
|
weekday,
|
||||||
short: WEEKDAYS_SHORT[i],
|
short: dict.weekdays.short[i],
|
||||||
iso: addDays(monday, i),
|
iso: addDays(monday, i),
|
||||||
}));
|
}));
|
||||||
const isCurrentWeek = monday === mondayOf(todayISO());
|
const isCurrentWeek = monday === mondayOf(todayISO());
|
||||||
@@ -58,7 +61,7 @@ export default function PublicMobileMenu({
|
|||||||
return (
|
return (
|
||||||
<div key={day.iso} className="mb-4 last:mb-0">
|
<div key={day.iso} className="mb-4 last:mb-0">
|
||||||
<h3 className="font-bold text-[var(--c-primary)] mb-2">
|
<h3 className="font-bold text-[var(--c-primary)] mb-2">
|
||||||
{day.weekday} · {formatDateLong(day.iso)}
|
{day.weekday} · {formatDateLong(day.iso, dict.dateLocale)}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{sections.map((s) => {
|
{sections.map((s) => {
|
||||||
@@ -69,18 +72,20 @@ export default function PublicMobileMenu({
|
|||||||
className="rounded-md border border-gray-200 overflow-hidden"
|
className="rounded-md border border-gray-200 overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="bg-[var(--c-primary)] text-[var(--c-header-text)] px-3 py-1.5 text-sm">
|
<div className="bg-[var(--c-primary)] text-[var(--c-header-text)] px-3 py-1.5 text-sm">
|
||||||
<span className="font-semibold">{s.label}</span>{" "}
|
<span className="font-semibold">{localized(s, locale)}</span>{" "}
|
||||||
<span className="opacity-80">· {s.time_range}</span>
|
<span className="opacity-80">· {s.time_range}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-[var(--c-row-bg)] px-3 py-2 text-sm">
|
<div className="bg-[var(--c-row-bg)] px-3 py-2 text-sm">
|
||||||
{items.length === 0 ? (
|
{items.length === 0 ? (
|
||||||
<p className="text-gray-500">–</p>
|
<p className="text-gray-500">{dict.publicMenu.noEntry}</p>
|
||||||
) : (
|
) : (
|
||||||
items.map((e) => {
|
items.map((e) => {
|
||||||
const codes = dishCodes(e.dish);
|
const codes = dishCodes(e.dish);
|
||||||
return (
|
return (
|
||||||
<p key={e.id} className="mb-1 last:mb-0">
|
<p key={e.id} className="mb-1 last:mb-0">
|
||||||
<span className="font-semibold">{e.dish.name}</span>
|
<span className="font-semibold">
|
||||||
|
{localized(e.dish, locale)}
|
||||||
|
</span>
|
||||||
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
|
{codes && <sup className="dish-codes">{codes}</sup>}{" "}
|
||||||
– {formatPrice(e.dish.price)}
|
– {formatPrice(e.dish.price)}
|
||||||
</p>
|
</p>
|
||||||
@@ -98,25 +103,29 @@ export default function PublicMobileMenu({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sm:hidden mb-6">
|
<div className="sm:hidden mb-6">
|
||||||
|
<div className="flex justify-end mb-3">
|
||||||
|
<LanguageSwitcher variant="light" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2 mb-3">
|
<div className="flex gap-2 mb-3">
|
||||||
<Link
|
<Link
|
||||||
href={`/?woche=${addDays(monday, -7)}`}
|
href={`/?woche=${addDays(monday, -7)}`}
|
||||||
className="btn btn-add flex-1 justify-center"
|
className="btn btn-add flex-1 justify-center"
|
||||||
>
|
>
|
||||||
← Woche
|
{dict.publicMenu.prevWeekShort}
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={goToday}
|
onClick={goToday}
|
||||||
className="btn btn-primary flex-1"
|
className="btn btn-primary flex-1"
|
||||||
>
|
>
|
||||||
Heute
|
{dict.publicMenu.today}
|
||||||
</button>
|
</button>
|
||||||
<Link
|
<Link
|
||||||
href={`/?woche=${addDays(monday, 7)}`}
|
href={`/?woche=${addDays(monday, 7)}`}
|
||||||
className="btn btn-add flex-1 justify-center"
|
className="btn btn-add flex-1 justify-center"
|
||||||
>
|
>
|
||||||
Woche →
|
{dict.publicMenu.nextWeekShort}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -128,7 +137,7 @@ export default function PublicMobileMenu({
|
|||||||
onClick={() => setTab("tag")}
|
onClick={() => setTab("tag")}
|
||||||
className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`}
|
className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`}
|
||||||
>
|
>
|
||||||
Tag
|
{dict.publicMenu.dayTab}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -137,7 +146,7 @@ export default function PublicMobileMenu({
|
|||||||
onClick={() => setTab("woche")}
|
onClick={() => setTab("woche")}
|
||||||
className={`btn flex-1 ${tab === "woche" ? "btn-primary" : "btn-neutral"}`}
|
className={`btn flex-1 ${tab === "woche" ? "btn-primary" : "btn-neutral"}`}
|
||||||
>
|
>
|
||||||
Woche
|
{dict.publicMenu.weekTab}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -164,6 +173,10 @@ export default function PublicMobileMenu({
|
|||||||
) : (
|
) : (
|
||||||
<div>{days.map((d) => renderDay(d))}</div>
|
<div>{days.map((d) => renderDay(d))}</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Link href="/vorschlag" className="btn btn-neutral w-full justify-center mt-2">
|
||||||
|
{dict.publicMenu.suggestDish}
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+28
-25
@@ -2,7 +2,9 @@
|
|||||||
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { createClient } from "@/lib/supabase/client";
|
import { createClient } from "@/lib/supabase/client";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
import type { Profile, Role } from "@/lib/types";
|
import type { Profile, Role } from "@/lib/types";
|
||||||
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
interface UserForm {
|
interface UserForm {
|
||||||
id: string | null; // null = neuer Benutzer
|
id: string | null; // null = neuer Benutzer
|
||||||
@@ -22,13 +24,13 @@ const EMPTY_FORM: UserForm = {
|
|||||||
passwordRepeat: "",
|
passwordRepeat: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
const ROLE_LABELS: Record<Role, string> = {
|
|
||||||
admin: "Administrator",
|
|
||||||
staff: "Kantinenmitarbeiter",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function UserManager() {
|
export default function UserManager() {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
|
const dict = useDict();
|
||||||
|
const roleLabels: Record<Role, string> = {
|
||||||
|
admin: dict.common.roleAdmin,
|
||||||
|
staff: dict.common.roleStaff,
|
||||||
|
};
|
||||||
const [profiles, setProfiles] = useState<Profile[]>([]);
|
const [profiles, setProfiles] = useState<Profile[]>([]);
|
||||||
const [me, setMe] = useState<string | null>(null);
|
const [me, setMe] = useState<string | null>(null);
|
||||||
const [form, setForm] = useState<UserForm | null>(null);
|
const [form, setForm] = useState<UserForm | null>(null);
|
||||||
@@ -41,10 +43,11 @@ export default function UserManager() {
|
|||||||
supabase.from("profiles").select("*").order("created_at"),
|
supabase.from("profiles").select("*").order("created_at"),
|
||||||
supabase.auth.getUser(),
|
supabase.auth.getUser(),
|
||||||
]);
|
]);
|
||||||
if (profileError) setError(`Laden fehlgeschlagen: ${profileError.message}`);
|
if (profileError)
|
||||||
|
setError(formatMessage(dict.userManager.loadError, { message: profileError.message }));
|
||||||
else setProfiles(profileData as Profile[]);
|
else setProfiles(profileData as Profile[]);
|
||||||
setMe(userData.user?.id ?? null);
|
setMe(userData.user?.id ?? null);
|
||||||
}, [supabase]);
|
}, [supabase, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
load();
|
load();
|
||||||
@@ -77,7 +80,7 @@ export default function UserManager() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
if (form.password && form.password !== form.passwordRepeat) {
|
if (form.password && form.password !== form.passwordRepeat) {
|
||||||
setError("Die Passwörter stimmen nicht überein.");
|
setError(dict.userManager.passwordMismatch);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const ok = form.id
|
const ok = form.id
|
||||||
@@ -102,7 +105,7 @@ export default function UserManager() {
|
|||||||
async function remove(profile: Profile) {
|
async function remove(profile: Profile) {
|
||||||
if (
|
if (
|
||||||
!window.confirm(
|
!window.confirm(
|
||||||
`Benutzer „${profile.email}“ wirklich löschen? Der Zugang wird dauerhaft entfernt.`
|
formatMessage(dict.userManager.confirmDelete, { email: profile.email })
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
return;
|
return;
|
||||||
@@ -113,14 +116,14 @@ export default function UserManager() {
|
|||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
||||||
Benutzer
|
{dict.userManager.title}
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-add"
|
className="btn btn-add"
|
||||||
onClick={() => setForm(EMPTY_FORM)}
|
onClick={() => setForm(EMPTY_FORM)}
|
||||||
>
|
>
|
||||||
Neuer Benutzer
|
{dict.userManager.newUser}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -133,12 +136,12 @@ export default function UserManager() {
|
|||||||
{form && (
|
{form && (
|
||||||
<form onSubmit={save} className="card mb-4 space-y-3">
|
<form onSubmit={save} className="card mb-4 space-y-3">
|
||||||
<h2 className="font-semibold">
|
<h2 className="font-semibold">
|
||||||
{form.id ? "Benutzer bearbeiten" : "Neuer Benutzer"}
|
{form.id ? dict.userManager.editUser : dict.userManager.newUser}
|
||||||
</h2>
|
</h2>
|
||||||
{!form.id && (
|
{!form.id && (
|
||||||
<div>
|
<div>
|
||||||
<label className="label" htmlFor="user-email">
|
<label className="label" htmlFor="user-email">
|
||||||
E-Mail-Adresse
|
{dict.common.email}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="user-email"
|
id="user-email"
|
||||||
@@ -152,7 +155,7 @@ export default function UserManager() {
|
|||||||
)}
|
)}
|
||||||
<div>
|
<div>
|
||||||
<label className="label" htmlFor="user-name">
|
<label className="label" htmlFor="user-name">
|
||||||
Name
|
{dict.common.name}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="user-name"
|
id="user-name"
|
||||||
@@ -163,7 +166,7 @@ export default function UserManager() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="max-w-60">
|
<div className="max-w-60">
|
||||||
<label className="label" htmlFor="user-role">
|
<label className="label" htmlFor="user-role">
|
||||||
Rolle
|
{dict.common.role}
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
id="user-role"
|
id="user-role"
|
||||||
@@ -173,13 +176,13 @@ export default function UserManager() {
|
|||||||
setForm({ ...form, role: e.target.value as Role })
|
setForm({ ...form, role: e.target.value as Role })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<option value="staff">Kantinenmitarbeiter</option>
|
<option value="staff">{dict.common.roleStaff}</option>
|
||||||
<option value="admin">Administrator</option>
|
<option value="admin">{dict.common.roleAdmin}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-60">
|
<div className="max-w-60">
|
||||||
<label className="label" htmlFor="user-password">
|
<label className="label" htmlFor="user-password">
|
||||||
{form.id ? "Neues Passwort (optional)" : "Passwort"}
|
{form.id ? dict.userManager.newPasswordLabel : dict.common.password}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="user-password"
|
id="user-password"
|
||||||
@@ -194,7 +197,7 @@ export default function UserManager() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="max-w-60">
|
<div className="max-w-60">
|
||||||
<label className="label" htmlFor="user-password-repeat">
|
<label className="label" htmlFor="user-password-repeat">
|
||||||
Passwort wiederholen
|
{dict.userManager.repeatPasswordLabel}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="user-password-repeat"
|
id="user-password-repeat"
|
||||||
@@ -211,14 +214,14 @@ export default function UserManager() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button type="submit" className="btn btn-add" disabled={busy}>
|
<button type="submit" className="btn btn-add" disabled={busy}>
|
||||||
Speichern
|
{dict.common.save}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-neutral"
|
className="btn btn-neutral"
|
||||||
onClick={() => setForm(null)}
|
onClick={() => setForm(null)}
|
||||||
>
|
>
|
||||||
Abbrechen
|
{dict.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -230,9 +233,9 @@ export default function UserManager() {
|
|||||||
<span className="mr-auto">
|
<span className="mr-auto">
|
||||||
<span className="font-semibold">{p.full_name || p.email}</span>{" "}
|
<span className="font-semibold">{p.full_name || p.email}</span>{" "}
|
||||||
<span className="text-gray-500">
|
<span className="text-gray-500">
|
||||||
– {p.email} – {ROLE_LABELS[p.role]}
|
– {p.email} – {roleLabels[p.role]}
|
||||||
</span>
|
</span>
|
||||||
{p.id === me && <span className="text-gray-400"> (du)</span>}
|
{p.id === me && <span className="text-gray-400"> {dict.common.you}</span>}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -248,7 +251,7 @@ export default function UserManager() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Bearbeiten
|
{dict.common.edit}
|
||||||
</button>
|
</button>
|
||||||
{p.id !== me && (
|
{p.id !== me && (
|
||||||
<button
|
<button
|
||||||
@@ -256,7 +259,7 @@ export default function UserManager() {
|
|||||||
className="btn btn-del"
|
className="btn btn-del"
|
||||||
onClick={() => remove(p)}
|
onClick={() => remove(p)}
|
||||||
>
|
>
|
||||||
Löschen
|
{dict.common.delete}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
+47
-38
@@ -11,14 +11,18 @@ import {
|
|||||||
formatPrice,
|
formatPrice,
|
||||||
mondayOf,
|
mondayOf,
|
||||||
todayISO,
|
todayISO,
|
||||||
WEEKDAYS,
|
|
||||||
} from "@/lib/menu";
|
} from "@/lib/menu";
|
||||||
|
import { formatMessage } from "@/lib/i18n/shared";
|
||||||
|
import { localized } from "@/lib/types";
|
||||||
import type { Dish, MenuEntry, Section } from "@/lib/types";
|
import type { Dish, MenuEntry, Section } from "@/lib/types";
|
||||||
|
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
|
||||||
|
|
||||||
export default function WeekEditor({ monday }: { monday: string }) {
|
export default function WeekEditor({ monday }: { monday: string }) {
|
||||||
const supabase = useMemo(() => createClient(), []);
|
const supabase = useMemo(() => createClient(), []);
|
||||||
|
const dict = useDict();
|
||||||
|
const locale = useLocale();
|
||||||
const friday = addDays(monday, 4);
|
const friday = addDays(monday, 4);
|
||||||
const days = WEEKDAYS.map((weekday, i) => ({
|
const days = dict.weekdays.long.map((weekday, i) => ({
|
||||||
weekday,
|
weekday,
|
||||||
iso: addDays(monday, i),
|
iso: addDays(monday, i),
|
||||||
}));
|
}));
|
||||||
@@ -42,7 +46,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
supabase
|
supabase
|
||||||
.from("menu_entries")
|
.from("menu_entries")
|
||||||
.select(
|
.select(
|
||||||
"id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
|
"id, menu_date, section_key, position, dish:dishes(id, name, name_en, name_pl, price, allergens, additives)"
|
||||||
)
|
)
|
||||||
.gte("menu_date", monday)
|
.gte("menu_date", monday)
|
||||||
.lte("menu_date", friday)
|
.lte("menu_date", friday)
|
||||||
@@ -51,14 +55,14 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
]);
|
]);
|
||||||
const problem = se.error ?? di.error ?? en.error;
|
const problem = se.error ?? di.error ?? en.error;
|
||||||
if (problem) {
|
if (problem) {
|
||||||
setError(`Laden fehlgeschlagen: ${problem.message}`);
|
setError(formatMessage(dict.weekEditor.loadError, { message: problem.message }));
|
||||||
} else {
|
} else {
|
||||||
setSections(se.data as Section[]);
|
setSections(se.data as Section[]);
|
||||||
setDishes(di.data as Dish[]);
|
setDishes(di.data as Dish[]);
|
||||||
setEntries(en.data as unknown as MenuEntry[]);
|
setEntries(en.data as unknown as MenuEntry[]);
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}, [supabase, monday, friday]);
|
}, [supabase, monday, friday, dict]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -75,8 +79,8 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
if (error) {
|
if (error) {
|
||||||
setError(
|
setError(
|
||||||
/duplicate key/i.test(error.message)
|
/duplicate key/i.test(error.message)
|
||||||
? "Dieses Gericht ist an diesem Tag bereits zugewiesen."
|
? dict.weekEditor.duplicateEntry
|
||||||
: `Speichern fehlgeschlagen: ${error.message}`
|
: formatMessage(dict.weekEditor.saveError, { message: error.message })
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
setAdding(null);
|
setAdding(null);
|
||||||
@@ -86,27 +90,30 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
|
|
||||||
async function removeEntry(id: string) {
|
async function removeEntry(id: string) {
|
||||||
const { error } = await supabase.from("menu_entries").delete().eq("id", id);
|
const { error } = await supabase.from("menu_entries").delete().eq("id", id);
|
||||||
if (error) setError(`Löschen fehlgeschlagen: ${error.message}`);
|
if (error)
|
||||||
|
setError(formatMessage(dict.weekEditor.deleteError, { message: error.message }));
|
||||||
await load();
|
await load();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [hintBefore, hintAfter] = dict.weekEditor.newDishesHint.split("{link}");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-wrap items-center gap-3 mb-4">
|
<div className="flex flex-wrap items-center gap-3 mb-4">
|
||||||
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
|
||||||
Wochenplan
|
{dict.weekEditor.title}
|
||||||
</h1>
|
</h1>
|
||||||
<Link href={`/intern?woche=${addDays(monday, -7)}`} className="btn btn-add">
|
<Link href={`/intern?woche=${addDays(monday, -7)}`} className="btn btn-add">
|
||||||
← Vorherige Woche
|
{dict.publicMenu.prevWeek}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href={`/intern?woche=${mondayOf(todayISO())}`}
|
href={`/intern?woche=${mondayOf(todayISO())}`}
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
>
|
>
|
||||||
Heute
|
{dict.publicMenu.today}
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/intern?woche=${addDays(monday, 7)}`} className="btn btn-add">
|
<Link href={`/intern?woche=${addDays(monday, 7)}`} className="btn btn-add">
|
||||||
Nächste Woche →
|
{dict.publicMenu.nextWeek}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -116,7 +123,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<p className="text-gray-500">Lade Wochenplan…</p>
|
<p className="text-gray-500">{dict.weekEditor.loading}</p>
|
||||||
) : (
|
) : (
|
||||||
<table className="menu-table">
|
<table className="menu-table">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -126,7 +133,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
<th key={d.iso} className="day-head">
|
<th key={d.iso} className="day-head">
|
||||||
<span className="font-bold">{d.weekday}</span>
|
<span className="font-bold">{d.weekday}</span>
|
||||||
<br />
|
<br />
|
||||||
{formatDateLong(d.iso)}
|
{formatDateLong(d.iso, dict.dateLocale)}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
@@ -135,7 +142,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
{sections.map((s) => (
|
{sections.map((s) => (
|
||||||
<tr key={s.key}>
|
<tr key={s.key}>
|
||||||
<th className="section-head">
|
<th className="section-head">
|
||||||
<div>{s.label}</div>
|
<div>{localized(s, locale)}</div>
|
||||||
<div className="time">{s.time_range}</div>
|
<div className="time">{s.time_range}</div>
|
||||||
</th>
|
</th>
|
||||||
{days.map((d) => {
|
{days.map((d) => {
|
||||||
@@ -146,21 +153,23 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
{entriesFor(entries, d.iso, s.key).map((e) => {
|
{entriesFor(entries, d.iso, s.key).map((e) => {
|
||||||
const codes = dishCodes(e.dish);
|
const codes = dishCodes(e.dish);
|
||||||
return (
|
return (
|
||||||
<div key={e.id} className="dish">
|
<div key={e.id} className="dish">
|
||||||
<span className="font-bold">{e.dish.name}</span>
|
<span className="font-bold">
|
||||||
{codes && <sup className="dish-codes">{codes}</sup>}
|
{localized(e.dish, locale)}
|
||||||
{" – "}
|
</span>
|
||||||
{formatPrice(e.dish.price)}
|
{codes && <sup className="dish-codes">{codes}</sup>}
|
||||||
<div className="mt-1">
|
{" – "}
|
||||||
<button
|
{formatPrice(e.dish.price)}
|
||||||
type="button"
|
<div className="mt-1">
|
||||||
className="btn btn-del"
|
<button
|
||||||
onClick={() => removeEntry(e.id)}
|
type="button"
|
||||||
>
|
className="btn btn-del"
|
||||||
Löschen
|
onClick={() => removeEntry(e.id)}
|
||||||
</button>
|
>
|
||||||
|
{dict.common.delete}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{isAdding ? (
|
{isAdding ? (
|
||||||
@@ -170,10 +179,10 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
value={selectedDish}
|
value={selectedDish}
|
||||||
onChange={(e) => setSelectedDish(e.target.value)}
|
onChange={(e) => setSelectedDish(e.target.value)}
|
||||||
>
|
>
|
||||||
<option value="">– Gericht wählen –</option>
|
<option value="">{dict.weekEditor.selectDish}</option>
|
||||||
{dishes.map((dish) => (
|
{dishes.map((dish) => (
|
||||||
<option key={dish.id} value={dish.id}>
|
<option key={dish.id} value={dish.id}>
|
||||||
{dish.name} ({formatPrice(dish.price)})
|
{localized(dish, locale)} ({formatPrice(dish.price)})
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -184,7 +193,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
onClick={addEntry}
|
onClick={addEntry}
|
||||||
disabled={!selectedDish}
|
disabled={!selectedDish}
|
||||||
>
|
>
|
||||||
Hinzufügen
|
{dict.common.add}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -194,7 +203,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
setSelectedDish("");
|
setSelectedDish("");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Abbrechen
|
{dict.common.cancel}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -207,7 +216,7 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
setSelectedDish("");
|
setSelectedDish("");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Mahlzeit hinzufügen
|
{dict.weekEditor.addMeal}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
@@ -219,11 +228,11 @@ export default function WeekEditor({ monday }: { monday: string }) {
|
|||||||
</table>
|
</table>
|
||||||
)}
|
)}
|
||||||
<p className="mt-4 text-sm text-gray-500">
|
<p className="mt-4 text-sm text-gray-500">
|
||||||
Neue Gerichte legst du unter{" "}
|
{hintBefore}
|
||||||
<Link href="/intern/gerichte" className="underline">
|
<Link href="/intern/gerichte" className="underline">
|
||||||
Gerichte
|
{dict.weekEditor.newDishesLinkLabel}
|
||||||
</Link>{" "}
|
</Link>
|
||||||
an.
|
{hintAfter}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
+3
-6
@@ -44,12 +44,9 @@ export function weekdayIndex(iso: string): number {
|
|||||||
return day <= 4 ? day : -1;
|
return day <= 4 ? day : -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const WEEKDAYS = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"];
|
/** z. B. "13. Juli 2026" (dateLocale z. B. "de-DE", "en-GB", "pl-PL") */
|
||||||
export const WEEKDAYS_SHORT = ["Mo", "Di", "Mi", "Do", "Fr"];
|
export function formatDateLong(iso: string, dateLocale: string): string {
|
||||||
|
return toDate(iso).toLocaleDateString(dateLocale, {
|
||||||
/** z. B. "13. Juli 2026" */
|
|
||||||
export function formatDateLong(iso: string): string {
|
|
||||||
return toDate(iso).toLocaleDateString("de-DE", {
|
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
month: "long",
|
month: "long",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
|
|||||||
Reference in New Issue
Block a user