feat: Szenarien-Seite mit zwei Formularen, Zeitraum-Spalte und wiederkehrenden Szenario-Zahlungen (A14-T4)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-30 13:08:16 +02:00
parent 8911623c15
commit cd7ba6aa6a
8 changed files with 373 additions and 106 deletions
@@ -0,0 +1,72 @@
+/* Szenarien-Seite (Ausbaustufe 14): Umschaltlogik der Formulare
+ * „Neue Änderung an Bestehendem" (.aenderung-form, auch in den Edit-Zeilen
+ * der Einträge) und „Neue Zahlung nur in diesem Szenario" (.zahlung-form).
+ * UX-Regel: Felder werden nur per disabled gesperrt, nie entfernt;
+ * gesperrte Felder tragen den Tooltip TIP. Gesperrte Felder sendet htmx
+ * nicht mit.
+ */
+(function () {
+  'use strict';
+
+  var TIP = 'Für diese Eintragsart nicht relevant';
+  var WERT_LABEL = { percent: 'Prozentsatz (%)', absolute: 'Kürzung (€)', set: 'Neuer Betrag (€)' };
+
+  function sperren(el, gesperrt) {
+    if (!el) { return; }
+    el.disabled = gesperrt;
+    if (gesperrt) { el.title = TIP; } else { el.removeAttribute('title'); }
+  }
+
+  function feld(form, name) { return form.querySelector('[name="' + name + '"]'); }
+
+  function beschriften(form, cls, text) {
+    var el = form.querySelector('.' + cls);
+    if (el) { el.textContent = text; }
+  }
+
+  // Ziel-Typ: passende Auswahl (Kategorie oder Posten) zeigen und freigeben.
+  function zielTyp(select) {
+    var form = select.closest('form');
+    var istKategorie = select.value === 'category';
+    var kat = form.querySelector('.mod-target-category');
+    var rec = form.querySelector('.mod-target-recurring');
+    kat.style.display = istKategorie ? '' : 'none';
+    rec.style.display = istKategorie ? 'none' : '';
+    sperren(kat.querySelector('select'), !istKategorie);
+    sperren(rec.querySelector('select'), istKategorie);
+  }
+
+  function aenderungArt(select) {
+    var form = select.closest('form');
+    var art = select.value;
+    var mitWert = Object.prototype.hasOwnProperty.call(WERT_LABEL, art);
+    sperren(feld(form, 'value'), !mitWert);
+    beschriften(form, 'value-label', mitWert ? WERT_LABEL[art] : 'Wert');
+    sperren(feld(form, 'start_date'), art === 'ende');
+    beschriften(form, 'bis-label', art === 'ende' ? 'Endet am' : 'Gültig bis');
+    var typ = feld(form, 'target_type');
+    var kategorieOption = typ.querySelector('option[value="category"]');
+    // „Neuer Betrag" gibt es nur für Posten.
+    if (art === 'set') { typ.value = 'recurring'; }
+    kategorieOption.disabled = art === 'set';
+    zielTyp(typ);
+  }
+
+  function zahlungArt(select) {
+    var form = select.closest('form');
+    var einmal = select.value === 'einmal';
+    sperren(feld(form, 'due'), !einmal);
+    ['rhythm', 'due_day', 'start_date', 'end_date'].forEach(function (name) {
+      sperren(feld(form, name), einmal);
+    });
+    form.setAttribute('hx-post', form.getAttribute(einmal ? 'data-planned-url' : 'data-recurring-url'));
+    if (window.htmx) { window.htmx.process(form); }
+  }
+
+  function init(root) {
+    root.querySelectorAll('.aenderung-form select[name="kind"]').forEach(aenderungArt);
+    root.querySelectorAll('.zahlung-form select.zahlung-art').forEach(zahlungArt);
+  }
+
+  window.FBSzenario = { zielTyp: zielTyp, aenderungArt: aenderungArt, zahlungArt: zahlungArt, init: init };
+})();