From 7bab6eabddd3f3f5e37372b4ad60bb20fae663b4 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Thu, 14 Aug 2025 15:54:50 +1000
Subject: [PATCH] finished functional bills page, all naming conventions
 consistent for html entities, classes, and matching DB fields

---
 templates/bills.html | 97 +++++++++++++++++++++++---------------------
 1 file changed, 50 insertions(+), 47 deletions(-)

diff --git a/templates/bills.html b/templates/bills.html
index 1cf9910..c1b1eb4 100644
--- a/templates/bills.html
+++ b/templates/bills.html
@@ -21,21 +21,20 @@
     <div class="containerfluid row">
     <h3 align="center">Bill Details (go to <a href="/">Finance Tracker</a>)</h3>
 
-
     <div class="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>
-            <div class="bills px-0 col-2 d-none"> <select id="new-bill-data-type" class="form-select text-end float-end border border-primary">
+            <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>
                 {% endfor %}
                 </select>
             </div>
-            <div class="bills 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="bills 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="bills px-0 col-1 btn btn-success d-none" onClick="NewBill()">
+            <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>
+            <button id="save-bill" class="new-bill-data-class px-0 col-1 btn btn-success d-none" onClick="NewBill()">
                 <span class="bi bi-floppy"></span> Save </button>
-            <button class="bills px-0 col-1 btn btn-danger d-none" onClick="CancelNewBill()" ><span class="bi bi-trash3"> Cancel</span> </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">
@@ -45,13 +44,13 @@
         </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="n-{{el.id}}" name="n-{{el.id}}" value="{{ el.name }}" disabled> </div>
-                <div class="px-0 col-2"> <input   type="date" class="form-control text-center bg-white" id="d-{{el.id}}" name="d-{{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="a-{{el.id}}" name="a-{{el.id}}" value="{{ el.amount }}" disabled> </div>
-                <button id="bill-chg-{{el.id}}" class="px-0 col-1 btn btn-success" onClick="StartUpdateBill( {{el.id}} )">Change</button>
-                <button id="bill-del-{{el.id}}" class="px-0 col-1 btn btn-danger" onClick="DeleteBill( {{el.id }} )"><span class="bi bi-trash3"> Delete
-                <button id="bill-save-{{el.id}}" class="px-0 col-1 btn btn-success d-none" onClick="UpdateBill( {{el.id}} )">Save</button>
-                <button id="bill-canc-{{el.id}}" class="px-0 col-1 btn btn-danger d-none" 
+                <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>
@@ -62,9 +61,9 @@
     <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="bill-type px-0 col-2 d-none"> <input type="text" class="form-control text-end float-end border border-primary" id="bill-type"></div>
-            <button id="save-bill-type" class="bill-type 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="bill-type px-0 col-1 btn btn-danger d-none" onClick="CancelNewBillType()"><span class="bi bi-trash3"> Cancel</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>
@@ -88,7 +87,7 @@
     <script>
         function StartNewBillData() 
         {
-            $('.bills').removeClass('d-none')
+            $('.new-bill-data-class').removeClass('d-none')
             $('#new-bill-data-button').addClass('d-none')
             $('#new-bill-data-type').focus()
         }
