355 lines
20 KiB
HTML
355 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<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="pt-2 containerfluid row">
|
|
<h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>
|
|
|
|
<div class="mt-4 col-6">
|
|
<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="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 %}
|
|
<option value={{bf.id}}>{{bf.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success bg-success-subtle text-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 bg-danger-subtle text-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-x"> Cancel</span></button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Name</ ></div>
|
|
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Frequency</ ></div>
|
|
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Annual Growth Est (min/avg/max)</ ></div>
|
|
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0 h-100"><br>Actions</ ></div>
|
|
</div>
|
|
{% for bt in bill_types %}
|
|
<div class="row">
|
|
<div class="px-0 col-2"><input type="text" class="bill-type-{{bt.id}} form-control text-center" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
|
|
<!-- bind Enter to save this bill-type -->
|
|
<script>$("#bill-type-name-{{bt.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{bt.id}}').click(); } event.preventDefault(); });</script>
|
|
<div class="px-0 col-2"><select id="bill-type-freq-{{bt.id}}" class="bill-type-{{bt.id}} form-select text-center" disabled>
|
|
{% for bf in bill_freqs %}
|
|
<option value={{bf.id}}>{{bf.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<script>$('#bill-type-freq-{{bt.id}}').val( {{bt.freq}} );</script>
|
|
<div class="px-0 col-2">
|
|
<div class="btn-group w-100" role="group">
|
|
<input type="radio" class="btn-check" name="growth-{{bt.id}}" id="min-{{bt.id}}" autocomplete="off"
|
|
onChange="UseGrowth({{bt.id}}, 'min')" {% if bt.which_growth == 'min' %}checked{% endif %}>
|
|
<label class="btn btn-outline-secondary" for="min-{{bt.id}}">
|
|
{% if bt.ann_growth_min < 10 %} {% endif %}
|
|
{{'%.2f'|format(bt.ann_growth_min)}}
|
|
</label>
|
|
<input type="radio" class="btn-check" name="growth-{{bt.id}}" id="avg-{{bt.id}}" autocomplete="off"
|
|
onChange="UseGrowth({{bt.id}}, 'avg')" {% if bt.which_growth == 'avg' %}checked{% endif %}>
|
|
<label class="btn btn-outline-secondary" for="avg-{{bt.id}}">
|
|
{% if bt.ann_growth_avg < 10 %} {% endif %}
|
|
{{'%.2f'|format(bt.ann_growth_avg)}}
|
|
</label>
|
|
<input type="radio" class="btn-check" name="growth-{{bt.id}}" id="max-{{bt.id}}" autocomplete="off"
|
|
onChange="UseGrowth({{bt.id}}, 'max')" {% if bt.which_growth == 'max' %}checked{% endif %}>
|
|
<label class="btn btn-outline-secondary" for="max-{{bt.id}}">
|
|
{% if bt.ann_growth_max < 10 %} {% endif %}
|
|
{{'%.2f'|format(bt.ann_growth_max)}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button id="bill-type-chg-{{bt.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success" onClick="StartUpdateBillType( {{bt.id}} )"><span class="bi bi-pencil-square"> Change</button>
|
|
<button id="bill-type-del-{{bt.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger" onClick="DelBillType({{bt.id}})"><span class="bi bi-trash3"> Delete</button>
|
|
<button id="bill-type-save-{{bt.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBillType( {{bt.id}} )"><spam class="bi bi-floppy"> Save</button>
|
|
<button id="bill-type-canc-{{bt.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-x"> Cancel</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
|
|
|
|
<div class="pt-4 col-6">
|
|
<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="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>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- create tabbed view for each bill type -->
|
|
<nav id="bills-nav" class="nav nav-tabs">
|
|
{% for bt in bill_types %}
|
|
<button class="nav-link" id="tab-but-{{bt.id}}" data-bs-toggle="tab" data-bs-target="#tab-{{bt.id}}" type="button" role="tab" aria-controls="tab1" aria-selected="true" onClick="SaveTab('{{bt.id}}')">{{bt.name}}</button>
|
|
{% endfor %}
|
|
</nav>
|
|
|
|
<div class="tab-content">
|
|
<div class="col-2 form-check form-switch form-check-inline">
|
|
<input class="form-check-input" type="checkbox" value="" id="showEstimated" onChange="ToggleEstimated()">
|
|
<label class="form-check-label" for="flexCheckDefault">Show Estimates</label>
|
|
</div>
|
|
{% for bt in bill_types %}
|
|
{% if loop.first %}
|
|
<div id="tab-{{bt.id}}" class="tab-pane active">
|
|
{% else %}
|
|
<div id="tab-{{bt.id}}" class="tab-pane">
|
|
{% endif %}
|
|
{% 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="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
|
|
</div>
|
|
{% endif %}
|
|
{% if bd.bill_type_id == bt.id %}
|
|
{% if bd.estimated == 1 %}
|
|
<div class="row est d-none fst-italic">
|
|
{% set classes="fst-italic form-control text-center" %}
|
|
{% else %}
|
|
<div class="row">
|
|
{% set classes="form-control text-center" %}
|
|
{% endif %}
|
|
<div class="px-0 col-2"> <input type="text" class="{{classes}}" id="bill-data-type-{{bd.id}}" value="{{ bd.name }}" disabled> </div>
|
|
<div class="px-0 col-2"> <input type="date" class="{{classes}}" id="bill-data-date-{{bd.id}}" value="{{ bd.bill_date }}" disabled> </div>
|
|
<div class="px-0 col-2"> <input type="number" class="{{classes}}" id="bill-data-amount-{{bd.id}}" value="{{ bd.amount }}" disabled> </div>
|
|
{% if bd.estimated == 0 %}
|
|
<button id="bill-data-chg-{{bd.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success" onClick="StartUpdateBill( {{bd.id}} )"><span class="bi bi-pencil-square"> Change</button>
|
|
<button id="bill-data-del-{{bd.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger" onClick="DeleteBill( {{bd.id }} )"><span class="bi bi-trash3"> Delete
|
|
<button id="bill-data-save-{{bd.id}}" class="px-0 col-1 btn btn-success bg-success-subtle text-success d-none" onClick="UpdateBill( {{bd.id}} )"><span class="bi bi-floppy"> Save</button>
|
|
<button id="bill-data-canc-{{bd.id}}" class="px-0 col-1 btn btn-danger bg-danger-subtle text-danger d-none"
|
|
onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-x"> Cancel</button>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
function ToggleEstimated()
|
|
{
|
|
if( $("#showEstimated").is(":checked") )
|
|
{
|
|
val=1
|
|
$('.est').removeClass('d-none')
|
|
}
|
|
else
|
|
{
|
|
val=0
|
|
$('.est').addClass('d-none')
|
|
}
|
|
$.ajax( { type: 'POST', url: '/saveui', contentType: 'application/json', data: JSON.stringify( { 'show_estimated': val } ), success: function() { } } )
|
|
}
|
|
|
|
function StartNewBillData()
|
|
{
|
|
$('.new-bill-data-class').removeClass('d-none')
|
|
$('#new-bill-data-button').addClass('d-none')
|
|
$('#new-bill-data-type').focus()
|
|
}
|
|
|
|
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() } ),
|
|
success: function() { window.location='bills' } } )
|
|
}
|
|
|
|
function CancelNewBill()
|
|
{
|
|
$('.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') )
|
|
// clear out date and amount
|
|
$('#new-bill-data-date').val('')
|
|
$('#new-bill-data-amount').val('')
|
|
}
|
|
|
|
function StartUpdateBill( id )
|
|
{
|
|
val=$('#bill-data-amount-'+id).val()
|
|
|
|
// enable date and amount fields
|
|
$('#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
|
|
$('#bill-data-amount-'+id).prop('disabled', false).focus()
|
|
|
|
// move cursor to the end after 'focus()' above
|
|
$('#bill-data-amount-'+id).val('').val( val )
|
|
|
|
// alter change/delete buttons to be save/cancel
|
|
$('#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': $('#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
|
|
$('#bill-data-date-'+id).prop('disabled', true )
|
|
$('#bill-data-amount-'+id).prop('disabled', true )
|
|
// alter change/delete buttons to be save/cancel
|
|
$('#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
|
|
$('#bill-data-type-'+id).val(bill_type)
|
|
$('#bill-data-date-'+id).val(bill_date)
|
|
$('#bill-data-amount-'+id).val(amount)
|
|
}
|
|
|
|
function DeleteBill( id )
|
|
{
|
|
$.ajax( { type: 'POST', url: '/delbill', contentType: 'application/json',
|
|
data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
|
|
}
|
|
|
|
function StartNewBillType()
|
|
{
|
|
$('.new-bill-type-class').removeClass('d-none')
|
|
$('#new-bill-type-button').addClass('d-none')
|
|
$('#new-bill-type-name').focus()
|
|
}
|
|
|
|
function CancelNewBillType()
|
|
{
|
|
$('.new-bill-type-class').addClass('d-none')
|
|
$('#new-bill-type-button').removeClass('d-none')
|
|
$('#new-bill-type-name').val('')
|
|
// reset select to first option
|
|
$('#new-bill-type-freq').val( $('#new-bill-type-freq option:first').attr('value') )
|
|
}
|
|
|
|
function NewBillType()
|
|
{
|
|
$.ajax( { type: 'POST', url: '/newbilltype',
|
|
contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val(), 'freq': $('#new-bill-type-freq').val() } ),
|
|
success: function() { window.location='bills' } } )
|
|
}
|
|
|
|
function StartUpdateBillType( id )
|
|
{
|
|
val=$('#bill-type-name-'+id).val()
|
|
|
|
// "enable" fields for edits
|
|
$('.bill-type-'+id).prop('disabled', false)
|
|
|
|
// put focus into name field
|
|
$('#bill-type-name-'+id).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(), 'freq': $('#bill-type-freq-'+id).val() } ),
|
|
success: function() { window.location='bills' } } )
|
|
}
|
|
|
|
function CancelUpdateBillType(id,orig_name)
|
|
{
|
|
// "disable" name for edits
|
|
$('.bill-type-'+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' } } )
|
|
}
|
|
|
|
function UseGrowth( bt, which )
|
|
{
|
|
$.ajax( { type: 'POST', url: '/usegrowth', contentType: 'application/json',
|
|
data: JSON.stringify( { 'bill_type': bt, 'which_growth': which } ), success: function() { window.location='bills' } } )
|
|
}
|
|
|
|
function SaveTab( last_tab )
|
|
{
|
|
$.ajax( { type: 'POST', url: '/saveui', contentType: 'application/json', data: JSON.stringify( { 'last_tab': last_tab } ), success: function() { } } )
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
// 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
|
|
$("#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
|
|
|
|
// force something to be active
|
|
$('#bills-nav .nav-link').first().addClass('active');
|
|
{% if bill_ui %}
|
|
// if we have data on it - go back to last tab
|
|
$('#tab-but-{{bill_ui.last_tab}}').tab('show');
|
|
{% if bill_ui.show_estimated %}
|
|
$('#showEstimated').click()
|
|
{% endif %}
|
|
{% else %}
|
|
$('#tab-but-1').tab('show');
|
|
{% endif %}
|
|
} )
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|