Web: Dashboard-Karten wie HomeAssistant konfigurieren + Einkaufsliste je Lagerort

Karten-Optionen (Artikel, Lagerort, Zeitraum) sassen als einzelne Dropdowns im Kartenkopf. Jetzt: deklaratives config-Schema je Kartenart und ein Zahnrad-Dialog (KartenConfig) im Anordnen-Modus - der Kopf zeigt sonst nur noch Titel/Papierkorb. Felder: product, location, zeitraum (erweiterbar: select, boolean). Werte bleiben in props/tage, keine Migration. Einkaufsliste-Karte laedt zusaetzlich shoppingByLocation und zeigt Gesamt + Bedarfe je Lagerort. Ueber die Karten-Konfig waehlbarer Lagerort: leer = alle Orte, gesetzt = Gesamt + nur dieser Ort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-30 14:29:09 +02:00
parent f3bab15362
commit 3e10e254c8
3 changed files with 191 additions and 62 deletions
--- a/web/src/dashboard/KartenConfig.jsx
+++ b/web/src/dashboard/KartenConfig.jsx
@@ -0,0 +1,93 @@
+import Icon from "../components/Icon";
+import { ZEITRAEUME } from "./cards";
+import { locationOptions } from "../locationPath";
+
+/**
+ * Konfig-Dialog einer Karte – wie in HomeAssistant: ein eigener Dialog mit den
+ * Optionen der Karte, statt Dropdowns im Kartenkopf. Welche Felder erscheinen,
+ * bestimmt `karte.config`. Die Werte landen in den Karten-Props (bzw. `tage`
+ * beim Zeitraum) und werden mit dem Layout gespeichert.
+ */
+export default function KartenConfig({
+  karte, props: karteProps = {}, tage,
+  produkte = [], locations = [], onProps, onTage, onClose,
+}) {
+  const felder = karte?.config || [];
+
+  function feld(f) {
+    if (f.type === "product") {
+      return (
+        <label key={f.key}>
+          {f.label}
+          <select value={karteProps[f.key] ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value ? Number(e.target.value) : undefined })}>
+            <option value="">– Artikel wählen –</option>
+            {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "location") {
+      return (
+        <label key={f.key}>
+          {f.label}{f.hint ? <span className="muted small"> ({f.hint})</span> : null}
+          <select value={karteProps[f.key] ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value || undefined })}>
+            <option value="">– alle Orte –</option>
+            {locationOptions(locations).map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "zeitraum") {
+      return (
+        <label key="zeitraum">
+          {f.label}
+          <select value={tage ?? karte.zeitraum} onChange={(e) => onTage(Number(e.target.value))}>
+            {ZEITRAEUME.map((z) => <option key={z.tage} value={z.tage}>{z.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "select") {
+      return (
+        <label key={f.key}>
+          {f.label}
+          <select value={karteProps[f.key] ?? f.default ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value })}>
+            {(f.optionen || []).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "boolean") {
+      return (
+        <label key={f.key} className="check-inline">
+          <input type="checkbox" checked={karteProps[f.key] ?? f.default ?? false}
+            onChange={(e) => onProps({ [f.key]: e.target.checked })} />
+          <span>{f.label}</span>
+        </label>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="modal" role="dialog" aria-modal="true">
+        <div className="modal-head">
+          <Icon name="settings" size={18} />
+          <h2>{karte?.titel} einstellen</h2>
+        </div>
+        <div className="modal-body" style={{ display: "grid", gap: "var(--sp-3)" }}>
+          {felder.length === 0
+            ? <p className="muted">Diese Karte hat keine Einstellungen.</p>
+            : felder.map(feld)}
+        </div>
+        <div className="btn-pair">
+          <button type="button" className="btn primary" onClick={onClose}>Fertig</button>
+        </div>
+      </div>
+    </div>
+  );
+}