Öffentliche Speisekarte: Heute-Button, mobile Tages-/Wochenansicht

- "Heute" springt direkt zur aktuellen Woche - Unter dem sm-Breakpoint umschaltbar zwischen Tag (Standard) und Woche statt der Tabelle; Desktop bleibt vollständig serverseitig gerendert, nur der mobile Umschalter ist eine Client-Komponente
2026-07-18 00:46:39 +02:00
parent 29ca8e1227
commit 1db89a54bf
3 changed files with 266 additions and 53 deletions
@@ -1,15 +1,18 @@
 import Link from "next/link";
-import Image from "next/image";
 import { createClient } from "@/lib/supabase/server";
 import {
  addDays,
+  dishCodes,
+  entriesFor,
  formatDateLong,
  formatPrice,
  mondayOf,
+  todayISO,
  WEEKDAYS,
 } from "@/lib/menu";
-import { logoUrl } from "@/lib/types";
+import { logoUrl, SITE_TITLE } from "@/lib/types";
 import type { CodeItem, MenuEntry, Section } from "@/lib/types";
+import PublicMobileMenu from "@/components/PublicMobileMenu";

 export default async function Home({
  searchParams,
@@ -19,6 +22,7 @@ export default async function Home({
  const { woche } = await searchParams;
  const monday = mondayOf(woche);
  const friday = addDays(monday, 4);
+  const currentWeek = mondayOf(todayISO());
  const days = WEEKDAYS.map((weekday, i) => ({
    weekday,
    iso: addDays(monday, i),
@@ -30,7 +34,9 @@ export default async function Home({
      supabase.from("sections").select("*").order("sort"),
      supabase
        .from("menu_entries")
-        .select("id, menu_date, section_key, position, dish:dishes(id, name, price)")
+        .select(
+          "id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)"
+        )
        .gte("menu_date", monday)
        .lte("menu_date", friday)
        .order("position")
@@ -46,9 +52,6 @@ export default async function Home({
  const additives = (additivesRes.data ?? []) as CodeItem[];
  const logo = logoUrl(settingsRes.data?.logo_path);

-  const cell = (iso: string, sectionKey: string) =>
-    entries.filter((e) => e.menu_date === iso && e.section_key === sectionKey);
-
  return (
    <div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
      {/* Kopfbereich: Logo zentriert, Login-Link rechts */}
@@ -59,7 +62,7 @@ export default async function Home({
            <img src={logo} alt="Logo" className="h-20 object-contain" />
          ) : (
            <h1 className="text-4xl font-extrabold tracking-tight text-[var(--c-primary)]">
-              Speisekarte
+              {SITE_TITLE}
            </h1>
          )}
        </div>
@@ -71,17 +74,24 @@ export default async function Home({
        </Link>
      </header>

-      {/* Wochen-Navigation */}
+      {/* Mobil: Tag (Standard) oder Woche umschaltbar */}
+      <PublicMobileMenu monday={monday} sections={sections} entries={entries} />
+
+      {/* Ab "sm": klassische Wochentabelle */}
+      <div className="hidden sm:block">
        <div className="flex gap-3 mb-4">
          <Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
            ← Vorherige Woche
          </Link>
+          <Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
+            Heute
+          </Link>
          <Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
            Nächste Woche →
          </Link>
        </div>

-      {/* Speisekarte */}
+        <div className="overflow-x-auto">
          <table className="menu-table">
            <thead>
              <tr>
@@ -104,21 +114,27 @@ export default async function Home({
                  </th>
                  {days.map((d) => (
                    <td key={d.iso} className="cell">
-                  {cell(d.iso, s.key).map((e) => (
+                      {entriesFor(entries, d.iso, s.key).map((e) => {
+                        const codes = dishCodes(e.dish);
+                        return (
                          <div key={e.id} className="dish">
                            <span className="font-bold">{e.dish.name}</span>
+                            {codes && <sup className="dish-codes">{codes}</sup>}
                            {" – "}
                            {formatPrice(e.dish.price)}
                          </div>
-                  ))}
+                        );
+                      })}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
+        </div>
+      </div>

-      {/* Allergene & Zusatzstoffe (gelten für die komplette Speisekarte) */}
+      {/* 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">
        <div>
          <h2 className="font-bold text-[var(--c-primary)] mb-2">Allergene</h2>
@@ -0,0 +1,169 @@
+"use client";
+
+// Mobile Ansicht der öffentlichen Speisekarte: Tag (Standard) oder Woche,
+// umschaltbar ohne Seiten-Reload. Ab dem "sm"-Breakpoint übernimmt die
+// normale Wochentabelle (siehe app/page.tsx), diese Komponente blendet
+// sich dort per CSS aus.
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import {
+  addDays,
+  dishCodes,
+  entriesFor,
+  formatDateLong,
+  formatPrice,
+  mondayOf,
+  todayISO,
+  weekdayIndex,
+  WEEKDAYS,
+  WEEKDAYS_SHORT,
+} from "@/lib/menu";
+import type { MenuEntry, Section } from "@/lib/types";
+
+export default function PublicMobileMenu({
+  monday,
+  sections,
+  entries,
+}: {
+  monday: string;
+  sections: Section[];
+  entries: MenuEntry[];
+}) {
+  const router = useRouter();
+  const days = WEEKDAYS.map((weekday, i) => ({
+    weekday,
+    short: WEEKDAYS_SHORT[i],
+    iso: addDays(monday, i),
+  }));
+  const isCurrentWeek = monday === mondayOf(todayISO());
+  const todayIdx = isCurrentWeek ? weekdayIndex(todayISO()) : -1;
+
+  const [tab, setTab] = useState<"tag" | "woche">("tag");
+  const [selectedIdx, setSelectedIdx] = useState(todayIdx >= 0 ? todayIdx : 0);
+
+  function goToday() {
+    const currentMonday = mondayOf(todayISO());
+    if (currentMonday === monday) {
+      const idx = weekdayIndex(todayISO());
+      setSelectedIdx(idx >= 0 ? idx : 0);
+      setTab("tag");
+    } else {
+      router.push(`/?woche=${currentMonday}`);
+    }
+  }
+
+  function renderDay(day: { weekday: string; iso: string }) {
+    return (
+      <div key={day.iso} className="mb-4 last:mb-0">
+        <h3 className="font-bold text-[var(--c-primary)] mb-2">
+          {day.weekday} · {formatDateLong(day.iso)}
+        </h3>
+        <div className="space-y-3">
+          {sections.map((s) => {
+            const items = entriesFor(entries, day.iso, s.key);
+            return (
+              <div
+                key={s.key}
+                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">
+                  <span className="font-semibold">{s.label}</span>{" "}
+                  <span className="opacity-80">· {s.time_range}</span>
+                </div>
+                <div className="bg-[var(--c-row-bg)] px-3 py-2 text-sm">
+                  {items.length === 0 ? (
+                    <p className="text-gray-500">–</p>
+                  ) : (
+                    items.map((e) => {
+                      const codes = dishCodes(e.dish);
+                      return (
+                        <p key={e.id} className="mb-1 last:mb-0">
+                          <span className="font-semibold">{e.dish.name}</span>
+                          {codes && <sup className="dish-codes">{codes}</sup>}{" "}
+                          – {formatPrice(e.dish.price)}
+                        </p>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sm:hidden mb-6">
+      <div className="flex gap-2 mb-3">
+        <Link
+          href={`/?woche=${addDays(monday, -7)}`}
+          className="btn btn-add flex-1 justify-center"
+        >
+          ← Woche
+        </Link>
+        <button
+          type="button"
+          onClick={goToday}
+          className="btn btn-primary flex-1"
+        >
+          Heute
+        </button>
+        <Link
+          href={`/?woche=${addDays(monday, 7)}`}
+          className="btn btn-add flex-1 justify-center"
+        >
+          Woche →
+        </Link>
+      </div>
+
+      <div className="flex gap-2 mb-3" role="tablist" aria-label="Ansicht">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "tag"}
+          onClick={() => setTab("tag")}
+          className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`}
+        >
+          Tag
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === "woche"}
+          onClick={() => setTab("woche")}
+          className={`btn flex-1 ${tab === "woche" ? "btn-primary" : "btn-neutral"}`}
+        >
+          Woche
+        </button>
+      </div>
+
+      {tab === "tag" ? (
+        <>
+          <div className="flex gap-1 mb-3">
+            {days.map((d, i) => (
+              <button
+                key={d.iso}
+                type="button"
+                onClick={() => setSelectedIdx(i)}
+                className={`flex-1 rounded-md py-1.5 text-sm font-semibold border transition-colors ${
+                  i === selectedIdx
+                    ? "bg-[var(--c-primary)] text-white border-[var(--c-primary)]"
+                    : "bg-white text-gray-600 border-gray-200"
+                } ${i === todayIdx ? "ring-2 ring-[var(--c-accent)] ring-offset-1" : ""}`}
+              >
+                {d.short}
+              </button>
+            ))}
+          </div>
+          {renderDay(days[selectedIdx])}
+        </>
+      ) : (
+        <div>{days.map((d) => renderDay(d))}</div>
+      )}
+    </div>
+  );
+}
@@ -2,6 +2,8 @@
 // Alle Berechnungen laufen über UTC, damit Server und Browser
 // unabhängig von der Zeitzone dieselbe Woche ermitteln.

+import type { MenuEntry } from "./types";
+
 const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;

 function toDate(iso: string): Date {
@@ -31,7 +33,19 @@ export function addDays(iso: string, days: number): string {
  return toISO(d);
 }

+/** Heutiges Datum als YYYY-MM-DD (UTC). */
+export function todayISO(): string {
+  return toISO(new Date());
+}
+
+/** Index (0=Montag…4=Freitag) von `iso` innerhalb seiner Woche, sonst -1 (Wochenende). */
+export function weekdayIndex(iso: string): number {
+  const day = (toDate(iso).getUTCDay() + 6) % 7;
+  return day <= 4 ? day : -1;
+}
+
 export const WEEKDAYS = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"];
+export const WEEKDAYS_SHORT = ["Mo", "Di", "Mi", "Do", "Fr"];

 /** z. B. "13. Juli 2026" */
 export function formatDateLong(iso: string): string {
@@ -47,3 +61,17 @@ export function formatDateLong(iso: string): string {
 export function formatPrice(price: number | string): string {
  return Number(price).toFixed(2).replace(".", ",") + "€";
 }
+
+/** Allergen-/Zusatzstoff-Kürzel eines Gerichts, z. B. "A,G,2" */
+export function dishCodes(dish: { allergens: string[]; additives: string[] }): string {
+  return [...(dish.allergens ?? []), ...(dish.additives ?? [])].join(",");
+}
+
+/** Einträge eines Tages/Bereichs aus der geladenen Wochenliste herausfiltern. */
+export function entriesFor(
+  entries: MenuEntry[],
+  iso: string,
+  sectionKey: string
+): MenuEntry[] {
+  return entries.filter((e) => e.menu_date === iso && e.section_key === sectionKey);
+}