fleaz/schmeckels
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make more pretty

Browse source
This commit is contained in:
Felix Breidenstein 2021-11-29 23:43:48 +01:00
parent 0c61ee7e71
commit 10d6377b66
3 changed files with 112 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
schmeckels/serve.py
View file

@ -24,7 +24,7 @@ def index():
tags = session.query(Tag).filter_by(reporting=True).all()
# Get start and end of timerange
months = 12
months = 3
today = datetime.now()
start_month = today - relativedelta(months=months)
start_date = date(start_month.year, start_month.month, 1)

26
schmeckels/templates/base.html
View file

@ -8,6 +8,9 @@
<title>Schmeckels</title>
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
<style>
{% block style %} {% endblock %}
</style>
</head>
<body class="bg-grey-100 font-sans leading-normal tracking-normal">
@ -29,23 +32,26 @@
<a class="text-blue-500 hover:text-blue-800" href="/upload">Upload</a>
</li>
</ul>
</div>
</div>
<div class="pt-2 container mx-auto">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-2 py-2 mb-5" role="alert">
<p class="font-bold">{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% if messages %}
{% for message in messages %}
<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-2 py-2 mb-5" role="alert">
<p class="font-bold">{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block main %} {% endblock %}
{% block main %} {% endblock %}
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
{% block script %} {% endblock %}
<script>
{% block script %} {% endblock %}
</script>
</body>
</html>

130
schmeckels/templates/transactions.html
View file

@ -1,43 +1,103 @@
{% extends "base.html" %}
{% block style %}
#navbar {
overflow: hidden;
background-color: lightcyan;
padding: 10px;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position
at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
{% endblock %}
{% block main %}
<form action="/bulksort" method="POST">
<select name="tag">
{% for tag in tags %}
<option value="{{ tag.id }}">{{ tag.name }}</option>
{% endfor %}
</select>
<input type="submit">
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2"></th>
<th class="px-4 py-2">Date</th>
<th class="px-4 py-2">Sender/Empfänger</th>
<th class="px-4 py-2">Verwendungszweck</th>
<th class="px-4 py-2 text-right">Betrag</th>
<th class="px-4 py-2">Kategorie</th>
</tr>
</thead>
<tbody>
{% for t in transactions %}
<tr>
<td class="border px-4 py-2"><input type="checkbox" name="transaction" value="{{ t.id }}"></td>
<td class="border px-4 py-2">{{ t.get_date("de") }}</td>
<td class="border px-4 py-2">{{ t.name }}<br/> <span class="text-gray-500">{{t.iban}}</span></td>
<td class="border px-4 py-2">{{ t.description }}</td>
<td class="border px-4 py-2 text-right {{ 'text-green-500' if t.is_positive() else 'text-red-500' }}">{{ t.pretty_amount() }} €</td>
<td class="border px-4 py-2">
{% for tag in t.tags %}
<span style="background-color: {{ tag.color() }};" class="text-white rounded p-1" >{{ tag.name }}</span>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<form action="/bulksort" method="POST" id="content">
<div id="navbar">
<select name="tag">
{% for tag in tags %}
<option value="{{ tag.id }}">{{ tag.name }}</option>
{% endfor %}
</select>
<input type="submit">
</div>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2"></th>
<th class="px-4 py-2">Date</th>
<th class="px-4 py-2">Sender/Empfänger</th>
<th class="px-4 py-2">Verwendungszweck</th>
<th class="px-4 py-2 text-right">Betrag</th>
<th class="px-4 py-2">Kategorie</th>
</tr>
</thead>
<tbody>
{% for t in transactions %}
<tr>
<td class="border px-4 py-2"><input type="checkbox" name="transaction" value="{{ t.id }}"></td>
<td class="border px-4 py-2">{{ t.get_date("de") }}</td>
<td class="border px-4 py-2">{{ t.name }}<br /> <span class="text-gray-500">{{t.iban}}</span></td>
<td class="border px-4 py-2">{{ t.description }}</td>
<td class="border px-4 py-2 text-right {{ 'text-green-500' if t.is_positive() else 'text-red-500' }}">{{
t.pretty_amount() }} €</td>
<td class="border px-4 py-2">
{% for tag in t.tags %}
<span style="background-color: {{ tag.color() }};" class="text-white rounded p-1">{{ tag.name }}</span>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
{% endblock %}
{% block script %}
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
{% endblock %}