From cf104b5a56dc4f157b97095be898918f08b1edfd Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Mon, 18 Aug 2025 11:16:32 +1000
Subject: [PATCH] added some better formatting (spacing, headers to tables,
 etc), flipped the left / right, so now bill type is on left with support for
 bill_freq being a <select> and on the right, we now have tabbed views of
 different bill_types

---
 templates/bills.html | 157 +++++++++++++++++++++++++++----------------
 1 file changed, 100 insertions(+), 57 deletions(-)
diff --git a/templates/bills.html b/templates/bills.html
index c1b1eb4..24dc1c1 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -18,15 +18,57 @@
     </style>
 </head>
 <body>
-    <div class="containerfluid row">
+    <div class="pt-2 containerfluid row">
     <h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>
 
-    <div class="col-6">
+    <div class="mt-4 col-6">
         <div class="row align-items-center">
-            <button id="new-bill-data-button" class="px-0 offset-6 col-2 btn btn-success" onCLick="StartNewBillData()"><span class="bi bi-plus-lg"> New Bill</span></button>
+            <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>
+            <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 %}
+                    <option value={{bf.id}}>{{bf.name}}</option>
+                {% endfor %}
+                </select>
+            </div>
+            <button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
+            <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>
+        {% for bt in bill_types %}
+            <div class="row">
+                <div class="px-0 col-2"><input type="text" class="bill-type-{{bt.id}} form-control text-center bg-white" id="bill-type-name-{{bt.id}}" value="{{ bt.name }}" disabled> </div>
+                <!--  bind Enter to save this bill-type -->
+                <script>$("#bill-type-name-{{bt.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{bt.id}}').click(); } event.preventDefault(); });</script>
+                <div class="px-0 col-2"><select id="bill-type-freq-{{bt.id}}" class="bill-type-{{bt.id}} form-select text-center bg-white" disabled>
+                    {% for bf in bill_freqs %}
+                        <option value={{bf.id}}>{{bf.name}}</option>
+                    {% endfor %}
+                    </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>
+                <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>
+                <button id="bill-type-canc-{{bt.id}}" class="px-0 col-1 btn btn-danger d-none" onClick="CancelUpdateBillType({{bt.id}}, '{{bt.name}}')"><span class="bi bi-trash3"> Cancel</button>
+            </div>
+        {% endfor %}
+    </div>
+
+    <!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
+
+    <div class="pt-4 col-6">
+        <div class="row align-items-center">
+            <button id="new-bill-data-button" class="mb-3 px-0 offset-6 col-2 btn btn-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 el in bill_types %}
-                    <option value={{el.id}}>{{el.name}}</option>
+                {% for bt in bill_types %}
+                    <option value={{bt.id}}>{{bt.name}}</option>
                 {% endfor %}
                 </select>
             </div>
@@ -36,54 +78,48 @@
                 <span class="bi bi-floppy"></span> Save </button>
             <button class="new-bill-data-class px-0 col-1 btn btn-danger d-none" onClick="CancelNewBill()" ><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">Name</ > </div>
-            <div class="px-0 col-2"> <label class="form-control text-center border-0">Date</ > </div>
-            <div class="px-0 col-2"> <label class="form-control text-center border-0">Amount</ > </div>
-        </div>
-        {% for el in bill_data %}
-            <div class="row">
-                <div class="px-0 col-2"> <input   type="text" class="form-control text-center bg-white" id="bill-data-type-{{el.id}}" value="{{ el.name }}" disabled> </div>
-                <div class="px-0 col-2"> <input   type="date" class="form-control text-center bg-white" id="bill-data-date-{{el.id}}" value="{{ el.bill_date }}" disabled> </div>
-                <div class="px-0 col-2"> <input type="number" class="form-control text-center bg-white" id="bill-data-amount-{{el.id}}" value="{{ el.amount }}" disabled> </div>
-                <button id="bill-data-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{el.id}} )">Change</button>
-                <button id="bill-data-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{el.id }} )"><span class="bi bi-trash3"> Delete
-                <button id="bill-data-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{el.id}} )">Save</button>
-                <button id="bill-data-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none" 
-                    onClick="CancelUpdateBill({{el.id}}, '{{el.name}}', '{{el.bill_date}}', '{{el.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
-                </button>
-            </div>
-        {% endfor %}
-    </div>
 
-    <!-- right-hand-side, bill types (e.g. gas, phone, etc.) -->
-    <div class="col-6">
-        <div class="row align-items-center">
-            <button id="new-bill-type-button" class="px-0 offset-2 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>
-            <button id="save-bill-type" class="new-bill-type-class px-0 col-1 btn btn-success d-none" onClick="NewBillType()"><span class="bi bi-floppy"></span> Save</button>
-            <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">Name</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0">Frequency</ ></div>
-            <div class="px-0 col-2"><label class="form-control text-center border-0">Annual Growth Est</ ></div>
-        </div>
-        {% for el in bill_types %}
-            <div class="row">
-                <div class="px-0 col-2"><input type="text" class="bill-type-name form-control text-center bg-white" id="bill-type-name-{{el.id}}" value="{{ el.name }}" disabled> </div>
-                <!--  bind Enter to save this bill-type -->
-                <script>$("#bill-type-name-{{el.id}}").keyup(function(event){ if(event.which == 13){ $('#bill-type-save-{{el.id}}').click(); } event.preventDefault(); });</script>
-                <div class="px-0 col-2"><input type="text" class="bill-type-{{el.id}} form-control text-center bg-white" id="bill-type-freq-{{el.id}}" value="not yet" disabled> </div>
-                <div class="px-0 col-2"><input type="text" class="bill-type-{{el.id}} form-control text-center bg-white" id="bill-type-grow-{{el.id}}" value="not yet" disabled> </div>
-                <button id="bill-type-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBillType( {{el.id}} )">Change</button>
-                <button id="bill-type-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DelBillType({{el.id}})"><span class="bi bi-trash3"> Delete</button>
-                <button id="bill-type-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBillType( {{el.id}} )">Save</button>
-                <button id="bill-type-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none" onClick="CancelUpdateBillType({{el.id}}, '{{el.name}}')"><span class="bi bi-trash3"> Cancel</button>
-            </div>
+        <!-- create tabbed view for each bill type  -->
+        <nav id="bills-nav" class="nav nav-tabs">
+        {% for bt in bill_types %}
+            <button class="nav-link" id="tab-{{bt.name}}" data-bs-toggle="tab" data-bs-target="#tab-{{bt.id}}" type="button" role="tab" aria-controls="tab1" aria-selected="true">{{bt.name}}</button>
         {% endfor %}
-    </div>
+        </nav>
+ 
+        <div class="tab-content">
+        {% for bt in bill_types %}
+            {% if loop.first %}
+                <div id="tab-{{bt.id}}" class="tab-pane active">
+            {% else %}
+                <div id="tab-{{bt.id}}" class="tab-pane">
+            {% endif %}
+            {% 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-light rounded-0">Name</ > </div>
+                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Date</ > </div>
+                    <div class="p-0 col-2"> <label class="form-control text-center border-0 fw-bold bg-light rounded-0">Amount</ > </div>
+                    <div class="px-0 col-2"><label class="form-control text-center border-0 fw-bold bg-light rounded-0">Actions</ ></div>
+                </div>
+                {% endif %}
+                {% if bd.bill_type_id == bt.id %}
+                <div class="row">
+                    <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>
+                    <button id="bill-data-chg-{{bd.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{bd.id}} )">Change</button>
+                    <button id="bill-data-del-{{bd.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{bd.id }} )"><span class="bi bi-trash3"> Delete
+                    <button id="bill-data-save-{{bd.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{bd.id}} )">Save</button>
+                    <button id="bill-data-canc-{{bd.id}}" class="px-0 col-1 btn btn-danger d-none" 
+                        onClick="CancelUpdateBill({{bd.id}}, '{{bd.name}}', '{{bd.bill_date}}', '{{bd.amount}}')"> <span class="bi bi-trash3"> Cancel</button>
+                    </button>
+                </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+        {% endfor %}
+        </div>
+
     <script>
         function StartNewBillData() 
         {
@@ -177,12 +213,14 @@
             $('.new-bill-type-class').addClass('d-none')
             $('#new-bill-type-button').removeClass('d-none')
             $('#new-bill-type-name').val('')
+            // reset select to first option
+            $('#new-bill-type-freq').val( $('#new-bill-type-freq option:first').attr('value') )
         }
 
         function NewBillType() 
         {
             $.ajax( { type: 'POST', url: '/newbilltype',
-                contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val() } ),
+                contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val(), 'freq': $('#new-bill-type-freq').val() } ),
                 success: function() { window.location='bills' } } )
         }
         
