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

finished functional bills page, all naming conventions consistent for html entities, classes, and matching DB fields

Browse Source
This commit is contained in:
Damien De Paoli
2025-08-14 15:54:50 +10:00
parent b02e03339e
commit 7bab6eabdd
1 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
templates/bills.html
View File

@@ -21,21 +21,20 @@
<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-data-button" class="px-0 offset-6 col-2 btn btn-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
<div class="bills px-0 col-2 d-none"> <select id="new-bill-data-type" class="form-select text-end float-end border border-primary">
<div class="new-bill-data-class px-0 col-2 d-none"> <select id="new-bill-data-type" 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="new-bill-data-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="new-bill-data-amount"> </div>
<button id="save-bill" class="bills px-0 col-1 btn btn-success d-none" onClick="NewBill()">
<div class="new-bill-data-class px-0 col-2 d-none"> <input type="date" class="form-control text-end float-end border border-primary" id="new-bill-data-date"> </div>
<div class="new-bill-data-class px-0 col-2 d-none"> <input type="number" class="form-control text-end float-end border border-primary" id="new-bill-data-amount"> </div>
<button id="save-bill" class="new-bill-data-class px-0 col-1 btn btn-success d-none" onClick="NewBill()">
<span class="bi bi-floppy"></span> Save </button>
<button class="bills px-0 col-1 btn btn-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-trash3"> Cancel</span> </button>
<button class="new-bill-data-class px-0 col-1 btn btn-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-trash3"> Cancel</span> </button>
</div>
<div class="row">
@@ -45,13 +44,13 @@
</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 id="bill-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{el.id}} )">Change</button>
<button id="bill-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{el.id }} )"><span class="bi bi-trash3"> Delete
<button id="bill-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{el.id}} )">Save</button>
<button id="bill-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none"
<div class="px-0 col-2"> <input type="text" class="form-control text-center bg-white" id="bill-data-type-{{el.id}}" value="{{ el.name }}" disabled> </div>
<div class="px-0 col-2"> <input type="date" class="form-control text-center bg-white" id="bill-data-date-{{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="bill-data-amount-{{el.id}}" value="{{ el.amount }}" disabled> </div>
<button id="bill-data-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{el.id}} )">Change</button>
<button id="bill-data-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{el.id }} )"><span class="bi bi-trash3"> Delete
<button id="bill-data-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{el.id}} )">Save</button>
<button id="bill-data-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none"
onClick="CancelUpdateBill({{el.id}}, '{{el.name}}', '{{el.bill_date}}', '{{el.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
</button>
</div>
@@ -62,9 +61,9 @@
<div class="col-6">
<div class="row align-items-center">
<button id="new-bill-type-button" 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 class="new-bill-type-class px-0 col-2 d-none"> <input type="text" class="form-control text-end float-end border border-primary" id="new-bill-type-name"></div>
<button id="save-bill-type" class="new-bill-type-class 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="new-bill-type-class 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>
@@ -88,7 +87,7 @@
<script>
function StartNewBillData()
{
$('.bills').removeClass('d-none')
$('.new-bill-data-class').removeClass('d-none')
$('#new-bill-data-button').addClass('d-none')
$('#new-bill-data-type').focus()
}
@@ -102,7 +101,7 @@
function CancelNewBill()
{
$('.bills').addClass('d-none')
$('.new-bill-data-class').addClass('d-none')
$('#new-bill-data-button').removeClass('d-none')
// reset select to first option
$('#new-bill-data-type').val( $('#new-bill-data-type option:first').attr('value') )
@@ -113,47 +112,51 @@
function StartUpdateBill( id )
{
val=$('#a-'+id).val()
val=$('#bill-data-amount-'+id).val()
// enable date and amount fields
$('#n-'+id).removeClass('bg-white')
$('#d-'+id).prop('disabled', false )
$('#a-'+id).prop('disabled', false )
$('#bill-data-type-'+id).removeClass('bg-white')
$('#bill-data-date-'+id).prop('disabled', false )
$('#bill-data-amount-'+id).prop('disabled', false )
// "enable" name for edits
$('#a-'+id).prop('disabled', false).focus()
$('#bill-data-amount-'+id).prop('disabled', false).focus()
// move cursor to the end after 'focus()' above
$('#a-'+id).val('').val( val )
$('#bill-data-amount-'+id).val('').val( val )
// alter change/delete buttons to be save/cancel
$('#bill-chg-'+id).addClass('d-none')
$('#bill-del-'+id).addClass('d-none')
$('#bill-save-'+id).removeClass('d-none')
$('#bill-canc-'+id).removeClass('d-none')
$('#bill-data-chg-'+id).addClass('d-none')
$('#bill-data-del-'+id).addClass('d-none')
$('#bill-data-save-'+id).removeClass('d-none')
$('#bill-data-canc-'+id).removeClass('d-none')
}
function UpdateBill(id)
{
$.ajax( { type: 'POST', url: '/updatebill',
contentType: 'application/json', data: JSON.stringify( { 'id': id, 'name': $('#n-'+id).val(), 'bill_date' : $('#d-'+id).val(), 'amount': $('#a-'+id).val() } ),
contentType: 'application/json', data: JSON.stringify( {
'id': id,
'name': $('#bill-data-type-'+id).val(),
'bill_date' : $('#bill-data-date-'+id).val(),
'amount': $('#bill-data-amount-'+id).val() } ),
success: function() { window.location='bills' } } )
}
function CancelUpdateBill( id, bill_type, bill_date, amount )
{
// fix-up type, date and amount fields
$('#n-'+id).addClass('bg-white')
$('#d-'+id).prop('disabled', true )
$('#a-'+id).prop('disabled', true )
$('#bill-data-type-'+id).addClass('bg-white')
$('#bill-data-date-'+id).prop('disabled', true )
$('#bill-data-amount-'+id).prop('disabled', true )
// alter change/delete buttons to be save/cancel
$('#bill-chg-'+id).removeClass('d-none')
$('#bill-del-'+id).removeClass('d-none')
$('#bill-save-'+id).addClass('d-none')
$('#bill-canc-'+id).addClass('d-none')
$('#bill-data-chg-'+id).removeClass('d-none')
$('#bill-data-del-'+id).removeClass('d-none')
$('#bill-data-save-'+id).addClass('d-none')
$('#bill-data-canc-'+id).addClass('d-none')
// finally we might have modified the string, and then clicked cancel, so rest bill values to orig
$('#n-'+id).val(bill_type)
$('#d-'+id).val(bill_date)
$('#a-'+id).val(amount)
$('#bill-data-type-'+id).val(bill_type)
$('#bill-data-date-'+id).val(bill_date)
$('#bill-data-amount-'+id).val(amount)
}
function DeleteBill( id )
@@ -164,22 +167,22 @@
function StartNewBillType()
{
$('.bill-type').removeClass('d-none')
$('#new-bill-type').addClass('d-none')
$('#bill-type').focus()
$('.new-bill-type-class').removeClass('d-none')
$('#new-bill-type-button').addClass('d-none')
$('#new-bill-type-name').focus()
}
function CancelNewBillType()
{
$('.bill-type').addClass('d-none')
$('#new-bill-type').removeClass('d-none')
$('#bill-type').val('')
$('.new-bill-type-class').addClass('d-none')
$('#new-bill-type-button').removeClass('d-none')
$('#new-bill-type-name').val('')
}
function NewBillType()
{
$.ajax( { type: 'POST', url: '/newbilltype',
contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#bill-type').val() } ),
contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val() } ),
success: function() { window.location='bills' } } )
}
@@ -235,7 +238,7 @@
// if amount has enter key in it then save, but dont do this for other fields in new bill
$("#new-bill-data-amount").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(); });
$("#new-bill-type-name").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
} )