Web: "Ablauf-Anteile" – "Ohne MHD" ein-/ausblendbar

Die Ablauf-Ring-Karte bekommt einen Umschalter, ob der Anteil "Ohne MHD"
(Gegenstaende/undatierte Chargen) mitgezaehlt wird. Aus zeigt der Ring nur
In Ordnung/Bald/Abgelaufen mit entsprechend neu berechneten Prozenten. Die Wahl
wird in localStorage gemerkt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-26 21:46:18 +02:00
parent 3453471716
commit d993a48711
2 changed files with 24 additions and 2 deletions

View File

@@ -380,6 +380,14 @@ function KarteBewegungen() {
// ---------------------------------------------------------------- Diagramme
function KarteAblaufRing() {
const { daten, fehler } = useDaten(() => api.dashboardExpirySplit());
// Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird gemerkt.
const [mitOhneMhd, setMitOhneMhd] = useState(
() => localStorage.getItem("ablauf_mit_ohne_mhd") !== "0",
);
function umschalten(on) {
setMitOhneMhd(on);
localStorage.setItem("ablauf_mit_ohne_mhd", on ? "1" : "0");
}
if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
if (!daten) return <div className="empty">Lädt</div>;
@@ -388,9 +396,20 @@ function KarteAblaufRing() {
{ name: "In Ordnung", value: daten.ok, color: tokenFarbe("--ok", "#2e7d55") },
{ name: "Bald ablaufend", value: daten.soon, color: tokenFarbe("--warn", "#b06f14") },
{ name: "Abgelaufen", value: daten.expired, color: tokenFarbe("--danger", "#c0392b") },
{ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") },
];
return <Donut segmente={segmente} gesamtLabel="Einheiten" />;
if (mitOhneMhd) {
segmente.push({ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") });
}
return (
<div className="ring-mit-schalter">
<label className="check-inline ring-schalter">
<input type="checkbox" checked={mitOhneMhd}
onChange={(e) => umschalten(e.target.checked)} />
<span>Ohne MHD" einbeziehen</span>
</label>
<Donut segmente={segmente} gesamtLabel="Einheiten" />
</div>
);
}
function KarteKategorienRing() {