ddp/finplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revamp of front-end to ditch lazy table, and use divs / bootstrap better

Browse Source
This commit is contained in:
Damien De Paoli
2025-02-10 17:38:31 +11:00
parent b9b6da1f7a
commit af38b45034
1 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
templates/index.html
View File

@@ -8,10 +8,15 @@
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script> <script src="https://code.highcharts.com/modules/annotations.js"></script>
<style>
.col-form-label {
width:170px;
}
</style>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<h3>Finance Tracker</h3> <h3 align="center">Finance Tracker</h3>
<form id="vals_form" class="mt-3" action="/update" method="POST"> <form id="vals_form" class="mt-3" action="/update" method="POST">
<div class="row align-items-center"> <div class="row align-items-center">
@@ -121,7 +126,7 @@
</div> </div>
<div class="offset-2 col-2"> <div class="offset-2 col-2">
<div class="input-group"> <div class="input-group">
<label class="input-group-text" for="Sell_shares">Sell Shares:</label> <label class="input-group-text" for="Sell_shares">Sell Shares for:</label>
<select class="form-select border border-primary text-primary" id="Sell_shares" name="Sell_shares" onchange="this.form.submit()"> <select class="form-select border border-primary text-primary" id="Sell_shares" name="Sell_shares" onchange="this.form.submit()">
<option value="0">Never</option> <option value="0">Never</option>
<option value="1">1 years</option> <option value="1">1 years</option>
@@ -168,28 +173,17 @@
</div> </div>
</form> </form>
</div>
<script>
window.onload = function() {
document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
};
</script>
<style> <h5 align="center" class="mt-4">Fortnighthly Savings data:
.col-form-label {
width:170px;
}
</style>
<h5 class="mt-4">Fortnighthly Savings data:
{% if COMP %} {% if COMP %}
<font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note: value in blue below is value we should have been at when comparing to saved values</font> <font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note: value in blue below is value we should have been at when comparing to saved values</font>
{% endif %} {% endif %}
</h5> </h5>
<table> <div class="row">
<tr><td valign="top"> <div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
{# get comparison date so we can use it below in loop to know when to print it out #} {# get comparison date so we can use it below in loop to know when to print it out #}
{% set comp_yr=COMP['date'][:4] %} {% set comp_yr=COMP['date'][:4] %}
{% set comp_mon=COMP['date'][5:7] %} {% set comp_mon=COMP['date'][5:7] %}
@@ -203,7 +197,8 @@ window.onload = function() {
{% set day=date[8:10 ] %} {% set day=date[8:10 ] %}
{% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %} {% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"> </div><div class="col-auto">
<div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">{{yr}}</div>
{% endif %} {% endif %}
<font color="black"> <font color="black">
{{ date }}:&nbsp; {{ date }}:&nbsp;
@@ -222,24 +217,30 @@ window.onload = function() {
{% else %} {% else %}
<div class="alert alert-success">Super kicks in!!!</div> <div class="alert alert-success">Super kicks in!!!</div>
{% endif %} {% endif %}
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"><div style="background:lemonchiffon"><b>SUMMARY/BUDGET</b><br>
{% for label, value in BUDGET %}
{{label}} {{value}}<br>
{% endfor %}
</div> </div>
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"> <div class="col-auto">
<div class=""> <div class="alert alert-warning">
<h6 class="alert-heading">SUMMARY/BUDGET</h6>
{% for label, value in BUDGET %}
<div>
{{label}} {{value}}
</div>
{% endfor %}
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary" onClick="$('#vals_form').submit()">Update</button> <button type="submit" class="btn btn-primary" onClick="$('#vals_form').submit()">Update</button>
</div> </div>
<div class="mt-3 input-group"> <div class="col-auto">
<button type="submit" class="disabled btn btn-primary" onClick="$('#vals_form').submit() disabled">Compare with:</button> <div class="input-group">
<select class="form-select border border-primary text-primary" id="comp_set" name="comp_set" onchange=""> <button type="submit" class="disabled btn btn-primary" onClick="$('#vals_form').submit() disabled">Compare with:</button>
<option value="0">None</option> <select class="form-select border border-primary text-primary" id="comp_set" name="comp_set" onchange="">
<option value="1">something</option> <option value="0">None</option>
</select> <option value="1">something</option>
</select>
</div>
</div> </div>
<div class="mt-3"> <div class="col-auto">
<button type="button" class="btn btn-primary" onClick=" <button type="button" class="btn btn-primary" onClick="
$.ajax( { type: 'GET', url: '/download_csv', xhrFields: { responseType: 'blob' }, $.ajax( { type: 'GET', url: '/download_csv', xhrFields: { responseType: 'blob' },
success: function(res){ success: function(res){
@@ -255,10 +256,13 @@ window.onload = function() {
console.log('done') } }) console.log('done') } })
"> Export to CSV </button> "> Export to CSV </button>
</div> </div>
</td></tr> </div>
</table> <div class="row mt-4" id="container" style="width:100%; height:400px;"></div>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() {
document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
};
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Parse the savings_data from Flask // Parse the savings_data from Flask
const savingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}'); const savingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');