florian.wilde/Speisekarte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mehrsprachige Oberfläche + lokalisierte Gericht-/Bereichsnamen

Browse Source 
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:
florian.wilde
2026-07-18 02:08:03 +02:00
parent 30a02ba7b7
commit a6165de10c
14 changed files with 586 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DishManager.tsx
+141 -36
View File
@@ -3,12 +3,17 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { createClient } from "@/lib/supabase/client";
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 ChipPicker from "@/components/ChipPicker";
import { useDict, useLocale } from "@/components/i18n/LocaleProvider";
interface DishForm {
id: string | null; // null = neues Gericht
name: string;
nameEn: string;
namePl: string;
price: string;
allergens: string[];
additives: string[];
@@ -17,6 +22,8 @@ interface DishForm {
const EMPTY_FORM: DishForm = {
id: null,
name: "",
nameEn: "",
namePl: "",
price: "",
allergens: [],
additives: [],
@@ -24,6 +31,8 @@ const EMPTY_FORM: DishForm = {
export default function DishManager() {
const supabase = useMemo(() => createClient(), []);
const dict = useDict();
const locale = useLocale();
const [dishes, setDishes] = useState<Dish[]>([]);
const [allergens, setAllergens] = useState<CodeItem[]>([]);
const [additives, setAdditives] = useState<CodeItem[]>([]);
@@ -33,6 +42,9 @@ export default function DishManager() {
const [selected, setSelected] = useState<Set<string>>(new Set());
const [bulkBusy, setBulkBusy] = useState(false);
const [search, setSearch] = useState("");
const [translateState, setTranslateState] = useState<
"idle" | "busy" | "done" | "unavailable"
>("idle");
// Live-Suche: filtert die Liste bereits während des Tippens
const visible = useMemo(() => {
@@ -47,14 +59,15 @@ export default function DishManager() {
supabase.from("additives").select("*").order("sort"),
]);
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 {
setDishes(dishesRes.data as Dish[]);
setAllergens(allergensRes.data as CodeItem[]);
setAdditives(additivesRes.data as CodeItem[]);
}
setLoading(false);
}, [supabase]);
}, [supabase, dict]);
useEffect(() => {
load();
@@ -66,11 +79,13 @@ export default function DishManager() {
setError(null);
const price = Number.parseFloat(form.price.replace(",", "."));
if (Number.isNaN(price) || price < 0) {
setError("Bitte einen gültigen Preis angeben, z. B. 3,50");
setError(dict.dishManager.invalidPrice);
return;
}
const payload = {
name: form.name.trim(),
name_en: form.nameEn.trim() || null,
name_pl: form.namePl.trim() || null,
price,
allergens: form.allergens,
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").insert(payload);
if (error) {
setError(`Speichern fehlgeschlagen: ${error.message}`);
setError(formatMessage(dict.dishManager.saveError, { message: error.message }));
return;
}
setForm(null);
@@ -89,12 +104,13 @@ export default function DishManager() {
async function remove(dish: Dish) {
if (
!window.confirm(
`„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.`
formatMessage(dict.dishManager.confirmDelete, { name: dish.name })
)
)
return;
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) => {
const next = new Set(prev);
next.delete(dish.id);
@@ -128,7 +144,9 @@ export default function DishManager() {
if (selected.size === 0) return;
if (
!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;
@@ -138,7 +156,8 @@ export default function DishManager() {
.from("dishes")
.delete()
.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());
setBulkBusy(false);
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 =
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="flex items-center gap-3 mb-4">
<h1 className="text-xl font-bold text-[var(--c-primary)] mr-auto">
Gerichte
{dict.dishManager.title}
</h1>
<button
type="button"
className="btn btn-add"
onClick={() => setForm(EMPTY_FORM)}
onClick={() => {
setForm(EMPTY_FORM);
setTranslateState("idle");
}}
>
Neues Gericht
{dict.dishManager.newDish}
</button>
</div>
@@ -191,11 +243,11 @@ export default function DishManager() {
{form && (
<form onSubmit={save} className="card mb-4 space-y-4">
<h2 className="font-semibold">
{form.id ? "Gericht bearbeiten" : "Neues Gericht"}
{form.id ? dict.dishManager.editDish : dict.dishManager.newDish}
</h2>
<div>
<label className="label" htmlFor="dish-name">
Bezeichnung
{dict.dishManager.nameLabel}
</label>
<input
id="dish-name"
@@ -207,57 +259,105 @@ export default function DishManager() {
</div>
<div className="max-w-40">
<label className="label" htmlFor="dish-price">
Preis in €
{dict.dishManager.priceLabel}
</label>
<input
id="dish-price"
className="input"
inputMode="decimal"
placeholder="3,50"
placeholder={dict.dishManager.pricePlaceholder}
value={form.price}
onChange={(e) => setForm({ ...form, price: e.target.value })}
required
/>
</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
label="Allergene"
label={dict.codeList.allergensTitle}
items={allergens}
selected={form.allergens}
onToggle={toggleAllergen}
/>
<ChipPicker
label="Zusatzstoffe"
label={dict.codeList.additivesTitle}
items={additives}
selected={form.additives}
onToggle={toggleAdditive}
/>
<div className="flex gap-2">
<button type="submit" className="btn btn-add">
Speichern
{dict.common.save}
</button>
<button
type="button"
className="btn btn-neutral"
onClick={() => setForm(null)}
>
Abbrechen
{dict.common.cancel}
</button>
</div>
</form>
)}
{loading ? (
<p className="text-gray-500">Lade Gerichte…</p>
<p className="text-gray-500">{dict.common.loading}</p>
) : (
<>
{dishes.length > 0 && (
<input
type="search"
className="input mb-3"
placeholder="Gericht suchen…"
placeholder={dict.dishManager.searchPlaceholder}
value={search}
onChange={(e) => setSearch(e.target.value)}
aria-label="Gerichte durchsuchen"
aria-label={dict.dishManager.searchPlaceholder}
/>
)}
{dishes.length > 0 && (
@@ -268,10 +368,10 @@ export default function DishManager() {
checked={allSelected}
onChange={toggleAll}
/>
Alle auswählen
{dict.dishManager.selectAll}
</label>
<span className="text-gray-500">
{selected.size} ausgewählt
{formatMessage(dict.dishManager.selectedCount, { count: selected.size })}
</span>
<button
type="button"
@@ -279,7 +379,11 @@ export default function DishManager() {
onClick={removeSelected}
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>
</div>
)}
@@ -292,10 +396,10 @@ export default function DishManager() {
type="checkbox"
checked={selected.has(dish.id)}
onChange={() => toggleOne(dish.id)}
aria-label={`${dish.name} auswählen`}
aria-label={dish.name}
/>
<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>}{" "}
<span className="text-gray-500">
– {formatPrice(dish.price)}
@@ -304,36 +408,37 @@ export default function DishManager() {
<button
type="button"
className="btn btn-primary"
onClick={() =>
onClick={() => {
setForm({
id: dish.id,
name: dish.name,
nameEn: dish.name_en ?? "",
namePl: dish.name_pl ?? "",
price: String(dish.price).replace(".", ","),
allergens: dish.allergens ?? [],
additives: dish.additives ?? [],
})
}
});
setTranslateState("idle");
}}
>
Bearbeiten
{dict.common.edit}
</button>
<button
type="button"
className="btn btn-del"
onClick={() => remove(dish)}
>
Löschen
{dict.common.delete}
</button>
</li>
);
})}
{dishes.length === 0 && (
<li className="px-4 py-3 text-gray-500">
Noch keine Gerichte angelegt.
</li>
<li className="px-4 py-3 text-gray-500">{dict.dishManager.empty}</li>
)}
{dishes.length > 0 && visible.length === 0 && (
<li className="px-4 py-3 text-gray-500">
Keine Treffer für „{search}“.
{formatMessage(dict.dishManager.noResults, { query: search })}
</li>
)}
</ul>