got autofilling working

api.go

@@ -41,7 +41,7 @@ func getTransactions(w http.ResponseWriter, req *http.Request) {
 
 	transactions := []types.Transaction{}
 
-	err := db.GetTransactions(&transactions, input.ResultCount, input.PageNum);
+	err := db.GetTransactions(&transactions, input.ResultCount, input.PageNum)
 
 	if err != nil {
 

db/db.go

@@ -1,8 +1,8 @@
 package db
 
 import (
-	"fmt"
 	"database/sql"
+	"fmt"
 
 	"github.com/jmoiron/sqlx"
 	_ "github.com/lib/pq"
@@ -11,14 +11,14 @@ import (
 	"nickiel.net/recount_server/types"
 )
 
-var DB_TYPE string;
-var DB_SCHEMA string;
-var DB_CONNECTION_STRING string;
+var DB_TYPE string
+var DB_SCHEMA string
+var DB_CONNECTION_STRING string
 
 func SetConstants(db_type string, db_schema string, db_conn_string string) {
-    DB_TYPE = db_type;
-    DB_SCHEMA = db_schema;
-    DB_CONNECTION_STRING = db_conn_string;
+	DB_TYPE = db_type
+	DB_SCHEMA = db_schema
+	DB_CONNECTION_STRING = db_conn_string
 }
 
 func GetTransactions(transactions *[]types.Transaction, resultCount int, pageNum int) error {
@@ -69,7 +69,7 @@ func NewTransaction(transaction types.Transaction) error {
 }
 
 func GetUserAccounts(userID int) ([]types.Account, error) {
-    user_accounts := make([]types.Account, 4);
+	user_accounts := make([]types.Account, 4)
 
 	user_accounts[0] = types.Account{
 		Id: 1,
@@ -81,7 +81,7 @@ func GetUserAccounts(userID int) ([]types.Account, error) {
 			String: "BECU Saving Account",
 			Valid:  true,
 		},
-    };
+	}
 	user_accounts[1] = types.Account{
 		Id: 2,
 		DisplayName: sql.NullString{
@@ -92,9 +92,9 @@ func GetUserAccounts(userID int) ([]types.Account, error) {
 			String: "BECU Saving Account",
 			Valid:  true,
 		},
-    };
+	}
 
-    return user_accounts, nil;
+	return user_accounts, nil
 }
 
 func GetUserBuckets(userID int) ([]types.Bucket, error) {
@@ -115,16 +115,15 @@ func GetUserBuckets(userID int) ([]types.Bucket, error) {
 	// Creating a slice of length two and populating it with the two structs
 	buckets := []types.Bucket{bucket1, bucket2}
 
-    return buckets, nil;
+	return buckets, nil
 }
 
 func GetTransPaneEntries(userID int) ([]types.QuickTransactionType, error) {
-    transaction_types := make([]types.QuickTransactionType, 1);
+	transaction_types := make([]types.QuickTransactionType, 1)
 
 	transaction_types[0] = types.QuickTransactionType{
 		DisplayName: "Manual",
-    };
-
-    return transaction_types, nil;
 	}
 
+	return transaction_types, nil
+}

recount-server.go

@@ -1,8 +1,8 @@
 package main
 
 import (
-	"nickiel.net/recount_server/tests"
 	"nickiel.net/recount_server/db"
+	"nickiel.net/recount_server/tests"
 	"nickiel.net/recount_server/web"
 
 	"net/http"
@@ -60,7 +60,7 @@ func main() {
 		debug_mode.Init_testdb(DB_TYPE, DB_CONNECTION_STRING)
 	}
 
-    db.SetConstants(DB_TYPE, DB_SCHEMA, DB_CONNECTION_STRING);
+	db.SetConstants(DB_TYPE, DB_SCHEMA, DB_CONNECTION_STRING)
 
 	debug_mode.SetLogLevel(zerolog.GlobalLevel())
 

tests/testdb.go

@@ -1,8 +1,8 @@
 package debug_mode
 
 import (
-    "nickiel.net/recount_server/types"
 	"encoding/json"
+	"nickiel.net/recount_server/types"
 	"os"
 
 	"github.com/jmoiron/sqlx"
@@ -11,18 +11,17 @@ import (
 	"github.com/rs/zerolog/log"
 )
 
-
 func SetLogLevel(level zerolog.Level) {
 	zerolog.SetGlobalLevel(level)
 }
 
 func Init_testdb(DB_TYPE string, DB_CONNECTION_STRING string) {
 
-	cwd, err := os.Getwd();
+	cwd, err := os.Getwd()
 	if err != nil {
 		log.Fatal().Err(err).Msg("Could not get current working directory")
 	} else {
-        cwd = cwd + "/";
+		cwd = cwd + "/"
 		log.Trace().Msgf("Currect working directory is: %s", cwd)
 	}
 

web/rendering.go

@@ -15,8 +15,7 @@ import (
 	"nickiel.net/recount_server/types"
 )
 
-
-const DEFAULT_RESULT_COUNT = 20;
+const DEFAULT_RESULT_COUNT = 20
 
 func GetTransactionsRows(w http.ResponseWriter, req *http.Request) {
 	transactions := make([]types.HumanLegibleTransaction, 10)
@@ -37,8 +36,8 @@ func GetTransactionsRows(w http.ResponseWriter, req *http.Request) {
 		transactions[10-i] = transaction
 	}
 
-    component := templates.TransactionRows(&transactions);
-    component.Render(context.Background(), w);
+	component := templates.TransactionRows(&transactions)
+	component.Render(context.Background(), w)
 }
 
 func GetTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request) {
@@ -59,8 +58,8 @@ func GetTransactionQuickAccessEntries(w http.ResponseWriter, req *http.Request)
 
 		transactions[i] = transaction
 	}
-    component := templates.TransactionQuickAccessEntries(&transactions);
-    component.Render(context.Background(), w);
+	component := templates.TransactionQuickAccessEntries(&transactions)
+	component.Render(context.Background(), w)
 }
 
 func GetExpenditureChart(w http.ResponseWriter, req *http.Request) {
@@ -72,14 +71,14 @@ func GetExpenditureChart(w http.ResponseWriter, req *http.Request) {
 		Labels:          []string{"Income", "Expenses"},
 		IncomeDataset:   []int{300, 250},
 		ExpensesDataset: []int{200, 100},
-    };
-
-    json_data, err := json.Marshal(data_package);
-    if err != nil {
-        log.Fatal().Err(err).Msg("Could not jsonify data_package");   
 	}
 
-    w.Write(json_data);
+	json_data, err := json.Marshal(data_package)
+	if err != nil {
+		log.Fatal().Err(err).Msg("Could not jsonify data_package")
+	}
+
+	w.Write(json_data)
 }
 
 func GetAccountSummaries(w http.ResponseWriter, req *http.Request) {
@@ -99,10 +98,10 @@ func GetAccountSummaryChart(w http.ResponseWriter, req *http.Request) {
 		Data:   []int{100, 0, -50, 25},
 	}
 
-    json_data, err := json.Marshal(data_package);
+	json_data, err := json.Marshal(data_package)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not jsonify data_package");   
+		log.Fatal().Err(err).Msg("Could not jsonify data_package")
 	}
 
-    w.Write(json_data);
+	w.Write(json_data)
 }

web/router.go

@@ -59,7 +59,7 @@ func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
 	// Render the provided templ component
 	err := c.Render(context.Background(), &main_component)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Fatal error reading hello template");
+		log.Fatal().Err(err).Msg("Fatal error reading hello template")
 	}
 
 	// get the index template
@@ -70,31 +70,30 @@ func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
 			Msg("Fatal error reading index template")
 	}
 
+	var new_tp bytes.Buffer
 
-    var new_tp bytes.Buffer;
-
-    quick_trans_types, err := db.GetTransPaneEntries(0);
+	quick_trans_types, err := db.GetTransPaneEntries(0)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not get transaction pane entries for user");
+		log.Fatal().Err(err).Msg("Could not get transaction pane entries for user")
 	}
