140 lines
4.7 KiB
JavaScript
140 lines
4.7 KiB
JavaScript
import {
|
|
computePosition,
|
|
offset,
|
|
} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.5.4/+esm';
|
|
|
|
const centerOffset = offset(({rects}) => {
|
|
return -rects.reference.height / 2 - rects.floating.height / 2;
|
|
});
|
|
|
|
function open_new_transaction_pane() {
|
|
let center = document.querySelector("#main-body-content");
|
|
let new_tp = document.querySelector("#new-transaction-pane");
|
|
|
|
new_tp.style.opacity = "1";
|
|
|
|
let center_width = center.offsetWidth;
|
|
center_width = center_width - (center_width / 10);
|
|
new_tp.style.width = center_width + "px";
|
|
|
|
computePosition(center, new_tp, {
|
|
placement: "bottom",
|
|
middleware: [
|
|
centerOffset,
|
|
],
|
|
}).then(({x, y}) => {
|
|
Object.assign(new_tp.style, {
|
|
left: `${x}px`,
|
|
top: `${y}px`,
|
|
});
|
|
});
|
|
}
|
|
|
|
function close_new_transaction_pane() {
|
|
let right_column = document.querySelector("#right-col");
|
|
let new_tp = document.querySelector("#new-transaction-pane");
|
|
new_tp.style.opacity = "0";
|
|
computePosition(right_column, new_tp, {
|
|
placement: "right",
|
|
middleware: [
|
|
offset(40),
|
|
],
|
|
}).then(({x, y}) => {
|
|
Object.assign(new_tp.style, {
|
|
left: `${x}px`,
|
|
top: `${y}px`,
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
* @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 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 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";
|
|
source.querySelector("input[type='number']").id = "tax-input";
|
|
|
|
let table_body = document.getElementById("breakdown-tbody");
|
|
table_body.insertBefore(source, table_body.firstChild);
|
|
|
|
// 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}
|