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

added a set of titles when adding new bill / new bill types, allows to toggle date to be when quit or normal date, with normal date we use data, with when quit, we have growth we will use for simple growth and then date(s) can be factored in based on when I quit which is changable in the main financial data

Browse Source
This commit is contained in:
Damien De Paoli
2025-09-02 22:05:16 +10:00
parent 5914f3fdd4
commit 95d792e72f
1 changed files with 79 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
templates/bills.html
View File

@@ -38,8 +38,12 @@
#}
<div class="mt-4 col-7">
<div class="row align-items-center">
<button id="new-bill-type-button" class="mb-3 px-0 offset-4 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
<div class="row">
<div class="col-2 form-control-inline d-none new-bill-type-class">Bill Type</div>
<div class="col-2 form-control-inline d-none new-bill-type-class">Frequency</div>
</div>
<div class="row align-items-center mb-3">
<button id="new-bill-type-button" class="mt-4 px-0 offset-4 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</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>
<div class="new-bill-type-class px-0 col-2 d-none"><select id="new-bill-type-freq" class="form-select text-center">
{% for bf in bill_freqs %}
@@ -129,19 +133,34 @@
<!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
<div class="pt-4 col-5">
<div class="row align-items-center">
<button id="new-bill-data-button" class="mb-3 px-0 offset-6 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
<div class="row">
<div class="col-2 form-control-inline d-none new-bill-data-class">Bill Type</div>
<div id="new-bill-data-date-label" class="col-4 form-control-inline d-none new-bill-data-class">Date</div>
<div id="new-bill-data-growth-label" class="col-4 form-control-inline d-none">Est. Annual Growth</div>
<div class="col-2 form-control-inline d-none new-bill-data-class">Amount</div>
</div>
<div class="row align-items-center mb-3">
<button id="new-bill-data-button" class="mt-4 px-0 offset-8 col-2 btn btn-success bg-success-subtle text-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
<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 bt in bill_types %}
<option value={{bt.id}}>{{bt.name}}</option>
{% endfor %}
</select>
</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="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>
<div class="new-bill-data-class px-0 col-4 d-none">
<div class="input-group" style="max-width: 300px;">
<input type="date" class="form-control" id="new-bill-data-date">
<input type="text" class="form-control d-none" id="new-bill-data-growth">
<button class="btn btn-outline-danger" type="button" id="toggleDateBtn">When quit</button>
</div>
</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 bg-success-subtle text-success d-none" onClick="NewBill()">
<span class="bi bi-floppy"></span> Save </button>
<button class="new-bill-data-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-x"> Cancel</span> </button>
<button class="new-bill-data-class px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" >
<span class="bi bi-x"> Cancel</span> </button>
</div>
<!-- create tabbed view for each bill type -->
@@ -165,9 +184,9 @@
{% for bd in bill_data %}
{% if loop.first %}
<div class="row pt-2">
<div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Name</ > </div>
<div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Date</ > </div>
<div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Amount</ > </div>
<div class="p-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Name</ ></div>
<div class="p-0 col-4"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Date</ ></div>
<div class="p-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Amount</ ></div>
<div class="px-0 col-4"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
</div>
{% endif %}
@@ -222,9 +241,28 @@
function NewBill()
{
$.ajax( { type: 'POST', url: '/newbill',
contentType: 'application/json', data: JSON.stringify( { 'name': $('#new-bill-data-type').val(), 'amount': $('#new-bill-data-amount').val(), 'bill_date': $('#new-bill-data-date').val() } ),
if( $('#new-bill-data-growth').hasClass('d-none') )
{
// if growth is hidden, then we have normal bill
$.ajax( { type: 'POST', url: '/newbill',
contentType: 'application/json',
data: JSON.stringify( {
'name': $('#new-bill-data-type').val(),
'amount': $('#new-bill-data-amount').val(),
'bill_date': $('#new-bill-data-date').val() } ),
success: function() { window.location='bills' } } )
}
else
{
// if growth is visible, then we have future bill/growth & no date
$.ajax( { type: 'POST', url: '/newbill',
contentType: 'application/json',
data: JSON.stringify( {
'name': $('#new-bill-data-type').val(),
'amount': $('#new-bill-data-amount').val(),
'growth': $('#new-bill-data-growth').val() } ),
success: function() { window.location='bills' } } )
}
}
function CancelNewBill()
@@ -396,6 +434,35 @@
// make the new bill drop-down default to the same as the current tab
$("#new-bill-data-type").val( {{bill_ui.last_tab}} )
} )
$(function () {
let disabled = false;
$('#toggleDateBtn').on('click', function () {
disabled = !disabled;
if (disabled) {
$('#new-bill-data-date').addClass('d-none')
$('#new-bill-data-growth').removeClass('d-none')
$(this)
.removeClass('btn-outline-danger')
.addClass('btn-outline-success')
.html('Normal date');
$('#new-bill-data-date-label').addClass('d-none')
$('#new-bill-data-growth-label').removeClass('d-none')
} else {
$('#new-bill-data-date').removeClass('d-none')
$('#new-bill-data-growth').addClass('d-none')
$(this)
.removeClass('btn-outline-success')
.addClass('btn-outline-danger')
.html('When quit');
$('#new-bill-data-date-label').removeClass('d-none')
$('#new-bill-data-growth-label').addClass('d-none')
}
});
});
</script>
</body>
</html>