9a3472f4b7
- Depot der Bank wird einem Depot im Finanzmanager zugeordnet (Migration 022) - Bestand einbuchen: Ein-/Auslieferungen aus dem Bankbestand, Stichtag per Dialog - Zuordnungsliste: Depots nur noch als Wertpapiergeschäft Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
415 lines
17 KiB
JavaScript
415 lines
17 KiB
JavaScript
/* Finanzmanager – Frontend-Hilfen.
|
||
*
|
||
* Bewusst schlank und ohne Framework.
|
||
*
|
||
* Bestätigungen hängen an <form data-bestaetigen="…"> und nicht als onsubmit
|
||
* im HTML: Die Content-Security-Policy erlaubt keine Inline-Skripte, ein
|
||
* onsubmit-Attribut würde stillschweigend verworfen – und dann löschte der
|
||
* Knopf ohne Rückfrage.
|
||
*/
|
||
|
||
(function () {
|
||
'use strict';
|
||
|
||
// Die Marke klappt die Seitenleiste auf Symbolbreite zusammen und wieder
|
||
// auf. Der Zustand steht in einem Cookie und nicht im localStorage: So
|
||
// rendert der Server die Leiste schon in der richtigen Breite, statt sie
|
||
// bei jedem Seitenwechsel kurz breit aufblitzen zu lassen.
|
||
const schalter = document.querySelector('[data-seitenleiste-schalter]');
|
||
const rahmen = document.querySelector('.rahmen');
|
||
if (schalter && rahmen) {
|
||
schalter.addEventListener('click', function () {
|
||
const eingeklappt = rahmen.classList.toggle('eingeklappt');
|
||
|
||
schalter.setAttribute('aria-expanded', eingeklappt ? 'false' : 'true');
|
||
schalter.title = eingeklappt ? 'Seitenleiste ausklappen' : 'Seitenleiste einklappen';
|
||
|
||
document.cookie = 'seitenleiste=' + (eingeklappt ? 'eingeklappt' : 'offen')
|
||
+ '; path=/; max-age=31536000; samesite=lax';
|
||
});
|
||
}
|
||
|
||
// Formulare mit data-bestaetigen fragen vor dem Absenden nach. Trägt der
|
||
// gedrückte Knopf selbst ein data-bestaetigen, gilt seine Frage – so
|
||
// können mehrere Knöpfe im selben Formular (verschiedene Ziele über
|
||
// formaction) je ihre eigene Rückfrage stellen.
|
||
// In der Capture-Phase, damit die Rückfrage auch dann greift, wenn ein
|
||
// anderer Handler das Ereignis unterwegs stoppt.
|
||
document.addEventListener('submit', function (ereignis) {
|
||
const formular = ereignis.target;
|
||
if (!(formular instanceof HTMLFormElement)) {
|
||
return;
|
||
}
|
||
|
||
const frage = (ereignis.submitter && ereignis.submitter.dataset.bestaetigen)
|
||
|| formular.dataset.bestaetigen;
|
||
if (frage && !window.confirm(frage)) {
|
||
ereignis.preventDefault();
|
||
ereignis.stopPropagation();
|
||
}
|
||
}, true);
|
||
|
||
// Kategoriebaum im Budgetplaner auf- und zuklappen. Die Zeilen kennen ihre
|
||
// Elternkategorie über data-eltern; von dort aus lässt sich der Teilbaum
|
||
// einsammeln, ohne ihn im HTML zu verschachteln (in einer Tabelle ginge das
|
||
// ohnehin nicht).
|
||
document.querySelectorAll('.klappknopf').forEach(function (knopf) {
|
||
knopf.setAttribute('aria-expanded', 'true');
|
||
|
||
knopf.addEventListener('click', function () {
|
||
const wurzel = knopf.dataset.klappt;
|
||
const offen = knopf.getAttribute('aria-expanded') !== 'false';
|
||
knopf.setAttribute('aria-expanded', offen ? 'false' : 'true');
|
||
|
||
const zeilen = Array.from(document.querySelectorAll('tr.kategoriezeile'));
|
||
const betroffen = new Set([wurzel]);
|
||
|
||
zeilen.forEach(function (zeile) {
|
||
const eltern = zeile.dataset.eltern;
|
||
if (eltern && betroffen.has(eltern)) {
|
||
betroffen.add(zeile.dataset.kategorie);
|
||
zeile.classList.toggle('zugeklappt', offen);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Zahnrad im Budgetplaner: verteilt den eingegebenen Wert über die Zeile,
|
||
// wahlweise auf das ganze oder nur auf das restliche Jahr. Gearbeitet wird
|
||
// auf den Eingabefeldern, nicht auf der Datenbank – so ist das Ergebnis vor
|
||
// dem Speichern zu sehen und geht mit demselben Knopf weg wie alles andere.
|
||
//
|
||
// Das Menü gibt es nur einmal und wandert in die angeklickte Zelle: Ein
|
||
// eigenes Menü je Feld wären zwölf Stück pro Kategoriezeile, und ein frei
|
||
// positioniertes bräuchte ein style-Attribut, das die
|
||
// Content-Security-Policy verwirft.
|
||
const planer = document.querySelector('table.budgetplaner');
|
||
if (planer) {
|
||
const menue = document.createElement('div');
|
||
menue.className = 'zahnradmenue';
|
||
|
||
let feld = null;
|
||
let zahnrad = null;
|
||
|
||
function schliessen() {
|
||
if (menue.parentNode) {
|
||
menue.parentNode.removeChild(menue);
|
||
}
|
||
if (zahnrad) {
|
||
zahnrad.setAttribute('aria-expanded', 'false');
|
||
}
|
||
feld = null;
|
||
zahnrad = null;
|
||
}
|
||
|
||
function uebertragen(abMonat) {
|
||
const zeile = feld.closest('tr');
|
||
const wert = feld.value;
|
||
|
||
zeile.querySelectorAll('input.betragsfeld').forEach(function (anderes) {
|
||
if (Number(anderes.dataset.monat) >= abMonat) {
|
||
anderes.value = wert;
|
||
}
|
||
});
|
||
|
||
schliessen();
|
||
}
|
||
|
||
[
|
||
{ text: 'Ganzes Jahr', ab: function () { return 1; } },
|
||
{ text: 'Restliches Jahr', ab: function (monat) { return monat + 1; } }
|
||
].forEach(function (eintrag) {
|
||
const knopf = document.createElement('button');
|
||
knopf.type = 'button';
|
||
knopf.className = 'menueeintrag';
|
||
knopf.textContent = eintrag.text;
|
||
|
||
knopf.addEventListener('click', function () {
|
||
if (feld) {
|
||
uebertragen(eintrag.ab(Number(feld.dataset.monat)));
|
||
}
|
||
});
|
||
|
||
menue.appendChild(knopf);
|
||
});
|
||
|
||
planer.addEventListener('click', function (ereignis) {
|
||
const knopf = ereignis.target.closest('.zahnrad');
|
||
if (!knopf) {
|
||
return;
|
||
}
|
||
|
||
const zelle = knopf.closest('td');
|
||
const warOffen = menue.parentNode === zelle;
|
||
schliessen();
|
||
if (warOffen) {
|
||
return;
|
||
}
|
||
|
||
feld = zelle.querySelector('input.betragsfeld');
|
||
zahnrad = knopf;
|
||
knopf.setAttribute('aria-expanded', 'true');
|
||
zelle.appendChild(menue);
|
||
menue.firstChild.focus();
|
||
});
|
||
|
||
// Klick daneben oder Escape schließt das Menü wieder.
|
||
document.addEventListener('click', function (ereignis) {
|
||
if (!(ereignis.target instanceof Element)) {
|
||
return;
|
||
}
|
||
if (!ereignis.target.closest('.zahnrad, .zahnradmenue')) {
|
||
schliessen();
|
||
}
|
||
});
|
||
|
||
document.addEventListener('keydown', function (ereignis) {
|
||
if (ereignis.key === 'Escape') {
|
||
schliessen();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Empfängerauswahl im Zahlungsverkehr: Die Adresse füllt Name, IBAN und BIC.
|
||
// Geändert werden darf danach alles – die Auswahl ist eine Abkürzung, keine
|
||
// Bindung.
|
||
const adressauswahl = document.querySelector('[data-adressauswahl]');
|
||
if (adressauswahl) {
|
||
adressauswahl.addEventListener('change', function () {
|
||
const gewaehlt = adressauswahl.selectedOptions[0];
|
||
if (!gewaehlt || !gewaehlt.value) {
|
||
return;
|
||
}
|
||
|
||
const felder = {
|
||
empfaenger: gewaehlt.dataset.name,
|
||
iban: gewaehlt.dataset.iban,
|
||
bic: gewaehlt.dataset.bic
|
||
};
|
||
|
||
Object.keys(felder).forEach(function (name) {
|
||
const feld = document.getElementById(name);
|
||
if (feld && felder[name]) {
|
||
feld.value = felder[name];
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Echtzeitüberweisung: Sie geht sofort hinaus, ein Ausführungstermin hat
|
||
// daneben keinen Sinn. Das Feld wird gesperrt, solange sie gewählt ist –
|
||
// die Prüfung beim Speichern bleibt trotzdem die maßgebliche.
|
||
const echtzeit = document.querySelector('[data-echtzeit]');
|
||
const termin = document.getElementById('ausfuehrung_am');
|
||
if (echtzeit && termin) {
|
||
const abgleichen = function () {
|
||
termin.disabled = echtzeit.checked;
|
||
if (echtzeit.checked) {
|
||
termin.value = '';
|
||
}
|
||
};
|
||
echtzeit.addEventListener('change', abgleichen);
|
||
abgleichen();
|
||
}
|
||
|
||
// Kontenzuordnung einer Bankverbindung: Die Felder für ein neues Konto
|
||
// stehen in einer eigenen Tabellenzeile und werden erst sichtbar, wenn
|
||
// „neues Konto anlegen“ gewählt ist. Ausgeblendet wird hier und nicht im
|
||
// HTML – ohne JavaScript sollen die Felder da sein, sonst ließe sich kein
|
||
// Konto anlegen.
|
||
document.querySelectorAll('select[data-neues-konto]').forEach(function (auswahl) {
|
||
const zeile = document.getElementById(auswahl.dataset.neuesKonto);
|
||
if (!zeile) {
|
||
return;
|
||
}
|
||
|
||
const anpassen = function () {
|
||
zeile.hidden = auswahl.value !== 'neu';
|
||
};
|
||
|
||
auswahl.addEventListener('change', anpassen);
|
||
anpassen();
|
||
});
|
||
|
||
// Mehrfachauswahl in Listen: Das Ankreuzfeld in der Titelzeile schaltet alle
|
||
// angezeigten Zeilen, der Knopf im zugehörigen Formular zählt die Auswahl
|
||
// mit und bleibt ohne Auswahl gesperrt. Ohne JavaScript funktioniert alles
|
||
// weiter – dann ist der Knopf offen und der Controller weist eine leere
|
||
// Auswahl ab.
|
||
document.querySelectorAll('.alle-waehlen').forEach(function (alle) {
|
||
const formular = document.getElementById(alle.dataset.waehlt || '');
|
||
if (!formular) {
|
||
return;
|
||
}
|
||
|
||
const kaestchen = Array.from(
|
||
document.querySelectorAll('input[type="checkbox"][form="' + formular.id + '"]')
|
||
);
|
||
const knopf = formular.querySelector('button[type="submit"]');
|
||
const beschriftung = knopf ? knopf.textContent : '';
|
||
|
||
const anpassen = function () {
|
||
const anzahl = kaestchen.filter(function (k) { return k.checked; }).length;
|
||
|
||
alle.checked = anzahl > 0 && anzahl === kaestchen.length;
|
||
alle.indeterminate = anzahl > 0 && anzahl < kaestchen.length;
|
||
|
||
if (knopf) {
|
||
knopf.disabled = anzahl === 0;
|
||
knopf.textContent = anzahl === 0 ? beschriftung : beschriftung + ' (' + anzahl + ')';
|
||
}
|
||
// Die Rückfrage nennt die Anzahl; ihr Wortlaut steht in der Ansicht.
|
||
const vorlage = anzahl === 1
|
||
? formular.dataset.frageEine
|
||
: formular.dataset.frageMehrere;
|
||
if (vorlage) {
|
||
formular.dataset.bestaetigen = vorlage.replace('{anzahl}', String(anzahl));
|
||
}
|
||
};
|
||
|
||
alle.addEventListener('change', function () {
|
||
kaestchen.forEach(function (k) { k.checked = alle.checked; });
|
||
anpassen();
|
||
});
|
||
kaestchen.forEach(function (k) { k.addEventListener('change', anpassen); });
|
||
anpassen();
|
||
});
|
||
|
||
// Formatwahl von Import und Export. Die Kachel in der Verwaltung führt zwei
|
||
// Knöpfe; welches Dateiformat gemeint ist, fragt dieser Dialog ab und hängt
|
||
// es dann an die Zieladresse. Die Karten liefert die Ansicht mit – hier
|
||
// stehen nur die Ziele.
|
||
//
|
||
// Kennt der Browser <dialog> nicht, bleibt der Knopf ein gewöhnlicher Link
|
||
// und führt auf dieselbe Auswahl als eigene Seite.
|
||
const formatdialog = document.getElementById('formatwahl');
|
||
if (formatdialog && typeof formatdialog.showModal === 'function') {
|
||
const titel = formatdialog.querySelector('[data-formatdialog-titel]');
|
||
|
||
document.querySelectorAll('[data-formatwahl]').forEach(function (knopf) {
|
||
knopf.addEventListener('click', function (ereignis) {
|
||
ereignis.preventDefault();
|
||
|
||
const ziel = knopf.getAttribute('href');
|
||
if (titel) {
|
||
titel.textContent = knopf.dataset.formatwahl + ': Format wählen';
|
||
}
|
||
|
||
formatdialog.querySelectorAll('.formatkarte').forEach(function (karte) {
|
||
karte.setAttribute('href', ziel + '?format=' + karte.dataset.format);
|
||
});
|
||
|
||
formatdialog.showModal();
|
||
});
|
||
});
|
||
}
|
||
|
||
// Depotbestand einbuchen: Der Knopf öffnet den Dialog mit der Stichtagsabfrage.
|
||
document.querySelectorAll('[data-einbuchdialog]').forEach(function (knopf) {
|
||
knopf.addEventListener('click', function () {
|
||
const dialog = document.getElementById(knopf.dataset.einbuchdialog);
|
||
if (dialog && typeof dialog.showModal === 'function') {
|
||
dialog.showModal();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Übermittlungsprotokoll im Zahlungsverkehr: Ein Klick auf den Status holt das
|
||
// Protokoll der Überweisung in einen modalen Dialog. Ohne <dialog> oder
|
||
// fetch bleibt der Status ein Link auf dieselbe Ansicht als eigene Seite.
|
||
const protokolldialog = document.getElementById('protokolldialog');
|
||
if (protokolldialog && typeof protokolldialog.showModal === 'function' && window.fetch) {
|
||
const inhalt = protokolldialog.querySelector('[data-protokoll-inhalt]');
|
||
|
||
document.querySelectorAll('[data-protokoll]').forEach(function (link) {
|
||
link.addEventListener('click', function (ereignis) {
|
||
ereignis.preventDefault();
|
||
|
||
window.fetch(link.getAttribute('href'), {
|
||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||
credentials: 'same-origin'
|
||
}).then(function (antwort) {
|
||
if (!antwort.ok) { throw new Error(antwort.status); }
|
||
return antwort.text();
|
||
}).then(function (html) {
|
||
inhalt.innerHTML = html;
|
||
protokolldialog.showModal();
|
||
}).catch(function () {
|
||
window.location.href = link.getAttribute('href');
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
// Meldungen ausblenden. Über eine Klasse, nicht über element.style: Die
|
||
// Content-Security-Policy (style-src 'self') verwirft auch per JavaScript
|
||
// gesetzte Inline-Styles, die Meldung bliebe sonst einfach stehen.
|
||
const ausblenden = function (element) {
|
||
element.classList.add('verblasst');
|
||
window.setTimeout(function () { element.remove(); }, 400);
|
||
};
|
||
|
||
// Erfolgsmeldungen gehen von selbst; Fehler und Warnungen bleiben stehen,
|
||
// bis sie weggeklickt werden. Sie liegen über der Ansicht – ohne diesen Weg
|
||
// verdeckten sie die Werkzeugleiste bis zum nächsten Seitenwechsel.
|
||
const einrichten = function (element) {
|
||
element.title = 'Zum Ausblenden anklicken';
|
||
element.addEventListener('click', function () { ausblenden(element); });
|
||
|
||
if (element.classList.contains('meldung-erfolg')) {
|
||
window.setTimeout(function () { ausblenden(element); }, 5000);
|
||
}
|
||
};
|
||
|
||
document.querySelectorAll('.meldung').forEach(einrichten);
|
||
|
||
// Für Ansichten, die eine Meldung nachträglich zeigen, ohne die Seite neu
|
||
// zu laden – etwa das Kontoblatt nach einer Schnellzuordnung
|
||
// (kontoblatt.js). Den Meldungsbereich selbst gibt es im HTML nur, wenn
|
||
// der Server ihn beim Laden der Seite mitgab; hier entsteht er bei Bedarf.
|
||
window.FmMeldungen = {
|
||
zeigen: function (text, typ) {
|
||
let bereich = document.querySelector('.meldungen');
|
||
if (!bereich) {
|
||
bereich = document.createElement('div');
|
||
bereich.className = 'meldungen';
|
||
document.body.appendChild(bereich);
|
||
}
|
||
|
||
const element = document.createElement('div');
|
||
element.className = 'meldung meldung-' + (typ || 'erfolg');
|
||
element.setAttribute('role', 'status');
|
||
element.textContent = text;
|
||
bereich.appendChild(element);
|
||
|
||
einrichten(element);
|
||
}
|
||
};
|
||
})();
|
||
|
||
// Summe der Anteile in den Splittabellen der Abgleichregeln (regelsplits.php).
|
||
// Sie wird beim Laden und bei jeder Eingabe in einem Anteilsfeld derselben
|
||
// Tabelle neu berechnet.
|
||
(function () {
|
||
'use strict';
|
||
|
||
document.querySelectorAll('table[data-anteilssumme]').forEach(function (tabelle) {
|
||
const ausgabe = tabelle.querySelector('.anteilssumme');
|
||
const felder = tabelle.querySelectorAll('input[name$="[prozent]"]');
|
||
|
||
const berechnen = function () {
|
||
let summe = 0;
|
||
felder.forEach(function (feld) {
|
||
const zahl = parseFloat(feld.value.trim().replace(',', '.'));
|
||
if (!isNaN(zahl)) { summe += zahl; }
|
||
});
|
||
ausgabe.textContent = (Math.round(summe * 100) / 100).toLocaleString('de-DE', {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2
|
||
});
|
||
};
|
||
|
||
felder.forEach(function (feld) { feld.addEventListener('input', berechnen); });
|
||
berechnen();
|
||
});
|
||
})();
|