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

First pass of adding bills to finplan.

Browse Source 
We now have a new page /bills that shows any bills on the left-hand side (type, date, amount)
and bill types and some derived values (frequency and annual growth rate) on the right-hand side

The new bill, and new bill type buttons/logic all work
The delete bill and bill type buttons/logic all work

The change bill type logic all works (and is a touch complex, it alters the GUI
to show/hide different buttons, and disable/re-enable content in the bill types
table

THe change bill is disabled for now and for later
This commit is contained in:
Damien De Paoli
2025-08-14 12:15:26 +10:00
parent e01af0b92b
commit 0c0745fe68
2 changed files with 172 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
BUGS Normal file
View File

@@ -0,0 +1,3 @@
when I remove and re-add a different onclick handler for new-bt and canc-bt, it
just does not really seem to work. If I call NewBillType(id) where id > 0, it
actuall updates in the backend, but it always does NewBillType(0)

169
templates/bills.html Normal file
View File

@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>Finance Form (Bill Details)</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></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/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.col-form-label { width:140px; }
html { font-size: 80%; }
</style>
</head>
<body>
<div class="containerfluid row">
<h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>
<div class="col-6">
<div class="row align-items-center">
<button id="new-bill" class="px-0 offset-6 col-2 btn btn-success" onCLick="$('.bills').removeClass('d-none');$('#new-bill').addClass('d-none');$('#name').focus()"><span class="bi bi-plus-lg"> New Bill</span></button>
<div class="bills px-0 col-2 d-none"> <select id="name" class="form-select text-end float-end border border-primary">
{% for el in bill_types %}
<option value={{el.id}}>{{el.name}}</option>
{% endfor %}
</select>
</div>
<div class="bills px-0 col-2 d-none"> <input type="date" class="form-control text-end float-end border border-primary" id="bill-date"> </div>
<div class="bills px-0 col-2 d-none"> <input type="number" class="form-control text-end float-end border border-primary" id="amt"> </div>
<button id="save-bill" class="bills px-0 col-1 btn btn-success d-none" onClick="
$.ajax( { type: 'POST', url: '/newbill',
contentType: 'application/json', data: JSON.stringify( { 'name': $('#name').val(), 'amt': $('#amt').val(), 'bill_date': $('#bill-date').val() } ),
success: function() { window.location='bills' } } )"
">
<span class="bi bi-floppy"></span> Save </button>
<button class="bills px-0 col-1 btn btn-danger d-none" onClick="$('.bills').addClass('d-none');$('#new-bill').removeClass('d-none')"><span class="bi bi-trash3"> Cancel</span> </button>
</div>
<div class="row">
<div class="px-0 col-2"> <label class="form-control text-center border-0">Name</ > </div>
<div class="px-0 col-2"> <label class="form-control text-center border-0">Date</ > </div>
<div class="px-0 col-2"> <label class="form-control text-center border-0">Amount</ > </div>
</div>
{% for el in bill_data %}
<div class="row">
<div class="px-0 col-2"> <input type="text" class="form-control text-center bg-white" id="n-{{el.id}}" name="n-{{el.id}}" value="{{ el.name }}" disabled> </div>
<div class="px-0 col-2"> <input type="date" class="form-control text-center bg-white" id="d-{{el.id}}" name="d-{{el.id}}" value="{{ el.bill_date }}" disabled> </div>
<div class="px-0 col-2"> <input type="number" class="form-control text-center bg-white" id="a-{{el.id}}" name="a-{{el.id}}" value="{{ el.amount }}" disabled> </div>
<button class="px-0 col-1 btn btn-success" onClick="" disabled>Change</button>
<button class="px-0 col-1 btn btn-danger" onClick="
$.ajax( { type: 'POST', url: '/delbill', contentType: 'application/json',
data: JSON.stringify( { 'id': '{{el.id}}' } ), success: function() { window.location='bills' } } )">
<span class="bi bi-trash3"> Delete
</button>
</div>
{% endfor %}
</div>
<!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
<div class="col-6">
<div class="row align-items-center">
<button id="new-bill-type" class="px-0 offset-2 col-2 btn btn-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
<div class="bill-type px-0 col-2 d-none"> <input type="text" class="form-control text-end float-end border border-primary" id="bill-type"></div>
<button id="save-bill-type" class="bill-type px-0 col-1 btn btn-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
<button id="canc-bill-type" class="bill-type px-0 col-1 btn btn-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-trash3"> Cancel</span></button>
</div>
<div class="row">
<div class="px-0 col-2"><label class="form-control text-center border-0">Name</ ></div>
<div class="px-0 col-2"><label class="form-control text-center border-0">Frequency</ ></div>
<div class="px-0 col-2"><label class="form-control text-center border-0">Annual Growth Est</ ></div>
</div>
{% for el in bill_types %}
<div class="row">
<div class="px-0 col-2"><input type="text" class="bill-type-name form-control text-center bg-white" id="bill-type-name-{{el.id}}" value="{{ el.name }}" disabled> </div>
<!-- bind Enter to save this bill-type -->
<script>$("#bill-type-name-{{el.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{el.id}}').click(); } event.preventDefault(); });</script>
<div class="px-0 col-2"><input type="text" class="bill-type-{{el.id}} form-control text-center bg-white" id="bill-type-freq-{{el.id}}" value="not yet" disabled> </div>
<div class="px-0 col-2"><input type="text" class="bill-type-{{el.id}} form-control text-center bg-white" id="bill-type-grow-{{el.id}}" value="not yet" disabled> </div>
<button id="bill-type-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="AllowUpdateBillType( {{el.id}} )">Change</button>
<button id="bill-type-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DelBillType({{el.id}})"><span class="bi bi-trash3"> Delete</button>
<button id="bill-type-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBillType( {{el.id}} )">Save</button>
<button id="bill-type-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none" onClick="CancelUpdateBillType({{el.id}}, '{{el.name}}')"><span class="bi bi-trash3"> Cancel</button>
</div>
{% endfor %}
</div>
<script>
function StartNewBillType()
{
$('.bill-type').removeClass('d-none')
$('#new-bill-type').addClass('d-none')
$('#bill-type').focus()
}
function CancelNewBillType()
{
$('.bill-type').addClass('d-none')
$('#new-bill-type').removeClass('d-none')
}
function NewBillType() {
$.ajax( { type: 'POST', url: '/newbilltype',
contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#bill-type').val() } ),
success: function() { window.location='bills' } } )
}
function AllowUpdateBillType( id )
{
val=$('#bill-type-name-'+id).val()
// "disable" the freq & growth
$('.bill-type-'+id).addClass('bg-light text-secondary').removeClass('bg-white')
// "enable" name for edits
$('#bill-type-name-'+id).prop('disabled', false).focus()
// move cursor to the end after 'focus()' above
$('#bill-type-name-'+id).val('').val( val )
// alter change/delete buttons to be save/cancel
$('#bill-type-chg-'+id).addClass('d-none')
$('#bill-type-del-'+id).addClass('d-none')
$('#bill-type-save-'+id).removeClass('d-none')
$('#bill-type-canc-'+id).removeClass('d-none')
}
function UpdateBillType(id) {
$.ajax( { type: 'POST', url: '/updatebilltype',
contentType: 'application/json', data: JSON.stringify( { 'id': id, 'bill_type': $('#bill-type-name-'+id).val() } ),
success: function() { window.location='bills' } } )
}
function CancelUpdateBillType(id,orig_name)
{
// "re-enable" the freq & growth
$('.bill-type-'+id).removeClass('bg-light text-secondary').addClass('bg-white')
// "enable" name for edits
$('#bill-type-name-'+id).prop('disabled', true)
// alter change/delete buttons to be save/cancel
$('#bill-type-chg-'+id).removeClass('d-none')
$('#bill-type-del-'+id).removeClass('d-none')
$('#bill-type-save-'+id).addClass('d-none')
$('#bill-type-canc-'+id).addClass('d-none')
// finally we might have modified the string, and then clicked cancel, so rest bill type to its orig name
$('#bill-type-name-'+id).val(orig_name)
}
function DelBillType( id )
{
$.ajax( { type: 'POST', url: '/delbilltype', contentType: 'application/json',
data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
}
$(document).ready(function () {
// if amount has enter key in it then save, but dont do this for other fields in new bill
$("#amt").keyup(function(event){ if(event.which == 13){ $("#save-bill").click(); } event.preventDefault(); });
// if we hit enter in new bill type name field, save it
$("#bill-type").keyup(function(event){ if(event.which == 13){ $("#save-bill-type").click(); } event.preventDefault(); });
// note we also dynamically bound each bill-type-name to save on Enter when we create them in a loop
} )
</script>
</body>
</html>