flo/financeplanner
1
1
Fork 0
Code Releases Activity

use base template for main page

Browse Source
This commit is contained in:
Flo Ha
2020-03-05 11:06:09 +01:00
parent a0c543babf
commit 1675f5a545
3 changed files with 172 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
financeplanner/admin.py
View File

@@ -6,7 +6,7 @@ from financeplanner.utils import format_price
class AdminSite(admin.AdminSite): class AdminSite(admin.AdminSite):
index_title = "FloPlanner" index_title = "FinancePlanner"
site_title = "Admin Panel" site_title = "Admin Panel"
site_header = "Admin Panel" site_header = "Admin Panel"
site_url = reverse_lazy("finance:index") site_url = reverse_lazy("finance:index")

2
financeplanner/templates/financeplanner/base.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<h1>FloPlanner</h1> <h1>&#x1F4CA; FinancePlanner &#x1F4B0;</h1>
<p> <p>
{% block navi %}{% endblock %} {% block navi %}{% endblock %}

351
financeplanner/templates/financeplanner/index.html
View File

@@ -1,209 +1,198 @@
{% load static %} {% extends "financeplanner/base.html" %}
{% load custom_tags %} {% load custom_tags %}
<!DOCTYPE html> {% block navi %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>FinancePlanner</title>
<link rel="stylesheet" type="text/css" href="{% static 'financeplanner/style.css' %}">
</head>
<body>
<h1>&#x1F4CA; FinancePlanner</h1>
<p>
<a href="{% url 'admin:index' %}" class="mini-link">Admin Panel</a> <a href="{% url 'admin:index' %}" class="mini-link">Admin Panel</a>
- -
<a href="{% url 'logout' %}" class="mini-link">Logout</a> <a href="{% url 'logout' %}" class="mini-link">Logout</a>
</p> {% endblock %}
<div class="main-container flex-col-centering"> {% block content %}
{% if daily_stats %} <div class="main-container flex-col-centering">
<div id="date-panel">-</div> {% if daily_stats %}
<div id="graph"> <div id="date-panel">-</div>
{% for stat in daily_stats %} <div id="graph">
{% if stat.percentage is None %} {% for stat in daily_stats %}
<div class="graph-bar weak grey" {% if stat.percentage is None %}
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')" <div class="graph-bar weak grey"
onmouseleave="clearGraphBarDate()"> onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
</div> onmouseleave="clearGraphBarDate()">
{% else %} </div>
<div class="graph-bar {{ stat.opacity_class }} {{ stat.color_class }}" {% else %}
style="height: {{ stat.percentage }}%" <div class="graph-bar {{ stat.opacity_class }} {{ stat.color_class }}"
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')" style="height: {{ stat.percentage }}%"
onmouseleave="clearGraphBarDate()"> onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
</div> onmouseleave="clearGraphBarDate()">
{% endif %} </div>
{% endfor %} {% endif %}
</div> {% endfor %}
{% else %} </div>
<p>No enough data from {{ start|date:"d.m.y" }} til {{ end|date:"d.m.y" }} to show a graph.</p> {% else %}
{% endif %} <p>No enough data from {{ start|date:"d.m.y" }} til {{ end|date:"d.m.y" }} to show a graph.</p>
</div> {% endif %}
</div>
<div class="main-container"> <div class="main-container">
<h2>Analysis</h2> <h2>Analysis</h2>
<p>current average amounts per month:</p> <p>current average amounts per month:</p>
<table>
<tbody>
<tr>
<td>income</td>
<td>{{ avg_monthly_income|euro }}</td>
</tr>
<tr>
<td>expenses</td>
<td>{{ avg_monthly_expenses|euro }}</td>
</tr>
<tr>
<td>result</td>
<td>{{ avg_monthly_result|euro }}</td>
</tr>
</tbody>
</table>
<p>average irregular expenses based on the last half-a-year:</p>
<table>
<tbody>
<tr>
<td>monthly</td>
<td>{{ avg_monthly_irregular_expenses|euro }}</td>
</tr>
<tr>
<td>weekly</td>
<td>{{ avg_weekly_irregular_expenses|euro }}</td>
</tr>
<tr>
<td>daily</td>
<td>{{ avg_daily_irregular_expenses|euro }}</td>
</tr>
</tbody>
</table>
<p>monthly result after irregular expenses: {{ avg_monthly_result_complete|euro }}</p>
</div>
<div class="main-container">
<h2>Relevant Balances</h2>
{% if balances %}
<table> <table>
<thead>
<tr>
<td>date</td>
<td>amount</td>
</tr>
</thead>
<tbody> <tbody>
{% for balance in balances %} <tr>
<tr> <td>income</td>
<td>{{ balance.date|date:"d.m.y" }}</td> <td>{{ avg_monthly_income|euro }}</td>
<td>{{ balance.amount|euro }}</td> </tr>
</tr> <tr>
{% endfor %} <td>expenses</td>
<td>{{ avg_monthly_expenses|euro }}</td>
</tr>
<tr>
<td>result</td>
<td>{{ avg_monthly_result|euro }}</td>
</tr>
</tbody> </tbody>
</table> </table>
{% else %}
<p>-</p>
{% endif %}
</div>
<div class="main-container"> <p>average irregular expenses based on the last half-a-year:</p>
<h2>Relevant Stored Transactions</h2>
{% if transactions %}
<table> <table>
<thead>
<tr>
<td>subject</td>
<td>amount</td>
<td>booking date</td>
<td>recurring months</td>
<td>not recurring after</td>
</tr>
</thead>
<tbody> <tbody>
{% for transaction in transactions %} <tr>
<tr> <td>monthly</td>
<td>{{ transaction.subject }}</td> <td>{{ avg_monthly_irregular_expenses|euro }}</td>
<td>{{ transaction.amount|euro }}</td> </tr>
<td>{{ transaction.booking_date|date:"d.m.y" }}</td> <tr>
<td>{{ transaction.recurring_months }}</td> <td>weekly</td>
<td>{{ transaction.not_recurring_after|date:"d.m.y" }}</td> <td>{{ avg_weekly_irregular_expenses|euro }}</td>
</tr> </tr>
{% endfor %} <tr>
<td>daily</td>
<td>{{ avg_daily_irregular_expenses|euro }}</td>
</tr>
</tbody> </tbody>
</table> </table>
{% else %}
<p>-</p>
{% endif %}
</div>
<div class="main-container"> <p>monthly result after irregular expenses: {{ avg_monthly_result_complete|euro }}</p>
<h2>Calculated Actual Transactions</h2> </div>
{% if actual_transactions %}
<table> <div class="main-container">
<thead> <h2>Relevant Balances</h2>
<tr> {% if balances %}
<td>date</td> <table>
<td>subject</td> <thead>
<td>amount</td>
</tr>
</thead>
<tbody>
{% for trans in actual_transactions %}
<tr> <tr>
<td>{{ trans.date|date:"d.m.y" }}</td> <td>date</td>
<td>{{ trans.subject }}</td> <td>amount</td>
<td>{{ trans.amount|euro }}</td>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for balance in balances %}
{% else %} <tr>
<p>-</p> <td>{{ balance.date|date:"d.m.y" }}</td>
{% endif %} <td>{{ balance.amount|euro }}</td>
</div> </tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>-</p>
{% endif %}
</div>
<script type="text/javascript"> <div class="main-container">
const graph = document.getElementById('graph'); <h2>Relevant Stored Transactions</h2>
const datePanel = document.getElementById('date-panel'); {% if transactions %}
let scrolling = false; <table>
let initX; <thead>
let initScrollLeft; <tr>
<td>subject</td>
<td>amount</td>
<td>booking date</td>
<td>recurring months</td>
<td>not recurring after</td>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
<tr>
<td>{{ transaction.subject }}</td>
<td>{{ transaction.amount|euro }}</td>
<td>{{ transaction.booking_date|date:"d.m.y" }}</td>
<td>{{ transaction.recurring_months }}</td>
<td>{{ transaction.not_recurring_after|date:"d.m.y" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>-</p>
{% endif %}
</div>
function startDragScroll(event) { <div class="main-container">
scrolling = true; <h2>Calculated Actual Transactions</h2>
graph.classList.add('scrolling'); {% if actual_transactions %}
initX = event.pageX - graph.offsetLeft; <table>
initScrollLeft = graph.scrollLeft; <thead>
} <tr>
<td>date</td>
<td>subject</td>
<td>amount</td>
</tr>
</thead>
<tbody>
{% for trans in actual_transactions %}
<tr>
<td>{{ trans.date|date:"d.m.y" }}</td>
<td>{{ trans.subject }}</td>
<td>{{ trans.amount|euro }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>-</p>
{% endif %}
</div>
function stopDragScroll() { <script type="text/javascript">
scrolling = false; const graph = document.getElementById('graph');
graph.classList.remove('scrolling'); const datePanel = document.getElementById('date-panel');
} let scrolling = false;
let initX;
let initScrollLeft;
function doDragScroll(event) { function startDragScroll(event) {
if (scrolling) { scrolling = true;
event.preventDefault(); graph.classList.add('scrolling');
const newX = event.pageX - graph.offsetLeft; initX = event.pageX - graph.offsetLeft;
const diff = (newX - initX); initScrollLeft = graph.scrollLeft;
graph.scrollLeft = initScrollLeft - diff;
} }
}
function showGraphBarDate(dateStr) { function stopDragScroll() {
datePanel.innerText = dateStr; scrolling = false;
} graph.classList.remove('scrolling');
}
function clearGraphBarDate() { function doDragScroll(event) {
datePanel.innerText = '-'; if (scrolling) {
} event.preventDefault();
const newX = event.pageX - graph.offsetLeft;
const diff = (newX - initX);
graph.scrollLeft = initScrollLeft - diff;
}
}
graph.addEventListener('mousedown', (event) => startDragScroll(event)); function showGraphBarDate(dateStr) {
graph.addEventListener('mouseleave', () => stopDragScroll()); datePanel.innerText = dateStr;
graph.addEventListener('mouseup', () => stopDragScroll()); }
graph.addEventListener('mousemove', (event) => doDragScroll(event));
</script>
</body> function clearGraphBarDate() {
</html> datePanel.innerText = '-';
}
graph.addEventListener('mousedown', (event) => startDragScroll(event));
graph.addEventListener('mouseleave', () => stopDragScroll());
graph.addEventListener('mouseup', () => stopDragScroll());
graph.addEventListener('mousemove', (event) => doDragScroll(event));
</script>
{% endblock %}