From 95d792e72f038de022fe3fdba4ded61ff69265db Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Tue, 2 Sep 2025 22:05:16 +1000
Subject: [PATCH] added a set of titles when adding new bill / new bill types,
 allows to toggle date to be when quit or normal date, with normal date we use
 data, with when quit, we have growth we will use for simple growth and then
 date(s) can be factored in based on when I quit which is changable in the
 main financial data

---
 templates/bills.html | 91 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 79 insertions(+), 12 deletions(-)

diff --git a/templates/bills.html b/templates/bills.html
index 3e37c0e..1711748 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -38,8 +38,12 @@
 #}
 
     <div class="mt-4 col-7">
-        <div class="row align-items-center">
-            <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="row">
+            <div class="col-2 form-control-inline d-none new-bill-type-class">Bill Type</div>
+            <div class="col-2 form-control-inline d-none new-bill-type-class">Frequency</div>
+        </div>
+        <div class="row align-items-center mb-3">
+            <button id="new-bill-type-button" class="mt-4 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 %}
@@ -129,19 +133,34 @@
     <!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
 
     <div class="pt-4 col-5">
-        <div class="row align-items-center">
-            <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="row">
+            <div class="col-2 form-control-inline d-none new-bill-data-class">Bill Type</div>
+            <div id="new-bill-data-date-label" class="col-4 form-control-inline d-none new-bill-data-class">Date</div>
+            <div id="new-bill-data-growth-label" class="col-4 form-control-inline d-none">Est. Annual Growth</div>
+            <div class="col-2 form-control-inline d-none new-bill-data-class">Amount</div>
+        </div>
+        <div class="row align-items-center mb-3">
+            <button id="new-bill-data-button" class="mt-4 px-0 offset-8 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>
                 {% endfor %}
                 </select>
             </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>
+            <div class="new-bill-data-class px-0 col-4 d-none">
+                <div class="input-group" style="max-width: 300px;">
+                    <input type="date" class="form-control" id="new-bill-data-date">
+                    <input type="text" class="form-control d-none" id="new-bill-data-growth">
+                    <button class="btn btn-outline-danger" type="button" id="toggleDateBtn">When quit</button>
+                </div>
+            </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 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 bg-danger-subtle text-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-x"> 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  -->
@@ -165,9 +184,9 @@
             {% 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-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="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-4"><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-4"><label class="form-control text-center border-0 fw-bold bg-body-tertiary rounded-0">Actions</ ></div>
                 </div>
                 {% endif %}
@@ -222,9 +241,28 @@
 
         function NewBill() 
         {
-            $.ajax( { type: 'POST', url: '/newbill',
-                    contentType: 'application/json', data: JSON.stringify( { 'name': $('#new-bill-data-type').val(), 'amount': $('#new-bill-data-amount').val(), 'bill_date': $('#new-bill-data-date').val() } ),
+            if( $('#new-bill-data-growth').hasClass('d-none') )
+            {
+                // if growth is hidden, then we have normal bill
+                $.ajax( { type: 'POST', url: '/newbill',
+                    contentType: 'application/json', 
+                    data: JSON.stringify( { 
+                        'name': $('#new-bill-data-type').val(), 
+                        'amount': $('#new-bill-data-amount').val(), 
+                        'bill_date': $('#new-bill-data-date').val() } ),
                     success: function() { window.location='bills' } } )
+            }
+            else
+            {
+                // if growth is visible, then we have future bill/growth & no date
+                $.ajax( { type: 'POST', url: '/newbill',
+                    contentType: 'application/json', 
+                    data: JSON.stringify( { 
+                        'name': $('#new-bill-data-type').val(), 
+                        'amount': $('#new-bill-data-amount').val(), 
+                        'growth': $('#new-bill-data-growth').val() } ),
+                    success: function() { window.location='bills' } } )
+            }
         }
 
         function CancelNewBill() 
@@ -396,6 +434,35 @@
             // make the new bill drop-down default to the same as the current tab
             $("#new-bill-data-type").val( {{bill_ui.last_tab}} )
         } )
+
+      $(function () {
+        let disabled = false;
+
+        $('#toggleDateBtn').on('click', function () {
+          disabled = !disabled;
+
+          if (disabled) {
+            $('#new-bill-data-date').addClass('d-none')
+            $('#new-bill-data-growth').removeClass('d-none')
+            $(this)
+              .removeClass('btn-outline-danger')
+              .addClass('btn-outline-success')
+              .html('Normal date');
+            $('#new-bill-data-date-label').addClass('d-none')
+            $('#new-bill-data-growth-label').removeClass('d-none')
+          } else {
+            $('#new-bill-data-date').removeClass('d-none')
+            $('#new-bill-data-growth').addClass('d-none')
+            $(this)
+              .removeClass('btn-outline-success')
+              .addClass('btn-outline-danger')
+              .html('When quit');
+            $('#new-bill-data-date-label').removeClass('d-none')
+            $('#new-bill-data-growth-label').addClass('d-none')
+          }
+        });
+      });
+
     </script>
 </body>
 </html>