mirror of
https://github.com/Kugelschieber/marvinblum.git
synced 2026-09-13 19:11:55 +00:00
Compare commits
2
Commits
078fbd70aa
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
 marvin
|
21f39d103b | ||
|
marvin
|
b20f42161e |
@@ -0,0 +1,479 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Expense Splitter</title>
|
||||
<link rel="stylesheet" type="text/css" href="/static/web/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<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 />
|
||||
|
||||
<h2>2. Neue Ausgabe hinzufügen</h2>
|
||||
<table id="expense-form-table" border="1" cellpadding="4">
|
||||
<tr>
|
||||
<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 />
|
||||
|
||||
<h2>3. Alle Ausgaben</h2>
|
||||
<table id="expense-table" border="1" cellpadding="4">
|
||||
<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 />
|
||||
|
||||
<h2>4. Salden (wer hat wie viel zu bekommen / zu zahlen)</h2>
|
||||
<div id="balances"></div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>5. Vereinfachte Rückzahlungen (wer zahlt wem)</h2>
|
||||
<div id="settlements"></div>
|
||||
|
||||
<script>
|
||||
// ---- Datenmodell (wird im Browser via localStorage gespeichert) ----
|
||||
const STORAGE_KEY = "expense-splitter-data";
|
||||
|
||||
let members = []; // ["Anna", "Ben", ...]
|
||||
let expenses = []; // {id, desc, amount, payer, shares: {name: betrag}}
|
||||
let nextExpenseId = 1;
|
||||
|
||||
function loadData() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function saveData() {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify({ members, expenses, nextExpenseId }),
|
||||
);
|
||||
} catch (e) {
|
||||
console.error("Konnte Daten nicht speichern:", e);
|
||||
}
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
if (!confirm("Wirklich alle gespeicherten Daten löschen?"))
|
||||
return;
|
||||
members = [];
|
||||
expenses = [];
|
||||
nextExpenseId = 1;
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
renderMembers();
|
||||
renderPayerSelect();
|
||||
renderSplitInputs();
|
||||
renderExpenses();
|
||||
renderBalances();
|
||||
}
|
||||
|
||||
// ---- Mitglieder verwalten ----
|
||||
function addMember() {
|
||||
const input = document.getElementById("member-name");
|
||||
const name = input.value.trim();
|
||||
if (!name) return;
|
||||
if (members.includes(name)) {
|
||||
alert("Dieses Mitglied existiert bereits.");
|
||||
return;
|
||||
}
|
||||
members.push(name);
|
||||
input.value = "";
|
||||
saveData();
|
||||
renderMembers();
|
||||
renderPayerSelect();
|
||||
renderSplitInputs();
|
||||
}
|
||||
|
||||
function removeMember(name) {
|
||||
const usedInExpense = expenses.some(
|
||||
(e) =>
|
||||
e.payer === name ||
|
||||
Object.keys(e.shares).includes(name),
|
||||
);
|
||||
if (usedInExpense) {
|
||||
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();
|
||||
}
|
||||
|
||||
function renderMembers() {
|
||||
const container = document.getElementById("member-list");
|
||||
container.innerHTML = "";
|
||||
if (members.length === 0) {
|
||||
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);
|
||||
}
|
||||
|
||||
function renderPayerSelect() {
|
||||
const select = document.getElementById("expense-payer");
|
||||
select.innerHTML = "";
|
||||
members.forEach((name) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = name;
|
||||
opt.textContent = name;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Aufteilungs-Eingaben ----
|
||||
function renderSplitInputs() {
|
||||
const container = document.getElementById("split-inputs");
|
||||
const type = document.getElementById("split-type").value;
|
||||
container.innerHTML = "";
|
||||
|
||||
if (members.length === 0) {
|
||||
container.innerHTML =
|
||||
"<i>Bitte zuerst Mitglieder hinzufügen.</i>";
|
||||
return;
|
||||
}
|
||||
|
||||
members.forEach((name) => {
|
||||
const wrapper = document.createElement("span");
|
||||
wrapper.style.marginRight = "10px";
|
||||
|
||||
if (type === "equal") {
|
||||
const checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
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"));
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Ausgabe hinzufügen ----
|
||||
function addExpense() {
|
||||
const errorDiv = document.getElementById("expense-error");
|
||||
errorDiv.textContent = "";
|
||||
|
||||
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 (!desc) {
|
||||
errorDiv.textContent = "Bitte eine Beschreibung eingeben.";
|
||||
return;
|
||||
}
|
||||
if (!amount || amount <= 0) {
|
||||
errorDiv.textContent =
|
||||
"Bitte einen gültigen Betrag eingeben.";
|
||||
return;
|
||||
}
|
||||
if (!payer) {
|
||||
errorDiv.textContent = "Bitte auswählen, wer bezahlt hat.";
|
||||
return;
|
||||
}
|
||||
if (members.length === 0) {
|
||||
errorDiv.textContent =
|
||||
"Bitte zuerst Mitglieder hinzufügen.";
|
||||
return;
|
||||
}
|
||||
|
||||
let shares = {};
|
||||
|
||||
if (type === "equal") {
|
||||
const selected = members.filter((name) => {
|
||||
const cb = document.getElementById(
|
||||
"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;
|
||||
}
|
||||
}
|
||||
|
||||
expenses.push({
|
||||
id: nextExpenseId++,
|
||||
date: new Date().toLocaleDateString("de-DE"),
|
||||
desc: desc,
|
||||
amount: amount,
|
||||
payer: payer,
|
||||
shares: shares,
|
||||
});
|
||||
|
||||
// Formular zurücksetzen
|
||||
document.getElementById("expense-desc").value = "";
|
||||
document.getElementById("expense-amount").value = "";
|
||||
renderSplitInputs();
|
||||
|
||||
saveData();
|
||||
renderExpenses();
|
||||
renderBalances();
|
||||
}
|
||||
|
||||
function deleteExpense(id) {
|
||||
expenses = expenses.filter((e) => e.id !== id);
|
||||
saveData();
|
||||
renderExpenses();
|
||||
renderBalances();
|
||||
}
|
||||
|
||||
// ---- 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.desc}</td>
|
||||
<td>${e.amount.toFixed(2)}</td>
|
||||
<td>${e.payer}</td>
|
||||
<td>${splitText}</td>
|
||||
<td><button onclick="deleteExpense(${e.id})">Löschen</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Salden berechnen ----
|
||||
function calculateBalances() {
|
||||
const balances = {};
|
||||
members.forEach((name) => {
|
||||
balances[name] = 0;
|
||||
});
|
||||
|
||||
expenses.forEach((e) => {
|
||||
// Zahler hat den vollen Betrag ausgelegt
|
||||
if (balances[e.payer] === undefined) balances[e.payer] = 0;
|
||||
balances[e.payer] += e.amount;
|
||||
|
||||
// Jeder, der einen Anteil hat, schuldet diesen Anteil
|
||||
Object.entries(e.shares).forEach(([name, amt]) => {
|
||||
if (balances[name] === undefined) balances[name] = 0;
|
||||
balances[name] -= amt;
|
||||
});
|
||||
});
|
||||
|
||||
return balances;
|
||||
}
|
||||
|
||||
function renderBalances() {
|
||||
const container = document.getElementById("balances");
|
||||
const balances = calculateBalances();
|
||||
container.innerHTML = "";
|
||||
|
||||
if (members.length === 0) {
|
||||
container.innerHTML = "<i>Keine Mitglieder vorhanden.</i>";
|
||||
renderSettlements(balances);
|
||||
return;
|
||||
}
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
members.forEach((name) => {
|
||||
const val = balances[name] || 0;
|
||||
const li = document.createElement("li");
|
||||
if (val > 0.005) {
|
||||
li.textContent = `${name} bekommt ${val.toFixed(2)}`;
|
||||
} else if (val < -0.005) {
|
||||
li.textContent = `${name} schuldet ${Math.abs(val).toFixed(2)}`;
|
||||
} else {
|
||||
li.textContent = `${name} ist ausgeglichen`;
|
||||
}
|
||||
ul.appendChild(li);
|
||||
});
|
||||
container.appendChild(ul);
|
||||
|
||||
renderSettlements(balances);
|
||||
}
|
||||
|
||||
// ---- Schulden vereinfachen (greedy Algorithmus) ----
|
||||
function renderSettlements(balances) {
|
||||
const container = document.getElementById("settlements");
|
||||
container.innerHTML = "";
|
||||
|
||||
let debtors = []; // schulden Geld (negativer Saldo)
|
||||
let creditors = []; // bekommen Geld (positiver Saldo)
|
||||
|
||||
Object.entries(balances).forEach(([name, val]) => {
|
||||
if (val < -0.005) debtors.push({ name, amount: -val });
|
||||
else if (val > 0.005) creditors.push({ name, amount: val });
|
||||
});
|
||||
|
||||
const settlements = [];
|
||||
let i = 0,
|
||||
j = 0;
|
||||
|
||||
while (i < debtors.length && j < creditors.length) {
|
||||
const debtor = debtors[i];
|
||||
const creditor = creditors[j];
|
||||
const amount = Math.min(debtor.amount, creditor.amount);
|
||||
|
||||
settlements.push({
|
||||
from: debtor.name,
|
||||
to: creditor.name,
|
||||
amount,
|
||||
});
|
||||
|
||||
debtor.amount -= amount;
|
||||
creditor.amount -= amount;
|
||||
|
||||
if (debtor.amount < 0.005) i++;
|
||||
if (creditor.amount < 0.005) j++;
|
||||
}
|
||||
|
||||
if (settlements.length === 0) {
|
||||
container.innerHTML =
|
||||
"<i>Keine offenen Zahlungen. Alles ausgeglichen!</i>";
|
||||
return;
|
||||
}
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
settlements.forEach((s) => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = `${s.from} zahlt ${s.amount.toFixed(2)} an ${s.to}`;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
container.appendChild(ul);
|
||||
}
|
||||
|
||||
// ---- Initiales Laden und Rendering ----
|
||||
loadData();
|
||||
renderMembers();
|
||||
renderPayerSelect();
|
||||
renderSplitInputs();
|
||||
renderExpenses();
|
||||
renderBalances();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user