-    user_acnts, err := db.GetUserAccounts(0);
+	user_acnts, err := db.GetUserAccounts(0)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not get accounts for user");
+		log.Fatal().Err(err).Msg("Could not get accounts for user")
 	}
-    user_bkts, err := db.GetUserBuckets(0);
+	user_bkts, err := db.GetUserBuckets(0)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not get buckets for user");
+		log.Fatal().Err(err).Msg("Could not get buckets for user")
 	}
 
-    err = templates.NewTransactionPane(&quick_trans_types, &user_acnts, &user_bkts).Render(context.Background(), &new_tp);
+	err = templates.NewTransactionPane(&quick_trans_types, &user_acnts, &user_bkts).Render(context.Background(), &new_tp)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not render new transaction pane for index");
+		log.Fatal().Err(err).Msg("Could not render new transaction pane for index")
 	}
 
-    var quick_ap bytes.Buffer;
-    err = templates.QuickAccessPane().Render(context.Background(), &quick_ap);
+	var quick_ap bytes.Buffer
+	err = templates.QuickAccessPane().Render(context.Background(), &quick_ap)
 	if err != nil {
-        log.Fatal().Err(err).Msg("Could not render quick access pane for index");
+		log.Fatal().Err(err).Msg("Could not render quick access pane for index")
 	}
 
 	// Inject the templ component html into the index template
