{{ macros.taint_js() }}
function update_form() {
+ // catch and empty table
const table = document.getElementById("dat_lines");
table.innerHTML = "";
- function add_button(td, text, disable, f) {
+
+ // basic helpers
+ function add_button(parent_td, label, disabled, onclick) {
+ // add button to td to run onclick (after updating dat_lines from inputs,
+ // and followed by calling taint and update_form
const btn = document.createElement("button");
- td.appendChild(btn);
- btn.textContent = text;
+ parent_td.appendChild(btn);
+ btn.textContent = label;
btn.type = "button"; // otherwise will act as form submit
- btn.disabled = disable;
- btn.onclick = function() {f(); update_form(); taint(); };
+ btn.disabled = disabled;
+ btn.onclick = function() {
+ let n_lines_jumped = 0;
+ for (let i = 0; i < table.rows.length; i++) {
+ const row = table.rows[i];
+ if (row.classList.contains('warning')) {
+ n_lines_jumped++;
+ continue;
+ };
+ for (const input of table.rows[i].querySelectorAll('td input')) {
+ const line_to_update = dat_lines[i - n_lines_jumped];
+ if (input.name.endsWith('comment')) {
+ line_to_update.comment = input.value;
+ } else if (input.name.endsWith('error')) {
+ line_to_update.code = input.value;
+ } else if (input.name.endsWith('date')) {
+ line_to_update.booking_line.date = input.value;
+ } else if (input.name.endsWith('target')) {
+ line_to_update.booking_line.target = input.value;
+ } else if (input.name.endsWith('account')) {
+ line_to_update.booking_line.account = input.value;
+ } else if (input.name.endsWith('amount')) {
+ line_to_update.booking_line.amount = input.value;
+ } else if (input.name.endsWith('currency')) {
+ line_to_update.booking_line.currency = input.value;
+ }
+ }
+ }
+ onclick();
+ taint();
+ update_form();
+ };
}
function add_td(tr, colspan=1) {
const td = document.createElement("td");
td.colSpan = colspan;
return td;
}
+
for (let i = 0; i < dat_lines.length; i++) {
const dat_line = dat_lines[i];
const tr = document.createElement("tr");
table.appendChild(tr);
+
+ // add line inputs
function setup_input_td(tr, colspan) {
const td = add_td(tr, colspan);
if (dat_line.error) { td.classList.add("invalid"); };
function add_input(td, name, value, size) {
const input = document.createElement("input");
td.appendChild(input);
- input.name = `line_${i}_${name}`
+ input.name = `line_${i}_${name}`;
input.value = value.trim();
input.size = size;
input.oninput = taint;
add_td_input('error', dat_line.code, 20, 3)
}
add_td_input('comment', dat_line.comment, 40);
+
// add action buttons, with "delete" after some safety distance
const td_btns = add_td(tr);
add_button(td_btns, '^', i > 1 ? false : true, function() {
});
td_btns.appendChild(document.createTextNode(' · · · '))
add_button(td_btns, 'delete', false, function() { dat_lines.splice(i, 1); });
+
// add error explanation row if necessary
if (dat_line.error) {
const tr = document.createElement("tr");
tr.classList.add("warning");
}
}
+
// add "add line" row
const tr = document.createElement("tr");
table.appendChild(tr);
new_line = {error: '', comment: '', booking_line: {account: '', amount: '', currency: ''}};
dat_lines.push(new_line);
});
+
// make all rows alternate background color for better readability
Array.from(table.rows).forEach((tr) => {
tr.classList.add('alternating');