work on the submission

api.go

@@ -62,16 +62,17 @@ func getTransactions(w http.ResponseWriter, req *http.Request) {
 	}
 }
 
-func newTransaction(w http.ResponseWriter, req *http.Request) {
-	decoder := json.NewDecoder(req.Body)
-	var t types.Transaction
-	err := decoder.Decode(&t)
-	if err != nil {
-		log.Fatal().
-			Err(err).
-			Msg("Could not decode incoming post data")
-	}
+func HandleNewTransaction(w http.ResponseWriter, req *http.Request) {
+    log.Fatal().Msg("TODO: new transaction functionality not implemented yet");
+	// decoder := json.NewDecoder(req.Body)
+	// var t types.Transaction
+	// err := decoder.Decode(&t)
+	// if err != nil {
+		// log.Fatal().
+			// Err(err).
+			// Msg("Could not decode incoming post data")
+	// }
 	//fmt.Fprintf(w, "New transaction created for Account: %d, with an Amount of: %s",
 	//    t.Account, t.Amount)
-	db.NewTransaction(t)
+	// db.NewTransaction(t)
 }

web/router.go

@@ -34,6 +34,7 @@ func WebRouter() http.Handler {
 	r := chi.NewRouter()
 	r.Get("/", getDashboard)
 	r.Get("/transactions", getTransactionsPage)
+    r.Post("/submitTransaction", HandleNewTransaction);
 
 	r.Get("/components/account_summaries", GetAccountSummaries)
 

web/static/new_transactions.js

@@ -95,7 +95,9 @@ function add_new_breakdown() {
     document.getElementById("breakdown-tbody").appendChild(source);
 }
 
-function insert_tax() {
+function insert_tax(event) {
+    event.target.parentNode.classList.remove("c-green");
+    event.target.parentNode.classList.add("c-overlay2");
     if (document.getElementById("tax-input")) return;
     let source = document.importNode(document.getElementById("breakdown-template-row").content, true);
     source.querySelector("input[type='text']").value = "Tax";
@@ -103,13 +105,36 @@ function insert_tax() {
 
     let table_body = document.getElementById("breakdown-tbody");
     table_body.insertBefore(source, table_body.firstChild);
-    // on_input();
+
+    // calculate the the tax and final amount
+    on_input({target: {id: "amount-entry"}});
+}
+
+function submit_form(event) {
+    event.preventDefault(); // Prevent the default form submission
+    
+    // Your custom submission handling code here
+    
+    // For example, you might want to send the form data using AJAX
+    var formData = new FormData(this);
+    fetch('/submitTransaction', {
+        method: 'POST',
+        body: formData
+    })
+    .then(_ => {
+        alert("form submitted");
+    })
+    .catch(error => {
+        console.log("Form submission error:\n" + error);
+        alert("There was an issue submitting the form");
+    });
 }
 
 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);
+    document.getElementById("new-transaction-form").addEventListener("submit", submit_form);
 }
 
 export {open_new_transaction_pane, close_new_transaction_pane, register_breakdown_handlers}

web/templates/new_transaction_pane.templ

@@ -20,6 +20,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
         </tr>
     </template>
     <div id="new-transaction-pane" style="opacity: 0;" class="cr-all c-base d-flex-col" data-rcnt-taxrate="0.095">
+        <form method="POST" id="new-transaction-form">
             <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">
@@ -35,7 +36,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                     }
                 </div>
                 <div class="d-flex" style="width:10%">
-                <button class="btn-sm my-auto ms-auto me-4 d-flex invert c-green">
+                    <button type="submit" class="btn-sm my-auto ms-auto me-4 d-flex invert c-green">
                         <i class="my-2" data-feather="save"></i>
                         <span class="my-auto ms-2">Save</span>
                     </button>
@@ -82,11 +83,11 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                 <div class="row">
                     <div class="ms-5 d-flex">
                         <h2 class="my-3">Breakdown</h2>
-                    <button class="btn-sm ms-5 my-auto c-green invert" id="new-breakdown-btn">
+                        <button type="button" class="btn-sm ms-5 my-auto c-green invert" id="new-breakdown-btn">
                             <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" id="tax-breakdown-btn">
+                        <button type="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>
@@ -108,6 +109,7 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                     </table>
                 </div>
             </div>
+        </form>
     </div>
     
 }