use base template for main page
This commit is contained in:
@@ -6,7 +6,7 @@ from financeplanner.utils import format_price
|
||||
|
||||
|
||||
class AdminSite(admin.AdminSite):
|
||||
index_title = "FloPlanner"
|
||||
index_title = "FinancePlanner"
|
||||
site_title = "Admin Panel"
|
||||
site_header = "Admin Panel"
|
||||
site_url = reverse_lazy("finance:index")
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>FloPlanner</h1>
|
||||
<h1>📊 FinancePlanner 💰</h1>
|
||||
|
||||
<p>
|
||||
{% block navi %}{% endblock %}
|
||||
|
||||
@@ -1,209 +1,198 @@
|
||||
{% load static %}
|
||||
{% extends "financeplanner/base.html" %}
|
||||
|
||||
{% load custom_tags %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<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>📊 FinancePlanner</h1>
|
||||
|
||||
<p>
|
||||
{% block navi %}
|
||||
<a href="{% url 'admin:index' %}" class="mini-link">Admin Panel</a>
|
||||
-
|
||||
<a href="{% url 'logout' %}" class="mini-link">Logout</a>
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
<div class="main-container flex-col-centering">
|
||||
{% if daily_stats %}
|
||||
<div id="date-panel">-</div>
|
||||
<div id="graph">
|
||||
{% for stat in daily_stats %}
|
||||
{% if stat.percentage is None %}
|
||||
<div class="graph-bar weak grey"
|
||||
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
|
||||
onmouseleave="clearGraphBarDate()">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="graph-bar {{ stat.opacity_class }} {{ stat.color_class }}"
|
||||
style="height: {{ stat.percentage }}%"
|
||||
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
|
||||
onmouseleave="clearGraphBarDate()">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No enough data from {{ start|date:"d.m.y" }} til {{ end|date:"d.m.y" }} to show a graph.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% block content %}
|
||||
<div class="main-container flex-col-centering">
|
||||
{% if daily_stats %}
|
||||
<div id="date-panel">-</div>
|
||||
<div id="graph">
|
||||
{% for stat in daily_stats %}
|
||||
{% if stat.percentage is None %}
|
||||
<div class="graph-bar weak grey"
|
||||
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
|
||||
onmouseleave="clearGraphBarDate()">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="graph-bar {{ stat.opacity_class }} {{ stat.color_class }}"
|
||||
style="height: {{ stat.percentage }}%"
|
||||
onmouseover="showGraphBarDate('{{ stat.date|date:"d.m.y" }}')"
|
||||
onmouseleave="clearGraphBarDate()">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No enough data from {{ start|date:"d.m.y" }} til {{ end|date:"d.m.y" }} to show a graph.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<h2>Analysis</h2>
|
||||
<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 %}
|
||||
<div class="main-container">
|
||||
<h2>Analysis</h2>
|
||||
<p>current average amounts per month:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>date</td>
|
||||
<td>amount</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for balance in balances %}
|
||||
<tr>
|
||||
<td>{{ balance.date|date:"d.m.y" }}</td>
|
||||
<td>{{ balance.amount|euro }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<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>
|
||||
{% else %}
|
||||
<p>-</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<h2>Relevant Stored Transactions</h2>
|
||||
{% if transactions %}
|
||||
<p>average irregular expenses based on the last half-a-year:</p>
|
||||
<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>
|
||||
{% 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 %}
|
||||
<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>
|
||||
{% else %}
|
||||
<p>-</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<h2>Calculated Actual Transactions</h2>
|
||||
{% if actual_transactions %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>date</td>
|
||||
<td>subject</td>
|
||||
<td>amount</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for trans in actual_transactions %}
|
||||
<p>monthly result after irregular expenses: {{ avg_monthly_result_complete|euro }}</p>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<h2>Relevant Balances</h2>
|
||||
{% if balances %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ trans.date|date:"d.m.y" }}</td>
|
||||
<td>{{ trans.subject }}</td>
|
||||
<td>{{ trans.amount|euro }}</td>
|
||||
<td>date</td>
|
||||
<td>amount</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p>-</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for balance in balances %}
|
||||
<tr>
|
||||
<td>{{ balance.date|date:"d.m.y" }}</td>
|
||||
<td>{{ balance.amount|euro }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p>-</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const graph = document.getElementById('graph');
|
||||
const datePanel = document.getElementById('date-panel');
|
||||
let scrolling = false;
|
||||
let initX;
|
||||
let initScrollLeft;
|
||||
<div class="main-container">
|
||||
<h2>Relevant Stored Transactions</h2>
|
||||
{% if transactions %}
|
||||
<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>
|
||||
{% 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) {
|
||||
scrolling = true;
|
||||
graph.classList.add('scrolling');
|
||||
initX = event.pageX - graph.offsetLeft;
|
||||
initScrollLeft = graph.scrollLeft;
|
||||
}
|
||||
<div class="main-container">
|
||||
<h2>Calculated Actual Transactions</h2>
|
||||
{% if actual_transactions %}
|
||||
<table>
|
||||
<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() {
|
||||
scrolling = false;
|
||||
graph.classList.remove('scrolling');
|
||||
}
|
||||
<script type="text/javascript">
|
||||
const graph = document.getElementById('graph');
|
||||
const datePanel = document.getElementById('date-panel');
|
||||
let scrolling = false;
|
||||
let initX;
|
||||
let initScrollLeft;
|
||||
|
||||
function doDragScroll(event) {
|
||||
if (scrolling) {
|
||||
event.preventDefault();
|
||||
const newX = event.pageX - graph.offsetLeft;
|
||||
const diff = (newX - initX);
|
||||
graph.scrollLeft = initScrollLeft - diff;
|
||||
function startDragScroll(event) {
|
||||
scrolling = true;
|
||||
graph.classList.add('scrolling');
|
||||
initX = event.pageX - graph.offsetLeft;
|
||||
initScrollLeft = graph.scrollLeft;
|
||||
}
|
||||
}
|
||||
|
||||
function showGraphBarDate(dateStr) {
|
||||
datePanel.innerText = dateStr;
|
||||
}
|
||||
function stopDragScroll() {
|
||||
scrolling = false;
|
||||
graph.classList.remove('scrolling');
|
||||
}
|
||||
|
||||
function clearGraphBarDate() {
|
||||
datePanel.innerText = '-';
|
||||
}
|
||||
function doDragScroll(event) {
|
||||
if (scrolling) {
|
||||
event.preventDefault();
|
||||
const newX = event.pageX - graph.offsetLeft;
|
||||
const diff = (newX - initX);
|
||||
graph.scrollLeft = initScrollLeft - diff;
|
||||
}
|
||||
}
|
||||
|
||||
graph.addEventListener('mousedown', (event) => startDragScroll(event));
|
||||
graph.addEventListener('mouseleave', () => stopDragScroll());
|
||||
graph.addEventListener('mouseup', () => stopDragScroll());
|
||||
graph.addEventListener('mousemove', (event) => doDragScroll(event));
|
||||
</script>
|
||||
function showGraphBarDate(dateStr) {
|
||||
datePanel.innerText = dateStr;
|
||||
}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
function clearGraphBarDate() {
|
||||
datePanel.innerText = '-';
|
||||
}
|
||||
|
||||
graph.addEventListener('mousedown', (event) => startDragScroll(event));
|
||||
graph.addEventListener('mouseleave', () => stopDragScroll());
|
||||
graph.addEventListener('mouseup', () => stopDragScroll());
|
||||
graph.addEventListener('mousemove', (event) => doDragScroll(event));
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user