113 lines
3.7 KiB
HTML
113 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ cfg.title }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="hero card">
|
|
<div>
|
|
<p class="eyebrow">Månadsavi</p>
|
|
<h1>{{ cfg.title }}</h1>
|
|
<p class="lead">
|
|
Mata in månadens nettoinkomst. Sidan räknar ut minsta belopp av
|
|
beräknad kostnadsandel och {{ (cfg.payment.income_ratio * 100) | round | int }} % av nettoinkomsten.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Underlag från config.json</h2>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Post</th>
|
|
<th>Belopp</th>
|
|
<th>Period</th>
|
|
<th>Andel</th>
|
|
<th>Månadskostnad</th>
|
|
<th>Din andel/mån</th>
|
|
<th>Kommentar</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
<tr>
|
|
<td>{{ row.post }}</td>
|
|
<td class="num">{{ money(row.amount) }} {{ cfg.currency }}</td>
|
|
<td>{{ "år" if row.period == "year" else "månad" }}</td>
|
|
<td class="num">{{ (row.ratio * 100) | round(1) }} %</td>
|
|
<td class="num">{{ money(row.monthly_amount) }} {{ cfg.currency }}</td>
|
|
<td class="num strong">{{ money(row.monthly_share) }} {{ cfg.currency }}</td>
|
|
<td>{{ row.comment or "" }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="5">Beräknad kostnadsandel per månad</td>
|
|
<td class="num strong">{{ money(total_monthly_share) }} {{ cfg.currency }}</td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Beräkna månadens Swish</h2>
|
|
<form method="get" class="form">
|
|
<label for="nettoinkomst">Månadens nettoinkomst</label>
|
|
<div class="input-row">
|
|
<input
|
|
id="nettoinkomst"
|
|
name="nettoinkomst"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
placeholder="Ex. 12000"
|
|
value="{{ calculation.nettoinkomst | int if calculation else '' }}"
|
|
required>
|
|
<button type="submit">Skapa QR-kod</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if calculation %}
|
|
<div class="result">
|
|
<div>
|
|
<p class="label">Beräknad kostnadsandel</p>
|
|
<p class="big">{{ money(total_monthly_share) }} {{ cfg.currency }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="label">Inkomsttak</p>
|
|
<p class="big">{{ money(calculation.income_cap) }} {{ cfg.currency }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="label">Att betala</p>
|
|
<p class="big accent">{{ money(calculation.amount) }} {{ cfg.currency }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qr-block">
|
|
<img src="{{ calculation.qr }}" alt="Swish QR-kod">
|
|
<div>
|
|
<h3>Swish</h3>
|
|
<p><strong>Mottagare:</strong> {{ cfg.swish.payee }}</p>
|
|
<p><strong>Meddelande:</strong> {{ calculation.message }}</p>
|
|
<p><strong>Belopp:</strong> {{ money(calculation.amount) }} {{ cfg.currency }}</p>
|
|
<details>
|
|
<summary>Visa QR-innehåll</summary>
|
|
<code>{{ calculation.payload }}</code>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|