From af38b450348a0d8ccbf8bfb8b5229f4a8206c3a9 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Mon, 10 Feb 2025 17:38:31 +1100
Subject: [PATCH] revamp of front-end to ditch lazy table, and use divs /
 bootstrap better

---
 templates/index.html | 74 +++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 35 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 7faa25d..070d1c1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,10 +8,15 @@
     <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>Finance Tracker</h3>
+    <h3 align="center">Finance Tracker</h3>
 
     <form id="vals_form" class="mt-3" action="/update" method="POST">
         <div class="row align-items-center">
@@ -121,7 +126,7 @@
             </div>
             <div class="offset-2 col-2">
                 <div class="input-group">
-                  <label class="input-group-text" for="Sell_shares">Sell Shares:</label>
+                  <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>
@@ -168,28 +173,17 @@
         </div>
     </form>
 
-</div>
 
-<script>
-window.onload = function() {
-    document.getElementById("Sell_shares").value = {{finance['Sell_shares']}};
-};
-</script>
 
-<style>
-    .col-form-label {
-        width:170px;
-    }
-</style>
-
-    <h5 class="mt-4">Fortnighthly Savings data:
+    <h5 align="center" class="mt-4">Fortnighthly Savings data:
     {% if COMP %}
       <font color="blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note: value in blue below is value we should have been at when comparing to saved values</font>
     {% endif %}
     </h5>
     
-    <table>
-      <tr><td valign="top">
+    <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] %}
@@ -203,7 +197,8 @@ window.onload = function() {
           {% set day=date[8:10 ] %}
 
           {% if yr|int > first_yr|int and mon == '01' and day|int <= 14 %}
-            </td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top">
+            </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 }}:&nbsp;
@@ -222,24 +217,30 @@ window.onload = function() {
         {% else %}
             <div class="alert alert-success">Super kicks in!!!</div>
         {% endif %}
-      </td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top"><div style="background:lemonchiffon"><b>SUMMARY/BUDGET</b><br>
-      {% for label, value in BUDGET %}
-        {{label}} {{value}}<br>
-      {% endfor %}
       </div>
-      </td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td valign="top">
-      <div class="">
+      <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="mt-3 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 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="mt-3">
+      <div class="col-auto">
           <button type="button" class="btn btn-primary" onClick="
               $.ajax( { type: 'GET', url: '/download_csv', xhrFields: { responseType: 'blob' },
                   success: function(res){ 
@@ -255,10 +256,13 @@ window.onload = function() {
                   console.log('done') } })
               "> Export to CSV </button>
       </div>
-      </td></tr>
-    </table>
-    <div id="container" style="width:100%; height:400px;"></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 }}');
