370 lines
18 KiB
HTML
370 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<title>Finance Form</title>
|
|
<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>
|
|
<style>
|
|
.col-form-label {
|
|
width:170px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h3 align="center">Finance Tracker</h3>
|
|
|
|
<form id="vals_form" class="mt-3" action="/update" method="POST">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="D_Salary" class="col-form-label me-2 text-end float-end">D Salary</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="D_Salary" name="D_Salary" value="{{ finance['D_Salary'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="Savings" class="col-form-label me-2 text-end float-end">Savings</label>
|
|
<input type="number" step="any" class="form-control text-end float-end " id="Savings" name="Savings" value="{{ finance['Savings'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="Car_loan_via_pay" class="col-form-label me-2 text-end float-end">Car Loan via Pay</label>
|
|
<input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_loan_via_pay" name="Car_loan_via_pay" value="{{ finance['Car_loan_via_pay'] }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="Living_Expenses" class="col-form-label me-2 text-end float-end">Living Expenses</label>
|
|
<input type="number" step="any" class="form-control text-end float-end " id="Living_Expenses" name="Living_Expenses" value="{{ finance['Living_Expenses'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="input-group">
|
|
<label for="Overseas_trip" class="col-form-label me-2 text-end float-end">Overseas Trip</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="Overseas_trip" name="Overseas_trip" value="{{ finance['Overseas_trip'] }}">
|
|
<input type="date" class="form-control text-end float-end" id="Overseas_trip_date" name="Overseas_trip_date" value="{{ finance['Overseas_trip_date'] }}" onchange="this.form.submit()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="D_fortnights_pay" class="col-form-label me-2 text-end float-end">D # Fortnights pay</label>
|
|
<input type="number" class="form-control text-end float-end " id="D_Num_fortnights_pay" name="D_Num_fortnights_pay" value="{{ finance['D_Num_fortnights_pay'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="Interest_Rate" class="col-form-label me-2 text-end float-end">Interest Rate (%)</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="Interest_Rate" name="Interest_Rate" value="{{ finance['Interest_Rate'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="Car_loan" class="col-form-label me-2 text-end float-end">Car Loan</label>
|
|
<input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_loan" name="Car_loan" value="{{ finance['Car_loan'] }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<label for="Inflation" class="col-form-label me-2 text-end float-end">Inflation (%)</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="Inflation" name="Inflation" value="{{ finance['Inflation'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="input-group">
|
|
<label for="Mark_reno" class="col-form-label me-2 text-end float-end">Reno costs</label>
|
|
<input type="number" step="any" class="form-control text-end float-end " id="Mark_reno" name="Mark_reno" value="{{ finance['Mark_reno'] }}" >
|
|
<input type="date" class="form-control text-end float-end " id="Mark_reno_date" name="Mark_reno_date" value="{{ finance['Mark_reno_date'] }}" onchange="this.form.submit()">
|
|
</div>
|
|
</div>
|
|
</div class="row">
|
|
<div class="row align-items-center">
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="D_leave_owed_in_days" class="col-form-label me-2 text-end float-end">D leave owed (in days)</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="D_leave_owed_in_days" name="D_leave_owed_in_days" value="{{ finance['D_leave_owed_in_days'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="M_TLS_shares" class="col-form-label me-2 text-end float-end">M TLS amount</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="M_TLS_shares" name="M_TLS_shares" value="{{ finance['M_TLS_shares'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="Car_balloon" class="col-form-label me-2 text-end float-end">Car Balloon</label>
|
|
<input type="number" step="any" class="bg-light form-control text-end float-end" id="Car_balloon" name="Car_balloon" value="{{ finance['Car_balloon'] }}" readonly>
|
|
</div>
|
|
</div>
|
|
</div class="row">
|
|
<div class="row align-items-center">
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="D_CBA_shares" class="col-form-label me-2 text-end float-end">D CBA amount</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="D_CBA_shares" name="D_CBA_shares" value="{{ finance['D_CBA_shares'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="D_TLS_shares" class="col-form-label me-2 text-end float-end">D TLS amount</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="D_TLS_shares" name="D_TLS_shares" value="{{ finance['D_TLS_shares'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="Mich_present" class="col-form-label me-2 text-end float-end float-end">Mich Present</label>
|
|
<input type="number" step="any" class="form-control text-end float-end bg-light" id="Mich_present" name="Mich_present" value="{{ finance['Mich_present'] }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="offset-2 col-2">
|
|
<div class="input-group">
|
|
<label class="input-group-text" for="Sell_shares">Sell Shares for:</label>
|
|
<select class="form-select border border-primary text-primary" id="Sell_shares" name="Sell_shares" onchange="this.form.submit()">
|
|
<option value="0">Never</option>
|
|
<option value="1">1 years</option>
|
|
<option value="2">2 years</option>
|
|
<option value="3">3 years</option>
|
|
<option value="4">4 years</option>
|
|
<option value="5">5 years</option>
|
|
<option value="6">6 years</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div class="row">
|
|
<div class="row align-items-center">
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="CBA_price" class="col-form-label me-2 text-end float-end">CBA price</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="CBA_price" name="CBA_price" value="{{ finance['CBA_price'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="TLS_price" class="col-form-label me-2 text-end float-end">TLS price</label>
|
|
<input type="number" step="any" class="form-control text-end float-end" id="TLS_price" name="TLS_price" value="{{ finance['TLS_price'] }}" >
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="School_Fees" class="col-form-label me-2 text-end float-end">School Fees</label>
|
|
<input type="number" step="any" class="bg-light form-control text-end float-end" id="School_Fees" name="School_Fees" value="{{ finance['School_Fees'] }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="CBA_shares" class="col-form-label me-2 text-end float-end">FINAL # of CBA</label>
|
|
<input type="number" class="form-control text-end float-end bg-light" id="CBA_shares" value="{{CBA}}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<label for="TLS_shares" class="offset-1 col-form-label me-2 text-end float-end">FINAL # of TLS</label>
|
|
<input type="number" class="form-control text-end float-end bg-light" id="TLS_shares" value="{{TLS}}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
|
|
<h5 align="center" class="mt-4">Fortnighthly Savings data:
|
|
{% if COMP %}
|
|
<font color="blue"> Note: value in blue below is value we should have been at when comparing to saved values</font>
|
|
{% endif %}
|
|
</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-auto"> <div class="pt-1 pb-1 mb-0 alert text-center" style="background:lemonchiffon">2025</div>
|
|
|
|
{# get comparison date so we can use it below in loop to know when to print it out #}
|
|
{% set comp_yr=COMP['date'][:4] %}
|
|
{% set comp_mon=COMP['date'][5:7] %}
|
|
{% set comp_day=COMP['date'][8:10 ] %}
|
|
{% set comp_done=namespace( val=0 ) %}
|
|
|
|
{% set first_yr=2025 %}
|
|
{% for date, dollars in savings %}
|
|
{% set yr=date[:4] %}
|
|
{% set mon=date[5:7] %}
|
|
{% set day=date[8:10 ] %}
|
|
|
|
{% 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>
|
|
{% endif %}
|
|
<font color="black">
|
|
{{ date }}:
|
|
{{ '$%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">
|
|
{{ COMP['date'] }}:
|
|
{{ '$%0.2f' % COMP['amount']|float }}<br>
|
|
</font>
|
|
{% set comp_done.val=1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if depletion_date %}
|
|
<div class="alert alert-danger">Run out of $'s:<br>{{depletion_date}}</div>
|
|
{% else %}
|
|
<div class="alert alert-success">Super kicks in!!!</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">SUMMARY/BUDGET</h6>
|
|
{% for label, value in BUDGET %}
|
|
<div>
|
|
{{label}} {{value}}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary" onClick="$('#vals_form').submit()">Update</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="input-group">
|
|
<button type="submit" class="disabled btn btn-primary" onClick="$('#vals_form').submit() disabled">Compare with:</button>
|
|
<select class="form-select border border-primary text-primary" id="comp_set" name="comp_set" onchange="">
|
|
<option value="0">None</option>
|
|
<option value="1">something</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="button" class="btn btn-primary" onClick="
|
|
$.ajax( { type: 'GET', url: '/download_csv', xhrFields: { responseType: 'blob' },
|
|
success: function(res){
|
|
// Create a link element
|
|
const link = document.createElement('a');
|
|
const url = window.URL.createObjectURL(res);
|
|
link.href = url;
|
|
link.download = 'finance_data.csv'; // Set the file name
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url); // Clean up the object URL
|
|
console.log('done') } })
|
|
"> Export to CSV </button>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4" id="container" style="width:100%; height:400px;"></div>
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Parse the savings_data from Flask
|
|
const savingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');
|
|
const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
|
|
|
|
// Get the legend name and vars for the tooltip
|
|
const legendName = '{{ COMP["vars"]["name"] }}';
|
|
const vars = JSON.parse('{{ COMP["vars"] | tojson }}');
|
|
|
|
// Tooltip content from vars
|
|
const tooltipContent = Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join('<br>');
|
|
|
|
// Calculate plot bands for each year with alternating background colors
|
|
const plotBands = [];
|
|
let year = new Date(savingsData[0][0]).getFullYear();
|
|
let start = new Date(`${year}-01-01`).getTime();
|
|
let end;
|
|
|
|
for (let i = 1; i < savingsData.length; i++) {
|
|
const currentYear = new Date(savingsData[i][0]).getFullYear();
|
|
if (currentYear !== year) {
|
|
end = new Date(`${year + 1}-01-01`).getTime(); // End of the year
|
|
plotBands.push({
|
|
from: start,
|
|
to: end,
|
|
color: year % 2 === 0 ? 'white' : 'lemonchiffon' // Alternate colors
|
|
});
|
|
year = currentYear;
|
|
start = new Date(`${year}-01-01`).getTime();
|
|
}
|
|
}
|
|
// Add the final year
|
|
end = new Date(`${year + 1}-01-01`).getTime();
|
|
plotBands.push({
|
|
from: start,
|
|
to: end,
|
|
color: year % 2 === 0 ? 'white' : 'lemonchiffon'
|
|
});
|
|
|
|
// Add annotations for changes greater than 5000
|
|
const annotations = [];
|
|
for (let i = 1; i < chartData.length; i++) {
|
|
const previousAmount = chartData[i - 1][1];
|
|
const currentAmount = chartData[i][1];
|
|
const difference = Math.abs(currentAmount - previousAmount);
|
|
if (difference > 5000) {
|
|
annotations.push({
|
|
labels: [{
|
|
point: {
|
|
x: chartData[i][0], // Time of the data point
|
|
y: chartData[i][1], // Amount at that point
|
|
xAxis: 0,
|
|
yAxis: 0
|
|
},
|
|
text: `Change: ${difference.toFixed(2)}` // Annotation text
|
|
}]
|
|
});
|
|
}
|
|
}
|
|
|
|
// Highcharts configuration
|
|
Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'line'
|
|
},
|
|
title: {
|
|
text: 'Savings Over Time'
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
title: {
|
|
text: 'Date'
|
|
},
|
|
plotBands: plotBands // Alternating background for years
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Amount ($)'
|
|
}
|
|
},
|
|
legend: {
|
|
labelFormatter: function () {
|
|
return `<span title="${tooltipContent}">${legendName}</span>`;
|
|
}
|
|
},
|
|
tooltip: {
|
|
pointFormat: '{point.x:%Y-%m-%d}: <b>{point.y:.2f}</b>'
|
|
},
|
|
annotations: annotations, // Add annotations
|
|
series: [{
|
|
name: legendName,
|
|
data: chartData,
|
|
marker: {
|
|
radius: 2, // Smaller points (default is 4)
|
|
lineWidth: 0, // Optional: thinner border
|
|
symbol: 'circle' // Optional: shape of the points (default is 'circle')
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|