@@ -104,38 +103,38 @@ func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
 			ActivePage:         pageName,
 			NewTransactionPane: template.HTML(new_tp.String()),
 			QuickAccessPane:    template.HTML(quick_ap.String()),
-        });
+		})
 	if err != nil {
-        log.Fatal().Err(err).Msg("Fatal error reading hello template");
+		log.Fatal().Err(err).Msg("Fatal error reading hello template")
 	}
 }
 
 func getDashboard(w http.ResponseWriter, req *http.Request) {
-    component := templates.Dashboard();
+	component := templates.Dashboard()
 
 	_, ok := req.Header["Hx-Request"]
 	if ok {
-        err := component.Render(context.Background(), w);          
+		err := component.Render(context.Background(), w)
 		if err != nil {
-            log.Fatal().Err(err).Msg("Couldn't render dashboard templ template");
+			log.Fatal().Err(err).Msg("Couldn't render dashboard templ template")
 		}
 	} else {
-        renderFullPage(w, component, "Dashboard");
+		renderFullPage(w, component, "Dashboard")
 	}
 }
 
 func getTransactionsPage(w http.ResponseWriter, req *http.Request) {
-    accounts := make([]string, 10);
+	accounts := make([]string, 10)
 	for i := 0; i < 10; i++ {
-        accounts[i] = strconv.Itoa(i) + " Account";
+		accounts[i] = strconv.Itoa(i) + " Account"
 	}
 
-    component := templates.TransactionsPage(1, &accounts);
+	component := templates.TransactionsPage(1, &accounts)
 	_, ok := req.Header["Hx-Request"]
 	if ok {
-        err := component.Render(context.Background(), w);
+		err := component.Render(context.Background(), w)
 		if err != nil {
-            log.Fatal().Err(err).Msg("Couldn't render transactions templ template");
+			log.Fatal().Err(err).Msg("Couldn't render transactions templ template")
 		}
 	} else {
 		renderFullPage(w, component, "Transactions")

web/static/index.js

@@ -3,7 +3,7 @@ import {register_dropdowns} from "./dropdowns.js";
 import {
     open_new_transaction_pane
     , close_new_transaction_pane
-    , add_new_breakdown
+    , register_breakdown_handlers
 } from "./new_transactions.js";
 
 
@@ -60,12 +60,12 @@ function register_handlers() {
         a_el.addEventListener("click", switch_nav);
     });
     register_dropdowns();
+    register_breakdown_handlers();
     document.querySelector("#open-draft").addEventListener("click", open_drafts);
     document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
     document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
         event.target.parentNode.dataset.value = event.target.value
     });
-    document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
     close_new_transaction_pane();
 }
 

web/static/new_transactions.js