@@ -102,7 +101,7 @@
 
         function CancelNewBill() 
         {
-            $('.bills').addClass('d-none')
+            $('.new-bill-data-class').addClass('d-none')
             $('#new-bill-data-button').removeClass('d-none')
             // reset select to first option
             $('#new-bill-data-type').val( $('#new-bill-data-type option:first').attr('value') )
@@ -113,47 +112,51 @@
 
         function StartUpdateBill( id )
         {
-            val=$('#a-'+id).val()
+            val=$('#bill-data-amount-'+id).val()
 
             // enable date and amount fields
-            $('#n-'+id).removeClass('bg-white')
-            $('#d-'+id).prop('disabled', false )
-            $('#a-'+id).prop('disabled', false )
+            $('#bill-data-type-'+id).removeClass('bg-white')
+            $('#bill-data-date-'+id).prop('disabled', false )
+            $('#bill-data-amount-'+id).prop('disabled', false )
             // "enable" name for edits
-            $('#a-'+id).prop('disabled', false).focus()
+            $('#bill-data-amount-'+id).prop('disabled', false).focus()
 
             // move cursor to the end after 'focus()' above
-            $('#a-'+id).val('').val( val )
+            $('#bill-data-amount-'+id).val('').val( val )
 
             // alter change/delete buttons to be save/cancel
-            $('#bill-chg-'+id).addClass('d-none')
-            $('#bill-del-'+id).addClass('d-none')
-            $('#bill-save-'+id).removeClass('d-none')
-            $('#bill-canc-'+id).removeClass('d-none')
+            $('#bill-data-chg-'+id).addClass('d-none')
+            $('#bill-data-del-'+id).addClass('d-none')
+            $('#bill-data-save-'+id).removeClass('d-none')
+            $('#bill-data-canc-'+id).removeClass('d-none')
         }
 
         function UpdateBill(id) 
         { 
             $.ajax( { type: 'POST', url: '/updatebill',
-                contentType: 'application/json', data: JSON.stringify( { 'id': id, 'name': $('#n-'+id).val(), 'bill_date' : $('#d-'+id).val(), 'amount': $('#a-'+id).val() } ),
+                contentType: 'application/json', data: JSON.stringify( { 
+                    'id': id, 
+                    'name': $('#bill-data-type-'+id).val(),
+                    'bill_date' : $('#bill-data-date-'+id).val(),
+                    'amount': $('#bill-data-amount-'+id).val() } ),
                 success: function() { window.location='bills' } } )
         }
 
         function CancelUpdateBill( id, bill_type, bill_date, amount ) 
         {
             // fix-up type, date and amount fields
-            $('#n-'+id).addClass('bg-white')
-            $('#d-'+id).prop('disabled', true )
-            $('#a-'+id).prop('disabled', true )
+            $('#bill-data-type-'+id).addClass('bg-white')
+            $('#bill-data-date-'+id).prop('disabled', true )
+            $('#bill-data-amount-'+id).prop('disabled', true )
             // alter change/delete buttons to be save/cancel
-            $('#bill-chg-'+id).removeClass('d-none')
-            $('#bill-del-'+id).removeClass('d-none')
-            $('#bill-save-'+id).addClass('d-none')
-            $('#bill-canc-'+id).addClass('d-none')
+            $('#bill-data-chg-'+id).removeClass('d-none')
+            $('#bill-data-del-'+id).removeClass('d-none')
+            $('#bill-data-save-'+id).addClass('d-none')
+            $('#bill-data-canc-'+id).addClass('d-none')
             // finally we might have modified the string, and then clicked cancel, so rest bill values to orig
-            $('#n-'+id).val(bill_type)
-            $('#d-'+id).val(bill_date)
-            $('#a-'+id).val(amount)
+            $('#bill-data-type-'+id).val(bill_type)
+            $('#bill-data-date-'+id).val(bill_date)
+            $('#bill-data-amount-'+id).val(amount)
         }
 
         function DeleteBill( id ) 
@@ -164,22 +167,22 @@
 
         function StartNewBillType() 
         {
-            $('.bill-type').removeClass('d-none')
-            $('#new-bill-type').addClass('d-none')
-            $('#bill-type').focus()
+            $('.new-bill-type-class').removeClass('d-none')
+            $('#new-bill-type-button').addClass('d-none')
+            $('#new-bill-type-name').focus()
         }
 
         function CancelNewBillType() 
         {
-            $('.bill-type').addClass('d-none')
-            $('#new-bill-type').removeClass('d-none')
-            $('#bill-type').val('')
+            $('.new-bill-type-class').addClass('d-none')
+            $('#new-bill-type-button').removeClass('d-none')
+            $('#new-bill-type-name').val('')
         }
 
         function NewBillType() 
         {
             $.ajax( { type: 'POST', url: '/newbilltype',
-                contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#bill-type').val() } ),
+                contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#new-bill-type-name').val() } ),
                 success: function() { window.location='bills' } } )
         }
         
@@ -235,7 +238,7 @@
             // if amount has enter key in it then save, but dont do this for other fields in new bill
             $("#new-bill-data-amount").keyup(function(event){ if(event.which == 13){ $("#save-bill").click(); } event.preventDefault(); });
             // if we hit enter in new bill type name field, save it
-            $("#bill-type").keyup(function(event){ if(event.which == 13){ $("#save-bill-type").click(); } event.preventDefault(); });
+            $("#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
         } )