function onFieldClick(fieldId) {
    let fieldElement = document.getElementById(fieldId);

    if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
        let [columnName, serviceId] = fieldId.split('-');
        fieldElement.innerHTML = defaultColumnInputs[columnName];
        if (columnName === 'creation_request_sent_date') {
            let dateElement = fieldElement.firstChild;
            let timeElement = fieldElement.childNodes[1];

            dateElement.onkeyup = timeElement.onkeyup = (event) => {
                if (event.code === 'Enter') {
                    if (dateElement.value !== '' && timeElement.value !== '')
                        fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`);
                }
            };
        }
        else {
            let inputElement = fieldElement.firstChild;
            inputElement.onkeyup = (event) => {
                if (event.code === 'Enter')
                    fieldEditSubmit(fieldId, inputElement.value);
            };
        }
    }
}

function fieldEditSubmit(fieldId, value) {
    let [columnName, serviceId] = fieldId.split('-');
    request.post(`${HOST}/api/update`, () => {}, {
        'service_id': serviceId, [columnName]: value
    });
    document.getElementById(fieldId).innerHTML = value;
}

function removeField(service_id) {
    request.post(`${HOST}/api/delete`, () => {}, {'service_id': service_id});
    let tableBody = document.getElementById('table').childNodes[1];
    for (let node of tableBody.childNodes) {
        if (node.getAttribute('id') === `row_${service_id}`) {
            tableBody.removeChild(node);
            break
        }
    }
}