test/public/js/frontend.js

function addTableData(tableRow, data, id, printer) {
    const tableData = document.createElement('td');
    tableData.id = `printer${printer.id}:${id}`;
    tableData.textContent = data;

    tableRow.appendChild(tableData);
}

function removePrinterFromTable(printerId) {
    const tableBody = document.getElementById(`printer${printerId}`);
    tableBody.remove();
}

function deletePrinter(printerId) {
    fetch(`/printer/${printerId}`, {method: 'DELETE'}).then(response => {
        if (response.ok) {
            removePrinterFromTable(printerId);
        }
    });
}


function addDeleteButton(tableData, printer) {
    const deleteButton = setButtonAttributes('btn-danger');
    deleteButton.textContent = 'Delete';

    deleteButton.onclick = function () {
        document.getElementById('deleteModalText').textContent = `Are you sure that you want to delete ${printer.name}?`;
        document.getElementById('deleteModalConfirm').setAttribute('onclick', `deletePrinter(${printer.id})`);
    }

    tableData.appendChild(deleteButton);
}

function setButtonAttributes(buttonType) {
    const button = document.createElement('button');
    button.setAttribute('data-bs-target', '#viewModal');
    button.setAttribute('data-bs-toggle', 'modal');
    button.setAttribute('class', `btn ${buttonType}`);
    return button;
}

function setViewButtonOnClick(viewButton, printer) {
    viewButton.onclick = function () {
        document.getElementById('viewModalName').textContent = `Name: ${printer.name}`;
        document.getElementById('viewModalPrice').textContent = `Price: ${printer.price.toFixed(2)}$`;
        document.getElementById('viewModalBuildVolume').textContent = `Build Volume: ${printer.build_volume}`;
        document.getElementById('viewModalMaxSpeed').textContent = `Max Speed: ${printer.max_speed}mm/s`;
    }
}

function addViewButton(tableData, printer) {
    const viewButton = setButtonAttributes('btn-primary');
    viewButton.textContent = 'View';
    viewButton.id = `printer${printer.id}:viewButton`;

    setViewButtonOnClick(viewButton, printer);

    tableData.appendChild(viewButton);
}

function setEditButtonOnClick(editButton, printer) {
    editButton.onclick = function () {
        document.getElementById('editInputName').value = printer.name;
        document.getElementById('editInputPrice').value = printer.price;
        document.getElementById('editInputBuildVolume').value = printer.build_volume;
        document.getElementById('editInputMaxSpeed').value = printer.max_speed;

        document.getElementById('editModalConfirm').setAttribute('onclick', `editPrinter(${printer.id})`);
    }
}

function getEditModalValues() {
    const nameInput = document.getElementById('editInputName').value;
    const priceInput = document.getElementById('editInputPrice').value;
    const buildVolumeInput = document.getElementById('editInputBuildVolume').value;
    const maxSpeedInput = document.getElementById('editInputMaxSpeed').value;
    return {nameInput, priceInput, buildVolumeInput, maxSpeedInput};
}

function editPrinter(printerId) {
    const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getEditModalValues();

    fetch(`/printer/${printerId}`, {method: 'PUT', body: JSON.stringify({
            name: nameInput,
            price: Number(priceInput),
            build_volume: buildVolumeInput,
            max_speed: Number(maxSpeedInput),
        })}).then(response => {
        if (response.ok) {
            response.json().then(printer => {
                document.getElementById(`printer${printer.id}:name`).textContent = printer.name;
                document.getElementById(`printer${printer.id}:price`).textContent = printer.price;
                document.getElementById(`printer${printer.id}:build_volume`).textContent = printer.build_volume;

                document.getElementById(`printer${printer.id}:max_speed`).textContent = printer.max_speed;

                const editButton = document.getElementById(`printer${printer.id}:editButton`);
                setEditButtonOnClick(editButton, printer);

                const viewButton = document.getElementById(`printer${printer.id}:viewButton`);
                setViewButtonOnClick(viewButton, printer);
            });
        }
    });
}

function addEditButton(tableData, printer) {
    const editButton = document.createElement('button');
    editButton.setAttribute('data-bs-target', '#editModal');
    editButton.setAttribute('data-bs-toggle', 'modal');
    editButton.setAttribute('class', 'btn btn-primary');
    editButton.id = `printer${printer.id}:editButton`
    editButton.textContent = 'Edit';

    setEditButtonOnClick(editButton, printer);

    tableData.appendChild(editButton);
}

function addTableActions(tableRow, printer) {
    const tableData = document.createElement('td');

    addViewButton(tableData, printer);
    addEditButton(tableData, printer);
    addDeleteButton(tableData, printer);

    tableRow.appendChild(tableData);
}

function addPrinterToTable(tableBody, printer) {
    const tableRow = document.createElement('tr');
    addTableData(tableRow, printer.name, 'name', printer);
    addTableData(tableRow, `${printer.price.toFixed(2)}$`, 'price', printer);
    addTableData(tableRow, printer.build_volume, 'build_volume', printer);
    addTableData(tableRow, printer.max_speed + 'mm/s', 'max_speed', printer);

    addTableActions(tableRow, printer);

    tableRow.id = `printer${printer.id}`;
    tableBody.appendChild(tableRow);
}

function loadTable() {
    fetch('/printer', {method: 'GET'}).then(response => {
        response.json().then(json => {
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = null;
            for (printer of json) {
                addPrinterToTable(tableBody, printer);
            }
        });
    });
}

function clearCreateModalValues() {
    document.getElementById('inputName').value = '';
    document.getElementById('inputPrice').value = '';
    document.getElementById('inputBuildVolume').value = '';
    document.getElementById('inputMaxSpeed').value = '';
}

function getCreateModalValues() {
    const nameInput = document.getElementById('inputName').value;
    const priceInput = document.getElementById('inputPrice').value;
    const buildVolumeInput = document.getElementById('inputBuildVolume').value;
    const maxSpeedInput = document.getElementById('inputMaxSpeed').value;
    return {nameInput, priceInput, buildVolumeInput, maxSpeedInput};
}

function createPrinter() {
    const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getCreateModalValues();

    clearCreateModalValues();

    fetch('/printer', {method: 'POST', body: JSON.stringify({
            name: nameInput,
            price: Number(priceInput),
            build_volume: buildVolumeInput,
            max_speed: Number(maxSpeedInput),
        })}).then(response => {
        if (response.ok) {
            const tableBody = document.getElementById('table-body');
            response.json().then(printer => {
                addPrinterToTable(tableBody, printer);
            });
        }
    });
}

document.addEventListener("DOMContentLoaded", function() {
    loadTable();
});