some buttons and buckets stuff

db/db.go

@@ -85,7 +85,7 @@ func GetUserAccounts(userID int) ([]types.Account, error) {
     user_accounts[1] = types.Account {
         Id: 2,
         DisplayName: sql.NullString {
-            String: "Svngs",
+            String: "BECU Credit Card",
             Valid: true,
         } ,
         Description: sql.NullString {
@@ -97,6 +97,27 @@ func GetUserAccounts(userID int) ([]types.Account, error) {
     return user_accounts, nil;
 }
 
+func GetUserBuckets(userID int) ([]types.Bucket, error) {
+        bucket1 := types.Bucket{
+        Id:            1,
+        DisplayCode:   sql.NullString{String: "SVNG", Valid: true},
+        DisplayName:   sql.NullString{String: "Savings", Valid: true},
+        Description:   sql.NullString{String: "The Savings Bucket", Valid: true},
+    }
+
+    bucket2 := types.Bucket{
+        Id:            2,
+        DisplayCode:   sql.NullString{String: "SPND", Valid: true},
+        DisplayName:   sql.NullString{String: "Spending", Valid: true},
+        Description:   sql.NullString{String: "The Spending Bucket", Valid: true},
+    }
+
+    // Creating a slice of length two and populating it with the two structs
+    buckets := []types.Bucket{bucket1, bucket2}
+
+    return buckets, nil;
+}
+
 func GetTransPaneEntries(userID int) ([]types.QuickTransactionType, error) {
     transaction_types := make([]types.QuickTransactionType, 1);
 
@@ -106,3 +127,4 @@ func GetTransPaneEntries(userID int) ([]types.QuickTransactionType, error) {
 
     return transaction_types, nil;
 }
+

tests/testdb.go

@@ -51,14 +51,14 @@ func Init_testdb(DB_TYPE string, DB_CONNECTION_STRING string) {
 	init_sql := `
 CREATE TABLE accounts (
 	acnt_id Integer PRIMARY KEY,
-	acnt_dsply_name varchar(50) NOT NULL,
+	acnt_display_name varchar(50) NOT NULL,
 	acnt_description varchar(250) NULL
 );
 
 CREATE TABLE buckets (
 	bkt_id Integer PRIMARY KEY,
-	bkt_dsply_code varchar(5) NOT NULL,
+	bkt_display_code varchar(5) NOT NULL,
-	bkt_dsply_name varchar(50) NULL,
+	bkt_display_name varchar(50) NULL,
 	bkt_description varchar(250) NULL
 );
 
@@ -96,13 +96,13 @@ CREATE TABLE transaction_breakdown (
 
 CREATE TABLE transaction_categories (
 	trns_ctgry_id Integer PRIMARY KEY,
-	trns_ctgry_dsply_code varchar(5) NOT NULL,
+	trns_ctgry_display_code varchar(5) NOT NULL,
-	trns_ctgry_dsply_name varchar(50) NOT NULL,
+	trns_ctgry_display_name varchar(50) NOT NULL,
 	trns_ctgry_description varchar(250) NULL
 );
 
-INSERT INTO accounts (acnt_dsply_name, acnt_description) VALUES ("BECU Saving", "Savings Account");
+INSERT INTO accounts (acnt_display_name, acnt_description) VALUES ("BECU Saving", "Savings Account");
-INSERT INTO buckets (bkt_dsply_code, bkt_dsply_name, bkt_description) VALUES 
+INSERT INTO buckets (bkt_display_code, bkt_display_name, bkt_description) VALUES 
     ("SVNGS", "Savings", "Savings Bucket");
 INSERT INTO transactions (trns_amount, trns_description, trns_account, trns_bucket, trns_date) VALUES
     ("50.00", "Money", 1, 1, "2023-11-10");

types/types.go

@@ -17,10 +17,17 @@ type Transaction struct {
 
 type Account struct {
 	Id          int            `db:"acnt_id"          json:"Id"`
-	DisplayName sql.NullString `db:"acnt_dsply_name"  json:"DisplayName"`
+	DisplayName sql.NullString `db:"acnt_display_name"  json:"DisplayName"`
 	Description sql.NullString `db:"acnt_description" json:"Description"`
 }
 
+type Bucket struct {
+    Id int `db:"bkt_id" json:"id"`
+    DisplayCode sql.NullString `db:"bkt_display_code" json:"DisplayCode"`
+    DisplayName sql.NullString `db:"bkt_display_name" json:"DisplayName"`
+    Description sql.NullString `db:"bkt_description" json:"Description"`
+}
+
 type HumanLegibleTransaction struct {
 	Id          int            `db:"trns_id"          json:"Id"`
 	Amount      string         `db:"trns_amount"      json:"Amount"`

web/router.go

@@ -74,9 +74,19 @@ func renderFullPage(w http.ResponseWriter, c templ.Component, pageName string) {
     var new_tp bytes.Buffer;
 
     quick_trans_types, err := db.GetTransPaneEntries(0);
+    if err != nil {
+        log.Fatal().Err(err).Msg("Could not get transaction pane entries for user");
+    }
     user_acnts, err := db.GetUserAccounts(0);
+    if err != nil {
+        log.Fatal().Err(err).Msg("Could not get accounts for user");
+    }
+    user_bkts, err := db.GetUserBuckets(0);
+    if err != nil {
+        log.Fatal().Err(err).Msg("Could not get buckets for user");
+    }
 
-    err = templates.NewTransactionPane(&quick_trans_types, &user_acnts).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");
     }

web/sass/buttons.scss

@@ -48,7 +48,7 @@ $button_sizes: (
 .borderless-btn {
     @include btn;
     color: var(--#{$prefix}-text);
-    background-color: var(--#{$prefix}-surface2);
+    background-color: var(--#{$prefix}-surface1);
 }
 .borderless-btn:hover {
     background-color: var(--#{$prefix}-overlay1);

web/sass/utility-classes.scss

@@ -197,12 +197,14 @@ table.table-striped {
 }
 
 .input-sizer {
+    background-color: var(--#{$prefix}-overlay1);
+    color: var(--#{$prefix}-base);
     display: inline-grid;
     vertical-align: top;
     align-items: center;
     position: relative;
     border: solid 1px;
-  padding: .25em .5em;
+    border-radius: $border-radius * 2;
     margin: 5px;
 
     &.stacked {
@@ -219,8 +221,10 @@ table.table-striped {
     &::after,
     input,
     textarea {
+        color: inherit;
         width: auto;
         min-width: 1em;
+        // grid-area: 1 / 1;
         grid-area: 1 / 2;
         font: inherit;
         padding: 0.25em;
@@ -233,6 +237,7 @@ table.table-striped {
 
     span {
         padding: 0.25em;
+        // grid-area: 1 / 2;
     }
 
     &::after {
@@ -242,14 +247,11 @@ table.table-striped {
     }
 
     &:focus-within {
-    outline: solid 1px blue;
+        // outline: solid 1px blue;
-    box-shadow: 4px 4px 0px blue;
-    
-    > span { color: blue; }
-    
         textarea:focus,
         input:focus {
             outline: none;
         }
+
     }
 }

web/sass/variables.scss

@@ -20,9 +20,9 @@
         --#{$prefix}-maroon: #{map-get($color, 'maroon')};
         --#{$prefix}-mauve: #{map-get($color, 'mauve')};
 
-        --#{$prefix}-nav-bg: #{map-get($color, 'crust')};
+        --#{$prefix}-nav-bg: #{map-get($color, 'sky')};
-        --#{$prefix}-nav-color: #{map-get($color, 'text')};
+        --#{$prefix}-nav-color: #{map-get($color, 'base')};
-        --#{$prefix}-nav-logo-bg: #{map-get($color, 'rosewater')};
+        --#{$prefix}-nav-logo-bg: #{map-get($color, 'teal')};
         --#{$prefix}-nav-hover:  #{map-get($color, 'surface2')};
         --#{$prefix}-nav-active-bg: #{map-get($color, 'mauve')};
         --#{$prefix}-nav-active-color: #{map-get($color, 'base')};

web/static/index.js

@@ -1,6 +1,10 @@
 import {fill_chart} from "./chart_functions.js";
 import {register_dropdowns} from "./dropdowns.js";
-import {open_new_transaction_pane, close_new_transaction_pane} from "./new_transactions.js";
+import {
+    open_new_transaction_pane
+    , close_new_transaction_pane
+    , add_new_breakdown
+} from "./new_transactions.js";
 
 
 function debounce(func, delay) {
@@ -61,6 +65,7 @@ function register_handlers() {
     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,4 +48,15 @@ function close_new_transaction_pane() {
 
 }
 
-export {open_new_transaction_pane, close_new_transaction_pane}
+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']"));
+    document.getElementById("breakdown-tbody").appendChild(source);
+}
+
+function update_breakdown_amount() {
+
+}
+
+export {open_new_transaction_pane, close_new_transaction_pane, add_new_breakdown}

web/templates/new_transaction_pane.templ

@@ -4,7 +4,19 @@ import "nickiel.net/recount_server/types"
 import "strconv"
 
 
-templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account) {
+templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]types.Account, buckets *[]types.Bucket) {
+    <div style="display: none" id="breakdown-template-row">
+            <td></td>
+            <td class="my-2">
+                <select class="ms-2 select border" id="acnt-entry-selection">
+                    for _, value := range *buckets {
+                    <option value={strconv.Itoa(value.Id)}>{value.DisplayCode.String} | {value.DisplayName.String}</option>
+                    }
+                </select>
+            </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">
         <div class="my-2 d-flex">
             <h2 class="ms-5">New Transaction</h2>     
@@ -12,13 +24,21 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                 <i class="my-auto" data-feather="x"></i>
             </button>
         </div>
-        <div class="d-flex ms-5" style="overflow-x: scroll;">
+        <div class="d-flex">
+            <div class="d-flex ms-5" style="overflow-x: scroll; width: 90%;">
                 for _, value := range *entry_types {
                     <button class="borderless-btn btn-sm mx-3">
                     {value.DisplayName}
                     </button>
                 }
             </div>
+            <div class="d-flex" style="width:10%">
+                <button 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>
+            </div>
+        </div>
         <div class="c-mantle cr-all m-5 container" style="height: 85%;">
             <div class="row mt-5">
                 <div class="p-5 mx-auto">
@@ -43,24 +63,24 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                         <input class="input" id="amount-entry" type="number" step="any" />
                     </label>
                 </div>
-            </div>
+
-            <div class="row">
+                <div class="d-flex p-5 mx-auto">
-                <div class="p-5 mx-auto">
+                    <span class="my-auto">Tag: </span>
                     <label class="input-sizer">
-                        <span>Tag: </span>
                         <input 
                             size="4"
                             class="input"
                             id="trans-tab-entry"
                             type="text"
                         />
+                        <span class="d-flex"> <i class="my-auto" style="transform: scale(-1,1);" data-feather="tag"></i> </span>
                     </label>
                 </div>
             </div>
             <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">
+                    <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>
@@ -71,7 +91,19 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                 </div>
             </div>
             <div class="row" style="flex-grow: 1">
+                <table class="table table-striped cr-all" style="width: 100%; border: solid 1px black;">
+                    <thead>
+                        <tr>
+                            <td></td>
+                            <td class="py-2">Bucket</td>
+                            <td>Description</td>
+                            <td>Amount</td>
+                        </tr>
+                    </thead>
+                    <tbody id="breakdown-tbody">
 
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>