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

gone with forced dark mode

Browse Source
This commit is contained in:
Damien De Paoli
2025-08-24 22:00:45 +10:00
parent f3b828b051
commit 65fc68e0bf
2 changed files with 46 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
templates/bills.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,7 +23,7 @@
<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" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
<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 %}
@@ -31,21 +31,21 @@
{% endfor %}
</select>
</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>
<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-light rounded-0 h-100"><br>Name</ ></div>
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Frequency</ ></div>
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light 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-light rounded-0 h-100"><br>Actions</ ></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>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 bg-white" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
<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 bg-white" disabled>
<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 %}
@@ -74,10 +74,10 @@
</label>
</div>
</div>
<button id="bill-type-chg-{{bt.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBillType( {{bt.id}} )">Change</button>
<button id="bill-type-del-{{bt.id}}" class="px-0 col-1 btn btn-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 d-none" onClick="UpdateBillType( {{bt.id}} )">Save</button>
<button id="bill-type-canc-{{bt.id}}" class="px-0 col-1 btn btn-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-trash3"> Cancel</button>
<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>
@@ -86,7 +86,7 @@
<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" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
<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>
@@ -95,9 +95,9 @@
</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 d-none" onClick="NewBill()">
<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 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 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 -->
@@ -121,29 +121,29 @@
{% 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-light rounded-0">Name</ > </div>
<div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Date</ > </div>
<div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Amount</ > </div>
<div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Actions</ ></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-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 bg-white" %}
{% set classes="fst-italic form-control text-center" %}
{% else %}
<div class="row">
{% set classes="form-control text-center bg-white" %}
{% 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" onClick="StartUpdateBill( {{bd.id}} )">Change</button>
<button id="bill-data-del-{{bd.id}}" class="px-0 col-1 btn btn-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 d-none" onClick="UpdateBill( {{bd.id}} )">Save</button>
<button id="bill-data-canc-{{bd.id}}" class="px-0 col-1 btn btn-danger d-none"
onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
<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>
@@ -229,7 +229,6 @@
function CancelUpdateBill( id, bill_type, bill_date, amount )
{
// fix-up type, date and amount fields
$('#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
@@ -301,10 +300,8 @@
function CancelUpdateBillType(id,orig_name)
{
// "re-enable" the freq & growth
$('.bill-type-'+id).removeClass('bg-light text-secondary').addClass('bg-white')
// "disable" name for edits
$('#bill-type-name-'+id).prop('disabled', true)
$('.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')

33
templates/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +11,7 @@
<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>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
<style>
.col-form-label { width:140px; }
html { font-size: 80%; }
@@ -62,7 +63,7 @@
class="col-form-label me-2 text-end float-end {{extra}}">{{el.label}}
</label>
{% if el.display== "readonly" %}
{% set bg="bg-light" %}
{% set bg="bg-body-tertiary" %}
{% set bd="" %}
{% else %}
{% set bg="" %}
@@ -91,7 +92,7 @@
</h5>
<div class="row">
<div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
<div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">2025</div>
{# inside started if below, we add blank lines to the start of the year so the dates line up #}
{% for _ in range( 0, padding ) %}
@@ -105,14 +106,14 @@
{% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
</div><div class="col-auto">
<div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">{{yr}}</div>
<div class="pt-1 pb-1 mb-0 alert text-center bg-secondary text-light">{{yr}}</div>
{% endif %}
<font color="black">
<font class="text-secondary">
{{ date }}:&nbsp;
{{ '$%0.2f' % dollars|float }}<br>
</font>
{% if comp_done.val == 0 and yr == comp_yr and mon == comp_mon and day|int >= comp_day|int %}
<font color="blue">
<font class="text-info">
{{ COMP['date'] }}:&nbsp;
{{ '$%0.2f' % COMP['amount']|float }}<br>
</font>
@@ -151,7 +152,7 @@
</div>
</div>
</form>
<div class="row mt-4" id="container" style="width:100%; height:400px;"></div>
<div class="row mt-4 highcharts-dark" id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
// make these global so we can also use them in the /save route (via modal)
const savingsData = JSON.parse('{{ savings | tojson }}');
@@ -165,17 +166,17 @@
if( $("#Ioniq6_future option:selected"). text() == 'lease' )
{
// disable buyout
$('#lbl-Car_buyout').addClass('bg-light text-secondary border-secondary')
$('#Car_buyout').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
$('#Car_buyout_date').addClass('bg-light text-secondary border-secondary').attr('readonly', 'readonly' )
$('#lbl-Car_buyout').addClass('bg-body-tertiary border-secondary')
$('#Car_buyout').addClass('bg-body-tertiary border-secondary').attr('readonly', 'readonly' )
$('#Car_buyout_date').addClass('bg-body-tertiary border-secondary').attr('readonly', 'readonly' )
}
else
{
// disable lease
$('#lbl-Car_loan').addClass('bg-light text-secondary')
$('#Car_loan').addClass('bg-light text-secondary')
$('#lbl-Car_balloon').addClass('bg-light text-secondary')
$('#Car_balloon').addClass('bg-light text-secondary')
$('#lbl-Car_loan').addClass('bg-body-tertiary')
$('#Car_loan').addClass('bg-body-tertiary')
$('#lbl-Car_balloon').addClass('bg-body-tertiary')
$('#Car_balloon').addClass('bg-body-tertiary')
}
var tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle='tooltip']"))
@@ -215,7 +216,7 @@
plotBands.push({
from: start,
to: end,
color: year % 2 === 0 ? 'white' : 'lemonchiffon' // Alternate colors
color: year % 2 === 0 ? '#101010' : 'black' // Alternate colors
});
year = currentYear;
start = new Date(`${year}-01-01`).getTime();
@@ -226,7 +227,7 @@
plotBands.push({
from: start,
to: end,
color: year % 2 === 0 ? 'white' : 'lemonchiffon'
color: year % 2 === 0 ? 'charcoal' : 'black'
});
const annotations = [];