florian.wilde
cd8b0fab9f
Gerichtnamen, Essenszeiten und Allergen-/Zusatzstoff-Bezeichnungen sind jetzt genauso dynamisch mehrsprachig wie die Bedienoberfläche aus v1.10.0, statt fest auf Englisch/Polnisch begrenzt zu sein. Neue Übersetzungstabellen ersetzen die alten name_en/name_pl-Spalten, DeepL-Auto-Übersetzung und CSV-Import/-Export unterstützen jetzt beliebig viele aktive Sprachen.
253 lines
8.6 KiB
TypeScript
253 lines
8.6 KiB
TypeScript
import Link from "next/link";
|
||
import { query } from "@/lib/db";
|
||
import { loadMenuEntries } from "@/lib/db/menu-entries";
|
||
import { loadTranslations } from "@/lib/db/translations";
|
||
import { getSettings } from "@/lib/db/settings";
|
||
import {
|
||
addDays,
|
||
dishCodes,
|
||
entriesFor,
|
||
formatDateLong,
|
||
formatPrice,
|
||
mondayOf,
|
||
todayISO,
|
||
} from "@/lib/menu";
|
||
import { getDictionary, getLocale } from "@/lib/i18n";
|
||
import { localized, logoUrl, SITE_TITLE } from "@/lib/types";
|
||
import type { CodeItem, Section } from "@/lib/types";
|
||
import PublicMobileMenu from "@/components/PublicMobileMenu";
|
||
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
||
|
||
export default async function Home({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Promise<{ woche?: string }>;
|
||
}) {
|
||
const { woche } = await searchParams;
|
||
const monday = mondayOf(woche);
|
||
const friday = addDays(monday, 4);
|
||
const currentWeek = mondayOf(todayISO());
|
||
const locale = await getLocale();
|
||
const dict = await getDictionary(locale);
|
||
const days = dict.weekdays.long.map((weekday, i) => ({
|
||
weekday,
|
||
iso: addDays(monday, i),
|
||
}));
|
||
|
||
const [
|
||
sectionRows,
|
||
entries,
|
||
allergenRows,
|
||
additiveRows,
|
||
settings,
|
||
sectionTranslations,
|
||
allergenTranslations,
|
||
additiveTranslations,
|
||
] = await Promise.all([
|
||
query<Omit<Section, "translations">>("select key, label, time_range, sort from sections order by sort"),
|
||
loadMenuEntries(monday, friday),
|
||
query<Omit<CodeItem, "translations">>("select code, name, sort from allergens order by sort"),
|
||
query<Omit<CodeItem, "translations">>("select code, name, sort from additives order by sort"),
|
||
getSettings(),
|
||
loadTranslations("section_translations"),
|
||
loadTranslations("allergen_translations"),
|
||
loadTranslations("additive_translations"),
|
||
]);
|
||
|
||
const sections: Section[] = sectionRows.map((s) => ({
|
||
...s,
|
||
translations: sectionTranslations.get(s.key) ?? {},
|
||
}));
|
||
const allergens: CodeItem[] = allergenRows.map((a) => ({
|
||
...a,
|
||
translations: allergenTranslations.get(a.code) ?? {},
|
||
}));
|
||
const additives: CodeItem[] = additiveRows.map((a) => ({
|
||
...a,
|
||
translations: additiveTranslations.get(a.code) ?? {},
|
||
}));
|
||
|
||
const logo = logoUrl(settings?.logo_path);
|
||
const labelingDetailed = (settings?.labeling_mode ?? "detailed") !== "notice";
|
||
|
||
return (
|
||
<div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
|
||
{/* Kopfbereich: Sprache + Login-Link eigene Zeile, Logo zentriert
|
||
darunter. Kein absolutes Positionieren mehr – ein breites Logo
|
||
(z. B. ein Banner-Format) konnte sonst mit dem Login-Link
|
||
kollidieren. */}
|
||
<header className="mb-6">
|
||
<div className="flex justify-end items-center gap-3 mb-2">
|
||
{/* Auf Mobilgeräten übernimmt PublicMobileMenu den
|
||
Sprachumschalter, hier würde er sonst doppelt erscheinen. */}
|
||
<div className="hidden sm:block">
|
||
<LanguageSwitcher variant="light" />
|
||
</div>
|
||
<a
|
||
href="/feed.xml"
|
||
title={dict.publicMenu.rssFeed}
|
||
aria-label={dict.publicMenu.rssFeed}
|
||
className="text-gray-400 hover:text-[#ee802f]"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24"
|
||
width="18"
|
||
height="18"
|
||
fill="currentColor"
|
||
aria-hidden="true"
|
||
>
|
||
<circle cx="5.5" cy="18.5" r="2.5" />
|
||
<path d="M4 11a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6v-3z" />
|
||
<path d="M4 4a16 16 0 0 1 16 16h-3A13 13 0 0 0 4 7V4z" />
|
||
</svg>
|
||
</a>
|
||
<Link
|
||
href="/login"
|
||
className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
|
||
>
|
||
{dict.common.login}
|
||
</Link>
|
||
</div>
|
||
<div className="flex justify-center">
|
||
{logo ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={logo}
|
||
alt="Logo"
|
||
className="h-20 max-w-full object-contain"
|
||
/>
|
||
) : (
|
||
<h1 className="text-4xl font-extrabold tracking-tight text-[var(--c-primary)]">
|
||
{SITE_TITLE}
|
||
</h1>
|
||
)}
|
||
</div>
|
||
</header>
|
||
|
||
{/* Mobil: Tag (Standard) oder Woche umschaltbar */}
|
||
<PublicMobileMenu
|
||
monday={monday}
|
||
sections={sections}
|
||
entries={entries}
|
||
showLabeling={labelingDetailed}
|
||
/>
|
||
|
||
{/* Ab "sm": klassische Wochentabelle */}
|
||
<div className="hidden sm:block">
|
||
<div className="flex flex-wrap items-center gap-3 mb-4">
|
||
<Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
|
||
{dict.publicMenu.prevWeek}
|
||
</Link>
|
||
<Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
|
||
{dict.publicMenu.today}
|
||
</Link>
|
||
<Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
|
||
{dict.publicMenu.nextWeek}
|
||
</Link>
|
||
<Link href="/vorschlag" className="btn btn-neutral ml-auto">
|
||
{dict.publicMenu.suggestDish}
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<table className="menu-table">
|
||
<thead>
|
||
<tr>
|
||
<th className="section-head w-56" aria-hidden />
|
||
{days.map((d) => (
|
||
<th key={d.iso} className="day-head">
|
||
<span className="font-bold">{d.weekday}</span>
|
||
<br />
|
||
{formatDateLong(d.iso, dict.dateLocale)}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{sections.map((s) => (
|
||
<tr key={s.key}>
|
||
<th className="section-head">
|
||
<div>{localized(s, locale)}</div>
|
||
<div className="time">{s.time_range}</div>
|
||
</th>
|
||
{days.map((d) => (
|
||
<td key={d.iso} className="cell">
|
||
{entriesFor(entries, d.iso, s.key).map((e) => {
|
||
const codes = dishCodes(e.dish);
|
||
return (
|
||
<div key={e.id} className="dish">
|
||
<span className="font-bold">
|
||
{localized(e.dish, locale)}
|
||
</span>
|
||
{labelingDetailed && codes && (
|
||
<sup className="dish-codes">{codes}</sup>
|
||
)}
|
||
{" – "}
|
||
{formatPrice(e.dish.price)}
|
||
</div>
|
||
);
|
||
})}
|
||
</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Allergene & Zusatzstoffe: entweder Legende zu den Kürzeln bei den
|
||
Gerichten, oder – falls im Hinweismodus – nur ein Hinweistext. */}
|
||
{labelingDetailed ? (
|
||
<section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
|
||
<div>
|
||
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
||
{dict.publicMenu.allergens}
|
||
</h2>
|
||
<ul className="space-y-0.5">
|
||
{allergens.map((a) => (
|
||
<li key={a.code}>
|
||
<span className="font-semibold">{a.code}</span> –{" "}
|
||
{localized(a, locale)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
||
{dict.publicMenu.additives}
|
||
</h2>
|
||
<ul className="space-y-0.5">
|
||
{additives.map((a) => (
|
||
<li key={a.code}>
|
||
<span className="font-semibold">{a.code}</span> –{" "}
|
||
{localized(a, locale)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
) : (
|
||
settings && (
|
||
<section className="mt-8 text-sm text-gray-700">
|
||
<h2 className="font-bold text-[var(--c-primary)] mb-2">
|
||
{dict.publicMenu.labelingNoticeTitle}
|
||
</h2>
|
||
<p>
|
||
{localized(
|
||
{
|
||
name: settings.labeling_notice,
|
||
name_en: settings.labeling_notice_en,
|
||
name_pl: settings.labeling_notice_pl,
|
||
},
|
||
locale
|
||
)}
|
||
</p>
|
||
</section>
|
||
)
|
||
)}
|
||
</div>
|
||
);
|
||
}
|