function onPageLoad() {
    request.post(`${HOST}/get`, renderTable, {'type': 'full'});

    let btn = document.getElementById('uploadFileBtn');
    btn.innerHTML = uploadFileHtml;
}

function renderTable(text) {
    let data = JSON.parse(text);

    let table = document.getElementById('table');

    while (table.firstChild) table.removeChild(table.firstChild);

    let tableHeaders = document.createElement('thead');
    let headerRow = document.createElement('tr');
    tableHeaders.appendChild(headerRow);
    data['headers'].forEach((field) => {
        let header = document.createElement('th');
        header.innerText = field;
        headerRow.appendChild(header);
    });
    headerRow.appendChild(document.createElement('th'));
    headerRow.appendChild(document.createElement('th'));

    let tableContent = document.createElement('tbody');
    data['content'].forEach((row) => {
        row.push(`<button value="${row[0]}" onclick="setupEditFormFields('${row[0]}')">&#9998</button>`);
        row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">&#10006</button>`);

        let contentRow = document.createElement('tr');
        contentRow.setAttribute('id', `row_${row[0]}`);

        row.forEach((column, colIndex) => {
            let columnNode = document.createElement('td');

            if (colIndex !== 0 && colIndex < data['headers'].length) {
                let fieldId = `${data['headers'][colIndex]}-${row[0]}`;
                columnNode.classList.add('editableField');
                columnNode.onclick = () => { onFieldClick(fieldId) };
                columnNode.setAttribute('id', fieldId);
            }

            columnNode.innerHTML = column;
            contentRow.appendChild(columnNode);
        });

        tableContent.appendChild(contentRow);
    });

    table.appendChild(tableHeaders);
    table.appendChild(tableContent);
}

function setupEditFormFields(service_id) {
    showEditForm();
    request.post(`${HOST}/get`, (text) => {
        let row = JSON.parse(text);

        Object.keys(row).forEach((element) => {
            document.getElementsByName(element)[0].value = row[element];
        });

        let [sent_date, sent_time] = row['creation_request_sent_date'].split(' ');
        document.getElementsByName('creation_request_sent_date')[0].value = sent_date;
        document.getElementsByName('creation_request_sent_time')[0].value = sent_time;
    }, {
        'type': 'single_id', 'service_id': service_id
    });
}