Kurzmeldungen als Overlay, Liniendiagramm fuellt die Karte, Zeitraum ab 1 Tag

Meldungen: "Gespeichert", "Anordnung gespeichert" und die uebrigen Erfolgsmeldungen standen als Leiste mitten in der Seite - beim Speichern sprang dadurch das ganze Layout ein Stueck nach unten. Sie erscheinen jetzt als Overlay am unteren Rand und verschwinden nach fuenf Sekunden von selbst; ein Kreuz blendet sie sofort aus. Umgestellt in Uebersicht, Einstellungen, Gefahrenbereich, Benutzer, Produktformular sowie Ein- und Auslagern. Bewusst NICHT umgestellt: Fehlermeldungen. Ein Fehler, der nach fuenf Sekunden verschwindet, ist genau dann weg, wenn man ihn noch braucht - der bleibt an seiner Stelle stehen. Rollbalken beim Liniendiagramm: Den hatte ich mir mit der Zeitraum-Auswahl selbst eingebaut. Das Diagramm hatte eine feste Hoehe von 200 px; zusammen mit der Auswahl darueber passte das nicht mehr in die Karte. Jetzt wird auch die Hoehe gemessen, das Diagramm fuellt den verbleibenden Platz. Zeitraum "1 Tag": Ein einzelner Tag ergibt genau einen Messpunkt - eine Linie aus einem Punkt waere unsinnig. Das Diagramm zeigt in dem Fall die blanke Zahl. Die Backend-Begrenzung laesst jetzt einen Tag zu. Geprueft: "npm run build" laeuft durch; kein Verweis mehr auf die entfernten Meldungszustaende. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 10:23:53 +02:00
parent aa58914374
commit 97a6e94ea1
13 changed files with 201 additions and 57 deletions
--- a/web/src/pages/CheckIn.jsx
+++ b/web/src/pages/CheckIn.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { api } from "../api";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
+import { useToast } from "../toast";
 import { suggestionToProduct } from "../offUtils";
 import { asTree } from "../categoryTree";
 import { buildUnitOptions, fmt, fromMonthInput, isExpired, monthInputToLastDay } from "../units";