@@ -48,15 +48,68 @@ function close_new_transaction_pane() {
 
 }
 
+/**
+    * @param {Event} event 
+*/
+function on_input(event) {
+    if (event.target.id === "bottom-most-breakdown-input" 
+        || document.querySelectorAll("#breakdown-tbody input[type='number']:not(#tax-input)").length === 0
+    ) {
+        add_new_breakdown();
+    }
+    let total_input = document.getElementById("amount-entry");
+
+    if (event.target.id === "amount-entry") {
+        let tax_entry = document.getElementById("tax-input");
+        let tax_rate = document.getElementById("new-transaction-pane").dataset.rcntTaxrate;
+        if (tax_entry) {
+            tax_entry.value = (parseFloat(total_input.value) - (parseFloat(total_input.value) / (1 + parseFloat(tax_rate)))).toFixed(2);
+        }
+    }
+
+    let breakdown_sum = Array.from(document
+        .querySelectorAll("#breakdown-tbody input[type='number']:not(#bottom-most-breakdown-input)"
+        )).reduce(function(total, el) {
+        return total + parseFloat(el.value || 0);
+    }, 0);
+
+    if (total_input.value) {
+        let value_total = parseFloat(total_input.value);
+
+        document.getElementById("bottom-most-breakdown-input").value = (value_total - breakdown_sum).toFixed(2);
+    } else {
+        total_input.placeholder = breakdown_sum;
+    }
+}
+
 function add_new_breakdown() {
-    let source = document.querySelector("#breakdown-template-row tr").cloneNode(true);
-    source.style.removeProperty("display");
-    console.log(source.querySelector("input[type='number']"));
+    let input_latest_old = document.getElementById("bottom-most-breakdown-input");
+    if (input_latest_old) {
+        input_latest_old.id = "";
+    }
+
+    let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
+    let input_latest = source.querySelector("input[type='number']");
+    input_latest.addEventListener("input", on_input);
+    input_latest.id = "bottom-most-breakdown-input";
     document.getElementById("breakdown-tbody").appendChild(source);
 }
 
-function update_breakdown_amount() {
+function insert_tax() {
+    if (document.getElementById("tax-input")) return;
+    let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
+    source.querySelector("input[type='text']").value = "Tax";
+    source.querySelector("input[type='number']").id = "tax-input";
 
+    let table_body = document.getElementById("breakdown-tbody");
+    table_body.insertBefore(source, table_body.firstChild);
+    // on_input();
 }
 
-export {open_new_transaction_pane, close_new_transaction_pane, add_new_breakdown}
+function register_breakdown_handlers() {
+    document.getElementById("amount-entry").addEventListener("input", on_input);
+    document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
+    document.getElementById("tax-breakdown-btn").addEventListener("click", insert_tax);
+}
+
+export {open_new_transaction_pane, close_new_transaction_pane, register_breakdown_handlers}

web/templates/new_transaction_pane.templ

@@ -5,7 +5,8 @@ import "strconv"
 
 
 templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account, buckets *[]types.Bucket) {
-    <div style="display: none" id="breakdown-template-row">
+    <template id="breakdown-template-row">
+        <tr>
             <td></td>
             <td class="my-2">
                 <select class="ms-2 select border" id="acnt-entry-selection">
@@ -16,8 +17,9 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
             </td>
             <td><input type="text" /></td>
             <td><input type="number" step="any" /></td>
-    </div>
-    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col">
+        </tr>
+    </template>
+    <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col" data-rcnt-taxrate="0.095">
         <div class="my-2 d-flex">
             <h2 class="ms-5">New Transaction</h2>     
             <button class="ms-auto me-4 my-auto exit-btn" id="close-transaction-pane">
@@ -84,7 +86,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">New</span>
                     </button>
-                    <button class="btn-sm ms-5 my-auto c-green invert">
+                    <button class="btn-sm ms-5 my-auto c-green invert" id="tax-breakdown-btn">
                         <i class="" data-feather="plus"></i>
                         <span class="my-auto pe-2">Tax</span>
                     </button>