@@ -190,11 +228,11 @@
         {
             val=$('#bill-type-name-'+id).val()
 
-            // "disable" the freq & growth
-            $('.bill-type-'+id).addClass('bg-light text-secondary').removeClass('bg-white')
+            // "enable" fields for edits
+            $('.bill-type-'+id).prop('disabled', false)
 
-            // "enable" name for edits
-            $('#bill-type-name-'+id).prop('disabled', false).focus()
+            // put focus into name field
+            $('#bill-type-name-'+id).focus()
 
             // move cursor to the end after 'focus()' above
             $('#bill-type-name-'+id).val('').val( val )
@@ -209,7 +247,7 @@
         function UpdateBillType(id) 
         {
             $.ajax( { type: 'POST', url: '/updatebilltype',
-                contentType: 'application/json', data: JSON.stringify( { 'id': id, 'bill_type': $('#bill-type-name-'+id).val() } ),
+                contentType: 'application/json', data: JSON.stringify( { 'id': id, 'bill_type': $('#bill-type-name-'+id).val(), 'freq': $('#bill-type-freq-'+id).val() } ),
                 success: function() { window.location='bills' } } )
         }
 
@@ -241,6 +279,11 @@
             $("#new-bill-type-name").keyup(function(event){ if(event.which == 13){ $("#save-bill-type").click(); } event.preventDefault(); });
 
             // note we also dynamically bound each bill-type-name to save on Enter when we create them in a loop
+
+            // force something to be active
+            $('#bills-nav .nav-link').first().addClass('active');
+            // now go back to last tab, as per something I dont know yet :)
+            $('#tab-Water').tab('show');
         } )
     </script>
 </body>
