2024-02-09 19:02:08 -08:00
|
|
|
import {fill_chart} from "./chart_functions.js";
|
2024-01-20 15:05:06 -08:00
|
|
|
import {register_dropdowns} from "./dropdowns.js";
|
2024-02-27 17:35:33 -08:00
|
|
|
import {
|
|
|
|
open_new_transaction_pane
|
|
|
|
, close_new_transaction_pane
|
|
|
|
, add_new_breakdown
|
|
|
|
} from "./new_transactions.js";
|
2024-01-17 19:58:31 -08:00
|
|
|
|
2024-01-12 20:50:41 -08:00
|
|
|
|
2024-01-15 19:26:51 -08:00
|
|
|
function debounce(func, delay) {
|
|
|
|
let timeoutId;
|
|
|
|
|
|
|
|
return function (...args) {
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
|
|
|
|
timeoutId = setTimeout(() => {
|
|
|
|
func.apply(this, args);
|
|
|
|
}, delay);
|
|
|
|
};
|
2024-01-12 20:50:41 -08:00
|
|
|
}
|
|
|
|
|
2024-02-09 21:06:09 -08:00
|
|
|
/*
|
|
|
|
* Change highlighted navbar element
|
|
|
|
* @param {MouseEvent}
|
|
|
|
*/
|
2024-01-20 15:05:06 -08:00
|
|
|
function switch_nav(event) {
|
2024-02-09 21:06:09 -08:00
|
|
|
console.log(`It is a: ${event}`);
|
2024-01-20 15:05:06 -08:00
|
|
|
var active_anchor = document.querySelector("nav a.active");
|
|
|
|
active_anchor.classList.remove("active");
|
|
|
|
|
|
|
|
var clicked = event.target;
|
|
|
|
clicked.classList.add("active");
|
|
|
|
}
|
|
|
|
|
2024-02-09 21:06:09 -08:00
|
|
|
/** @type {boolean} */
|
|
|
|
var drafts_is_open = false;
|
|
|
|
/*
|
|
|
|
* toggle the new transaction pane
|
|
|
|
*/
|
|
|
|
function toggle_drafts() {
|
|
|
|
if (drafts_is_open) {
|
|
|
|
close_new_transaction_pane();
|
|
|
|
drafts_is_open = false;
|
|
|
|
} else {
|
|
|
|
open_new_transaction_pane();
|
|
|
|
drafts_is_open = true;
|
|
|
|
}
|
2024-02-09 19:02:08 -08:00
|
|
|
}
|
2024-02-10 10:52:09 -08:00
|
|
|
function close_drafts() {
|
|
|
|
close_new_transaction_pane();
|
|
|
|
drafts_is_open = false;
|
|
|
|
}
|
2024-02-09 21:06:09 -08:00
|
|
|
const open_drafts = debounce(toggle_drafts);
|
2024-02-09 19:02:08 -08:00
|
|
|
|
2024-02-10 10:52:09 -08:00
|
|
|
|
|
|
|
function register_handlers() {
|
2024-01-13 18:33:26 -08:00
|
|
|
var navAnchors = document.querySelectorAll("nav a");
|
|
|
|
navAnchors.forEach(function (a_el) {
|
2024-01-20 15:05:06 -08:00
|
|
|
a_el.removeEventListener("click", switch_nav);
|
|
|
|
a_el.addEventListener("click", switch_nav);
|
2024-01-13 18:33:26 -08:00
|
|
|
});
|
2024-01-20 15:05:06 -08:00
|
|
|
register_dropdowns();
|
2024-02-09 19:02:08 -08:00
|
|
|
document.querySelector("#open-draft").addEventListener("click", open_drafts);
|
2024-02-10 10:52:09 -08:00
|
|
|
document.querySelector("#close-transaction-pane").addEventListener("click", close_drafts);
|
2024-02-19 19:35:51 -08:00
|
|
|
document.querySelector(".input-sizer > input").addEventListener("input", (event) => {
|
|
|
|
event.target.parentNode.dataset.value = event.target.value
|
|
|
|
});
|
2024-02-27 17:35:33 -08:00
|
|
|
document.getElementById("new-breakdown-btn").addEventListener("click", add_new_breakdown);
|
2024-02-09 21:06:09 -08:00
|
|
|
close_new_transaction_pane();
|
2024-01-15 19:26:51 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
function load_in_table() {
|
|
|
|
var rows = Array.from(document.querySelectorAll(".row_awaiting_processing"));
|
|
|
|
rows.sort((a, b) => b.dataset.rcntTransactionRowPos - a.dataset.rcntTransactionRowPos);
|
2024-01-13 18:33:26 -08:00
|
|
|
|
2024-01-15 19:26:51 -08:00
|
|
|
const processElement = (element, index) => {
|
|
|
|
element.classList.remove('row_awaiting_processing');
|
|
|
|
setTimeout(() => {
|
|
|
|
if (index < rows.length - 1) {
|
|
|
|
processElement(rows[index + 1], index + 1);
|
|
|
|
}
|
2024-02-09 19:02:08 -08:00
|
|
|
}, 25);
|
|
|
|
};
|
2024-01-15 19:26:51 -08:00
|
|
|
|
|
|
|
processElement(rows[0], 0);
|
2024-01-13 18:33:26 -08:00
|
|
|
}
|
|
|
|
|
2024-01-15 19:26:51 -08:00
|
|
|
const trigger_table_animation = debounce(load_in_table, 100);
|
2024-01-20 15:05:06 -08:00
|
|
|
const trigger_reset_handlers = debounce(register_handlers, 200);
|
2024-01-19 21:05:08 -08:00
|
|
|
|
2024-02-10 10:52:09 -08:00
|
|
|
export {trigger_reset_handlers, trigger_table_animation, fill_chart, close_drafts};
|