work on the submission
This commit is contained in:
parent
00a697d1a6
commit
1b352b5ee1
4 changed files with 121 additions and 92 deletions
21
api.go
21
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)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -20,94 +20,96 @@ 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">
|
||||
<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">
|
||||
<i class="my-auto" data-feather="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
<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">
|
||||
<i class="my-auto" data-feather="x"></i>
|
||||
</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">
|
||||
<label for="acnt-entry-selection" id="acnt-entry-label">
|
||||
Account:
|
||||
</label>
|
||||
<select class="ms-2 select border" id="acnt-entry-selection">
|
||||
for _, value := range *acnts {
|
||||
<option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
|
||||
}
|
||||
</select>
|
||||
<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="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Date:
|
||||
<input class="input" id="date-entry" type="date" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Amount:
|
||||
<input class="input" id="amount-entry" type="number" step="any" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="d-flex p-5 mx-auto">
|
||||
<span class="my-auto">Tag: </span>
|
||||
<label class="input-sizer">
|
||||
<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" 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">
|
||||
<i class="" data-feather="plus"></i>
|
||||
<span class="my-auto pe-2">Tax</span>
|
||||
<div class="d-flex" style="width:10%">
|
||||
<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>
|
||||
</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">
|
||||
<div class="c-mantle cr-all m-5 container" style="height: 85%;">
|
||||
<div class="row mt-5">
|
||||
<div class="p-5 mx-auto">
|
||||
<label for="acnt-entry-selection" id="acnt-entry-label">
|
||||
Account:
|
||||
</label>
|
||||
<select class="ms-2 select border" id="acnt-entry-selection">
|
||||
for _, value := range *acnts {
|
||||
<option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Date:
|
||||
<input class="input" id="date-entry" type="date" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="p-5 mx-auto" style="height: fit-content;">
|
||||
<label>
|
||||
Amount:
|
||||
<input class="input" id="amount-entry" type="number" step="any" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="d-flex p-5 mx-auto">
|
||||
<span class="my-auto">Tag: </span>
|
||||
<label class="input-sizer">
|
||||
<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 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 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>
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue