From 1675f5a5454e5d6747053c4a56fac98399d61a1d Mon Sep 17 00:00:00 2001
From: Florian Hartmann <flo.ha@posteo.net>
Date: Thu, 5 Mar 2020 11:06:09 +0100
Subject: [PATCH] use base template for main page

---
 financeplanner/admin.py                       |   2 +-
 .../templates/financeplanner/base.html        |   2 +-
 .../templates/financeplanner/index.html       | 351 +++++++++---------
 3 files changed, 172 insertions(+), 183 deletions(-)
diff --git a/financeplanner/admin.py b/financeplanner/admin.py
index fa5972a..93a2a41 100644
--- a/financeplanner/admin.py
+++ b/financeplanner/admin.py
@@ -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")
diff --git a/financeplanner/templates/financeplanner/base.html b/financeplanner/templates/financeplanner/base.html
index 2762d2a..229f872 100644
--- a/financeplanner/templates/financeplanner/base.html
+++ b/financeplanner/templates/financeplanner/base.html
@@ -9,7 +9,7 @@
 </head>
 <body>
 
-<h1>FloPlanner</h1>
+<h1>&#x1F4CA; FinancePlanner &#x1F4B0;</h1>
 
 <p>
     {% block navi %}{% endblock %}
diff --git a/financeplanner/templates/financeplanner/index.html b/financeplanner/templates/financeplanner/index.html
index 63e5a78..a5c3403 100644
--- a/financeplanner/templates/financeplanner/index.html
+++ b/financeplanner/templates/financeplanner/index.html
@@ -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>&#x1F4CA; 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 %}

income	{{ avg_monthly_income\|euro }}
expenses	{{ avg_monthly_expenses\|euro }}
result	{{ avg_monthly_result\|euro }}
monthly	{{ avg_monthly_irregular_expenses\|euro }}
weekly	{{ avg_weekly_irregular_expenses\|euro }}
daily	{{ avg_daily_irregular_expenses\|euro }}
date	amount
{{ balance.date\|date:"d.m.y" }}	{{ balance.amount\|euro }}
income	{{ avg_monthly_income\|euro }}
expenses	{{ avg_monthly_expenses\|euro }}
result	{{ avg_monthly_result\|euro }}
subject	amount	booking date	recurring months	not recurring after
{{ transaction.subject }}	{{ transaction.amount\|euro }}	{{ transaction.booking_date\|date:"d.m.y" }}	{{ transaction.recurring_months }}	{{ transaction.not_recurring_after\|date:"d.m.y" }}
monthly	{{ avg_monthly_irregular_expenses\|euro }}
weekly	{{ avg_weekly_irregular_expenses\|euro }}
daily	{{ avg_daily_irregular_expenses\|euro }}