removed export button, made save button call modal dialog and it calls /save route

This commit is contained in:
2025-02-14 15:16:21 +11:00
parent 1272d3a786
commit fcff9233cb

View File

@@ -135,21 +135,7 @@
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" onClick="alert('not yet'); return false">Save</button>
<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>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#save_modal">Save</button>
</div>
<div class="col-auto">
<div class="input-group">
@@ -165,6 +151,10 @@
</form>
<div class="row mt-4" 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 }}');
const vars = JSON.parse('{{ finance | tojson }}');
window.onload = function() {
$('#Sell_shares').val( {{finance['Sell_shares']}} )
$('#compare_to').val( {{finance['compare_to']}} )
@@ -175,7 +165,6 @@
document.addEventListener('DOMContentLoaded', function () {
// Parse the savings_data from Flask
const savingsData = JSON.parse('{{ savings | tojson }}');
const chartData = savingsData.map(entry => [new Date(entry[0]).getTime(), parseFloat(entry[1])]);
{% if COMP %}
const compSavingsData = JSON.parse('{{ COMP['savings_data'] | tojson }}');
@@ -184,7 +173,6 @@
// Get the legend name and vars for the tooltip
const legendName = 'Savings';
const vars = JSON.parse('{{ finance | tojson }}');
// Tooltip content from vars
const tooltipContent = Object.entries(vars).map(([key, value]) => `${key}: ${value}`).join('<br>');
@@ -272,6 +260,37 @@
});
});
</script>
<div id="save_modal" class="modal modal-lg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Save </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Save data for future comparison</p>
<div class="input-group">
<label class="col-form-label me-2 text-end float-end">With name:</label>
<input id="save_name" type="text" class="form-control"
value="{{now}}-LE={{finance['Living_Expenses']}},Inf={{finance['Inflation']}},sell={{finance['Sell_shares']}}"
</input>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
onClick="
vars['name']=$('#save_name').val();
$.ajax( {
type: 'POST',
url: '/save',
data: { 'vars': vars, 'savings_data' :savingsData },
success: function() { $('#save_modal').modal('hide'); } } )"
>Save</button>
</div>
</div>
</div>
</div>
</body>
</html>