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

60
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.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<style>
.col-form-label {
width:170px;
}
</style>
</head>
<body>
<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">
<div class="row align-items-center">
@@ -121,7 +126,7 @@
</div>
<div class="offset-2 col-2">
<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()">
<option value="0">Never</option>
<option value="1">1 years</option>
@@ -168,28 +173,17 @@
</div>
</form>
</div>
<script>
window.onload = function() {
document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
};
</script>
<style>
.col-form-label {
width:170px;
}
</style>
<h5 class="mt-4">Fortnighthly Savings data:
<h5 align="center" class="mt-4">Fortnighthly Savings data:
{% 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>
{% endif %}
</h5>
<table>
<tr><td valign="top">
<div class="row">
<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 #}
{% set comp_yr=COMP['date'][:4] %}
{% set comp_mon=COMP['date'][5:7] %}
@@ -203,7 +197,8 @@ window.onload = function() {
{% set day=date[8:10 ] %}
{% 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 %}
<font color="black">
{{ date }}:&nbsp;
@@ -222,24 +217,30 @@ window.onload = function() {
{% else %}
<div class="alert alert-success">Super kicks in!!!</div>
{% endif %}
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"><div style="background:lemonchiffon"><b>SUMMARY/BUDGET</b><br>
</div>
<div class="col-auto">
<div class="alert alert-warning">
<h6 class="alert-heading">SUMMARY/BUDGET</h6>
{% for label, value in BUDGET %}
{{label}} {{value}}<br>
<div>
{{label}} {{value}}
</div>
{% endfor %}
</div>
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top">
<div class="">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary" onClick="$('#vals_form').submit()">Update</button>
</div>
<div class="mt-3 input-group">
<div class="col-auto">
<div class="input-group">
<button type="submit" class="disabled btn btn-primary" onClick="$('#vals_form').submit() disabled">Compare with:</button>
<select class="form-select border border-primary text-primary" id="comp_set" name="comp_set" onchange="">
<option value="0">None</option>
<option value="1">something</option>
</select>
</div>
<div class="mt-3">
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" onClick="
$.ajax( { type: 'GET', url: '/download_csv', xhrFields: { responseType: 'blob' },
success: function(res){
@@ -255,10 +256,13 @@ window.onload = function() {
console.log('done') } })
"> Export to CSV </button>
</div>
</td></tr>
</table>
<div id="container" style="width:100%; height:400px;"></div>
</div>
<div class="row mt-4" id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
window.onload = function() {
document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
};
document.addEventListener('DOMContentLoaded', function () {
// Parse the savings_data from Flask
const savingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');