300 lines
4.3 KiB
HTML
300 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="de">
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>
|
|
ING Finanzen
|
|
</title>
|
|
|
|
<link rel="stylesheet"
|
|
href="{{ url_for('static', filename='style.css') }}">
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="header">
|
|
|
|
|
|
<div class="header-left">
|
|
|
|
<img class="logo-ing"
|
|
src="{{ url_for('static', filename='logo_ing.png') }}">
|
|
|
|
<div>
|
|
|
|
<div class="title">
|
|
ING Finanzen
|
|
</div>
|
|
|
|
<div class="subtitle">
|
|
Kontobewegungen und Auswertungen
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<img class="logo-hintergasse"
|
|
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
|
|
|
|
|
|
</div>
|
|
|
|
<div class="navbar">
|
|
|
|
<a href="/">Dashboard</a>
|
|
<a href="/categories">Kategorien</a>
|
|
<a href="/maintenance">Wartung</a>
|
|
<a href="/log">Log</a>
|
|
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div class="cards">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
<h2>
|
|
KW{{ week }}
|
|
</h2>
|
|
<p class="balance-label">
|
|
Kontostand
|
|
</p>
|
|
|
|
<p class="balance-value balance-{{ balance_color }}">
|
|
|
|
{% if balance is not none %}
|
|
|
|
{{ "%.2f"|format(balance) }} €
|
|
|
|
{% else %}
|
|
|
|
n/v
|
|
|
|
{% endif %}
|
|
|
|
</p>
|
|
<p>
|
|
Einnahmen:
|
|
<strong>
|
|
{{ "%.2f"|format(total_income) }} €
|
|
</strong>
|
|
</p>
|
|
|
|
<p>
|
|
Ausgaben:
|
|
<strong>
|
|
{{ "%.2f"|format(total_expenses) }} €
|
|
</strong>
|
|
</p>
|
|
|
|
<p>
|
|
Saldo:
|
|
<strong>
|
|
{{ "%.2f"|format(total_saldo) }} €
|
|
</strong>
|
|
</p>
|
|
|
|
</div>
|
|
<div class="card">
|
|
|
|
<h2>
|
|
Kontostand letzte 30 Tage
|
|
</h2>
|
|
|
|
<canvas id="balanceChart"></canvas>
|
|
|
|
</div>
|
|
<div class="card">
|
|
|
|
<h2>
|
|
Transaktionen in dieser Woche
|
|
</h2>
|
|
|
|
{% if transactions %}
|
|
<div class="transaction-container">
|
|
<table class="transaction-table">
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Datum</th>
|
|
<th>Name</th>
|
|
<th>Kategorie</th>
|
|
<th>Betrag</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% for t in transactions|reverse %}
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
{{ t.date }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ t.applicant_name }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ t.category }}
|
|
</td>
|
|
|
|
<td class="{% if t.amount >= 0 %}amount-positive{% else %}amount-negative{% endif %}">
|
|
{{ "%.2f"|format(t.amount) }} €
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
{% else %}
|
|
|
|
<p>
|
|
Keine Transaktionen vorhanden.
|
|
</p>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
<div class="card">
|
|
|
|
<h2>
|
|
Unbekannte Buchungen
|
|
</h2>
|
|
|
|
{% if unknown_transactions %}
|
|
|
|
<p>
|
|
{{ unknown_transactions|length }}
|
|
Buchungen offen
|
|
</p>
|
|
|
|
<table class="transaction-table">
|
|
|
|
{% for t in unknown_transactions %}
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
{{ t.date }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ t.applicant_name }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ "%.2f"|format(t.amount) }} €
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
{% endfor %}
|
|
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<a href="/categories">
|
|
|
|
<button type="button">
|
|
Kategorien öffnen
|
|
</button>
|
|
|
|
</a>
|
|
|
|
{% else %}
|
|
|
|
<p>
|
|
Keine unbekannten Buchungen.
|
|
</p>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
|
|
|
|
Hintergasse © 2026
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
const history = {{ balance_history|tojson }};
|
|
|
|
const labels = history.map(item => item.date);
|
|
const values = history.map(item => item.value);
|
|
|
|
new Chart(
|
|
document.getElementById("balanceChart"),
|
|
{
|
|
type: "line",
|
|
|
|
data: {
|
|
labels: labels,
|
|
|
|
datasets: [{
|
|
label: "Kontostand (€)",
|
|
data: values,
|
|
tension: 0.3
|
|
}]
|
|
},
|
|
|
|
options: {
|
|
responsive: true,
|
|
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|