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>

web/src/toast.jsx

@@ -0,0 +1,69 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import Icon from "./components/Icon";
+
+/**
+ * Kurze Rückmeldungen als Overlay am unteren Rand.
+ *
+ * Vorher standen sie als Hinweisleiste mitten in der Seite – dadurch sprang
+ * beim Speichern das ganze Layout ein Stück nach unten. Ein Overlay liegt über
+ * dem Inhalt und verschiebt nichts.
+ *
+ * Bewusst nur für *Erfolgsmeldungen*: Fehler bleiben als Leiste an ihrer Stelle
+ * stehen. Eine Fehlermeldung, die nach fünf Sekunden verschwindet, ist genau
+ * dann weg, wenn man sie noch braucht.
+ *
+ *     const toast = useToast();
+ *     toast("Gespeichert.");
+ */
+const ToastContext = createContext(() => {});
+
+const DAUER = 5000;
+
+export function ToastProvider({ children }) {
+  const [meldungen, setMeldungen] = useState([]);
+  const uhren = useRef(new Map());
+
+  const entfernen = useCallback((id) => {
+    setMeldungen((alt) => alt.filter((m) => m.id !== id));
+    const uhr = uhren.current.get(id);
+    if (uhr) {
+      clearTimeout(uhr);
+      uhren.current.delete(id);
+    }
+  }, []);
+
+  const zeigen = useCallback((text, art = "ok") => {
+    if (!text) return;
+    const id = `${Date.now()}-${Math.random()}`;
+    setMeldungen((alt) => [...alt, { id, text, art }]);
+    uhren.current.set(id, setTimeout(() => entfernen(id), DAUER));
+  }, [entfernen]);
+
+  // Beim Verlassen der Seite laufende Uhren abräumen.
+  useEffect(() => {
+    const laufend = uhren.current;
+    return () => laufend.forEach((uhr) => clearTimeout(uhr));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={zeigen}>
+      {children}
+      {/* aria-live: Bildschirmleser sagen die Meldung an, ohne den Fokus zu stehlen. */}
+      <div className="toasts" role="status" aria-live="polite">
+        {meldungen.map((m) => (
+          <div key={m.id} className={`toast ${m.art}`}>
+            <Icon name={m.art === "ok" ? "check" : "alert"} size={16} />
+            <span className="toast-text">{m.text}</span>
+            <button className="btn-icon" onClick={() => entfernen(m.id)} title="Ausblenden">
+              <Icon name="close" size={15} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  return useContext(ToastContext);
+}