Changing a bill (bill_data) now works, as does cancelling cleanly - this is now functional. I have renamed/improved the left-hand-side fields, right-hand-side next - to improve consistency between html and db and bill_data and bill_type

BUGS

@@ -1,3 +1,2 @@
-when I remove and re-add a different onclick handler for new-bt and canc-bt, it
+when I cancel items, the changes need to be reverted for:
-just does not really seem to work.   If I call NewBillType(id) where id > 0, it
+    new bill, new bill type, change bill
-actuall updates in the backend, but it always does NewBillType(0)

README

@@ -1,4 +1,7 @@
 TODO:
+    * fix BUGs
+    * convert code over to use bill_type instead of name in bills.html
+
 
 CONSIDER in code:
     * when we time the payment of GMHBA / HCF (and at what cadence) and include it in calcs better

db.py

@@ -84,13 +84,25 @@ def init_db():
                     FOREIGN KEY(comparison_set_id) REFERENCES comparison_set(id)
                     )''')
 
+    cur.execute('''CREATE TABLE IF NOT EXISTS bill_type (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    name STRING
+                    )''')
+
+    cur.execute('''CREATE TABLE IF NOT EXISTS bill_data (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    bill_type INTEGER,
+                    amount INTEGER,
+                    bill_date DATE,
+                    FOREIGN KEY(bill_type) REFERENCES bill_type(id)
+                    )''')
 
     # Check if table is empty, if so insert default values
     cur.execute('SELECT COUNT(*) FROM finance')
     if cur.fetchone()[0] == 0:
         ###
         # For now manually update below on the fortnight of the original pay shcedule to compare saved version vs. our reality.  Update:
-        #   Savings (Macq+me bank) -- noting ME bank is: $1434.3
+        #   Savings (Macq+me bank) -- noting ME bank is: $1876.19, nab is 2727.95
         #   TLS/CBA prices
         #   Interest rate
         #   D_leave_owed_in_days
@@ -217,6 +229,7 @@ def get_comp_set_data(cset_id):
 
     # do this for convenience in printing single last cset data point
     COMP['date'], COMP['amount'] = COMP['savings_data'][-1]
+    conn.close()
     return COMP
 
 
@@ -229,4 +242,69 @@ def get_comp_set_options(finance):
     # get saved finance data for this comparison set
     cur.execute( f"select id, name from comparison_set order by id" )
     finance['COMP_SETS'].extend( cur.fetchall() )
+    conn.close()
+    return
+
+def get_bill_data():
+    conn = connect_db(True)
+    cur = conn.cursor()
+    cur.execute('SELECT bd.id, bt.id as bill_type_id, bt.name, bd.amount, bd.bill_date FROM bill_type bt, bill_data bd where bt.id = bd.bill_type order by bt.name, bd.bill_date')
+    bd = cur.fetchall()
+    conn.close()
+    return bd
+
+def get_bill_types():
+    conn = connect_db(True)
+    cur = conn.cursor()
+    cur.execute('SELECT id, name FROM bill_type order by name')
+    bt = cur.fetchall()
+    conn.close()
+    return bt
+
+def new_bill( name, amount, bill_date ):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"insert into bill_data ( 'bill_type', 'amount', 'bill_date' ) values ( '{name}', '{amount}', '{bill_date}' )" )
+    conn.commit()
+    conn.close()
+    return
+
+def update_bill_data( id, name, amount, bill_date ):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"update bill_data set bill_type =(select id from bill_type where name ='{name}'), amount='{amount}', bill_date='{bill_date}' where id = {id}" )
+    conn.commit()
+    conn.close()
+    return
+
+def insert_bill_type( bt ):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"insert into bill_type ( 'name' ) values ( '{bt}' )" )
+    conn.commit()
+    conn.close()
+    return
+
+def update_bill_type(id, bill_type):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"update bill_type set name ='{bill_type}' where id = {id}" )
+    conn.commit()
+    conn.close()
+    return
+
+def delete_bill(id):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"delete from bill_data where id = '{id}'" )
+    conn.commit()
+    conn.close()
+    return
+
+def delete_bill_type( id ):
+    conn = connect_db(False)
+    cur = conn.cursor()
+    cur.execute( f"delete from bill_type where id = '{id}'" )
+    conn.commit()
+    conn.close()
     return

main.py

@@ -2,6 +2,8 @@
 from flask import Flask, render_template, request, redirect, url_for, Response, jsonify
 from calc import calculate_savings_depletion
 from db import init_db, get_finance_data, update_finance, get_budget_data, insert_cset, get_comp_set_data, get_comp_set_options
+from db import get_bill_data, new_bill, update_bill_data, delete_bill
+from db import get_bill_types, insert_bill_type, update_bill_type, delete_bill_type
 from collections import defaultdict, Counter
 from datetime import datetime
 import csv
@@ -133,21 +135,52 @@ def update():
         request.form['compare_to'],
         request.form['Ioniq6_future']
     )
-
     update_finance(finance_data)
-
     return redirect(url_for('index'))
 
+@app.route('/bills')
+def DisplayBillData():
+    bill_data = get_bill_data()
+    bill_types = get_bill_types()
+    now=datetime.today().strftime('%Y-%m-%d')
+    return render_template('bills.html', now=now, bill_data=bill_data, bill_types=bill_types )
+
+@app.route('/newbilltype', methods=['POST'])
+def InsertBillType():
+    data = request.get_json()
+    insert_bill_type( data['bill_type'] )
+    return "200"
+
+@app.route('/updatebilltype', methods=['POST'])
+def UpdateBillType():
+    data = request.get_json()
+    update_bill_type( data['id'], data['bill_type'] )
+    return "200"
+
+@app.route('/newbill', methods=['POST'])
+def InsertBill():
+    data = request.get_json()
+    new_bill( data['name'], data['amount'], data['bill_date'] )
+    return "200"
+
+@app.route('/updatebill', methods=['POST'])
+def UpdateBill():
+    data = request.get_json()
+    update_bill_data( data['id'], data['name'], data['amount'], data['bill_date'] )
+    return "200"
+
+@app.route('/delbilltype', methods=['POST'])
+def DeleteBillType():
+    data = request.get_json()
+    delete_bill_type( data['id'] )
+    return "200"
+
+@app.route('/delbill', methods=['POST'])
+def DeleteBill():
+    data = request.get_json()
+    delete_bill( data['id'] )
+    return "200"
+
 # Main program
 if __name__ == '__main__':
     app.run(debug=True)
-
-
-##########
-#
-# How to cross-check, so we get paid: 4762.29 + 1962.56 per fortnight or: $174846.1 AFTER TAX
-# take $20k for Cam, and $20k for Mich for schools last year, $10k for Cam pres, take $72k for living, take $8k in furniture.
-# We went from 250 to 300k (more or less), so about right
-# to note: transfers to Cam/Mich - $850
-# 
-##########

templates/bills.html

@@ -21,50 +21,47 @@
     <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" class="px-0 offset-6 col-2 btn btn-success" onCLick="$('.bills').removeClass('d-none');$('#new-bill').addClass('d-none');$('#name').focus()"><span class="bi bi-plus-lg"> New Bill</span></button>
+            <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="name" class="form-select text-end float-end border border-primary">
+            <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">
                 {% 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="bill-date"> </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="amt"> </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="
+            <button id="save-bill" class="bills px-0 col-1 btn btn-success d-none" onClick="NewBill()">
-                $.ajax( { type: 'POST', url: '/newbill',
-                        contentType: 'application/json', data: JSON.stringify( { 'name': $('#name').val(), 'amt': $('#amt').val(), 'bill_date': $('#bill-date').val() } ),
-                        success: function() { window.location='bills' } } )"
-                ">
                 <span class="bi bi-floppy"></span> Save </button>
-            <button class="bills px-0 col-1 btn btn-danger d-none" onClick="$('.bills').addClass('d-none');$('#new-bill').removeClass('d-none')"><span class="bi bi-trash3"> Cancel</span> </button>
+            <button class="bills 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="n-{{el.id}}" name="n-{{el.id}}" value="{{ el.name }}" disabled> </div>
+            <div class="px-0 col-2"> <label class="form-control text-center border-0">Name</ > </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"> <label class="form-control text-center border-0">Date</ > </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>
+            <div class="px-0 col-2"> <label class="form-control text-center border-0">Amount</ > </div>
-            <button class="px-0 col-1 btn btn-success" onClick="" disabled>Change</button>
-            <button class="px-0 col-1 btn btn-danger" onClick="
-                $.ajax( { type: 'POST', url: '/delbill', contentType: 'application/json', 
-                    data: JSON.stringify( { 'id': '{{el.id}}' } ), success: function() { window.location='bills' } } )">
-                <span class="bi bi-trash3"> Delete
-            </button>
         </div>
-    {% endfor %}
+        {% 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" 
+                    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" class="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="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>
@@ -81,7 +78,7 @@
                 <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="AllowUpdateBillType( {{el.id}} )">Change</button>
+                <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>
@@ -89,8 +86,84 @@
         {% endfor %}
     </div>
     <script>
-        function StartNewBillType() 
+        function StartNewBillData() 
+        {
+            $('.bills').removeClass('d-none')
+            $('#new-bill-data-button').addClass('d-none')
+            $('#new-bill-data-type').focus()
+        }
+
+        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() } ),
+                    success: function() { window.location='bills' } } )
+        }
+
+        function CancelNewBill() 
+        {
+            $('.bills').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') )
+            // clear out date and amount
+            $('#new-bill-data-date').val('')
+            $('#new-bill-data-amount').val('')
+        }
+
+        function StartUpdateBill( id )
+        {
+            val=$('#a-'+id).val()
+
+            // enable date and amount fields
+            $('#n-'+id).removeClass('bg-white')
+            $('#d-'+id).prop('disabled', false )
+            $('#a-'+id).prop('disabled', false )
+            // "enable" name for edits
+            $('#a-'+id).prop('disabled', false).focus()
+
+            // move cursor to the end after 'focus()' above
+            $('#a-'+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')
+        }
+
+        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() } ),
+                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 )
+            // 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')
+            // 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)
+        }
+
+        function DeleteBill( id ) 
+        {
+            $.ajax( { type: 'POST', url: '/delbill', contentType: 'application/json', 
+                data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
+        }
+
+        function StartNewBillType() 
+        {
             $('.bill-type').removeClass('d-none')
             $('#new-bill-type').addClass('d-none')
             $('#bill-type').focus()
@@ -100,16 +173,18 @@
         {
             $('.bill-type').addClass('d-none')
             $('#new-bill-type').removeClass('d-none')
+            $('#bill-type').val('')
         }
 
-        function NewBillType() { 
+        function NewBillType() 
+        {
             $.ajax( { type: 'POST', url: '/newbilltype',
                 contentType: 'application/json', data: JSON.stringify( { 'bill_type': $('#bill-type').val() } ),
                 success: function() { window.location='bills' } } )
         }
         
-        function AllowUpdateBillType( id ) 
+        function StartUpdateBillType( id ) 
-        { 
+        {
             val=$('#bill-type-name-'+id).val()
 
             // "disable" the freq & growth
@@ -128,7 +203,8 @@
             $('#bill-type-canc-'+id).removeClass('d-none')
         }
 
-        function UpdateBillType(id) { 
+        function UpdateBillType(id) 
+        {
             $.ajax( { type: 'POST', url: '/updatebilltype',
                 contentType: 'application/json', data: JSON.stringify( { 'id': id, 'bill_type': $('#bill-type-name-'+id).val() } ),
                 success: function() { window.location='bills' } } )
@@ -138,7 +214,7 @@
         {
             // "re-enable" the freq & growth
             $('.bill-type-'+id).removeClass('bg-light text-secondary').addClass('bg-white')
-            // "enable" name for edits
+            // "disable" name for edits
             $('#bill-type-name-'+id).prop('disabled', true) 
             // alter change/delete buttons to be save/cancel
             $('#bill-type-chg-'+id).removeClass('d-none')
@@ -150,14 +226,14 @@
         }
 
         function DelBillType( id ) 
-        { 
+        {
             $.ajax( { type: 'POST', url: '/delbilltype', contentType: 'application/json', 
                 data: JSON.stringify( { 'id': id } ), success: function() { window.location='bills' } } )
         }
 
         $(document).ready(function () {
             // if amount has enter key in it then save, but dont do this for other fields in new bill
-            $("#amt").keyup(function(event){ if(event.which == 13){ $("#save-bill").click(); } event.preventDefault(); });
+            $("#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(); });
 

templates/index.html

@@ -18,7 +18,7 @@
 </head>
 <body>
     <div class="containerfluid">
-    <h3 align="center">Finance Tracker</h3>
+    <h3 align="center">Finance Tracker (go to <a href="bills">Bills</a>)</h3>
 
     <form id="vals_form" class="ms-3 mt-3" action="/update" method="POST">
     {% for r in DISP %}