marvin/marvinblum
1
0
Fork 0
mirror of https://github.com/Kugelschieber/marvinblum.git synced 2026-09-13 11:01:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated expense splitter to safe state in browser.

Browse Source
This commit is contained in:
marvin
2026-08-28 17:10:40 +02:00
parent b20f42161e
commit 21f39d103b
1 changed files with 420 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/expense-splitter/index.html
+420 -315
View File
@@ -1,264 +1,360 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Expense Splitter</title> <title>Expense Splitter</title>
<link rel="stylesheet" type="text/css" href="/static/web/main.css" /> <link rel="stylesheet" type="text/css" href="/static/web/main.css" />
</head> </head>
<body> <body>
<h1>Expense Splitter</h1> <h1>Expense Splitter</h1>
<h2>1. Mitglieder</h2>
<div id="member-list"></div>
<input type="text" id="member-name" placeholder="Name eingeben" />
<button onclick="addMember()">Mitglied hinzufügen</button>
<hr> <hr />
<h2>1. Mitglieder</h2> <h2>2. Neue Ausgabe hinzufügen</h2>
<div id="member-list"></div> <table id="expense-form-table" border="1" cellpadding="4">
<input type="text" id="member-name" placeholder="Name eingeben"> <tr>
<button onclick="addMember()">Mitglied hinzufügen</button> <td>Beschreibung:</td>
<td>
<input
type="text"
id="expense-desc"
placeholder="z.B. Abendessen"
/>
</td>
</tr>
<tr>
<td>Betrag:</td>
<td>
<input
type="number"
id="expense-amount"
step="0.01"
placeholder="0.00"
/>
</td>
</tr>
<tr>
<td>Bezahlt von:</td>
<td><select id="expense-payer"></select></td>
</tr>
<tr>
<td>Aufteilungsart:</td>
<td>
<select id="split-type" onchange="renderSplitInputs()">
<option value="equal">
Gleichmäßig unter Ausgewählten
</option>
<option value="exact">Exakte Beträge pro Person</option>
</select>
</td>
</tr>
<tr>
<td>Aufgeteilt zwischen:</td>
<td id="split-inputs"></td>
</tr>
</table>
<button onclick="addExpense()">Ausgabe speichern</button>
<div id="expense-error" style="color: red"></div>
<hr> <hr />
<h2>2. Neue Ausgabe hinzufügen</h2> <h2>3. Alle Ausgaben</h2>
<table id="expense-form-table" border="1" cellpadding="4"> <table id="expense-table" border="1" cellpadding="4">
<tr> <thead>
<td>Beschreibung:</td> <tr>
<td><input type="text" id="expense-desc" placeholder="z.B. Abendessen"></td> <th>Datum</th>
</tr> <th>Beschreibung</th>
<tr> <th>Betrag</th>
<td>Betrag:</td> <th>Bezahlt von</th>
<td><input type="number" id="expense-amount" step="0.01" placeholder="0.00"></td> <th>Aufteilung</th>
</tr> <th></th>
<tr> </tr>
<td>Bezahlt von:</td> </thead>
<td><select id="expense-payer"></select></td> <tbody id="expense-tbody"></tbody>
</tr> </table>
<tr>
<td>Aufteilungsart:</td>
<td>
<select id="split-type" onchange="renderSplitInputs()">
<option value="equal">Gleichmäßig unter Ausgewählten</option>
<option value="exact">Exakte Beträge pro Person</option>
</select>
</td>
</tr>
<tr>
<td>Aufgeteilt zwischen:</td>
<td id="split-inputs"></td>
</tr>
</table>
<button onclick="addExpense()">Ausgabe speichern</button>
<div id="expense-error" style="color:red;"></div>
<hr> <hr />
<h2>3. Alle Ausgaben</h2> <h2>4. Salden (wer hat wie viel zu bekommen / zu zahlen)</h2>
<table id="expense-table" border="1" cellpadding="4"> <div id="balances"></div>
<thead>
<tr>
<th>Datum</th>
<th>Beschreibung</th>
<th>Betrag</th>
<th>Bezahlt von</th>
<th>Aufteilung</th>
<th></th>
</tr>
</thead>
<tbody id="expense-tbody"></tbody>
</table>
<hr> <hr />
<h2>4. Salden (wer hat wie viel zu bekommen / zu zahlen)</h2> <h2>5. Vereinfachte Rückzahlungen (wer zahlt wem)</h2>
<div id="balances"></div> <div id="settlements"></div>
<hr> <script>
// ---- Datenmodell (wird im Browser via localStorage gespeichert) ----
const STORAGE_KEY = "expense-splitter-data";
<h2>5. Vereinfachte Rückzahlungen (wer zahlt wem)</h2> let members = []; // ["Anna", "Ben", ...]
<div id="settlements"></div> let expenses = []; // {id, desc, amount, payer, shares: {name: betrag}}
let nextExpenseId = 1;
<script> function loadData() {
// ---- Datenmodell (nur im Speicher, kein localStorage) ---- try {
let members = []; // ["Anna", "Ben", ...] const raw = localStorage.getItem(STORAGE_KEY);
let expenses = []; // {id, desc, amount, payer, shares: {name: betrag}} if (!raw) return;
let nextExpenseId = 1; const data = JSON.parse(raw);
members = data.members || [];
expenses = data.expenses || [];
nextExpenseId = data.nextExpenseId || 1;
} catch (e) {
console.error("Konnte gespeicherte Daten nicht laden:", e);
}
}
// ---- Mitglieder verwalten ---- function saveData() {
function addMember() { try {
const input = document.getElementById('member-name'); localStorage.setItem(
const name = input.value.trim(); STORAGE_KEY,
if (!name) return; JSON.stringify({ members, expenses, nextExpenseId }),
if (members.includes(name)) { );
alert('Dieses Mitglied existiert bereits.'); } catch (e) {
return; console.error("Konnte Daten nicht speichern:", e);
} }
members.push(name); }
input.value = '';
renderMembers();
renderPayerSelect();
renderSplitInputs();
}
function removeMember(name) { function resetData() {
const usedInExpense = expenses.some(e => e.payer === name || Object.keys(e.shares).includes(name)); if (!confirm("Wirklich alle gespeicherten Daten löschen?"))
if (usedInExpense) { return;
alert('Dieses Mitglied wird bereits in einer Ausgabe verwendet und kann nicht entfernt werden.'); members = [];
return; expenses = [];
} nextExpenseId = 1;
members = members.filter(m => m !== name); localStorage.removeItem(STORAGE_KEY);
renderMembers(); renderMembers();
renderPayerSelect(); renderPayerSelect();
renderSplitInputs(); renderSplitInputs();
} renderExpenses();
renderBalances();
}
function renderMembers() { // ---- Mitglieder verwalten ----
const container = document.getElementById('member-list'); function addMember() {
container.innerHTML = ''; const input = document.getElementById("member-name");
if (members.length === 0) { const name = input.value.trim();
container.innerHTML = '<i>Noch keine Mitglieder hinzugefügt.</i>'; if (!name) return;
return; if (members.includes(name)) {
} alert("Dieses Mitglied existiert bereits.");
const ul = document.createElement('ul'); return;
members.forEach(name => { }
const li = document.createElement('li'); members.push(name);
li.textContent = name + ' '; input.value = "";
const btn = document.createElement('button'); saveData();
btn.textContent = 'Entfernen'; renderMembers();
btn.onclick = () => removeMember(name); renderPayerSelect();
li.appendChild(btn); renderSplitInputs();
ul.appendChild(li); }
});
container.appendChild(ul);
}
function renderPayerSelect() { function removeMember(name) {
const select = document.getElementById('expense-payer'); const usedInExpense = expenses.some(
select.innerHTML = ''; (e) =>
members.forEach(name => { e.payer === name ||
const opt = document.createElement('option'); Object.keys(e.shares).includes(name),
opt.value = name; );
opt.textContent = name; if (usedInExpense) {
select.appendChild(opt); alert(
}); "Dieses Mitglied wird bereits in einer Ausgabe verwendet und kann nicht entfernt werden.",
} );
return;
}
members = members.filter((m) => m !== name);
saveData();
renderMembers();
renderPayerSelect();
renderSplitInputs();
}
// ---- Aufteilungs-Eingaben ---- function renderMembers() {
function renderSplitInputs() { const container = document.getElementById("member-list");
const container = document.getElementById('split-inputs'); container.innerHTML = "";
const type = document.getElementById('split-type').value; if (members.length === 0) {
container.innerHTML = ''; container.innerHTML =
"<i>Noch keine Mitglieder hinzugefügt.</i>";
return;
}
const ul = document.createElement("ul");
members.forEach((name) => {
const li = document.createElement("li");
li.textContent = name + " ";
const btn = document.createElement("button");
btn.textContent = "Entfernen";
btn.onclick = () => removeMember(name);
li.appendChild(btn);
ul.appendChild(li);
});
container.appendChild(ul);
}
if (members.length === 0) { function renderPayerSelect() {
container.innerHTML = '<i>Bitte zuerst Mitglieder hinzufügen.</i>'; const select = document.getElementById("expense-payer");
return; select.innerHTML = "";
} members.forEach((name) => {
const opt = document.createElement("option");
opt.value = name;
opt.textContent = name;
select.appendChild(opt);
});
}
members.forEach(name => { // ---- Aufteilungs-Eingaben ----
const wrapper = document.createElement('span'); function renderSplitInputs() {
wrapper.style.marginRight = '10px'; const container = document.getElementById("split-inputs");
const type = document.getElementById("split-type").value;
container.innerHTML = "";
if (type === 'equal') { if (members.length === 0) {
const checkbox = document.createElement('input'); container.innerHTML =
checkbox.type = 'checkbox'; "<i>Bitte zuerst Mitglieder hinzufügen.</i>";
checkbox.checked = true; return;
checkbox.id = 'split-check-' + name; }
wrapper.appendChild(checkbox);
const label = document.createElement('label');
label.htmlFor = checkbox.id;
label.textContent = ' ' + name;
wrapper.appendChild(label);
} else {
const label = document.createElement('label');
label.textContent = name + ': ';
wrapper.appendChild(label);
const input = document.createElement('input');
input.type = 'number';
input.step = '0.01';
input.placeholder = '0.00';
input.id = 'split-exact-' + name;
wrapper.appendChild(input);
}
container.appendChild(wrapper);
container.appendChild(document.createElement('br'));
});
}
// ---- Ausgabe hinzufügen ---- members.forEach((name) => {
function addExpense() { const wrapper = document.createElement("span");
const errorDiv = document.getElementById('expense-error'); wrapper.style.marginRight = "10px";
errorDiv.textContent = '';
const desc = document.getElementById('expense-desc').value.trim(); if (type === "equal") {
const amount = parseFloat(document.getElementById('expense-amount').value); const checkbox = document.createElement("input");
const payer = document.getElementById('expense-payer').value; checkbox.type = "checkbox";
const type = document.getElementById('split-type').value; checkbox.checked = true;
checkbox.id = "split-check-" + name;
wrapper.appendChild(checkbox);
const label = document.createElement("label");
label.htmlFor = checkbox.id;
label.textContent = " " + name;
wrapper.appendChild(label);
} else {
const label = document.createElement("label");
label.textContent = name + ": ";
wrapper.appendChild(label);
const input = document.createElement("input");
input.type = "number";
input.step = "0.01";
input.placeholder = "0.00";
input.id = "split-exact-" + name;
wrapper.appendChild(input);
}
container.appendChild(wrapper);
container.appendChild(document.createElement("br"));
});
}
if (!desc) { errorDiv.textContent = 'Bitte eine Beschreibung eingeben.'; return; } // ---- Ausgabe hinzufügen ----
if (!amount || amount <= 0) { errorDiv.textContent = 'Bitte einen gültigen Betrag eingeben.'; return; } function addExpense() {
if (!payer) { errorDiv.textContent = 'Bitte auswählen, wer bezahlt hat.'; return; } const errorDiv = document.getElementById("expense-error");
if (members.length === 0) { errorDiv.textContent = 'Bitte zuerst Mitglieder hinzufügen.'; return; } errorDiv.textContent = "";
let shares = {}; const desc = document
.getElementById("expense-desc")
.value.trim();
const amount = parseFloat(
document.getElementById("expense-amount").value,
);
const payer = document.getElementById("expense-payer").value;
const type = document.getElementById("split-type").value;
if (type === 'equal') { if (!desc) {
const selected = members.filter(name => { errorDiv.textContent = "Bitte eine Beschreibung eingeben.";
const cb = document.getElementById('split-check-' + name); return;
return cb && cb.checked; }
}); if (!amount || amount <= 0) {
if (selected.length === 0) { errorDiv.textContent = 'Bitte mindestens eine Person für die Aufteilung auswählen.'; return; } errorDiv.textContent =
const perPerson = amount / selected.length; "Bitte einen gültigen Betrag eingeben.";
selected.forEach(name => { shares[name] = perPerson; }); return;
} else { }
let sum = 0; if (!payer) {
members.forEach(name => { errorDiv.textContent = "Bitte auswählen, wer bezahlt hat.";
const input = document.getElementById('split-exact-' + name); return;
const val = parseFloat(input.value); }
if (!isNaN(val) && val > 0) { if (members.length === 0) {
shares[name] = val; errorDiv.textContent =
sum += val; "Bitte zuerst Mitglieder hinzufügen.";
} return;
}); }
if (Object.keys(shares).length === 0) { errorDiv.textContent = 'Bitte mindestens einen Betrag eingeben.'; return; }
if (Math.abs(sum - amount) > 0.01) {
errorDiv.textContent = `Die Summe der Aufteilung (${sum.toFixed(2)}) entspricht nicht dem Gesamtbetrag (${amount.toFixed(2)}).`;
return;
}
}
expenses.push({ let shares = {};
id: nextExpenseId++,
date: new Date().toLocaleDateString('de-DE'),
desc: desc,
amount: amount,
payer: payer,
shares: shares
});
// Formular zurücksetzen if (type === "equal") {
document.getElementById('expense-desc').value = ''; const selected = members.filter((name) => {
document.getElementById('expense-amount').value = ''; const cb = document.getElementById(
renderSplitInputs(); "split-check-" + name,
);
return cb && cb.checked;
});
if (selected.length === 0) {
errorDiv.textContent =
"Bitte mindestens eine Person für die Aufteilung auswählen.";
return;
}
const perPerson = amount / selected.length;
selected.forEach((name) => {
shares[name] = perPerson;
});
} else {
let sum = 0;
members.forEach((name) => {
const input = document.getElementById(
"split-exact-" + name,
);
const val = parseFloat(input.value);
if (!isNaN(val) && val > 0) {
shares[name] = val;
sum += val;
}
});
if (Object.keys(shares).length === 0) {
errorDiv.textContent =
"Bitte mindestens einen Betrag eingeben.";
return;
}
if (Math.abs(sum - amount) > 0.01) {
errorDiv.textContent = `Die Summe der Aufteilung (${sum.toFixed(2)}) entspricht nicht dem Gesamtbetrag (${amount.toFixed(2)}).`;
return;
}
}
renderExpenses(); expenses.push({
renderBalances(); id: nextExpenseId++,
} date: new Date().toLocaleDateString("de-DE"),
desc: desc,
amount: amount,
payer: payer,
shares: shares,
});
function deleteExpense(id) { // Formular zurücksetzen
expenses = expenses.filter(e => e.id !== id); document.getElementById("expense-desc").value = "";
renderExpenses(); document.getElementById("expense-amount").value = "";
renderBalances(); renderSplitInputs();
}
// ---- Ausgaben anzeigen ---- saveData();
function renderExpenses() { renderExpenses();
const tbody = document.getElementById('expense-tbody'); renderBalances();
tbody.innerHTML = ''; }
expenses.forEach(e => {
const tr = document.createElement('tr');
const splitText = Object.entries(e.shares) function deleteExpense(id) {
.map(([name, amt]) => `${name}: ${amt.toFixed(2)}`) expenses = expenses.filter((e) => e.id !== id);
.join(', '); saveData();
renderExpenses();
renderBalances();
}
tr.innerHTML = ` // ---- Ausgaben anzeigen ----
function renderExpenses() {
const tbody = document.getElementById("expense-tbody");
tbody.innerHTML = "";
expenses.forEach((e) => {
const tr = document.createElement("tr");
const splitText = Object.entries(e.shares)
.map(([name, amt]) => `${name}: ${amt.toFixed(2)}`)
.join(", ");
tr.innerHTML = `
<td>${e.date}</td> <td>${e.date}</td>
<td>${e.desc}</td> <td>${e.desc}</td>
<td>${e.amount.toFixed(2)}</td> <td>${e.amount.toFixed(2)}</td>
@@ -266,109 +362,118 @@
<td>${splitText}</td> <td>${splitText}</td>
<td><button onclick="deleteExpense(${e.id})">Löschen</button></td> <td><button onclick="deleteExpense(${e.id})">Löschen</button></td>
`; `;
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
} }
// ---- Salden berechnen ---- // ---- Salden berechnen ----
function calculateBalances() { function calculateBalances() {
const balances = {}; const balances = {};
members.forEach(name => { balances[name] = 0; }); members.forEach((name) => {
balances[name] = 0;
});
expenses.forEach(e => { expenses.forEach((e) => {
// Zahler hat den vollen Betrag ausgelegt // Zahler hat den vollen Betrag ausgelegt
if (balances[e.payer] === undefined) balances[e.payer] = 0; if (balances[e.payer] === undefined) balances[e.payer] = 0;
balances[e.payer] += e.amount; balances[e.payer] += e.amount;
// Jeder, der einen Anteil hat, schuldet diesen Anteil // Jeder, der einen Anteil hat, schuldet diesen Anteil
Object.entries(e.shares).forEach(([name, amt]) => { Object.entries(e.shares).forEach(([name, amt]) => {
if (balances[name] === undefined) balances[name] = 0; if (balances[name] === undefined) balances[name] = 0;
balances[name] -= amt; balances[name] -= amt;
}); });
}); });
return balances; return balances;
} }
function renderBalances() { function renderBalances() {
const container = document.getElementById('balances'); const container = document.getElementById("balances");
const balances = calculateBalances(); const balances = calculateBalances();
container.innerHTML = ''; container.innerHTML = "";
if (members.length === 0) { if (members.length === 0) {
container.innerHTML = '<i>Keine Mitglieder vorhanden.</i>'; container.innerHTML = "<i>Keine Mitglieder vorhanden.</i>";
renderSettlements(balances); renderSettlements(balances);
return; return;
} }
const ul = document.createElement('ul'); const ul = document.createElement("ul");
members.forEach(name => { members.forEach((name) => {
const val = balances[name] || 0; const val = balances[name] || 0;
const li = document.createElement('li'); const li = document.createElement("li");
if (val > 0.005) { if (val > 0.005) {
li.textContent = `${name} bekommt ${val.toFixed(2)}`; li.textContent = `${name} bekommt ${val.toFixed(2)}`;
} else if (val < -0.005) { } else if (val < -0.005) {
li.textContent = `${name} schuldet ${Math.abs(val).toFixed(2)}`; li.textContent = `${name} schuldet ${Math.abs(val).toFixed(2)}`;
} else { } else {
li.textContent = `${name} ist ausgeglichen`; li.textContent = `${name} ist ausgeglichen`;
} }
ul.appendChild(li); ul.appendChild(li);
}); });
container.appendChild(ul); container.appendChild(ul);
renderSettlements(balances); renderSettlements(balances);
} }
// ---- Schulden vereinfachen (greedy Algorithmus) ---- // ---- Schulden vereinfachen (greedy Algorithmus) ----
function renderSettlements(balances) { function renderSettlements(balances) {
const container = document.getElementById('settlements'); const container = document.getElementById("settlements");
container.innerHTML = ''; container.innerHTML = "";
let debtors = []; // schulden Geld (negativer Saldo) let debtors = []; // schulden Geld (negativer Saldo)
let creditors = []; // bekommen Geld (positiver Saldo) let creditors = []; // bekommen Geld (positiver Saldo)
Object.entries(balances).forEach(([name, val]) => { Object.entries(balances).forEach(([name, val]) => {
if (val < -0.005) debtors.push({ name, amount: -val }); if (val < -0.005) debtors.push({ name, amount: -val });
else if (val > 0.005) creditors.push({ name, amount: val }); else if (val > 0.005) creditors.push({ name, amount: val });
}); });
const settlements = []; const settlements = [];
let i = 0, j = 0; let i = 0,
j = 0;
while (i < debtors.length && j < creditors.length) { while (i < debtors.length && j < creditors.length) {
const debtor = debtors[i]; const debtor = debtors[i];
const creditor = creditors[j]; const creditor = creditors[j];
const amount = Math.min(debtor.amount, creditor.amount); const amount = Math.min(debtor.amount, creditor.amount);
settlements.push({ from: debtor.name, to: creditor.name, amount }); settlements.push({
from: debtor.name,
to: creditor.name,
amount,
});
debtor.amount -= amount; debtor.amount -= amount;
creditor.amount -= amount; creditor.amount -= amount;
if (debtor.amount < 0.005) i++; if (debtor.amount < 0.005) i++;
if (creditor.amount < 0.005) j++; if (creditor.amount < 0.005) j++;
} }
if (settlements.length === 0) { if (settlements.length === 0) {
container.innerHTML = '<i>Keine offenen Zahlungen. Alles ausgeglichen!</i>'; container.innerHTML =
return; "<i>Keine offenen Zahlungen. Alles ausgeglichen!</i>";
} return;
}
const ul = document.createElement('ul'); const ul = document.createElement("ul");
settlements.forEach(s => { settlements.forEach((s) => {
const li = document.createElement('li'); const li = document.createElement("li");
li.textContent = `${s.from} zahlt ${s.amount.toFixed(2)} an ${s.to}`; li.textContent = `${s.from} zahlt ${s.amount.toFixed(2)} an ${s.to}`;
ul.appendChild(li); ul.appendChild(li);
}); });
container.appendChild(ul); container.appendChild(ul);
} }
// ---- Initiales Rendering ---- // ---- Initiales Laden und Rendering ----
renderMembers(); loadData();
renderPayerSelect(); renderMembers();
renderSplitInputs(); renderPayerSelect();
renderExpenses(); renderSplitInputs();
renderBalances(); renderExpenses();
</script> renderBalances();
</body> </script>
</body>
</html> </html>