1document.addEventListener('DOMContentLoaded', function () {
 2    loadRecords();
 3
 4    document.getElementById('new-record').addEventListener('click', editRecord);
 5});
 6
 7function editRecord() {
 8    let out = "/records/edit/";
 9    const id = this.getAttribute("data-id");
10    if (id) {
11        out += "?id=" + id;
12    }
13    location.href = out;
14}
15
16function loadRecords() {
17    getRecords().then(records => {
18            const header = document.getElementById('records-header');
19            const table = document.getElementById('records-table');
20            header.innerHTML = '';
21            table.innerHTML = '';
22
23            const tr = document.createElement('tr');
24            const headers = ["Created", "Done", "Type", "Description", "Date", "Value"];
25
26            for (const header of headers) {
27                const td = document.createElement('td');
28                td.innerText = header;
29                tr.appendChild(td);
30            }
31            header.appendChild(tr);
32
33            for (const record of records) {
34                const tr = document.createElement('tr');
35                tr.setAttribute("data-id", record.id);
36                tr.onclick = editRecord;
37
38                const fields = [
39                    formatDate(record.created_at),
40                    formatBoolean(record.done, record.id),
41                    record.type,
42                    record.description,
43                    formatDate(record.date),
44                    formatCash(record.value),
45                ];
46
47                for (const field of fields) {
48                    const td = document.createElement('td');
49                    td.innerHTML = field;
50                    tr.appendChild(td);
51                }
52                table.appendChild(tr);
53            }
54        });
55}