From 9cd14505bfa419f5d00b0ce33b6d6dfc936df160 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Wed, 20 Aug 2025 18:08:44 +1000
Subject: [PATCH] moved new bill type button over 2 more to accom new freq
 field, added slider/support for show estimated and support new growth db
 fields

---
 templates/bills.html | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/templates/bills.html b/templates/bills.html
index 24dc1c1..a6db8ec 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -23,7 +23,7 @@
 
     <div class="mt-4 col-6">
         <div class="row align-items-center">
-            <button id="new-bill-type-button" class="mb-3 px-0 offset-2 col-2 btn btn-success" onCLick="StartNewBillType()"><span class="bi bi-plus-lg"> New Bill Type</span></button>
+            <button id="new-bill-type-button" class="mb-3 px-0 offset-4 col-2 btn btn-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 %}
@@ -35,10 +35,10 @@
             <button id="canc-bill-type" class="new-bill-type-class px-0 col-1 btn btn-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-trash3"> Cancel</span></button>
         </div>
         <div class="row">
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Name</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Frequency</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Annual Growth Est</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Actions</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Name</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Frequency</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Annual Growth Est (min/avg/max)</ ></div>
+            <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0 h-100"><br>Actions</ ></div>
         </div>
         {% for bt in bill_types %}
             <div class="row">
@@ -52,7 +52,9 @@
                     </select>
                 </div>
                 <script>console.log( 'set freq to {{bt.freq}}' ); $('#bill-type-freq-{{bt.id}}').val( {{bt.freq}} );</script>
-                <div class="px-0 col-2"><input type="text" class="form-control text-center" id="bill-type-grow-{{bt.id}}" value="{{'%.2f'|format(bt.ann_growth)}}%" disabled> </div>
+                <div class="px-0 col-2"><input type="text" class="form-control text-center" id="bill-type-grow-{{bt.id}}" 
+                    value="{{'%.2f'|format(bt.ann_growth_min)}} / {{'%.2f'|format(bt.ann_growth_avg)}} / {{'%.2f'|format(bt.ann_growth_max)}}%"
+                    disabled> </div>
                 <button id="bill-type-chg-{{bt.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBillType( {{bt.id}} )">Change</button>
                 <button id="bill-type-del-{{bt.id}}" class="px-0 col-1 btn btn-danger" onClick="DelBillType({{bt.id}})"><span class="bi bi-trash3"> Delete</button>
                 <button id="bill-type-save-{{bt.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBillType( {{bt.id}} )">Save</button>
@@ -87,6 +89,10 @@
         </nav>
  
         <div class="tab-content">
+            <div class="col-2 form-check form-switch form-check-inline">
+                <input class="form-check-input" type="checkbox" value="" id="showEstimated" onChange="ToggleEstimated()">
+                <label class="form-check-label" for="flexCheckDefault">Show Estimates</label>
+            </div>
         {% for bt in bill_types %}
             {% if loop.first %}
                 <div id="tab-{{bt.id}}" class="tab-pane active">
@@ -103,7 +109,11 @@
                 </div>
                 {% endif %}
                 {% if bd.bill_type_id == bt.id %}
-                <div class="row">
+                    {% if bd.estimated == 1 %}
+                        <div class="row est d-none">
+                    {% else %}
+                        <div class="row">
+                    {% endif %}
                     <div class="px-0 col-2"> <input   type="text" class="form-control text-center bg-white" id="bill-data-type-{{bd.id}}" value="{{ bd.name }}" disabled> </div>
                     <div class="px-0 col-2"> <input   type="date" class="form-control text-center bg-white" id="bill-data-date-{{bd.id}}" value="{{ bd.bill_date }}" disabled> </div>
                     <div class="px-0 col-2"> <input type="number" class="form-control text-center bg-white" id="bill-data-amount-{{bd.id}}" value="{{ bd.amount }}" disabled> </div>
@@ -121,6 +131,14 @@
         </div>
 
     <script>
+        function ToggleEstimated()
+        {
+            if( $("#showEstimated").is(":checked") )
+                $('.est').removeClass('d-none')
+            else
+                $('.est').addClass('d-none')
+        }
+
         function StartNewBillData() 
         {
             $('.new-bill-data-class').removeClass('d-none')