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"> <div class="containerfluid row">
<h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3> <h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>
<div class="col-6"> <div class="col-6">
<div class="row align-items-center"> <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> <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 %} {% for el in bill_types %}
<option value={{el.id}}>{{el.name}}</option> <option value={{el.id}}>{{el.name}}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </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="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="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> <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="bills px-0 col-1 btn btn-success d-none" onClick="NewBill()"> <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> <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>
<div class="row"> <div class="row">
@@ -45,13 +44,13 @@
</div> </div>
{% for el in bill_data %} {% for el in bill_data %}
<div class="row"> <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="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="d-{{el.id}}" name="d-{{el.id}}" value="{{ el.bill_date }}" 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="a-{{el.id}}" name="a-{{el.id}}" value="{{ el.amount }}" 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-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{el.id}} )">Change</button> <button id="bill-data-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-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-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{el.id}} )">Save</button> <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-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none" <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> onClick="CancelUpdateBill({{el.id}}, '{{el.name}}', '{{el.bill_date}}', '{{el.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
</button> </button>
</div> </div>
@@ -62,9 +61,9 @@
<div class="col-6"> <div class="col-6">
<div class="row align-items-center"> <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> <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> <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="bill-type px-0 col-1 btn btn-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button> <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="bill-type px-0 col-1 btn btn-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-trash3"> Cancel</span></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>
<div class="row"> <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">Name</ ></div>
@@ -88,7 +87,7 @@
<script> <script>
function StartNewBillData() function StartNewBillData()
{ {
$('.bills').removeClass('d-none') $('.new-bill-data-class').removeClass('d-none')
$('#new-bill-data-button').addClass('d-none') $('#new-bill-data-button').addClass('d-none')
$('#new-bill-data-type').focus() $('#new-bill-data-type').focus()
} }
@@ -102,7 +101,7 @@
function CancelNewBill() function CancelNewBill()
{ {
$('.bills').addClass('d-none') $('.new-bill-data-class').addClass('d-none')
$('#new-bill-data-button').removeClass('d-none') $('#new-bill-data-button').removeClass('d-none')
// reset select to first option // reset select to first option
$('#new-bill-data-type').val( $('#new-bill-data-type option:first').attr('value') ) $('#new-bill-data-type').val( $('#new-bill-data-type option:first').attr('value') )
@@ -113,47 +112,51 @@
function StartUpdateBill( id ) function StartUpdateBill( id )
{ {
val=$('#a-'+id).val() val=$('#bill-data-amount-'+id).val()
// enable date and amount fields // enable date and amount fields
$('#n-'+id).removeClass('bg-white') $('#bill-data-type-'+id).removeClass('bg-white')
$('#d-'+id).prop('disabled', false ) $('#bill-data-date-'+id).prop('disabled', false )
$('#a-'+id).prop('disabled', false ) $('#bill-data-amount-'+id).prop('disabled', false )
// "enable" name for edits // "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 // 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 // alter change/delete buttons to be save/cancel
$('#bill-chg-'+id).addClass('d-none') $('#bill-data-chg-'+id).addClass('d-none')
$('#bill-del-'+id).addClass('d-none') $('#bill-data-del-'+id).addClass('d-none')
$('#bill-save-'+id).removeClass('d-none') $('#bill-data-save-'+id).removeClass('d-none')
$('#bill-canc-'+id).removeClass('d-none') $('#bill-data-canc-'+id).removeClass('d-none')
} }
function UpdateBill(id) function UpdateBill(id)
{ {
$.ajax( { type: 'POST', url: '/updatebill', $.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' } } ) success: function() { window.location='bills' } } )
} }
function CancelUpdateBill( id, bill_type, bill_date, amount ) function CancelUpdateBill( id, bill_type, bill_date, amount )
{ {
// fix-up type, date and amount fields // fix-up type, date and amount fields
$('#n-'+id).addClass('bg-white') $('#bill-data-type-'+id).addClass('bg-white')
$('#d-'+id).prop('disabled', true ) $('#bill-data-date-'+id).prop('disabled', true )
$('#a-'+id).prop('disabled', true ) $('#bill-data-amount-'+id).prop('disabled', true )
// alter change/delete buttons to be save/cancel // alter change/delete buttons to be save/cancel
$('#bill-chg-'+id).removeClass('d-none') $('#bill-data-chg-'+id).removeClass('d-none')
$('#bill-del-'+id).removeClass('d-none') $('#bill-data-del-'+id).removeClass('d-none')
$('#bill-save-'+id).addClass('d-none') $('#bill-data-save-'+id).addClass('d-none')
$('#bill-canc-'+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 // finally we might have modified the string, and then clicked cancel, so rest bill values to orig
$('#n-'+id).val(bill_type) $('#bill-data-type-'+id).val(bill_type)
$('#d-'+id).val(bill_date) $('#bill-data-date-'+id).val(bill_date)
$('#a-'+id).val(amount) $('#bill-data-amount-'+id).val(amount)
} }
function DeleteBill( id ) function DeleteBill( id )
@@ -164,22 +167,22 @@
function StartNewBillType() function StartNewBillType()
{ {
$('.bill-type').removeClass('d-none') $('.new-bill-type-class').removeClass('d-none')
$('#new-bill-type').addClass('d-none') $('#new-bill-type-button').addClass('d-none')
$('#bill-type').focus() $('#new-bill-type-name').focus()
} }
function CancelNewBillType() function CancelNewBillType()
{ {
$('.bill-type').addClass('d-none') $('.new-bill-type-class').addClass('d-none')
$('#new-bill-type').removeClass('d-none') $('#new-bill-type-button').removeClass('d-none')
$('#bill-type').val('') $('#new-bill-type-name').val('')
} }
function NewBillType() function NewBillType()
{ {
$.ajax( { type: 'POST', url: '/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' } } ) 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 // 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(); }); $("#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 // 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 // note we also dynamically bound each bill-type-name to save on Enter when we create them in a loop
} ) } )