97a6e94ea1
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>
70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
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);
|
||
}
|