@@ -11,6 +12,7 @@ const emptyLine = () => ({ quantity: "", best_before: "" });

 export default function CheckIn() {
  const { isAdmin } = useAuth();
+  const toast = useToast();
  const [barcode, setBarcode] = useState("");
  const [product, setProduct] = useState(null);
  const [suggestion, setSuggestion] = useState(null);
@@ -37,7 +39,6 @@ export default function CheckIn() {
  const [precision, setPrecision] = useState("day");

  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
@@ -67,13 +68,13 @@ export default function CheckIn() {
  }

  async function doLookup() {
-    setError(null); setInfo(null); resetLookup();
+    setError(null); resetLookup();
    if (!barcode) return;
    try {
      const res = await api.lookup(barcode.trim());
      if (res.found && res.existing_product) {
        selectProduct(res.existing_product);
-        setInfo(`Produkt erkannt: ${res.existing_product.name}`);
+        toast(`Produkt erkannt: ${res.existing_product.name}`);
      } else {
        // Gruppe kommt ausschliesslich aus einem hinterlegten Gruppen-Code,
        // die Kategorie aus der Open-Food-Facts-Einordnung.
@@ -96,7 +97,7 @@ export default function CheckIn() {
      selectProduct(created);
      const gruppe = groups.find((g) => String(g.id) === String(created.group_id));
      const kategorie = categories.find((c) => String(c.id) === String(created.category_id));
-      setInfo(
+      toast(
        `Produkt "${created.name}" angelegt` +
          (kategorie ? `, Kategorie "${kategorie.name}"` : "") +
          (gruppe
@@ -224,7 +225,7 @@ export default function CheckIn() {

  async function submit(e) {
    e.preventDefault();
-    setError(null); setInfo(null);
+    setError(null);
    const payloadLines = lines
      .filter((l) => Number(l.quantity) > 0)
      .map((l) => ({
@@ -243,7 +244,7 @@ export default function CheckIn() {
    setBusy(true);
    try {
      const res = await api.checkInBatch({ product_id: product.id, unit, lines: payloadLines });
-      setInfo(
+      toast(
        `${payloadLines.length} Charge(n) eingelagert. Neuer Bestand: ` +
          `${fmt(res.product_stock / (product.unit_factor || 1))} ${product.unit_name}`
      );
@@ -260,7 +261,6 @@ export default function CheckIn() {
    <div>
      <div className="page-head"><h1>Einlagern</h1></div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}

      {!product && (
        <div className="grid-2">
--- a/web/src/pages/CheckOut.jsx
+++ b/web/src/pages/CheckOut.jsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import { useToast } from "../toast";
 import { useSettings } from "../settings";
 import { buildUnitOptions, fmt, isExpired, unitShort } from "../units";

 export default function CheckOut() {
  const { formatBestBefore } = useSettings();
+  const toast = useToast();
  const [barcode, setBarcode] = useState("");
  const [search, setSearch] = useState("");
  const [results, setResults] = useState([]);
@@ -18,7 +20,6 @@ export default function CheckOut() {
  const [lotId, setLotId] = useState(""); // "" = automatisch (FEFO)

  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
@@ -39,7 +40,7 @@ export default function CheckOut() {
  }

  async function doLookup() {
-    setError(null); setInfo(null);
+    setError(null);
    if (!barcode) return;
    try {
      const res = await api.lookup(barcode.trim());
@@ -64,7 +65,7 @@ export default function CheckOut() {

  async function submit(e) {
    e.preventDefault();
-    setError(null); setInfo(null); setBusy(true);
+    setError(null); setBusy(true);
    try {
      const res = await api.checkOut({
        product_id: product.id,
@@ -72,7 +73,7 @@ export default function CheckOut() {
        unit,
        lot_id: lotId === "" ? null : Number(lotId),
      });
-      setInfo(
+      toast(
        `Ausgelagert (${res.affected_lots.length} Charge(n)). Neuer Bestand: ` +
          `${fmt(res.product_stock / (product.unit_factor || 1))} ${product.unit_name}`
      );
@@ -104,7 +105,6 @@ export default function CheckOut() {
    <div>
      <div className="page-head"><h1>Auslagern</h1></div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}

      {!product && (
        <div className="grid-2">
--- a/web/src/pages/Dashboard.jsx
+++ b/web/src/pages/Dashboard.jsx
@@ -4,6 +4,7 @@ import { api } from "../api";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { useConfirm } from "../confirm";
+import { useToast } from "../toast";
 import { KARTEN, KARTEN_IDS } from "../dashboard/cards";
 import Vorschau from "../dashboard/Vorschau";

@@ -25,6 +26,7 @@ const ZEILENHOEHE = 40;
 export default function Dashboard() {
  const { isAdmin } = useAuth();
  const confirm = useConfirm();
+  const toast = useToast();

  const [layout, setLayout] = useState([]);
  const [entwurf, setEntwurf] = useState(null);   // nur im Bearbeitungsmodus gesetzt
@@ -32,7 +34,6 @@ export default function Dashboard() {
  const [erzwungen, setErzwungen] = useState(false);
  const [hatVorgabe, setHatVorgabe] = useState(false);
  const [fehler, setFehler] = useState(null);
-  const [hinweis, setHinweis] = useState(null);
  const [menuOffen, setMenuOffen] = useState(false);

  const bearbeiten = entwurf !== null;
@@ -86,7 +87,6 @@ export default function Dashboard() {

  function starteBearbeitung() {
    setEntwurf(aktuell.map((k) => ({ ...k })));
-    setHinweis(null);
  }

  function hinzufuegen(id) {
@@ -107,7 +107,7 @@ export default function Dashboard() {
      setLayout(bereinige(antwort.layout));
      setHerkunft(antwort.source);
      setEntwurf(null);
-      setHinweis("Anordnung gespeichert.");
+      toast("Anordnung gespeichert.");
    } catch (err) {
      setFehler(err.message);
    }
@@ -118,7 +118,7 @@ export default function Dashboard() {
    try {
      await api.saveDashboardDefault(schlank(entwurf ?? layout));
      setHatVorgabe(true);
-      setHinweis("Als Vorgabe für alle Benutzer gespeichert.");
+      toast("Als Vorgabe für alle Benutzer gespeichert.");
    } catch (err) {
      setFehler(err.message);
    }
@@ -132,7 +132,7 @@ export default function Dashboard() {
      setLayout(bereinige(antwort.layout));
      setHerkunft(antwort.source);
      setEntwurf(null);
-      setHinweis(wert
+      toast(wert
        ? "Die Startseite ist jetzt für alle verbindlich."
        : "Benutzer dürfen ihre Startseite wieder selbst anordnen.");
    } catch (err) {
@@ -152,7 +152,7 @@ export default function Dashboard() {
      await api.resetDashboardLayout();
      setEntwurf(null);
      await laden();
-      setHinweis("Auf die Vorgabe zurückgesetzt.");
+      toast("Auf die Vorgabe zurückgesetzt.");
    } catch (err) {
      setFehler(err.message);
    }
@@ -211,7 +211,6 @@ export default function Dashboard() {
      </div>

      {fehler && <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>}
-      {hinweis && <div className="alert ok"><Icon name="check" size={16} />{hinweis}</div>}

      {bearbeiten && (
        <div className="alert info">
--- a/web/src/pages/ProductForm.jsx
+++ b/web/src/pages/ProductForm.jsx
@@ -5,6 +5,7 @@ import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import BarcodeList from "../components/BarcodeList";
 import Icon from "../components/Icon";
+import { useToast } from "../toast";
 import { useSettings } from "../settings";
 import { asTree } from "../categoryTree";
 import {
@@ -30,6 +31,7 @@ const KIND_ORDER = ["count", "weight", "volume"];

 export default function ProductForm() {
  const confirm = useConfirm();
+  const toast = useToast();
  const { id } = useParams();
  const isNew = !id;
  const { isAdmin } = useAuth();
@@ -43,7 +45,6 @@ export default function ProductForm() {
  const [categories, setCategories] = useState([]);
  const [units, setUnits] = useState([]);
  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState(false);
  // Einheit für die Mindestbestand-Eingabe: "package" oder die ID einer Einheit.
  const [minUnit, setMinUnit] = useState("");
@@ -96,7 +97,7 @@ export default function ProductForm() {
      group_id: f.group_id || (res.group_id ? String(res.group_id) : ""),
    }));
    if (s.package_size != null) setMinUnit("package");
-    setInfo(
+    toast(
      "Daten von Open Food Facts übernommen." +
        (s.package_size != null ? "" : " (Füllmenge nicht hinterlegt – bitte Packungsgröße prüfen.)") +
        (res.category_name ? ` Kategorie „${res.category_name}“ vorgeschlagen.` : "") +
@@ -107,16 +108,16 @@ export default function ProductForm() {
  async function runLookup(code, unitList) {
    if (!code) return;
    setError(null);
-    setInfo(null);
+
    try {
      const res = await api.lookup(code.trim());
      if (res.found && res.existing_product) {
-        setInfo("Dieses Produkt existiert bereits.");
+        toast("Dieses Produkt existiert bereits.");
        navigate(`/products/${res.existing_product.id}`);
      } else if (res.found && res.suggestion) {
        applySuggestion(res, unitList);
      } else {
-        setInfo("Barcode unbekannt – bitte Daten selbst eingeben.");
+        toast("Barcode unbekannt – bitte Daten selbst eingeben.", "warn");
      }
    } catch (err) {
      setError(err.message);
@@ -210,7 +211,7 @@ export default function ProductForm() {
        navigate(`/products/${created.id}`);
      } else {
        await api.updateProduct(id, buildPayload());
-        setInfo("Gespeichert.");
+        toast("Gespeichert.");
        setProduct(await api.getProduct(id));
        setLots(await api.listLots(id));
      }
@@ -259,7 +260,6 @@ export default function ProductForm() {
      </div>

      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert info"><Icon name="check" size={16} />{info}</div>}

      <div className="grid-2">
        <form className="card" onSubmit={save}>
@@ -430,6 +430,7 @@ export default function ProductForm() {
 /** Chargen-Karte mit Bearbeiten/Löschen. Bearbeitet wird in der Produkteinheit. */
 function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onChanged, onError }) {
  const confirm = useConfirm();
+  const toast = useToast();
  const { formatBestBefore } = useSettings();
  const [editId, setEditId] = useState(null);
  const [draft, setDraft] = useState({ quantity: "", best_before: "", precision: "day" });
--- a/web/src/pages/Settings.jsx
+++ b/web/src/pages/Settings.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { api } from "../api";
 import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
+import { useToast } from "../toast";
 import BrandingUpload from "../components/BrandingUpload";
 import DangerAction from "../components/DangerAction";
 import { DATE_FORMAT_KEY, useSettings } from "../settings";
@@ -12,10 +13,10 @@ const EXPIRY_KEY = "expiry_warning_days";

 export default function Settings() {
  const { reload } = useSettings();
+  const toast = useToast();
  const [days, setDays] = useState("");
  const [dateFormat, setDateFormat] = useState("de");
  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);
  const [busy, setBusy] = useState(false);

  async function load() {
@@ -32,12 +33,12 @@ export default function Settings() {

  async function save(e) {
    e.preventDefault();
-    setError(null); setInfo(null); setBusy(true);
+    setError(null); setBusy(true);
    try {
      await api.setSetting(EXPIRY_KEY, String(parseInt(days, 10)));
      await api.setSetting(DATE_FORMAT_KEY, dateFormat);
      await reload();
-      setInfo("Gespeichert.");
+      toast("Gespeichert.");
    } catch (err) {
      setError(err.message);
    } finally {
@@ -57,7 +58,6 @@ export default function Settings() {
        </div>
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}

      <form className="card form-narrow" onSubmit={save}>
        <div className="card-head"><Icon name="clock" /><h2>Ablaufwarnung</h2></div>
@@ -233,9 +233,9 @@ rest:
 * Einstellungen und das eigene Logo bleiben in allen Stufen erhalten.
 */
 function DangerZoneCard() {
+  const toast = useToast();
  const [zahlen, setZahlen] = useState(null);
  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);

  async function load() {
    try {
@@ -250,10 +250,9 @@ function DangerZoneCard() {
  function run(aktion, meldung) {
    return async () => {
      setError(null);
-      setInfo(null);
      try {
        setZahlen(await aktion());
-        setInfo(meldung);
+        toast(meldung);
      } catch (err) {
        setError(err.message);
      }
@@ -276,7 +275,6 @@ function DangerZoneCard() {
      </p>

      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}

      <DangerAction
        title="Alle Bestände löschen"
--- a/web/src/pages/Users.jsx
+++ b/web/src/pages/Users.jsx
@@ -3,14 +3,15 @@ import { api } from "../api";
 import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
+import { useToast } from "../toast";

 export default function Users() {
  const confirm = useConfirm();
  const { user: me } = useAuth();
+  const toast = useToast();
  const [users, setUsers] = useState([]);
  const [form, setForm] = useState({ username: "", password: "", role: "user" });
  const [error, setError] = useState(null);
-  const [info, setInfo] = useState(null);

  async function load() {
    try {
@@ -24,11 +25,11 @@ export default function Users() {

  async function add(e) {
    e.preventDefault();
-    setError(null); setInfo(null);
+    setError(null);
    try {
      await api.createUser(form);
      setForm({ username: "", password: "", role: "user" });
-      setInfo("Benutzer angelegt.");
+      toast("Benutzer angelegt.");
      load();
    } catch (err) {
      setError(err.message);
@@ -69,7 +70,6 @@ export default function Users() {
        </div>
      </div>
      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
-      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}

      <div className="grid-2">
        <div className="card" style={{ padding: 0 }}>