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

templates/index.html

@@ -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" data-bs-toggle="modal" data-bs-target="#save_modal">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>
       </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>